/** Shopify CDN: Minification failed

Line 10437:84 Expected identifier but found "!"
Line 10814:1223 Unexpected "/"

**/
/* slick */  
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/*============================================================================
#Normalize
==============================================================================*/
*, input, :before, :after {
  box-sizing:border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button {
  cursor:pointer; 
}

button, select {
  appearance: none !important;
}

::-webkit-scrollbar-track {
  background: none; 
}

/*============================================================================
#Grid Setup
#Grid Columns Sizes
==============================================================================*/

/* Whole */
.one-whole {
  width: 100%;
  max-width: 100%;
}

/* Halves */
.one-half, .large--one-half {
  max-width: 50%; 
}

/* Thirds */
.one-third, .large--one-third {
  max-width: 33.333%;
  
}
.two-thirds, .large--two-thirds {
  max-width: 66.66667%;
}

/* Quarters */
.one-quarter, .large--one-quarter {
  max-width: 25%; 
}

.two-quarters, .large--two-quarters {
  max-width: 50%;  
}

.three-quarters, .large--three-quarters {
  max-width: 75%; 
}

/* Fifths */
.one-fifth, .large--one-fifth {
  max-width: 20%; 
}

.two-fifths, .large--two-fifths {
  max-width: 40%;
}

.three-fifths, .large--three-fifths {
  max-width: 60%;
}

.four-fifths, .large--four-fifths {
  max-width: 80%;
}

/* Sixths */
.one-sixth, .large--one-sixth {
  max-width: 16.66667%;
}

.two-sixths, .large--two-sixths {
  max-width: 33.33333%;
}

.three-sixths, .large--three-sixths {
  max-width: 50%;
}

.four-sixths, .large--four-sixths {
  max-width: 66.66667%;
}

.five-sixths, .large--five-sixths {
  max-width: 83.33333%;
}

/* Eighths */
.one-eighth, .large--one-eighth {
  max-width: 12.5%;
}

.two-eighths, .large--two-eighths {
  max-width: 25%;
}

.three-eighths, .large--three-eighths {
  max-width: 37.5%;
}

.four-eighths, .large--four-eighths {
  max-width: 50%;
}

.five-eighths, .large--five-eighths {
  max-width: 62.5%;
}

.six-eighths, .large--six-eighths {
  max-width: 75%;
}

.seven-eighths, .large--seven-eighths {
  max-width: 87.5%;
}

/* Tenths */
.one-tenth, .large--one-tenth {
  max-width: 10%;
}

.two-tenths, .large--two-tenths {
  max-width: 20%;
}

.three-tenths, .large--three-tenths {
  max-width: 30%;
}

.four-tenths, .large--four-tenths {
  max-width: 40%;
}

.five-tenths, .large--five-tenths {
  max-width: 50%;
}

.six-tenths, .large--six-tenths {
  max-width: 60%;
}

.seven-tenths, .large--seven-tenths {
  max-width: 70%;
}

.eight-tenths, .large--eight-tenths {
  max-width: 80%;
}

.nine-tenths, .large--nine-tenths {
  max-width: 90%;
}

/* Twelfths */
.one-twelfth, .large--one-twelfth {
  max-width: 8.33333%;
  
}

.two-twelfths, .large--two-twelfths {
  max-width: 16.66667%;

}

.three-twelfths, .large--three-twelfths {
  max-width: 25%;
 
}

.four-twelfths, .large--four-twelfths {
  max-width: 33.33333%;
 
}

.five-twelfths, .large--five-twelfths {
  max-width: 41.66667%;

}

.six-twelfths, .large--six-twelfths {
  max-width: 50%;
 
}

.seven-twelfths, .large--seven-twelfths {
  max-width: 58.33333%;
 
}

.eight-twelfths, .large--eight-twelfths {
  max-width: 66.66667%;

}

.nine-twelfths, .large--nine-twelfths {
  max-width: 75%;

}

.ten-twelfths, .large--ten-twelfths {
  max-width: 83.33333%;
 
}

.eleven-twelfths, .large--eleven-twelfths {
  max-width: 91.66667%;
 
}

/*================ Build Responsive Grid Classes ================*/

@media only screen and (max-width: 749px) {
  /* Whole */
  .small--one-whole {
    width: 100%;
    max-width: 100%;
  }
  /* Halves */
  .small--one-half {
    max-width: 50%;
  
  }
  /* Thirds */
  .small--one-third {
    max-width: 33.33333%;   
  }
  .small--two-thirds {
    max-width: 66.66667%;
  }
  /* Quarters */
  .small--one-quarter {
    max-width: 25%;
   
  }
  .small--two-quarters {
    max-width: 50%;
 
  }
  .small--three-quarters {
    max-width: 75%;
  }
  /* Fifths */
  .small--one-fifth {
    max-width: 20%;
  }
  .small--two-fifths {
    max-width: 40%;
  }
  .small--three-fifths {
    max-width: 60%;
  }
  .small--four-fifths {
    max-width: 80%;
  }
  /* Sixths */
  .small--one-sixth {
    max-width: 16.66667%;
  }
  .small--two-sixths {
    max-width: 33.33333%;
  }
  .small--three-sixths {
    max-width: 50%;
  }
  .small--four-sixths {
    max-width: 66.66667%;
  }
  .small--five-sixths {
    max-width: 83.33333%;
  }
  /* Eighths */
  .small--one-eighth {
    max-width: 12.5%;
  }
  .small--two-eighths {
    max-width: 25%;
  }
  .small--three-eighths {
    max-width: 37.5%;
  }
  .small--four-eighths {
    max-width: 50%;
  }
  .small--five-eighths {
    max-width: 62.5%;
  }
  .small--six-eighths {
    max-width: 75%;
  }
  .small--seven-eighths {
    max-width: 87.5%;
  }
  /* Tenths */
  .small--one-tenth {
    max-width: 10%;
  }
  .small--two-tenths {
    width: 20%;
  }
  .small--three-tenths {
    max-width: 30%;
  }
  .small--four-tenths {
    max-width: 40%;
  }
  .small--five-tenths {
    max-width: 50%;
  }
  .small--six-tenths {
    max-width: 60%;
  }
  .small--seven-tenths {
    max-width: 70%;
  }
  .small--eight-tenths {
    max-width: 80%;
  }
  .small--nine-tenths {
    max-width: 90%;
  }
  /* Twelfths */
  .small--one-twelfth {
    max-width: 8.33333%;
  }
  .small--two-twelfths {
    max-width: 16.66667%;
  }
  .small--three-twelfths {
    max-width: 25%;
  }
  .small--four-twelfths {
    max-width: 33.33333%;
  }
  .small--five-twelfths {
    max-width: 41.66667%;
  }
  .small--six-twelfths {
    max-width: 50%;
  }
  .small--seven-twelfths {
    max-width: 58.33333%;
  }
  .small--eight-twelfths {
    max-width: 66.66667%;
  }
  .small--nine-twelfths {
    max-width: 75%;
  }
  .small--ten-twelfths {
    max-width: 83.33333%;
  }
  .small--eleven-twelfths {
    max-width: 91.66667%;
  }
}


/*============================================================================
General Styles
==============================================================================*/

/*============================================================================
Sprites
==============================================================================*/
.sprite {
  display: block;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

/*============================================================================
#Basic Styles
==============================================================================*/
*, a, button {              
  -webkit-text-size-adjust:none ;          
  -webkit-tap-highlight-color:rgba(0,0,0,0) ;     
  -webkit-tap-highlight-color: transparent ;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

html, body {
  padding: 0;
  margin: 0;
  background-color: var(--colorBody );   
}
body {    
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-size: var(--baseFontSize);
  letter-spacing: 0.06rem;
  line-height: 1.6;
  background-color: var(--colorBody );  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;  
  font-weight:300;
  font-family: var(--bodyFontStack);
  color:var(--colorTextBody); 
  /*animation-delay: .1s; 
  animation-duration: .3s; 
  animation-fill-mode: both;
  animation-name: fadeInSF;*/
}

@media screen and (max-width: 749px) {  
  body {    
    background-size: cover; 
    font-size: var(--baseFontSizeMobile);  
  }  
}

.template-cart .main-content {
  max-width: var(--page-width);
  margin: 0 auto;
}

.no-template-index {
  padding:0 .8rem 1rem .8rem;
}

.mini-cart-modal button, .mini-cart-modal button *, .sticky-atc select {
  color:var(--colorTextBody); 
}

@media screen and (max-width: 1023px) {  
  .main-content {
    padding-top:var(--gutter-half);
  }
}

.template-index .main-content {
  padding-top:0;
}

.wrapper-full-page {
  padding:0 var(--gutter-half); 
}

.wrapper, .content { 
  max-width: var(--page-width);
  padding:0 var(--gutter-half);
  margin: 0 auto;  
}

.wrapper-reset { 
  padding:0; 
}

@media screen and (max-width:749px) {
  .main-content {
    padding-top:var(--gutter-half);
  }
  .wrapper.no-template-index {
    padding:15px;
  }
  
}

@media screen and (min-width: 750px) {
  .grid-border--right {
    border-right: 1px solid var(--colorBorder);
  }
  .grid-border--left {
    border-left: 1px solid var(--colorBorder);
  }
  .wrapper-full-page {
    padding:0 var(--gutter);
  }
}

/*============================================================================
#Typography
==============================================================================*/
input,
textarea,
button,
select {  
  border-radius:var(--btnBorderRadius)px;
  font-family:inherit;
  color:var(--colorTextBody); 
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .block-title {
  margin:0 0 0.67em 0;
  letter-spacing:var(--titleLetterSpacing);
  display: block;
  line-height: 1.2;
  font-family: var(--headerFontStack);
  font-weight: var(--headerFontWeight);  
  
  text-transform: uppercase;
  
}

/*
h1, .h1, .block-title {
  margin:0.67em 0;
}
*/

/*
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 0.8em;
  line-height: 1.2;
}
*/

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
  font-weight: inherit;
  color:inherit;
}

h1, .h1 {
  font-size: var(--h1FontSize);
  margin-top:0;
  margin-bottom: calc(var(--gutter) / 1.2);
}

.block-title h1 {
  margin:0 0 var(--gutter-quarter) 0;
}

h2, .h2 { font-size: var(--h2FontSize); } 
h3, .h3 { font-size: var(--h3FontSize); } 
h4, .h4 { font-size: var(--h4FontSize); } 
h5, .h5 { font-size: var(--h5FontSize); } 
h6, .h6 { font-size: var(--baseFontSize) } 

@media screen and (max-width: 749px) { 
  h1, .h1 {
    font-size: var(--h1FontSizeSm);
    margin-bottom: var(--gutter);
  }
  
  h2, .h2 { font-size: var(--h2FontSizeSm); } 
  h3, .h3 { font-size: var(--h3FontSizeSm); } 
  h4, .h4 { font-size: var(--h4FontSizeSm); } 
  h5, .h5 { font-size: var(--h5FontSizeSm); } 
  h6, .h6 { font-size: var(--baseFontSizeMobile) } 
  .title-primary {
    margin-top:var(--gutter);
  }
}

.h3 a, .h2 a, .h3 a { color: inherit; }

.shopify-section h1, .shopify-section h2, .shopify-section h3, .shopify-section h4, .shopify-section h5 {  
  color: var(--colorSectionTitles);
}

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5 {
  color: var(--colorTextTitle);
}

p {
  margin: 0 0 12px 0;
}
p img {
  margin: 0;
}

em {
  font-style: italic;
}

b, strong {
  font-weight: bold;
}

small {
  font-size: 1.4rem;
}

sup, sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.5em;
} 

/*================ Blockquotes ================*/
blockquote, q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after { content: none; }

blockquote {    
  font-style: italic;
  margin: 0 0 var(--gutter);  
  /* border-left: 1px solid var(--colorBorder); */
}

blockquote cite {
  padding: 2rem 5rem;
  display:inline-block;
  position:relative;
}

blockquote cite:before {
  font-family: "FontAwesome";
  content: "\f10d";
  font-size: 2.5rem; 
  opacity:0.4;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/*================ Code ================*/
code, pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1rem;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: 0.5em;
  margin: 0 0 1em;
}

/*================ Horizontal Rules ================*/
hr {
  clear: both;
  border:none;
  border-top: 1px solid var(--colorFooterText);
  opacity:0.2;  
  margin: var(--gutter-half) auto;  
}

hr.hr--small {
  margin: var(--gutter-quarter) auto;
}

hr.hr--clear {
  border-top-color: transparent;
}

/*================ Section ================*/

.section-header {
  background-color: var(--colorSectionTitlesBg);
  width: 100%;
  display: flex;  
  align-items:center;
  padding:calc(var(--gutter) / 1.5) 0;
}
.section-header--center {
  justify-content: center;
}

.section-header-template {
  padding:var(--gutter) 0;
  justify-content:space-between;
}
.section-header--no-padding { 
  padding-left: 0;
  padding-right: 0;
}
.section-header--padding {
  padding-left: 8px;
  padding-right: 8px;
}
.section-inner {
  padding-bottom:var(--section-spaced);
}
.section-header--title {
  margin:0;
}

.section-header .section-title {
  margin: 0;
}
@media screen and (max-width: 749px) {
  .section-header {
    flex-direction:column;
    text-align: center;
    padding:12px;
  }

  .section-header .section-header--link {
    text-align: center;
  }
  
  .section-header .section-title {
    text-align: center;
  }
}

.section-header .section-header--divider {
   margin: 15px auto; 
}

.section-header.section-header--layout-2 .h1 {
  padding: 10px;
}

@media screen and (max-width: 749px) {
  .section-header .section-header--divider * {
    margin: 10px auto;
  }
}
@media screen and (min-width: 1024px) {
 
  .section-header.section-header--layout-0 .h1 {
    margin-left: 0;
    margin-right: auto;
  }
  .section-header.section-header--layout-1, .section-header.section-header--layout-2 {
    display: block;
    text-align: center;
  }
  .section-header.section-header--layout-1 .section-header--right,
  .section-header.section-header--layout-2 .section-header--right {
   float:none;
    margin:0 auto;
  }
  .section-header.section-header--layout-2 .h1 {
    position: relative;    
  }
  .section-header.section-header--layout-2 .h1:before, .section-header.section-header--layout-2 .h1:after {
    content: "";
    display: inline-block;
    width: 5%;
    margin: 0 0.5em 0 -50%;
    vertical-align: middle;
    border-bottom: 1px solid;
  }
  .section-header.section-header--layout-2 .h1:after {
    margin: 0 -50% 0 0.5em;
  }
}

.section-header--right .form-horizontal {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (min-width: 750px) {
  .section-header--right {
    float:right;
  }  
  .sortbyheader {
    margin:0 0 var(--gutter-half) auto; 
  }
}
.sortbyheader {
  padding:0 var(--gutter-half); 
  overflow:hidden;
  text-align:center;
}

.section-header .link {
  color:var(--colorTextBody); 
}

/*============================================================================
#Rich Text Editor 
==============================================================================*/
.rte {
  margin-bottom: var(--gutter-half);
}

.rte img {
  max-width: 100%;
  width:auto;
  height: auto;
}

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6,
.rte .h1, .rte .h2, .rte .h3, .rte .h4, .rte .h5, .rte .h6 {
  margin-top: 0.8em;
}

.rte > div {
  margin-bottom: 12px;
}
.rte ul, .rte ol {
  margin-left: 35px;
}
.rte ul ul {
  list-style: circle outside;
}
.rte li {
  margin-bottom: 0.4em;
}
.rte table {
  table-layout: fixed;
}
.rte ul li, .rte ul li {  
  list-style:none;
  padding-left:0;
  margin-left:0;
}

.rte ul, .se-meta ul  {
  margin-left:0;
  padding-left:0;
}
.rte ul li, .se-meta ul li {
  list-style: none;
  position:relative;
  margin-left:0;
  padding-left:18px;
}
.rte ul li:before, .rte ul li:before,
.se-meta ul li:before, .se-meta ul li:before {
  display:inline-block;
  position:absolute;
  top:1px;
  left:0;
  line-height:18px;
  font-size:8px;
  margin-right:7px;
  font-family: FontAwesome;
    
  content: "\f111";  
  line-height:25px;
  float:left;
  
  
  
  
  
    
}

/*============================================================================
#Links and Buttons
==============================================================================*/
a {
  color: var(--colorLink);
  text-decoration: none;
  background: transparent;
  filter: brightness(100%);
}

.btn-link { width:100%; margin-top:12px; margin-bottom:0; }

a:hover,
a:focus {
  color: var(--colorLinkHover);  
}

button {
  overflow: visible;
}

button[disabled],
html input[disabled],
.shopify-payment-button__button[disabled] {
  cursor: not-allowed;
}
.btn-atc[disabled], .shopify-payment-button__button--unbranded[disabled], .shopify-payment-button-custom[disabled] {
  /*background:var(--colorError) !important;*/
    background: #444 !important;
    color: #FFF;
    cursor: not-allowed;
}

.btn, input.btn-secondary, .btn-secondary, 
.shopify-payment-button__button--unbranded, .header-cart-btn, 
input[type="submit"] {  
  display: inline-block;
  letter-spacing:var(--btnLetterSpacing);
  padding: var(--btnPadding);
  margin: 0;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  vertical-align: middle; 
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  border:none;
  border-radius:var(--btnBorderRadius);
  font-family: var(--accentFontStack);
  font-weight: var(--btnFontWeight);
  font-size: var(--btnFontSize);
  
  transition: background-color 0.2s ease-out; 
  background-color: var(--colorBtnPrimaryBg);
  color: var(--colorBtnPrimaryText);
  filter: brightness(100%);
}

.btn:hover, .btn:focus {
  color: var(--colorBtnPrimaryText); 
  filter: brightness(98%) !important;
}

.btn-atc {
  width:100%;
  font-size: var(--btnAtcFontSize);
  color: var(--colorBtnAtcText);
  background: var(--colorBtnAtcBg);  
  box-shadow:inset 0 0 0 var(--sizeBtnAtcBorder) var(--colorBtnAtcBorder);
  padding: var(--btnAtcPadding);
}
.btn-atc:hover, .btn-atc:focus {
  color: var(--colorBtnAtcTextHover);
  background: var(--colorBtnAtcBgHover); 
 
}

.btn-primary {   
  color: var(--colorBtnPrimaryText);
  background: var(--colorBtnPrimaryBg); 
  box-shadow:inset 0 0 0 var(--sizeBtnPrimaryBorder) var(--colorBtnPrimaryBorder);
}


.btn-primary:hover, .btn-primary:focus  { 
  color: var(--colorBtnPrimaryTextHover);
  background: var(--colorBtnPrimaryBgHover); 
  box-shadow:inset 0 0 0 var(--sizeBtnPrimaryBorder) var(--colorBtnPrimaryBorderHover);
}

.btn-secondary {
  color: var(--colorBtnSecondaryText);
  background: var(--colorBtnSecondaryBg);   
  box-shadow:inset 0 0 0 var(--sizeBtnSecondaryBorder) var(--colorBtnSecondaryBorder);
}


.btn-secondary:hover, .btn-secondary:focus {
  color: var(--colorBtnSecondaryTextHover);
  background: var(--colorBtnSecondaryBgHover); 
  box-shadow:inset 0 0 0 var(--sizeBtnSecondaryBorder) var(--colorBtnSecondaryBorderHover);
}

.btn-third { 
  color: var(--colorBtnThirdText);
  background: var(--colorBtnThirdBg); 
  box-shadow:inset 0 0 0 var(--sizeBtnThirdBorder) var(--colorBtnThirdBorder);
}



.btn-third:hover, .btn-third:focus {
  color: var(--colorBtnThirdTextHover);
  background: var(--colorBtnThirdBgHover); 
  box-shadow:inset 0 0 0 var(--sizeBtnThirdBorder) var(--colorBtnThirdBorderHover);
}

.btn-buynow, .shopify-payment-button__button--unbranded,
.shopify-cleanslate ._3DL4HVlgeOhG7Paj6K8DqS, .shopify-payment-button-custom {
  font-size: var(--btnAtcFontSize);
  color: var(--colorBtnBuyNowText);
  background: var(--colorBtnBuyNowBg);
  border-radius: var(--btnBorderRadius)px;
  padding: var(--btnAtcPadding);
}

.shopify-payment-button__button--unbranded {
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: var(--radius);
  font-family: var(--accentFontStack);
  font-weight: var(--btnFontWeight);
  font-size: var(--btnFontSize);
  border-radius: var(--btnBorderRadius);
  height:auto !important;
}

.shopify-payment-button__button--unbranded:hover:not([disabled]), .shopify-payment-button-custom:hover:not([disabled]) {  
  color: var(--colorBtnBuyNowText);
  background: var(--colorBtnBuyNowBg);
  filter: brightness(98%) !important;
}

.shopify-payment-button__button--branded .shopify-cleanslate div  {
    padding: var(--btnAtcPadding) !important;
    border: none !important;
}

.shopify-payment-button__button--branded .shopify-cleanslate span {
    font-size: var(--btnAtcFontSize) !important;
    
}

.btn-secondary,
input.btn-secondary {
  background-color: var(--colorBtnSecondaryBg);
  color: var(--colorBtnSecondaryText);
}

input.btn-secondary i {
  color: var(--colorBtnSecondaryText);
}

.btn--small { 
   padding: 6px 11px !important;
   font-size: var(--btnFontSize);
   width:auto;
}

.btn.btn--full {
  width: 100%;
}  

.btn i, .shopify-payment-button__button--unbranded i {    
  color: inherit;
}

@media screen and (max-width:749px) {
  .btn-atc {
    width:100%;
  }
  .grid-uniform .btn {
    font-size: 1.4rem;
  }
}  

.section-btns {
  width:100%;
  text-align:center; 
  padding:var(--gutter) 0;
}

@media screen and (min-width:750px) {
  .section-btns { 
    margin-bottom:var(--gutter-half);
  }
}

.shopify-payment-button { display:block; }

.cont-add-btns .shopify-payment-button__more-options { 
  color:#000; visibility:visible ; padding:5px 0px ; 
  margin:5px 0 0px 0 ;  
  font-size:15px !important; 
}

.cont-add-btns .shopify-cleanslate ._3DL4HVlgeOhG7Paj6K8DqS {
  margin:0; 
  border-radius: var(--btnBorderRadius);
}

.cont-add-btns { 
  padding-top:1.5rem;
  clear:both;
  gap:var(--gutter);
}

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

  .cont-add-btns .col50:first-child {  
    margin-bottom:1rem;
  }
}

@media screen and (min-width:750px) {
  .cont-add-btns {    
    display:flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .cont-add-btns .col50{  
    width:100%;
    max-width:100%;
  } 
}

.shopify-cleanslate ._3DL4HVlgeOhG7Paj6K8DqS { margin-bottom:15px ; }

.grid-uniform .addToCart:before {
  display:none; 
}

#cont-form .addtocart-skake, #cont-form2 .addtocart-skake, #cont-form3 .addtocart-skake {
  animation: shake2 4.72s ease infinite;
}
.cont-shake { display:inline-block; }
.cont-shake button, .cont-shake .shopify-payment-button__button {
  animation: shake2 4.72s ease infinite;
}
.cont-shake button.shopify-payment-button__more-options {
  animation: none;
}

.grid-uniform .addToCart:hover, .grid-uniform .addToCartBis:hover, .grid-uniform .addToCart2:hover, .grid-uniform .addToCart:hover {
  opacity:0.9;
}

@media(max-width:749px){
  .shopify-payment-button { width:100%; } 
  .col50 .cont-shake {
    display:block;
  }  
}
.selector-wrapper {
  display:none ; 
}

.selector-wrapper select { display:none; }



.addToCartProduct:before { display:none !important; }
/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}

/*============================================================================
#Lists
==============================================================================*/
ul, ol { margin: 0 0 1em; padding: 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.disc { margin-left: 20px; }
ul.square { list-style: square outside; }
ul.disc { list-style: disc outside; }
ol.alpha { list-style: lower-alpha outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 20px; }
li { margin-bottom: 0.25em; }
.inline-list li { display: flex; align-items:center; margin-bottom: 0; }
.liv_carac {
  list-style:none;
  padding-left:0;
  margin-left:0 ;
  margin-bottom:25px;
}
.rte ul.liv_carac { margin-bottom:0 ; }

@media screen and (min-width: 750px) {
  .legal-links { margin-bottom:0; }
}

/*============================================================================
#Tables
==============================================================================*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 50%;
}

table.full {
  width: 100%;
  margin-bottom: 12px ;
}

th {
  font-weight: bold;
}

th, td {
  text-align: left;
  padding: 12px ;
  border: 1px solid var(--colorBorder);
}


/*============================================================================
#Media, Images and Iframes
==============================================================================*/
.media {
  display: block;
  position: relative;
  overflow: hidden;
}
.media-hidden {
  display: block;  
  overflow: hidden;
}
.media > img, .media > picture {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0; 
}

img {  
  max-width:100%;
  height:auto;
  border: 0 none;  
}

svg:not(:root) {
  overflow: hidden;
}

img.auto, .grid-item img, .grid-item iframe {
  max-width: 100%;
}

video {
 
  display: block;    
  margin: 0 0 15px 0; 
}

.videos-content .small--one-whole {
  margin: 0 auto ; 
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;
}

.video-wrapper iframe, .video-wrapper video, .video-wrapper svg {
  border:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
@media screen and (max-width: 600px) { 
  .video-wrapper.video-zoom-true {
    height: 100vh;
    padding:0 !important;
  }
  .video-zoom-true video, .video-zoom-true iframe  {     
    width: 100%;
    height: 100vh;
    top: 50%;
    left: 50%;
    background-position: center;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(-50%,-50%,0);
  } 
}

.placeholder-video {
  position:relative;
}

.placeholder-video i {
  background-color:rgba(0,0,0, 0.7);
  border-radius:50px;
  width:45px;
  padding-left:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  height:45px;
  color:rgba(255,255,255); 
  font-size:2.1rem;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

model-viewer { width:580px; height:580px; max-width:100%; }

/*============================================================================
#Forms
==============================================================================*/
form { 
  margin-bottom: var(--gutter-half);  
}

.cont-form {
  margin-top:var(--gutter-half);
  max-width:600px;
}

.form-int {
  /* padding:0 var(--gutter-quarter); */
  padding:0;
  width:100%;
  max-width:600px;
}

.form-int select {
  max-width:300px;
}

@media screen and (min-width:750px) {
  form {
    margin-bottom: var(--gutter);  
  }
}

#customer_login {  
  margin: 25px 0;
}

button,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;  
}

input,
textarea,
select,
fieldset { 
  padding: 8px 12px;
  background: transparent;
  border-radius: var(--radius);
  max-width: 100%;
  min-height:48px;
}

.input-full {
  width: 100%;
}

fieldset {
  border: 1px solid var(--colorBorder);
    padding: 12px  0;
}

legend {
  border: 0;
  padding: 0;
}

optgroup {
  font-weight: bold;
}

input {
  display: inline-block;
  width: auto;
}

button,
input[type="submit"] {
  cursor: pointer;
}

*, button:focus, a:focus { outline: none ; outline: 0 ; }

/*================ Input width and border ================*/
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="file"], input[type="number"], input[type="tel"], textarea, select {
  border: 1px solid var(--colorBorder);
  background-color: rgba(var(--colorTextBody ), 0.1);
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 0 15px 0;
}
input[type="text"][disabled], input[type="search"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="file"][disabled], input[type="number"][disabled], input[type="tel"][disabled], textarea[disabled], select[disabled], input[type="text"].disabled, input[type="search"].disabled, input[type="password"].disabled, input[type="email"].disabled, input[type="file"].disabled, input[type="number"].disabled, input[type="tel"].disabled, textarea.disabled, select.disabled {
  cursor: not-allowed;
  background-color: var(--disabledGrey);
  border-color: var(--disabledBorder);
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}

.template-cart input[type="number"] {
  margin:0; 
  max-width:90px;
}

@media screen and (max-width: 749px) {
  select {
    margin-bottom:15px; 
  }
}

textarea {
  min-height: 100px;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: 0;
  padding: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('//mapeluchelabubu.fr/cdn/shop/t/7/assets/arrow-down.svg?v=145817572393679453621757130052');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  text-indent: 0.01px;  
  cursor: pointer;  
}

select::-ms-expand {
  display: none;
}

@media screen and (min-width: 1024px) {
  select {
    max-width:340px;
  }
}

/*================ Form labels ================*/
label, legend {
  display: block;
  margin-bottom: 10px;
}
label.inline, legend.inline {
  display: inline;
}
.form-horizontal label.hidden-label, .form-horizontal legend.hidden-label, label.hidden-label, legend.hidden-label {
  height: 0;
  width: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.ie9 .form-horizontal label.hidden-label, .ie9 .form-horizontal legend.hidden-label, .ie9 label.hidden-label, .ie9 legend.hidden-label, .lt-ie9 .form-horizontal label.hidden-label, .lt-ie9 .form-horizontal legend.hidden-label, .lt-ie9 label.hidden-label, .lt-ie9 legend.hidden-label {
  height: auto;
  margin-bottom: 2px;
  overflow: visible;
}

/*================ We don't want the same label treatment for checkboxes/radios ================*/
input[type="checkbox"] + label,
input[type="radio"] + label {
  font-weight: normal;
}

label[for] {
  cursor: pointer;
}

.label-hint {
  color: #999;
}

/*================ Horizontal Form ================*/
form.form-horizontal, .form-horizontal {
  margin-bottom: 0;
}
form.form-horizontal input[type="text"], .form-horizontal input[type="text"], form.form-horizontal input[type="search"], .form-horizontal input[type="search"], form.form-horizontal input[type="password"], .form-horizontal input[type="password"], form.form-horizontal input[type="email"], .form-horizontal input[type="email"], form.form-horizontal input[type="file"], .form-horizontal input[type="file"], form.form-horizontal input[type="number"], .form-horizontal input[type="number"], form.form-horizontal input[type="tel"], .form-horizontal input[type="tel"], form.form-horizontal textarea, .form-horizontal textarea, form.form-horizontal select, .form-horizontal select, form.form-horizontal label, .form-horizontal label {
  display: inline-block;
  margin-bottom: 0;
  width: auto;
}

.main-content .search-bar input::-webkit-input-placeholder,  
.main-content .search-bar input::-moz-placeholder, 
.main-content .search-bar input:-ms-input-placeholder, 
.main-content .search-bar input:-moz-placeholder { 
  color:var(--colorTextBody ) !important; 
}
.main-content .search-bar input,
.main-content .search-bar i { 
  color:var(--colorTextBody ) !important; 
}

/*================ Error styles ================*/

input[type="text"].error, input[type="search"].error, input[type="password"].error, input[type="email"].error, input[type="file"].error, input[type="number"].error, input[type="tel"].error, textarea.error {
  border-color: var(--errorRed);
  background:none;
  color: var(--errorRed);
}

label.error {
  color: var(--errorRed);
}

/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group .input-group-field:first-child, .input-group .input-group-btn:first-child, .input-group .input-group-btn:first-child > .btn, .input-group input[type="hidden"]:first-child + .input-group-field, .input-group input[type="hidden"]:first-child + .input-group-btn > .btn {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
}
.input-group .input-group-field:last-child, .input-group .input-group-btn:last-child > .btn {
  border-radius: 0 var(--radius);
}
.input-group input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: -1px;
  margin-bottom: -1px;
} 

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

.input-group .btn,
.input-group .input-group-field {
 min-height:3.8rem;
}

.input-group .input-group-field {
  width: 100%;
  margin-bottom: 0;
  border:none;
  border-color: var(--colorBorder);
    border-right: none;
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

.form-spacer {
  margin: 0 12px ;
}

/*============================================================================
#Icons
==============================================================================*/

.icon-fallback-text .fallback-text {
  display: none;  
}

.supports-fontface .icon-fallback-text .fallback-text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

/*================ Button icons ================*/
.btn-atc:before, .shopify-payment-button__button--unbranded:before, .cart-row button[type=submit]:before, .form-grid-btn:before, .form-grid .btn:before {
  content:"\f07a";
  padding-right:3px;
  display:inline-block;
  position:relative;
  font-family:FontAwesome; 
}


.btn-atc:before, .cart-row button[type="submit"]:before {
  content:"\f07a";  
}










.shopify-payment-button__button--unbranded:before, .shopify-payment-button-custom:before {
  content:"\f09d" !important; 
  margin-right:4px;
}

.icon-cart {
  line-height: 0;
}

.icon-cart:before {
  position: relative;
  top: -2px;
  font-size: 1.9rem;
  line-height: 1.2rem;
  vertical-align: middle;
  margin-right: 6px;
}

.payment-icons {
  cursor: default;
  margin: 0;
}
.payment-icons li {
  margin: 0 var(--gutter-quarter) var(--gutter-quarter);
  color: var(--colorFooterSocialLinks);
  cursor: default;
}
.payment-icons .icon {
  font-size: 30px;
  line-height: 30px;
}
.payment-icons .fallback-text {
  text-transform: capitalize;
}
.social-icons li {
  margin: 0 calc(var(--gutter)/3) 0 0;
    vertical-align: middle;
}
.social-icons li .icon {
  font-size: 20px;
  line-height: 16px;
}
.social-icons li a, .social-icons li svg {
  color: var(--colorFooterSocialLinks);
  fill: var(--colorFooterSocialLinks);
  transition: color 0.2s ease-out;
}
.social-icons li a:hover, .social-icons li svg:hover {
  color: var(--colorFooterSocialLinks);
  transition: color 0.05s ease-in;
}

ul.social-icons {
  margin-bottom: 0;
}

.svg-icons {
  min-height:90px;
}

.custom-content svg {
  height:auto;
}

.custom-content svg , .custom-content rect, .custom-content path, .custom-content polyline, .custom-content line {
  stroke: var(--colorSvg); 
  fill: var(--colorSvg); 
}

.social-sharing {
  padding-top: var(--gutter-half); 
}
.social-sharing a {
  display: inline-block;
  color: #fff;
  border-radius: 2px;
  margin: 0 10px 10px 0;
  height: var(--shareButtonHeight);
  line-height: var(--shareButtonHeight);
  text-decoration: none;
  font-weight: normal;
}
.social-sharing a:hover {
  color: #fff;
}
.social-sharing span {
  display: inline-block;
  vertical-align: top;
  height: var(--shareButtonHeight);
  line-height: var(--shareButtonHeight);
  font-size: 1.2rem;
}
.social-sharing .icon {
  padding: 0 5px 0 10px;
}
.social-sharing .icon:before {
  line-height: var(--shareButtonHeight);
}
.social-sharing.is-large a {
  height: calc(var(--shareButtonHeight)*2);
    line-height:  calc(var(--shareButtonHeight)*2);
}
.social-sharing.is-large a span {
  height:  calc(var(--shareButtonHeight)*2);
  line-height:  calc(var(--shareButtonHeight)*2);
  font-size: 1.8rem;
}
.social-sharing.is-large a .icon {
  padding: 0 10px 0 18px;
}
.social-sharing.is-large a .icon:before {
  line-height:  calc(var(--shareButtonHeight)*2);
}

.share-title {
  font-weight: 900;
  font-size: 1.2rem;
  padding-right: 10px;
}
.is-large .share-title {
  padding-right: 16px;
}
.share-facebook {
  background-color: #3b5998;  
}

.share-twitter {
  background-color: #00aced;  
}

.share-pinterest {
  background-color: #cb2027;
}

.share-fancy {
  background-color: #4999dc;  
}

.share-google {
  background-color: #dd4b39; 
}
@media screen and (max-width: 749px) {
  ul.social-icons {
    text-align: center;
  }
}

/*================ Clean Buttons ================*/
.social-sharing.is-clean a {
  background-color: #fff;
  border: 1px solid var(--shareBorderColor);
  color: #333;
  height: var(--shareButtonCleanHeight);
  line-height: var(--shareButtonCleanHeight);
}
.social-sharing.is-clean a span {
  height: var(--shareButtonCleanHeight);
  line-height: var(--shareButtonCleanHeight);
  font-size: 1.3rem;
}

.social-sharing.is-clean a:hover {
  background-color: #f9f9f9;
}

.social-sharing.is-clean a .share-title {
  font-weight: normal;
  color: #333;
}

.social-sharing.is-clean .fa-facebook {
  color: #3b5998;
}

.social-sharing.is-clean .fa-twitter {
  color: #00aced;
}

.social-sharing.is-clean .fa-pinterest {
  color: #cb2027;
}
@media screen and (max-width: 749px) {
  .social-sharing.is-clean a {
    margin-right:0px; 
  }
  .social-sharing.is-clean a span {
    font-size: 1.1rem;
  }
}

/*============================================================================
#Notes and Form Feedback 
==============================================================================*/
.note,
.errors {
  border-radius: var(--radius);
  padding: 12px ;
  margin-bottom: 12px ;
  border: 1px solid transparent;
}
.note ul, .errors ul,
.note ol, .errors ul {
  margin-top: 0;
  margin-bottom: 0;
}

.note li:last-child, .errors li:last-child {
  margin-bottom: 0;
}

.note p, .errors p {
  margin-bottom: 0;
}

.note {
  border-color: var(--colorBorder);
}

.errors ul {
  list-style: disc outside;
  margin-left: 20px;
}

.form-success {
  color: #FFF;
  background-color: var(--successGreen);
  border-color: var(--successGreen);
  padding: 0.5em;
}

.form-error,
.errors {
  color: #FFF;
  background-color: var(--errorRedBg);
  border-color: var(--errorRed);
  padding: 0.5em;
}

.cart-message-error {
  margin:1rem;
}

/*============================================================================
#Demo Styles - for empty store state
==============================================================================*/
.demo-image {
  background: url('//cdn.shopify.com/s/files/1/0383/9765/t/1/assets/blankslate-producticon.png?4') no-repeat center center #eee;
  display: block;
  text-align: center;
  padding: 100px 0;
  color: #aaa;
  font-size: 0.875rem;
  text-decoration: none;
}

/*============================================================================
#Pagination
==============================================================================*/
.pagination-border-top {
  margin-top: var(--gutter) ;
  padding-top: var(--gutter) ;
  border-top: 1px solid var(--colorBorder);
}

/*================ Custom Pagination ================*/
.pagination-custom {
  display: inline-block;
  padding-left: 0;
  margin: 0 0 var(--gutter);
}

.pagination-custom > li {
  display: inline;
}

.pagination-custom > li > a,
.pagination-custom > li > span {
  position: relative;
  float: left;
  padding: 8px 15px;
  margin-left: -1px;
  line-height: 1.42;
  text-decoration: none;
}

.pagination-custom > li:first-child > a,
.pagination-custom > li:first-child > span {
  margin-left: 0;
}

.pagination-custom > .active > a,
.pagination-custom > .active > span,
.pagination-custom > .active > a:hover,
.pagination-custom > .active > span:hover,
.pagination-custom > .active > a:focus,
.pagination-custom > .active > span:focus {
  z-index: 2;
  cursor: default;
  color: var(--colorTextBody );
}

.pagination-custom > .disabled > span,
.pagination-custom > .disabled > a,
.pagination-custom > .disabled > a:hover,
.pagination-custom > .disabled > a:focus {
  color: #999999;
  cursor: not-allowed;
}

.pagination-custom-lg > li > a,
.pagination-custom-lg > li > span {
  padding: 10px 16px;
  font-size: 1.8rem;
}

.pagination-custom-sm > li > a,
.pagination-custom-sm > li > span {
  padding: 5px 10px;
  font-size: 0.75rem;
}

/*============================================================================
# Grids and List Views
==============================================================================*/
.flex-grow-none {
  justify-content:center;
}
.flex-grow-none .grid-item:not(.product-description) {
  flex-grow: 0; 
}

.grid-uniform  {
  margin: 0 calc(-1 * var(--gutter-quarter)) 0 calc(-1 * var(--gutter-quarter));
}

.grid-item  {
  width:100%;
  padding: var(--gutter-quarter);
}

@media only screen and (min-width: 750px) {
  .grid-uniform  {
    margin: 0 calc(-1 * var(--gutter-half)) 0 calc(-1 * var(--gutter-half));
  }
  .grid-item  {
    padding: var(--gutter-half);
  }
}

.grid-item-flex {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.grid-item .grid-uniform, .grid-uniform .grid-uniform  {
  margin:0;
}

.grid-content {
  display:flex;
  flex-wrap:wrap; 
  position:relative;
  align-content:center;
  flex:1;
}

.grid-uniform {
  display: flex;
  flex-wrap: wrap;  
}

.grid-uniform--inner {
  padding-left:0;
}

.grid-uniform--inner .grid-item {
  padding:0;
}

.grid-uniform .grid-container {
  padding-top:0;
}



@media screen and (max-width: 749px) {
  
  .grid-uniform.scroll-x {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;  
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;      
  }
 
  .grid-uniform.scroll-x .grid-item {
    width: 85vw;
    flex: 0 0 85vw;
  }
  .grid-uniform.scroll-x .grid-item.small--one-half {
    max-width: 46%;
  }
  /*.grid-uniform.scroll-x .grid-item.small--one-third {
    max-width: 30%;
  }*/
}

.collection-filters {
  padding-left:0;
  padding-right:0;
}

.grid-uniform .grid-item { 
  position: relative;
  margin-bottom: 0;
  
  width: 100%;
}

.grid-uniform > .grid-item-column {  
  display:flex;
  flex-direction: column; 
  justify-content: space-between;
  flex-wrap: wrap;
  display: flex; 
}
@media screen and (min-width: 1024px) {
  .collection-zoom .grid-item {
    padding: 10px;
    transition: all 200ms ease-in;
    transform: scale(1);
  }

  .collection-zoom .grid-item:hover {
    background:var(--colorBody );  
    box-shadow: 0px 0px 25px #ddd;
    z-index: 900;
    position: relative;
    transition: all 200ms ease-in;
    transform-origin: center center;
    transform: scale(1.1);
  }
}

.border-true .grid-item, .border-true .slick-slide {
  padding: 10px;
}
.border-true .grid-item .product-grid-item, .border-true .slick-slide .product-grid-item {
  padding: 10px;
  border: 1px solid var(--colorTextBody );
}

.product-grid-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1; 
  cursor: pointer;
  position: relative; 
}
.product-grid-item:hover {
  cursor: pointer;
}
.product-grid-item .product-grid-image--centered {
  position: relative;
}

.grid-crop-title { overflow:hidden; }

.cont-badges-star {
  margin-bottom:var(--gutter-half);
}

.cont-slider .product-grid-item {
  margin-bottom: 0;
}

.product-grid-item .h3 {
  text-transform:initial;
  font-size:1.6rem;
  font-size: 12px;
  text-align: center;
  line-height: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-grid-item .form-grid-btn {
  width:100%; 
}
.product-grid-item:hover img {
  transition: opacity 0.05s ease-out;
}
/* #Swatches
.product-grid-item .swatch {
  display: flex;
  flex-wrap: wrap;
  gap:7px;
  align-items: center;
  overflow: auto;
}

.product-grid-item.text-center .swatch {

  justify-content: center;

}
.product-grid-item .swatch .more-variant-colors {
  font-size: 14px;
}
.product-grid-item .swatch > .swatch-element  {
font-size:11px;
display:inline-flex;
margin:0;

}
*/

@media screen and (min-width: 1024px) {
  .template-list-collections .product-grid-item {
    margin-bottom: 0;
  }
}
.grid-layout-1 .grid-uniform .grid-item {
  flex-direction:row;
  padding-bottom:var(--gutter-half);
  margin-bottom:var(--gutter-half);
}

.grid-layout-1 .product-grid-image {
  margin-bottom:0;
}
.grid-layout-1 .product-grid-item .product-caption {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-out;
  padding: 10px;
}
.grid-layout-1 .product-grid-item .product-caption * {
  text-shadow: 0 0 3px #000;
  color: #fff !important;
}
.grid-layout-1 .product-grid-item .product-caption .cont-badges-star {
  min-height: auto;
}
.grid-layout-1 .product-grid-item:hover .product-caption {
  opacity: 1;
  visibility: visible;
  top: 50%;
  transform: translateY(-50%);
}
.grid-layout-2 .product-grid-item {
  border: 1px solid var(--colorTextBody);
  display: flex;
  flex-direction:row;
  align-items: center;  
  margin:0 auto;
  padding:5px;
}
.grid-layout-2 .product-grid-item .cont-badges-star {
  min-height: auto;
}
.grid-layout-2 .product-grid-item .product-grid-image {
  width: 40%;
  padding: 0;
  margin:0 10px 0 0;
  min-width: 40%;
}
.grid-layout-2 .product-grid-content,
.grid-layout-2 .product-grid-content * {
  font-size: 1.6rem;
  text-align: left;
}
.grid-layout-2 .product-grid-item .grid-cont-content form * {
  text-align: center;
  font-size: 1.4rem;
}

.grid-layout-2 .sale-tag {
  font-size:11px;
}
@media screen and (max-width: 749px) {
  .grid-layout-2 .small--one-half {
    width:100%; 
  }
}

.product-grid-item .btn { 
  font-size:1.4rem;  
}
@media screen and (max-width: 749px) {
  .product-grid-item .btn { 
    font-size:1.3rem;  
  }
}
.product-grid-item .spr-badge-caption {
  display:none;
}

.opacity-enable .product-grid-item:hover .product-grid-image a:after {  
  background:rgba(000,000,000,0.1);  
}

.sold-out .product-grid-image, .sold-out .product-list-image {
  position: relative;
}
.sold-out .product-grid-image img, .sold-out .product-list-image img {
  opacity: 1;
}

.product-grid-image {  
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin: 0 auto 2rem;
  position:relative;
}
.product-grid-image img {
  display: block;
  margin: 0 auto;
  height:100%;
  transition:all 0.2s ease-in-out;
}

.product-list-image {
  display: block;
  margin: 0 auto;
}

.product-grid-content {
  padding:0 1rem 2rem;  
}

.reveal { position: relative; }
.reveal .hidden { 
  display: block !important; visibility: visible;
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  background: var(--colorBody );
  transition: all 0.15s ease-out; 
  transform: scale(0.9);  
}

.grid-uniform .grid-item:hover .reveal img, 
.slick-track .slick-slide:hover .reveal img { opacity: 1; }
.slick-list, .slick-track {
 /* height: 100%; */
}
.grid-uniform .grid-item:hover .hidden, .slick-track .slick-slide:hover .hidden { 
  z-index: 100;
  opacity: 1;  
  transform: scale(1);  
}

.product-item--price {
  line-height: 22px;
}
.product-item--price .h1 {
  margin-bottom: 12px ;
}

.product-item--price span {
  padding-top:5px;
  padding-bottom:5px;
  line-height: 18px;
}  

.product-item--price .medium--left { 
  margin: 5px 0 5px 0;
  overflow: hidden;  
}

.price-from {
  text-transform:lowercase;
  font-size:1.4rem;
  line-height:inherit;
  font-style:italic;
}

.product-price-unit {
  padding:0 5px; 
}

.product-price-unit, .product-price-unit * {
 font-size:calc(var(--baseFontSize) - .2rem) !important;
}

.grid-product-form  .modal-form {   
  transition:all 0.1s;
  opacity:0; 
  position:absolute; 
  left:0;
  right:0;
  width:100%;
  height:0;
  bottom:-20px; 
  background:#FFF;   
  overflow:hidden;   
}

.grid-product-form form {    
  margin:0; 
  padding:1rem;   
}
.grid-product-form .btn {   
  width:100%;
}

.form-grid {
  margin-bottom:0;
}
.grid-product-form .show-modal-form.modal-form {
  opacity:1;
  bottom:0;   
  height:auto;
  box-shadow:0 0 5px rgba(0,0,0,0.1);
}
.grid-product-form select {  
  font-size:12px;
  word-break: break-word;
  text-overflow: ellipsis;
  padding-right: 35px;
}
.modal-form--close {
  background-color:var(--colorBody);
  position: absolute;
  top: 0;
  right: 0;
  border-radius:50%;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 3px rgba(0,0,0,0.1)
}
@media screen and (max-width: 749px) {
  .inline-list li {
    display:flex;
    margin-bottom:5px;
  } 
}
@media screen and (max-width: 1023px) {
  .product-list-item .spr-badge {
    clear: both;
  }
}

/*============================================================================
#carttemplate 
==============================================================================*/
/*
.header-cart .cart-packs {
  display: none;
}

.header-cart .h1 {
  font-size:var(--h3FontSize);
}
.header-cart .section-header {
  --gutter: 1rem;
}

@media screen and (max-width: 767px) {
  body.ajaxify-modal--visible {
    overflow: hidden;
  }
}

.ajaxifyCart-loader {
  display: none;
  opacity: 0;
  position: absolute;
  left: -24px;
  top: 50%;
  margin-top: -8px;
  padding: 0;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAPYAAP///8zMzPX19enp6d7e3tjY2NnZ2eHh4evr6/f39+zs7NPT09PT09XV1dbW1tjY2ODg4PDw8NHR0eLi4vr6+vr6+vLy8ufn59vb297e3vHx8fT09NfX19DQ0Ofn5+3t7d7e3uTk5Pj4+Obm5s7OzuDg4Orq6uDg4O/v79nZ2c3Nze7u7unp6dDQ0M3Nzfn5+fz8/OPj4+Xl5fz8/OXl5e3t7f39/f39/fHx8fPz8/z8/Pb29u7u7vv7+/X19fj4+Pf39/T09PLy8vHx8fj4+Pb29vv7+/b29uTk5O/v7+/v79ra2tzc3N3d3d/f39jY2NfX1/Ly8uPj49XV1fr6+tTU1Ofn593d3dTU1NHR0evr69vb28/Pz+bm5t/f39bW1vPz8/T09Pn5+fDw8OTk5Ojo6Ovr69zc3Ojo6Nra2tra2tLS0uzs7M/Pz87Ozu3t7czMzOrq6tPT08/Pz9fX1+Li4tXV1c3NzeLi4tLS0tzc3OHh4eXl5QAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA);
}

.flip--is-loading .ajaxifyCart-loader {
  display: block;
  opacity: 1;
}

.ajaxifyCart--content {
  position: absolute;
  bottom:-200px;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all .2s cubic-bezier(0.57, 0.06, 0.05, 0.95);
  overflow: hidden;
}

.is-visible .ajaxifyCart--content {
  position: relative;
  bottom:0;
}

.ajaxifyCart--content form {
  transition: all .3s ease-out;
  opacity:0;
  margin-bottom: 0;
}

.is-visible .ajaxifyCart--content form {
  opacity:1; 
}

@media screen and (max-width: 1023px) {
  .is-visible .ajaxifyCart--content {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
*/

.cart-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cart-row.btn-checkout-bis {
  display: none;
}
@media screen and (max-width: 749px) {
  .cart-row.btn-checkout-bis {
    border: none;
    padding: 0;
    margin: 0;
    text-align: right;
    display: block;
  }
}

@media screen and (max-width: 749px) {
  .cart-row.cart-row--infos {
    display: block;
  }
}
.cart-item {
  flex-flow: wrap;
  display: flex;
  padding: 3px;
  justify-content: center;
  align-items: center;
}
.cart-item .h2 {
  text-align: center;
}
.cart-item .h2, .cart-item p {
  margin: 0;
}
.cart-item-1 {
  justify-content: flex-start;
  order: 1;
  width:50%;
}
.cart-item-1 a {
  max-width: 30%;
}
.cart-item-1 a img {
  width: 90%;
}
.cart-item-1 div {
  max-width: 70%;
  padding-left: 7px;
  line-height: 20px;
}
@media screen and (max-width: 749px) {
  .cart-item-1 div, .cart-item-1 small {
    font-size: 1.2rem;
    line-height: inherit;
  }
}

.cart-item-2 {
  order: 2;
  width:25%;
}
.cart-item-3 {
  order: 3;
  width:20%;
  justify-content: flex-end;
}
/*
.header-cart .cart-item-3 {
  justify-content: flex-end;
  width:25%;
}

.header-cart .cart-item--discount {
  display:none;
}
*/
.cart-item-4 {
  order: 4;
  justify-content: flex-end;
  width:5%;
}
/*
.header-cart .cart-item-1 a {
  max-width: 30%;
}

.header-cart .cart-item-4 {
  display: none;
}
*/
.cart-row {
  margin-top: var(--gutter);
  padding-top: var(--gutter);
  border-top: 1px solid var(--colorBorder);
}
.cart-row:first-child {
  margin-top: 0;
}
.cart-row:first-child {
  padding-top: 0;
  border-top: 0 none;
}
.cart-row a {
  color: var(--colorTextBody );
}
.cart-row .h5 {
  margin:0;
  text-align: right;
}
.cart-row input[type="image"] {
  padding: 15px 0px;
}
@media screen and (min-width: 750px) {
  .cart-notes {
    padding-right: 15px;
    flex:1;
    max-width:500px;
  }
}
/*
.header-cart .cart-notes {
  padding-right: 0;
  display: none;
}
*/
.cgv-text {
  float: none; 
  text-align: right; 
  clear: both; 
}

.cgv-text input, .cgv-text label {
  float:none; 
  display:inline;
  vertical-align: middle;
}
.cgv-text input {
  text-align: right; 
  min-height: auto;
}
.cgv-text a {
  text-decoration:underline; 
}
.contact-form {
  max-width:600px;
}
.contact-form .cgv-text {
  text-align:left;
  font-size:1.3rem;
  line-height:inherit;
}
.discount-code-field {
  display:block;
  width:100%;
  clear:both;
  overflow:hidden;
}
.discount-code-field input {
  font-size:1.4rem;
}
.cart-secure-zone {
  display:block;
  overflow:hidden;
  width:100%;
}
.cart-secure-zone img {
  float:right; 
  max-width:350px;
  margin-left:10px;
}
.mini-cart-modal .cart-secure-zone {
  text-align:center;
}
.mini-cart-modal .cart-secure-zone img {
  float:none; 
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.mini-cart-modal button .fa {
  color: var(--colorTextBody );
}

.cart-secure-zone br {
  content:"";
}

#dynamic-checkout-cart div { display: inline-block ; }

.cart-subtotal {
  margin-bottom: var(--gutter);
  text-align:right;
}
.cart-subtotal__note {
  margin-top:1rem;
  font-size:80%;
}
.wh-original-cart-total small {
  font-size:2rem;
}

.cart-subtotal--price {
  margin: 0 0 0 8px ;
  display: inline;
}

.cart-subtotal--savings,
.cart-item--discount {
  display: block;
  padding-bottom: 0;
  font-weight: 700;
  text-align:right;
}

.cart--no-cookies .cart--empty-message, .cart--no-cookies .cart--continue-message {
  display: none;
}

.cart--cookie-message {
  display: none;
  padding-bottom: 25px;
}
.cart--no-cookies .cart--no-cookies {
  display: block;
}
.discount-code-field input {
  width:150px;
  float:right;
}

@media screen and (max-width: 749px) {  
  .cart-row--infos .btn {
    
    display:block;
   
    width:100%;
    margin-top:1rem;
  }
  .cart-secure-zone {
    display:block;
    text-align:center;
    float:none;
    margin:0 auto;
  }
  .cart-secure-zone img { width:100%; }
  .cart-subtotal {
    margin-bottom:0; 

  }
  .cart-row .grid-item {
    padding:0 10px ;
  }
  .cart-row .medium--two-thirds .grid-item {
    padding:0 7px ;
  }
}

/*============================================================================
#announcementbar
==============================================================================*/
.topheader {
  background:var(--topheaderBgColor);
  color:var(--topheaderTextColor); 
  text-align:center;
  justify-content: center;
  align-items:center;
  align-content: center; 
  line-height:inherit;
  font-size:1.6rem;
  margin-bottom:0;
  padding:2px 5px;
  overflow:hidden;  
}

@media screen and (max-width: 750px) {
  .mobile-hide-top-true .topheader  {
      display:none;
  }
}

.topheader p {
  margin:0 2px;   
}
.topheader-show-false {
  display:none ;
}
.topheader-show-true {  
  align-items:center;
}

.topheader .quick-access {
  display:none;
  margin:2px 0;

}
.topheader .quick-access li {
  margin:0 5px;
  display:inline;
}

.topheader .quick-access a {
  color:inherit;
}
.site-nav .icon-links {
  display:flex;
}
.site-nav .icon-links .icon-link {
 flex:1; 
  text-align:center;
}
@media screen and (max-width: 1023px) {
  .topheader__wrapper {
    justify-content:center;
  }
  .topheader, .topheader p {
    font-size:1.2rem; 
    
  }
}
@media screen and (min-width:1024px) {
  .topheader {
    display:flex;
  }
  .topheader .quick-access {
    display:block;
    flex:1;
    text-align:right;
    
  }
}
/*============================================================================
#header
==============================================================================*/

 
.cont-header {  
  position:relative;    
  z-index:1100;
  width:100%;
  margin-bottom:0;   
  background:var(--headerBackground);
}
@media screen and (max-width: 749px) {
  .cont-header{  
    top:0;
    position: sticky;
  }
}
@media screen and (min-width: 750px) {
  .header-transparent-false {  
    top:0;
    position: fixed;
  }

  .header-transparent-true {
    background:none;
  }
}
/*============================================================================
#sticky
==============================================================================*/

.sticky {  
  position:sticky;
  top:0;
  left:0;
  z-index:1000;   
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--headerText);
  
}
.noborder-false {
  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}


@media screen and (max-width: 1023px) {
  .site-header {
    padding:0 !important;
  }
}

.site-header .site-header--text-links a {
  color: var(--headerText);
}
.site-header .site-header--text-links a:hover {
  opacity: 0.9;
}
.header2 .site-header {
  max-width: 1200px;
  margin: 0 auto;
}
.site-header .grid-item {
  padding: 0;
}

@media screen and (min-width: 1024px) {
  .site-header {
    padding: 10px;
  }
  .header-scroll-on {   
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
  }
  
  /*.border-false.header-scroll-on {
    border:none !important;
  }*/

  .header-grid__logo {
    flex: 1 0 15%;
    order: 1;
  }
  .header1 .header-grid__logo {
    flex: 1 0 25%;
  }
  .header3 .header-grid__logo {
    flex: 1 0 20%;
    order: 2;
    display: flex;
  }
  .header3 .header-grid__logo * {
    margin: 0 auto;
  }
  .header5 .header-grid__logo {
    flex: 1 0 33%;
    order: 2;
    align-items: center;
    display: flex;
    justify-content: space-around;
  }
  .header1 .header-grid__info {
    flex: 1 0 25%;
    order: 2;
    align-items: center;
    display: flex;
    justify-content: space-around;
  }
  .header5 .header-grid__info {
    flex: 1 0 33%;
    order: 1;
    align-items: center;
    display: flex;
    justify-content: flex-start;
  }
  .header5 a {
    text-align: center;
  }
  .header-grid__nav {
    order: 2;
  }
  .header3 .header-grid__nav {
    order: 1;
    flex: 1 0 40%;
    padding-left: 5px;
  }
  .header-grid__links {
    flex: 1 0 15%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    order: 3;
  }
  .header1 .header-grid__links {
    flex: 1 0 25%;
  }
  .header3 .header-grid__links {
    order: 3;
    flex: 1 0 40%;
  }
  .header5 .header-grid__links {
    flex: 1 0 33%;
  }
  .header5 .wrapper {
    padding-left:0;
    padding-right:0;
  }
}

.header-cart-btn {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  position: relative;
  line-height: 26px;   
  margin: 0 1px;
  min-width: 34px;   
  border: 0 none;
  vertical-align: top;
  background: none;
}

@media screen and (min-width: 750px) {
  .header-cart-btn {
    min-width: 45px;
    min-height: 42px;
  }
}
.header-cart-btn.header-action-search, .header-cart-btn.header-action-search i {
  color: var(--headerSearchColor);
  background: var(--headerSearchBgColor);

}
.header-cart-btn.header-action-search:hover, .header-cart-btn.header-action-search i:hover, .header-cart-btn.header-action-search:focus, .header-cart-btn.header-action-search i:focus {
  opacity: 0.9;
}
.header-cart-btn.header-action-account, .header-cart-btn.header-action-account i {
  color: var(--headerAccountColor);
    background: var(--headerAccountBgColor);
}
.header-cart-btn.header-action-account:hover, .header-cart-btn.header-action-account i:hover, .header-cart-btn.header-action-account:focus, .header-cart-btn.header-action-account i:focus {
  opacity: 0.9;
}
.header-cart-btn.header-action-cart, .header-cart-btn.header-action-cart i {
  color: var(--headerActionCartColor);
    background: var(--headerActionCartBgColor);
}
.header-cart-btn.header-action-cart:hover, .header-cart-btn.header-action-cart i:hover, .header-cart-btn.header-action-cart:focus, .header-cart-btn.header-action-cart i:focus {
  opacity: 0.9;
}

.header-cart-btn a {  
  display: inline;  
}

@media screen and (max-width: 1023px) {
  .header-cart-btn {
    display: none;
  }
}

.header-cart-btn i {
  font-size: 2rem;
}

@media screen and (min-width: 1024px) {
  .header-cart-btn i {
    font-size: 2.2rem;
  }
  .header-cart-btn i.fa-search {
    font-size: 2rem;
  }
}

.header1 .header-wrapper .header-cart-btn i, .header5 .header-wrapper .header-cart-btn i {
  margin-right: 5px;

}
.header-cart-btn svg {
  width: auto;
  height: 2.2rem;
}
.header1 .header-wrapper .header-cart-btn svg, .header5 .header-wrapper .header-cart-btn svg {
  margin-right: 5px;
}
.header-cart-btn.boxconnexion-show-false {
  display: none;
}

/* position navbar */

.cont-header .nav-position-2 {
  text-align:center;
}

.cont-header.header3 .nav-position-2 {
  text-align:left;
}

.cont-header .nav-position-0 {
  text-align:right;
}

.header-subtext {
  font-size:1.4rem; 
  margin: var(--gutter-half) var(--gutter) 0 var(--gutter);
  text-align:right;
  color: var(--headerText);
}

.header-subtext p { 
  margin-bottom:0;
}

.header-baseline { 
  margin:0 !important;
  font-size:1.4rem;
}
.header-baseline p {
  margin:0;
}

.header-baseline.text-center p {
  margin:0 auto;
}

.header-logo {
  display:flex;
  margin: 0;
  padding: 0 12px;
}
.header1 .header-logo {
  padding: 0;
  float: left;
}
.header-logo a, .header-logo a:hover, .header-logo a:focus {
  text-decoration: none;
  color: var(--headerText);
}
.header-logo a, .header-logo img {
  display: inline-block;
}
.header-logo img {
  margin: 0 auto 0 auto;
}
@media screen and (min-width: 1024px) {
  .header-logo img {
    float: left;
  }
}

.header-logo img {
  transition: all 0.15s;
}
.site-header--text-links {
  display: inline-block;
  font-size: 0.7rem;
  margin-bottom: 0;
}
.site-header--text-links a {
  font-weight: bold;
}
.header2 .site-header--meta-links i, .header3 .site-header--meta-links i, .header4 .site-header--meta-links i {
  margin-top: 3px;
}
.site-header--spacer {
  padding: 0 5px;
}
.cart-count {
  position: absolute;
  top: 2px;
  right: 4px;
  display: inline-block;
  text-align: center;
  background-color: var(--headerCartCount);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 50%;
}
@media screen and (min-width: 1024px) {
  .cart-count {    
    top: 0;
    top: -3px;
    font-size: 1.3rem;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    }
}

.header1 .cart-count, .header5 .cart-count {
  right: auto;  
  left: 16px;
  top: 2px;
}

.cart-count.hidden-count {
  display: none;
}
.search-bar {
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: 0 auto var(--gutter);
}
.search-bar .icon-search {
  font-size: 1.8rem;
}
@media screen and (max-width: 1023px) {
  .search-bar {
    display: block;
    max-width: 100%;
    margin-bottom: 12px ;
  }
}
.search-bar input {
  border-radius: 0;
  outline: none;
  padding: 25px 20px;
}

.template-search .search-bar input {
  border-radius: 0;
  outline: none;
  padding: 15px 20px;
}
.search-bar input, .search-bar i {
  color: #fff;
  font-size: 1.8rem;
}
.search-bar input::-webkit-input-placeholder, .search-bar input::-moz-placeholder, .search-bar input:-ms-input-placeholder, .search-bar input:-moz-placeholder {
  color: #fff;
}
.search-bar input[type="text"], .search-bar input[type="search"] {
  width: 100%;
  margin-bottom: 0;
  font-family: var(--accentFontStack);
  font-weight: var(--btnFontWeight);
  font-size: var(--btnFontSize);
  line-height: normal;
}
.search-bar input:-ms-input-placeholder {
  line-height: normal;
  display: inline-block;
}
.search-bar input[type="submit"], .search-bar .search-bar--submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  padding:var(--gutter);
  margin: 0;
  border: 0 none;
  background: none;
  text-align: center;
  cursor: pointer;
}
.search-bar input[type="submit"] {
  text-indent: -9999px;
}
.site-header .search-bar {
  display: none;
  margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
  .site-header .search-bar {
    display: inline-block;
  }
}
.site-header .search-bar input[type="text"], .site-header .search-bar input[type="search"] {
  height: 44px;
  border: 0 none;
  transition: background-color 0.2s ease-out;
}
.site-header .search-bar input[type="text"]:hover, .site-header .search-bar input[type="search"]:hover, .site-header .search-bar input[type="text"]:focus, .site-header .search-bar input[type="search"]:focus {
  transition: background-color 0.05s ease-in;
}
.site-header .search-bar input[type="text"]:focus, .site-header .search-bar input[type="search"]:focus {
  outline: 0;
}

.cont-header input[type="search"] {
  height:36px; 
}

@media screen and (max-width: 1023px) {
  .header-image-1 {
    text-align:center;
    margin:7px 0;
  }
}

/*============================================================================
#headersearch
==============================================================================*/
/*--searchModalBgColor: #000000;
--searchModalBtnCloseColor: #FFF;
--searchModalBlocBorderColor: #FFF;
--searchModalBlocTextColor: #FFF;
--searchModalBlocIconColor: #FFF;*/

.search-overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: var(--searchModalBgColor);
  color: var(--searchModalBlocTextColor);
}

.search-overlay .overlay-content {
  position: relative;
  top: 10vh;
  width: 90%;
  text-align: center;
  margin-top: 0;
  margin: auto;
}
.search-overlay .closebtn {
  position: absolute;
  right: 10px;
  font-size: 5rem;
  line-height: 5rem;
  cursor: pointer;
  color: white;
  z-index:100;
  color: var(--searchModalBtnCloseColor);
}

.search-overlay .search-bar input[type=search] {
  border-color: var(--searchModalBlocBorderColor);
  color: var(--searchModalBlocTextColor);
}

@media screen and (min-width: 1024px) {
  .search-overlay i {
    color: #fff;
    color: var(--searchModalBlocTextColor);
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 1023px) {
  .search-overlay .search-results {
    max-height: 500px;
  }
  .search-overlay .overlay-content {
    top: 65px;
  }
}

.predictive-search__results-list {
  text-align: left;
  z-index:1000;
  border:1px solid var(--searchAutoCompleteBorder) ; 
  background:var(--searchAutoCompleteBg) ; 
  color:var(--searchAutoCompleteColor);
}
.predictive-search-group {
  position: relative;
}
.predictive-search__list-item {
  padding:3px;
  margin:0;
  border-bottom:1px solid var(--searchAutoCompleteBorder); 
}
.predictive-search__list-item.title {
  padding:.4rem;
  background-color: var(--color-text-body-opacity1);
}
.predictive-search__item {
  display: flex;
  align-items: center;
  gap:1rem;
  font-size: 11px;
  color:var(--searchAutoCompleteColor);
  opacity:0.9;
}
.predictive-search__item:hover {
  opacity:1;
}
.predictive-search__item-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
#predictive-search-results {
  max-height: 80vh;
  overflow-y: auto;
}

/*============================================================================
#Header Cart
==============================================================================*/

.header1 .wrapper-mini-cart, .header2 .wrapper-mini-cart {
  max-width:1140px;
  margin:0 auto;
  position:relative;
}

.header-right, .no-mobile {
  position:relative; 
}
.cart-row--infos .btn-primary { 
  font-size:130%;
  min-width:0;
} 
@media screen and (max-width: 749px) {
  .header1 .header-cart {
    margin-top: 51px;
  }

  .cart-form .cart-row .large--one-quarter img {
    max-width:100%;
    margin:0 auto;
  } 
  .cart-form .cart-row {
    margin-top:10px;
    padding-top:10px;
  }

  .cart-form .cart-subtotal {
    margin-bottom:10px; 
  }
  .cart-form input[type=number] {
    width:30px;
    height:36px;
    min-height:36px;
  }

  .cart-form .cart-row .cart-mini .btn-primary, .cart-form .cart-row .cart-mini .btn-secondary {
    display:block ;
    float:none ;
    margin:3% ;
    width:94% ;
  }

    

  .cart-form .cart-row .h2 {
    font-size:15px ;     
    margin-top:0px;
  }  

  .badges {
    margin-top:10px; 
  }
  .quantity, .quantity2 {
    margin-bottom:15px; 
  }

  .cart-row--infos .btn-secondary {
    display:none;
  }

  .cart-row--infos .btn-primary {
    display:block;
    width:100%;
    clear:both;
    margin-top:8px;
    float:none;
    font-size:17px;
  }
}

/*============================================================================
#Site Nav and Dropdowns
==============================================================================*/
.nav-bar {
  top: 110%;  
  left: 0;
  padding-left:0;
  padding-right:0;
  right: 0;  
  font-family: var(--accentFontStack);
  font-weight: 300;
  font-size:var(--navFontSize);
  
}

.nav-bar > div {
padding:0 !important;
}
.nav-bar {
  background-color: var(--colorNav);
}

.nav-bar a {
  color: var(--colorNavText);
  text-transform:inherit;
}
.nav-bar a:hover,
.nav-bar a:active,
.nav-bar a:focus {
  color: var(--colorNavTextHover);
  opacity: 0.9;
}

.nav-bar ul ul a:hover,
.nav-bar ul ula:active,
.nav-bar ul ul a:focus {
  color: var(--colorNavTextHover2);
  opacity: 0.9;
}

.site-nav {
  margin: 0;
  letter-spacing: var(--navLetterSpacing);
  cursor: default;
}
.site-nav li {
  margin: 0;
  position: relative;
  display: inline-block;
}
.site-nav li span.collapsible.in {
  display: inline;
}
.site-nav li li {
  display: block;
}
.header-transparent-true .nav-bar {
  background:var(--headerBackground);
}

@media screen and (min-width: 1024px) {
  .header-transparent-true .nav-bar {
    background:none;
  }
  .site-nav li li span.collapsible.in {
    display: none;
  }
}

.site-nav a, .site-nav span {
  display: inline-block;
  text-decoration: none;
  padding: 15px 7px;
  font-family: var(--accentFontStack);
  font-weight: var(--accentFontWeight);
}
.site-nav span.collapsible {
  padding:5px;
}

.site-nav a span.icon-fallback-text {
  display: inline;
  padding: 12px  2px 12px  4px;
}
.site-nav .site-nav--dropdown {
  text-align: left;
  min-width: 300px;
  margin: 0;
}
.site-nav .site-nav--dropdown > li > a {
  padding-left: 25px;
}
.site-nav .site-nav--dropdown .site-nav--dropdown {
  min-width: auto;
  margin-left: 4%;
  padding: 0;
  box-shadow: none;
  
}
.site-nav .customer-navlink {
  color: var(--colorNavText);
  margin-top: -1px;
  font-size: 0.9em;
}

.site-nav--dropdown {
  background-color: var(--colorNav2); 
}
.site-nav--dropdown a, .site-nav--dropdown a:hover, .site-nav--dropdown a:focus, .site-nav--dropdown a * {
  color: var(--colorNav2Text);
}

.nav-bar .wrapper { 
  max-width:1200px; 
  padding:0; 
}

.site-nav--submenu {
  margin:0 0 5px 0;
  padding:0;
  font-size:14px;
}

.site-nav--submenu li a:hover:before {
  transition: margin-left 0.3s;
  margin-left:3px;  
}
.site-nav--submenu a {
  font-size:0.9em;
  padding:3px 15px 1px 15px ;
  text-transform:initial ;
}
.site-nav a:before {
  content:"\f07a";
  padding-right:7px;  
  position:relative; 
  font-family:FontAwesome; 
  display:none;
}



.site-nav--dropdown a:before {
  display:none ; 
}
.site-nav .site-nav-icon-1 > a:before {
  display:inline-block;
  content:"\f0c9";
}
.site-nav .site-nav-icon-2 > a:before {
  display:inline-block;
  content:"\f0e0";
}
.site-nav .site-nav-icon-3 > a:before {
  display:inline-block;
  content:"\f059";
}
.site-nav .site-nav-icon-4 > a:before {
  display:inline-block;
  content:"\f0d1";
}
.site-nav .site-nav-icon-5 > a:before {
  display:inline-block;
  content:"\f09d";
}
.site-nav .site-nav-icon-6 > a:before {
  display:inline-block;
  content:"\f14b";
}
.site-nav .site-nav-icon-7 > a:before {
  display:inline-block;
  content:"\f015";
}
.site-nav .site-nav-icon-8 > a:before {
  display:inline-block;
  content:"\f075";
}

/*================ Large screen bar navigation ================*/
@media screen and (min-width: 1024px) {
  .nav-bar .search-bar {
    display: none;
  }
  .site-nav {
    text-align: left;
  }
  .site-nav > li {
    position: relative;
    display: inline-block;
  }
}

@media screen and (min-width: 1024px) {
  .site-nav--has-dropdown:hover span.collapsible.in i {
    transform: rotate(180deg);
  }
  .site-nav--dropdown {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;    
    opacity: 0;
    visibility: hidden;
    z-index: 20;
    transition: all 150ms;
  }
  .site-nav--dropdown .site-nav--dropdown {
    box-shadow: none;
    padding: 0;
  }
  .no-touch .site-nav--has-dropdown:hover .site-nav--dropdown, .site-nav--has-dropdown.nav-hover .site-nav--dropdown, .nav-focus + .site-nav--dropdown, .show-dropdown .site-nav--dropdown {
    opacity: 1;
    visibility: visible;
    transition: all 90ms;
  }
  .site-nav--dropdown .nav-focus .site-nav--dropdown {
    opacity: 1;
    visibility: visible;
    transition: all 90ms;
  }
  .site-nav--dropdown a {
    text-transform: none;
    padding: 6px 15px;
  }
  .site-nav--dropdown .site-nav--dropdown {
    padding-top: 0;
    padding-left: 7px;
  }
  .site-nav--dropdown .site-nav--dropdown a {
    text-transform: initial;
  }
}

/*================ Small screen nav styles ================*/

/*================ Medium-down screen nav styles ================*/
@media screen and (max-width: 1023px) {
  /*================ Menu items ================*/
  .nav-bar {
    position: fixed;
    z-index: 1000;
    transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95);
  }
  .show-nav .nav-bar {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95);
  }
  .nav-bar .search-bar {
    margin: 0 12px  12px ;
    width: auto;
  }
  .nav-bar .search-bar input[type="search"]::-webkit-input-placeholder {
    color: var(--colorNav);
}
  .nav-bar .search-bar input::-webkit-input-placeholder {
    color: var(--colorNav);
}
  .nav-bar .search-bar .search-bar--submit .fa {
    color: var(--sectionHeaderColorIcon1);
}
  .icon-hamburger:before {
    content: "\f0c9";
    font-family: FontAwesome;
  }
  .show-nav .icon-hamburger:before {
    content: "\f00d";
  }
  .site-nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .site-nav a {
    display: block;
    padding: 13px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .site-nav ul {
    margin: 0;
  }
  .site-nav ul ul a {
    padding: 8px 13px 13px 13px;
    border: none;
  }
  .nav-bar li {
    text-align: left;
    display: block;
    position: relative;
  }
  .nav-bar li li {
    border: none;
  }
  .nav-bar li span:hover {
    cursor: pointer;
  }
  .nav-bar li .level1, .nav-bar li .level2 {
    width: 49px;
    height: 49px;
    text-align: center;
    line-height: 49px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .collapsible {
    position: absolute;
    right: 0;
    top: calc(50% - (13px / 2));
    width: 13px;
    height: 13px;
  }
  .collapsible::before, .collapsible::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    background: var(--colorNavText);
  }
  .collapsible::before {
    width: 13px;
    height: 1px;
    opacity: 1;
  }
  .collapsible::after {
    width: 1px;
    height: 13px;
  }
  .collapsible.active::before, .collapsible.active::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .collapsible.active::before {
    opacity: 0;
  }
  .collapsible .fa-angle-down {
    display: none;
  }
  .site-nav--dropdown {
    display: none;
    margin: 0;
  }
  .site-nav--dropdown > li {
    float: none;
    width: 100%;
    border: none;
    text-transform: none;
  }
  .show-dropdown .site-nav--dropdown {
    padding-left: 10px;
    font-size: 85%;
  }
  .site-nav .site-nav--dropdown a {
    text-transform: initial;
  }
}
@media screen and (max-width: 749px) {
  .site-nav--submenu a {
    font-size: 1.1em;
  }
}


/*================ Dropdowns + megamenus ================*/

.dropdown_container {
  clear: both;
  width: 100%;
  overflow:hidden;  
  visibility:hidden;  
}

.dropdown_container img {
  max-width: 100%;
}

.dropdown {
  transition: all .4s ease-in-out;
  opacity:0;
  position: fixed;
  width: 100%;
  max-height:90vh;
  overflow:auto;
  z-index: 3000;
  color:var(--colorNav2Text);
  background:var(--colorNav2);
  box-shadow:0px 10px 10px rgba(111,111,111,0.1);
}
.dropdown_open .dropdown {
  opacity:1;
}
.dropdown.no-fixed {
  position:absolute; 
  top:0;
}
.dropdown_open {  
  visibility:visible;  
}

.dropdown_content {
  padding-top:15px;
  display:flex;
  flex-wrap:wrap;
}

.mega-menu__richtext,
.mega-menu__image-caption-link {
  padding: 0;  
}

.mega-menu__richtext img,
.mega-menu__image-caption-link img {
  margin-bottom: 10px;
}

.mega-menu__richtext a {
  display: inline;
  text-transform: none;
}

.mega-menu__image-caption-link {
  text-align: center;
  margin-bottom: 10px;
}
.mega-menu__image-caption-link a {
  text-transform: none;
  display: block; 
  color:var(--colorNav2Text);
}

.dropdown_content a p {
  padding: 0;
  color:var(--colorNav2Text);
}

.dropdown_content p {  
  color:var(--colorNav2Text);
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative;
  display: block;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
  margin-bottom: 0;
}    

.dropdown_column__menu + .dropdown_column__menu {
  margin-top: 10px;
}

.dropdown_narrow {
  width: 60%;
}

.dropdown_column {
  padding:0 var(--gutter-half) var(--gutter-half);
}
.dropdown_column img {
  max-width: 100%;
}

.dropdown_column .dropdown_title {   
  border-bottom:1px solid var(--colorMegamenu);
  padding-bottom: 10px;
}

.dropdown_column .dropdown_item {
  text-align: center;
}
.dropdown_column ul {
  margin: 0;
  padding: 10px 0 0 0;

}

.dropdown_column li {
  display: block;
}
.dropdown_column li a, .dropdown_column li a:hover, .dropdown_column li a:active {
  padding-bottom: 0;
  text-transform: none;
  color:var(--colorNav2Text);
}
.dropdown_column li a:hover, .dropdown_column li a:focus, .dropdown_column li a:active {
  color: var(--colorNavTextHover2);
}

.dropdown_row {
  display:table-row;
}
.icon-arrow-down {
  position: relative;
  top: -2px;
  font-size: 12px;
}

.site-nav--dropdown .site-nav--dropdown {  
  margin: 0;
  position:relative;
  top:auto;
  left:0;
  border:none; 
  
  
}
.site-nav--dropdown .icon-arrow-down {
  display: none ;
}

/*============================================================================
#Mobile Nav Bar
==============================================================================*/
#mobileNavBar {
  padding: 3px 0;
  display: none;
  width: 100%;
  background-color: var(--headerBackground);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

}
#mobileNavBar .header-grid__nav {
  flex: 1 0 calc(25% - 12px);
  padding-left: 12px;
}
#mobileNavBar .header-grid__logo {
  flex: 1 0 50%;
  padding-top:4px;
  padding-bottom:4px;
  text-align: center;
  justify-content: center;
}
#mobileNavBar .header-grid__links {
  flex: 1 0 25%;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 1023px) {
  #mobileNavBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
  }
}
.template-product .is_desktop {
  display: block;
}
.template-product .is_mobile {
  display: none;
}
.no-mobile a {
  display: inline;
  border-radius: 2px;
}

.mobile-link-logo img {
  width:auto;
  max-width: 100%;
  max-height: 40px;
  margin: 0 auto;
  display: block;
}
.mobileNavBar-link {
  background:none;
  border:none;
  box-shadow:none;
  display: flex;
  align-items: center;
  color: var(--headerText);
  cursor: pointer;  
}
.mobileNavBar-link:hover, .mobileNavBar-link:focus {
  color: var(--headerText);
}
.mobileNavBar-link .menu-toggle-text {
  font-size: 13px;
  letter-spacing: -1px;
}
.mobileNavBar-link.menu-toggle .icon {
  font-size: 20px;
  margin-right: 5px;
}
.mobileNavBar-link.menu-toggle .lt-ie9 {
  background-image: none;
  padding-left: 0;
}

/*============================================================================
#Breadcrumbs &navproducts 
==============================================================================*/
.breadcrumb {
  overflow: hidden;
  font-size: 13px; 
  padding:var(--gutter-quarter) 0;
  margin: 0 auto 0 auto;   
  margin-top: var(--gutter-quarter);   
  border-bottom: 1px solid var(--color-text-body-opacity1);
}
@media screen and (max-width: 1023px) {
  .breadcrumb {
    height: auto;
  }
}
.breadcrumb a {
  font-size: 12px;
  color: var(--colorTextBody );
}
.breadcrumb a:hover {
  color: var(--colorTextBody );
}
.breadcrumb a, .breadcrumb span {
  display: inline-block;  
}
.breadcrumb a:first-child, .breadcrumb span:first-child {
  padding-left: 0;
}
.breadcrumb .divider {
  font-size: 15px;
  font-family: var(--bodyFontStack);
  padding: 3px 3px 3px 0;
  color: #767676;
}
.breadcrumb-links {
  margin: 0;  
}

@media (max-width: 749px) {
 
  .breadcrumb {
    margin:calc(var(--gutter) / -2) auto 0 auto; 
    overflow: hidden; 
    padding:0;
    border:none;
  }
  .breadcrumb-links {
    display: none;
  }
}

/*============================================================================
#Search
==============================================================================*/

.search-results {
  left: auto ;  
  width:255px ;
  z-index:1000;
  border:1px solid var(--searchAutoCompleteBorder) ; 
  background:var(--searchAutoCompleteBg) ; 
  color:var(--searchAutoCompleteColor);
}

.search-results .title,
.search-results .title:hover {
  color:var(--searchAutoCompleteColor) ;
}
.template-search .search-result .sale-tag { display:none; }

.search-results li a {
  display:block;
}
.search-results li {
  border:1px solid var(--searchAutoCompleteBorder) ; 
}
.search-results li a span, .search-results .title a {
  color:var(--searchAutoCompleteColor) ;
    opacity:0.8;
}
.search-results li a span img {
  width:100%;
  height:auto;
}
.search-results .title {
  width:85%;
}
.search-results li:last-child .title {
  text-align:left; 
  width:85%;
}
.search-results li a:hover span, .search-results .title a:hover {
  color:var(--searchAutoCompleteColor) ;
    opacity:1;
}
.search-results { 
  width: 242px;
  margin: 0;
  padding: 0; 
  overflow: hidden;
}
.search-results li {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0; 
  line-height: 38px;
  overflow: hidden;
}
.search-results li:first-child {
  border-top: none;
}
.search-results .title {
  float: left;
  font-size:11px;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;  
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-align: left;
}
.search-results .thumbnail {
  float: left;
  display: block;
  width: 32px;
  height: 32px;    
  margin: 3px 0 3px 3px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

@media screen and (max-width: 749px) {
  .search-results {
    right:auto;
    left:0;
  }
}


.is-added-hide:before { display:none ; }  

a.remove {
  display: inline-block;    
  font-size: 21px;
  text-align: center;
  border: 0 none;  
  @media screen and (max-width: 749px) {
    font-size: 17px;
  }
}
/*
.header-cart a {
  color:var(--headerCartColor);
}
.header-cart a.remove {
  position: absolute;
  top: 0;
  right: 0px;
  height: 25px;
  width: 30px;
  padding: 0;
  background: none;
}
.header-cart a.remove i {
  color:var(--headerCartColor);
    font-size:17px;
}
*/
/*================ Ajax Cart ================*/

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

  .ajaxify-modal .ajaxifyCart--content {
    margin-top: 0;
    margin-bottom: 0;  
  }

}

/*============================================================================
#Footer
==============================================================================*/
.site-footer {
  background-color: var(--colorFooterBg);
  padding: var(--gutter) 0 var(--gutter-half) 0;
  color: var(--colorFooterText);  
  overflow: hidden;
  font-size:1.5rem;
}

footer .grid-uniform {
  margin-left: auto;
  margin-right: auto;
}

.site-footer .wrapper {
  padding-bottom:0;
}

@media screen and (min-width: 1024px) {
  .site-footer .grid-flex {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
}

.site-footer .block-title {
  color: var(--colorFooterTitle);
  margin: 0 0 1.6rem 0;
  text-align: left;
}
.site-footer a {
  color: var(--colorFooterText);

}
.site-footer li a {
  margin-left: -10px;
  padding: 5px 10px;
  display: block;
}
.site-footer li:first-child a {
  padding-top:0; 
}
.site-footer .inline-list li a {
  margin-left: 0;
  padding: 0 5px;
  display: inline;
}
.site-footer .fa {
  min-width: 16px;
  text-align: center;
}
.site-footer .btn {
  flex:1 0 auto;
  min-width: auto;
  color: var(--colorFooterBgBtnText);
  background-color: var(--colorFooterBgBtn);
  border-radius: 0 var(--radius) var(--radius) 0; 
}
.footer-section input[type="email"] {
  border-radius: var(--radius) 0 0 var(--radius);
  height: 38px;
  background-color: var(--colorFooterBgInput);
  color: var(--colorFooterBgInputText);
}

.site-footer .legal-links li, .site-footer .social-icons li {
  display: inline;
}
.site-footer .legal-links li a {  
  margin-right: 8px;
  padding: 0;
  text-align: left;
  display: inline;
}
.site-footer form {
  margin-bottom: 15px;
}

.site-footer .grid {
  margin: 0 auto;
}

.payment_methods img {
  padding-right: 4px;
  width: 42px;
  display: inline-block;
}
.site-footer .grid-item p.cgv-text {
  margin: 12px 0 0 0;
  padding: 0;
  line-height: inherit;
}
.contact-form .input-group {
  display:flex;
  max-width: 304px;
  margin-bottom: 6px;
}
.site-footer .contact-form .input-group { 
  max-width: 360px;
}
.site-footer .cgv-text label {
  font-size: 11px;
}
.site-footer .grid-item p.newsletter-form-rgpd, p.newsletter-form-rgpd {
  font-size: 11px;
  clear: both;
  width: 100%;
  padding: 7px 0 0 0;
  margin: 0;
  line-height: inherit;
}
p.newsletter-form-rgpd {
  font-size: 11px;
}
p.newsletter-form-rgpd a {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 3px; 
  display: inline;
  padding: 0;
  margin: 0;
}
.site-footer .footer-bottom {
  padding-top:4px;
  font-size:14px;
}
.site-footer .footer-bottom * {
 margin-bottom:0;
}
.payment_methods {
  justify-content:flex-end;
  display:flex;
}
.payment_methods img {
  padding-right: 4px;
  display:inline-block;
  width: 50px;
}
.footer-logo { 
  max-width: 100%; 
}

@media screen and (max-width: 749px) {
  .site-footer .footer-bottom {
    text-align:center;
  }
  .site-footer .social-icons li {
    margin: 0;
  }
  footer .grid-item {
    font-size: 12px;
  }  
  .site-footer {
    font-size: 13px;
  }
  .footer-logo {
    display: block;
    margin: 0 auto;     
  }
  .contact-form .input-group {
    max-width: 100%;
  }
  .payment_methods {
    justify-content:center;
    margin-top:1rem;
  }
  .legal-links { text-align:center; }
}

/*============================================================================
#templateproduct
==============================================================================*/

.product-form-layout-1 {  
  border:1px solid rgba(0,0,0,0.1);
  background:rgba(0,0,0,0.05);
  margin:15px 0;
  padding: 1.8rem 1.4rem 0 1.4rem;
}

.product-form-layout-1 .cont-selector {
  display:flex;
  justify-content:space-between;
}

.product-form-layout-1 .selector-wrapper {
 width:48%; 
} 

.swatch-container {
  display:none !important;
}
.product-form-layout-2 .header-number {
  display:inline-block;  
  line-height:inherit;  
  min-width: calc(var(--baseFontSize) * 1.5);
  min-height: calc(var(--baseFontSize) * 1.5);
  background:rgba(0,0,0,0.1);
  border-radius:50%;
  margin-right:10px; 
}
.product-form-layout-2 .product-form {
  margin-top:10px; 
}
.product-form-layout-2 .cont-selector .selector-wrapper {
  width:100%; 
  flex-direction:row;
  flex:0 0 100%; 
}

.product-form-layout-2 .cont-selector .selector-wrapper:nth-child(2n) {
  padding-left:0;  
}

.product-form-layout-2 select {
  border-radius: var(--btnBorderRadius);
  box-shadow:0 0 7px rgba(0,0,0,0.1);
  margin:0; 
  flex:1;
}

.product-form-layout-2 .swatch, .product-form-layout-2 .selector-wrapper, .product-form-layout-2  .quantity-wrapper { 
  border-top:1px solid rgba(0,0,0,0.2);
  display:flex;
  flex:1;
  flex-wrap:wrap; 
  padding:12px 0; 
}

.product-form-layout-2  .quantity-wrapper .js-qty {
  margin-bottom:0;
  margin-left:5px;
  box-shadow: 0 0 7px rgb(0 0 0 / 10%);
  flex:1;
}


.product-form-layout-2 .swatch .swatch-element {
  margin:5px;
}

.product-form-layout-2 .header, .product-form-layout-2 label, .product-form-layout-2 .quantity-selector {
  display:flex;
  flex:0 0 52%;
  
}

.product-form-layout-2 .form-infos .quantity-selector {
  margin-bottom:10px;
}
.product-form-layout-2 .header-number {
  display:flex;
  align-items:center;
  justify-content:center;

}
.product-form-layout-2 .cont-badges-star .spr-badge-caption {
 font-size:13px !important; 
}

.product-form-layout-2 .selector-wrapper label, 
.product-form-layout-2 label.quantity-selector, 
.product-form-layout-2 .swatch .header { 
  font-weight:normal; 
}

.product-grid-item .product-form  {
  margin-top:1rem;
}


@media screen and (min-width:750px) {
  .product-form-layout-2 .swatch .swatch-inner {
    flex:1;
    display: flex; 
  }
  .form-actions {
    display:flex;
    align-items:center;
  }
  .text-center .form-actions {
    justify-content:center; 
  }
  .form-actions .js-qty {
    margin:0 15px 0 0; 
  }

  .form-infos {
    display:flex; 
    align-items:center;    
  }

  .form-infos-1-button {
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:1rem;
  }

  .form-infos-1-button .full-width {
    flex:1;  
  }

  .form-infos-1-button .full-width button {
    width:100%;
  }
  
  .form-infos-2-buttons {
    display:block;
  }
  .product-form-layout-1 .form-actions {
    flex:1;
  }
  .product-form-layout-1 .form-infos {
    border-top:none;
    justify-content:flex-start;
  }
  .product-form-layout-1 .quantity-selector {
    margin-right:15px;
  }
  .form-infos .cont-badges-star, .form-infos .product-meta .show-saved-amount-true {
    border-left:1px solid rgba(0,0,0,0.2);
    margin-left:10px;
    padding-left:10px;
    display:flex;
  }
  
  .product-cont-header2 .form-infos * {
    margin-bottom:0; 
  }
  
  .product-form-layout-2 .header, .product-form-layout-2 label, .product-form-layout-2 .quantity-selector {
    display:flex; 
    flex:0 0 36%;  
    align-items: flex-start;
  }
  
}
@media screen and (max-width:749px) {
  .product-form-layout-2 .quantity-selector {
    margin-bottom:12px;
  }
}

.shopify-section .section-id-product-template .product-form-layout-2 .form-actions .btn  { 
  font-size:17px !important; 
}

.section-id-advanced-content { overflow:hidden; }

/*============================================================================
#Sections
==============================================================================*/

.shopify-section .custom-content {
  text-align:center;
}

/*============================================================================
#components
==============================================================================*/

/* helper for intersection observer */
#pixel-to-watch {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 100px;
  left: 0;
}

.component-product-rte {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
  box-shadow: 0 0 7px rgba(0, 0, 0, .25);
  padding: 2rem;
}
.component-product-rte__title {
  font-size: 110%;
  font-weight: bold;
}
.component-product-rte .btn { 
  flex: 1 0 auto;
  max-width: 200px;
}
@media screen and (min-width: 750px) {
  .component-product-rte {
    flex-direction: row;
  }
  /*.component-product-rte__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:2rem;
    flex-direction: column;
  }*/

}

/* Qty Selector */
.custom-selector-qty {
  color: var(--productQtyColor);
  background: var(--productQtyBgColor); 
  display:flex;
  max-width: 150px;
  justify-content: space-between;
  align-items: center;
  border:1px solid var(--colorBorder);
}

.custom-selector-qty input {
  color: var(--productQtyColor);
}

.custom-selector-qty input::-webkit-input-placeholder, .custom-selector-qty input::-moz-placeholder, 
.custom-selector-qty input:-ms-input-placeholder, .custom-selector-qty input:-moz-placeholder {
  color: var(--productQtyColor);
}

@media screen and (max-width: 749px) {
  .template-cart .custom-selector-qty {
    display:flex;
    max-width: 90px;
  }
}

.custom-selector-qty input {
  border:none;
  text-align: center;
  min-height: auto;
  padding:0;
  width:40px;
  text-align:center;
}

.custom-selector-qty input::-webkit-outer-spin-button,
.custom-selector-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-selector-qty span {
  display: block;
  text-align: center;
  width:40px;
  padding:5px;
  cursor: pointer;
  font-size: 21px;
}

/* Mini cart */
.mini-cart-modal-overlay {
  position: fixed;
  width: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3000;
  background: rgba(0,0,0,.15);
  display:flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
}
.mini-cart-modal {
  z-index: 3001;
  position: fixed;
  visibility: hidden;
  top: 0;
  right: 0;
  visibility: hidden;
  display:flex;
  justify-content: flex-end; 
  align-items: flex-start;
  height: 0;
}
.mini-cart-modal.open, .mini-cart-modal-overlay.open {
  visibility: visible;
  opacity: 1;
}
.mini-cart-modal-overlay.open { 
  height: 100%;
}
#mini-cart-close-modal {
  background: none;
  border: none;
  font-size: 21px;
}
.mini-cart__v2 {
  border:1px solid var(--headerCartBorder);
  background:var(--headerCartBg);
  color:var(--headerCartColor);
  max-height: 100vh;
  flex-wrap: nowrap;
  overflow: auto;
  max-width: 600px;
  min-width: 300px;
  background: var(--headerCartBg);
  transition: all .6s ease-in-out;
  overflow: hidden;
  height: 0;
  padding:0;
  transform: translateY(-200px);
}
.mini-cart__v2.visible {
  overflow: auto;
  height: auto;
  transform: translateY(0);
}
.mini-cart__v2 .h3 {
  display:flex;
  align-items: center;
  gap:7px;
}
.mini-cart__v2 .cart-count {
  position: relative;
  top:0;
}
.mini-cart__header, .mini-cart__items, .mini-cart__footer {
  padding:1rem 1rem 0;
}
.mini-cart__header {
  display: flex;
  justify-content: space-between;
}
.mini-cart__footer {
  text-align: right;
}
.mini-cart__footer span {
  font-weight: bold;;
  font-size: 110%;
}

.mini-cart__items {
  flex-grow: 1;
  flex-basis:0;
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  flex-wrap: nowrap;
  overflow: auto;
}
.mini-cart__item {
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap:10px;
  padding: .5rem 0;
}
.mini-cart__items img {
  height:auto;
  width:10%;
}
.mini-cart__item-title {
  font-size: 15px;
  line-height: 1;
  width:35%;
}
.mini-cart__item-prices {
  width:20%;
  text-align: right;
}
.mini-cart__remove-item {
  background: none;
  border:none;
  font-size: 21px;
  width:5%;
}
.mini-cart-btns {
  margin-top:1rem;
  display: flex;
  gap:0;
}
.mini-cart-btns a {
  border-radius: 0;
  flex:1 0 50%;
  display: flex;
  gap:7px;
  justify-content: center;
}
.title-with-lines {
  box-sizing:border-box; 
  display:flex;
  align-items:center;
}
.title-with-lines::before {
  content:"";
  width:50%;
  height:1px;
  margin-right:10px;
  background:#333;
}
.title-with-lines::after {
  content:"";
  width:50%;
  height:1px;
  margin-left:10px;
  background:#333;
}
@media screen and (max-width: 749px) {
  .mini-cart__items .custom-selector-qty {
    display:flex;
    max-width: 90px;
  }
  .cart-item-1 {
    width:40%;
  }
  .mini-cart__item-title {
    font-size: 12px;
  }
  .custom-selector-qty span {
    width:30px;
    padding:0;
  }
  .mini-cart-btns a {
    font-size: 15px;
    padding-left: var(--gutter-quarter);
    padding-right: var(--gutter-quarter);
  }
}

/* Custom Upsells */
.cart__upsells {
  max-width: 600px;
  margin: 0 auto;
}
.template-cart main .cart__upsells--border {
  border:1px solid #333;
  padding:1rem;
}
.product__upsells {
  padding:1rem;
}
.product__upsells__header {
  text-align: center;
  font-weight: bold;
}
.product__upsell {
  display:flex;
  align-items: center;
  flex-direction: row;
    justify-content: space-between;
  gap:10px;
  padding:1rem 0;
  font-size: 15px;
}
.product__upsell-img img {
  max-width: 35px;
}
.product__upsell__form {
  flex:1 0 20%;
}
.product__upsell a {
  color: initial;
  display:inline-flex;
  line-height:1;
  font-size:12px;
}
.product__upsell select, .product__upsell button {
  margin:0;
  padding:10px;
  min-height: 25px;
  font-size:15px;
}
.product__upsell button {
  margin:7px 0 0 0;
}
.product__upsell .quantity-wrapper {
  display: none;
}
.product__upsell .form-int {
 padding:0;
}
.product__upsell form {
 
  margin:0;
  min-width: 163px;
}

.template-cart .cart__upsells:not(.mini-cart-product) {
  max-width: 100%;
  display: flex;
 
}

.template-cart .cart__upsells .product__upsells {
  width: 100%;
  display: flex;
  column-gap:2rem;
  flex-wrap: wrap;
}
.template-cart .cart__upsells .product__upsells__header {
  flex:1 0 100%;
}

@media screen and (max-width: 749px) {
  .product__upsell:nth-child(n+4) {
    display: none;
  }
  .product__upsell form select {
    font-size:12px;
  }
}

@media screen and (min-width: 750px) {
  .template-cart .cart__upsells .product__upsell {
    display: inline-flex;
    flex: 0 0 49%;
  }
  .template-cart .mini-cart-product {
    max-width: 600px;
  }
  .template-cart .mini-cart-product .product__upsell {
    flex:1 0 100%;
  }
  .product__upsell a {
    font-size:15px;
  }
  .product__upsell__form {
    flex:0 0 30%;
  }
  .product__upsell form {
    min-width: 200px;
  }
  .product__upsell-img img {
    max-width: 65px;
  }
}

/* Read more */
.read-more-btn {
  margin-bottom:2rem;
}
.read-more-btn::before {
  content:"+";
  margin-right:5px;
}
.read-more-btn.active::before {
  content:"-";
  margin-right:5px;
}
div.read-more {
  display:none;
  width: 100%;
}
div.read-more.show {
  display:block;
}

/* back to top */

.toTop {  
  position:fixed;
  bottom:20%;
  right:10px;
  cursor:pointer;
  background: var(--colorBackToTop2);
  color:var(--colorBackToTop1);
  width:42px;
  height:42px;
  font-size:22px;
  line-height:40px;
  text-align:center;
  border-radius:50px; 
}

/* accordion */

.accordion .accordion__title {
  cursor:pointer;
  font-weight:bold;
}
.accordion .collapse {
  max-height:0;
  overflow:hidden; 
}

.accordion .collapse.in {
  max-height:initial;
  overflow:visible;  
}

.accordeon-panel-title {
  text-align: left;
  padding: 7px 0;
  margin: 5px 0;
}
.accordeon-panel-title .fa {
  transition: all 0.4s; 
  float: right;
  opacity: 0.9;
}
.accordeon-panel-title.accordeon-open .fa-chevron-down {
  transform: rotate(180deg);
}

.accordeon-panel-hidden { display:none; text-align:left;}
.accordeon-panel-show { display:block; max-width:100%; }

.rm-wrapper {
  display: none;
}

.rm-btn {
  margin: 10px 0 !important;
}

/*============================================================================
#modules et plugins
==============================================================================*/

.template-index .image-zoom {
  display: block;
  cursor: crosshair;
}

.shopify-challenge__container {
  padding:var(--gutter)
}

.shopify-challenge__container .shopify-challenge__button {
  margin-top:var(--gutter) !important;
} 

/*============================================================================
#featured-box
==============================================================================*/

.featured-box {
  position: relative;
  display: flex;
  flex:1;
  flex-direction:column;
}

.featured-box .featured-box--title {
  color: var(--sectionCollectionColorText);
  text-align: center;
  padding: 10px 15px;
  transition: all 0.3s ease-in;
  z-index: 2;
  left: 0;
  right: 0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  background: var(--sectionCollectionColorBg);
}

.featured-box:hover .featured-box--title {
  color: var(--sectionCollectionColorTextHover);
  background: var(--sectionCollectionColorBgHover);
}
@media screen and (max-width: 749px) {
  .featured-box .featured-box--title {
    padding: 6px 10px;
  }
}
.collection-position-title-0 .featured-box .featured-box--title {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /* color: var(--sectionCollectionColorText); */
  bottom: auto;
  margin: 0 10px;
}
.collection-position-title-1 .featured-box .featured-box--title {
  position: relative;
  margin: 0;
   /*color: var(--sectionCollectionColorText); */
}
.collection-position-title-2 .featured-box .featured-box--title {
  display: none;
}
.collection-position-title-3 .featured-box .featured-box--title {
  position: absolute;
  text-align: left;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
}
.collection-position-title-4 .featured-box .featured-box--title {
  position: absolute;
  text-align: right;
  top: 10px;
  left: auto;
  right: 10px;
  bottom: auto;
}
.collection-position-title-5 .featured-box .featured-box--title {
  position: absolute;
  top: 10px;
  /*color: var(--sectionCollectionColorText); */
  bottom: auto;
  margin: 0 5%;
}
.collection-position-title-6 .featured-box .featured-box--title {
  position: absolute;
  top: auto;
  bottom: 20px;
  margin: 0 10px;
}
.collection-position-title-7 .featured-box .featured-box--title {
  position: absolute;
  text-align: left;
  top: auto;
  left: 10px;
  right: auto;
  bottom: 20px;
}
.collection-position-title-8 .featured-box .featured-box--title {
  position: absolute;
  text-align: right;
  top: auto;
  left: auto;
  right: 10px;
  bottom: 10px;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}
.featured-box img, .featured-box svg {
  display: flex;
}
/*.featured-box:hover img {
  transition: all 6s ease-in-out;
  transform:scale(1.1) rotate(-0.5deg);
}*/
.cont-featured-box {
  margin-bottom: 15px;
  padding: 10px 0;
  max-width: 588px;

}
.cont-featured-box-no-qty {
  margin-top: 0;
  padding: 10px 0;
}

/*============================================================================
#Sliders
==============================================================================*/
/*.slick-slider {
  display:none;
}
.slick-initialized {
  display:block;
}
.slick-slider * {
  opacity:0;
}
.slick-initialized * {
  opacity:1; 
}*/

.slider video, .slider iframe {
  max-width:100%; 
}
.slick-slide, .slick-slide * { outline:none ; }

.slick-slide {
  position:relative; 
  margin:0;
  overflow:hidden;
} 

.grid-uniform .slick-slide, .cont-slider .slick-slide  { 
  padding:8px;
} 

.slick-prev, .slick-next {
  border:none;   
  cursor:pointer;
  position:absolute;
  transform: translateY(-48%);
  top: 48%;
  left:-15px;
  background:none;
  width:48px; 
  font-size:0;
  z-index:10;
}

.slick-prev:after, .slick-next:after {
  font-family: FontAwesome;
  display:block;   
  color: var(--slider_angle);
  font-size:65px;
}

.slick-prev.slick-disabled, .slick-next.slick-disabled {
  display:none !important;
}
.slick-prev {
  left:0;
}

.slick-prev:after {
  content: "\f104";
}
.slick-next {  
  left:auto;
  right:0; 
}
.slick-next:after {
  content: "\f105";
}

.slick-dots {
  padding:10px 0;
  display:flex; 
  justify-content:center; 
  flex-wrap:wrap;
}
.slick-dots li {
  margin:0 4px;
}
.slick-dots button {
  position:relative;
  font-size:0;
  width:20px;
  height:20px;
  background:none;
  border:none;
  text-align:center;
  padding:0;

}
.slick-dots button:before {  
  font-size: 30px;
  line-height: 20px;
  display: inline;
  top: 0;
  content: "•";
}

/* section slideshow */
.slider-product-thumbnails {
  margin:0 -5px;
}
.grid-content .slider-product-thumbnails .slick-slide {
  cursor: pointer;
  padding:5px !important;
}
.slider-product-thumbnails .slick-slide img {
  opacity: 0.7;
}
.slider-product-thumbnails .slick-current img {
  opacity: 1;
}
.slider-product-thumbnails .slick-prev:after, .slider-product-thumbnails .slick-next:after {
  font-size: 25px;
}

.slick-vertical .slick-prev, .slick-vertical .slick-next {
  position:relative;
  width:100%;
  text-align:center;
  transform: translateY(0) rotate(90deg);
  top: auto;
  height:25px;
  overflow:hidden;
}
.sslick-vertical .slick-prev:after, .slick-vertical .slick-next:after {
  display:inline-block;
}
.slider-container .slider-product-thumbnails {
  width: 16.633%;
  padding-right: 5px;
}
.slider-container .slider-product {
  width: 83.366%;
}

.cont-slider {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.cont-slider .form-grid {
  text-align: center;
}

.cont-slider .addToCart, .cont-slider .addToCartBis, .cont-slider .addToCart2, .cont-slider .addToCart, .cont-slider .form-grid-btn {
  margin: 0 auto;
  display: block;
  font-size: 14px;
}
.cont-slider .cont-atc .addToCart, .cont-slider .cont-atc .addToCartProduct {
  display: block;
}
.cont-atc-2 .btn {
  width:100%;
}
@media screen and (max-width: 749px) {
  .cont-slider .cont-atc .addToCart, .cont-slider .cont-atc .addToCartProduct {
    font-size: 80%;
  }
}
.cont-slider h3 {
  font-size: 17px;
}
.cont-slider .grid-uniform:after {
  display: none;
}
.cont-slider .grid-uniform * {
  clear: none;
}



.zoom {
  font-size: 1.3vw;
  transition: transform 0s linear;
}

.zoomImg {
  min-width:515px ; 
  min-height:515px ; 
}

.modal-container-image {
width:100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height:100vh;
  z-index:10000;
}
/*
.modal-container-image::after {
content:"";
display:block;
position:fixed;
top:50vh;
background:#000;
height:50vh;
width:100%;
}*/
.modal-container-image img {
  width: initial;
  flex: 1 0 200%;
  max-width: 1000px;
  max-height: 100%;
  height: auto;
}

/* Ajoute des styles pour la barre de défilement */
.modal-container-image::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.modal-container-image::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}

.modal-container-image::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.modal-container-image button {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: transparent;
  color: white;
  border: none;
  font-size: 21px;
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  cursor: pointer;
  color:var(--colorBody);
  border-radius:50px;
  background:var(--colorTextBody);
}



.logo-link {
  overflow:hidden;
  color:var(--headerText);
  text-align:center;
  font-size:140%;
}

#break-desc { overflow:hidden; }

@media screen and (min-width: 1024px) {
  .mega-menu-on {
    display:none ;
  } 
}

.template-product .cont-content {
  overflow:hidden; 
}

@media screen and (max-width: 360px) {
  .template-product .product-meta .h1 {
    font-size:19px ;
  }
  .inline-list li {
    line-height:inherit; 
  }
  .template-product .product-meta .h1 s {
    font-size:14px ;
  }  
}

/*============================================================================
#Swatches
==============================================================================*/



@media screen and (max-width: 749px) {
  
}
/*
.swatch { 
  margin:5px 0; 
}
.swatch .header,
.quantity-selector, .selector-wrapper label {
  font-weight:bold;
  margin: 0.5em 0;
  color:var(--variantLabel);
}
.swatch .swatch-inner {
  display:flex;
  align-items:center;
  flex-wrap: wrap;
}
.text-center .swatch .swatch-inner {
  justify-content: center; 
}
.swatch input { 
  display:none;
  margin:0;
  padding:0;
  float:left;
}
.swatch label {
  -webkit-border-radius:2px;
  -moz-border-radius:2px; 
  min-width:30px ;  
  margin:0; 
  color:var(--swatchBtnColor);
  border:var(--swatchBtnBorderColor) 1px solid;
  background-color:var(--swatchBtnBgColor);
  border-radius: var(--btnBorderRadius);    
  text-align:center;
  line-height:inherit;
  text-transform:uppercase;
}
.swatch-element label { 
  display:inline-flex;
  line-height:initial;
  padding:6px 10px; 
  box-shadow:var(--variant-box-shadow);
}  

.swatch-element label.disabled {
  opacity:.5;
}
.swatch-element label.disabled:hover {
  cursor: not-allowed;
}
.color.swatch-element label { padding:0; }

.swatch input:checked + label {
  color:var(--swatchBtnColorHover);
  border:var(--swatchBtnBorderColorHover) 1px solid;
  background-color:var(--swatchBtnBgColorHover);
  margin:0; 
} 

.swatch .swatch-element {  
  margin:0px 10px 10px 2px;
  position:relative;
}

.swatch .tooltip {
  text-align:left;
  background:#404040;
  line-height:inherit;
  color:#fff;
  font-size:14px;
  bottom:100%;
  padding: 5px 10px;
  display:block;
  position:absolute;
  width:88px; 
  margin-bottom:15px;
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;   
  transform: translateY(10px); 
  transition: all .25s ease-out;  
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 1000; 
  box-sizing:border-box;
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid #404040 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:27%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2;
  color:#333;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}


@media screen and (max-width: 749px) {
  .swatch .swatch-element {
    margin:4px ;      
    white-space: normal;
  }
  .swatch .swatch-element label {   
    text-transform:initial;
  }
  .swatch .swatch-element label img {   
    max-width:90px;
  }
}
*/
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; opacity: .7; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch label.disabled .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); 
  -khtml-opacity: 0.6;      
  -moz-opacity: 0.6;       
  opacity: 0.6; 
  cursor: not-allowed;      
}
/*============================================================================
#Product Page
==============================================================================*/

.cont-photos { 
  margin:0 auto; 
  max-width:800px; 
}

@media screen and (min-width: 750px) {   
  .cont-photos { 
    padding-right:3rem;
  }
}

.cont-photos .slideshow { 
  overflow:hidden; 
}

/*================ Select fields ================*/
.no-js .product-variants {
  display: block;
}
.selector-wrapper label, label.quantity-selector { font-weight:bold; }


.text-center label.quantity-selector { display:none; }
@media screen and (min-width: 1024px) {
  .selector-wrapper,
  .product-variants select {
      max-width: 380px;
  }
}

.badges-center {
  text-align:center; 
}
.wrapper1 {
  padding:calc(var(--gutter) / 2) 0;
}
.wrapper1, .wrapper2 {
  clear:both;
  overflow:hidden;
}

.product-meta s {
  font-size:0.8em; 
  margin-top:-3px;
}

.discount-table th, .discount-table td {
  padding:5px 10px; 
}
.discount-table th p, .discount-table td p {
  margin:0;
}

/*================ Product details ================*/
#productPrice {
  font-size: 32px;
  margin-bottom: 0;
}

.product-meta {
  margin-bottom: 5px;
}
.product-meta-info * {  
  font-size:14px;
  flex:1;
 }

.product-meta-info a {
 color:inherit;
 font-size:14px;
}
.product-meta-info:after, .product-meta-info a:after {
  content:"-";
  margin:0 3px;
  display:inline-block;
}
.product-meta-info:last-child:after {
  display:none;
}

.product-meta .product-meta--review {
  display: block;
}
.product-meta span {
  margin-bottom: 0;
}
@media screen and (min-width: 750px) {
  .product-meta {
    display: flex;
    align-items: center;
  }
  .product-meta .product-meta--review {
    display: flex;
    border-left: 1px solid rgba(0,0,0,.2);
    margin-left: 1rem;
    padding-left: 1rem;
    padding-right: 0;
  }
}

.text-center .product-meta {  
  justify-content:center;
}

.product-meta .h1 {
  color:var(--colorPrice2);
  margin-right:10px;
}
.product-item--price .product-item--sale-price, .template-cart .main-content span.h5, .product-meta .h1 {
  color:var(--colorPrice);  
  font-size:var(--priceFontSize);
}
.product-meta .h1 s, .product-item--price s, .product-item--price s .product-item--sale-price, .product-item--price s small,  .template-cart .main-content span.h5 s  {
  color:var(--colorPrice2);
  font-size:var(--priceFontSizeSmall);
}

.sale-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 5px 7px;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  border-radius: 0;
  vertical-align: text-bottom;
  color: var(--colorPriceText);
  background:var(--colorPriceBg); 
}

.grid-uniform .sale-tag, .cont-slider .sale-tag {
  opacity: 0;
}
@media screen and (max-width: 749px) {
  .sale-tag {
    padding: 5px 3px;
    font-size: 12px;
  }
}
.image-border-radius-true .sale-tag {
  padding: 10px 15px 5px 15px;
  font-size: 13px;
}
.sale-tag sup {
  display: none;
}
.sale-tag.large {
  font-size: 16px;
  padding: 0px 8px;
}
.sale-tag.has-reviews {
  margin-bottom: 8px;
}
.grid-uniform .grid-item:hover .sale-tag, .slick-list .slick-slide:hover .sale-tag {
  opacity: 0.9; 
  transition: all 0.2s ease;
}
.product-meta .sale-tag {
  position: relative;
  display: flex;
  column-gap: 7px;
  padding:5px 7px;
  margin-top: 0;
  margin-bottom: 0;
  line-height:1;
}
@media screen and (max-width: 749px) {
  .grid-uniform .grid-item .sale-tag {
    font-size:12px;
    
    opacity: 0.9;
    display: block;
  }
}

.badge {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: 0px;
  text-align: left;
  z-index: 1;
}

.badge-label {
  display: inline-block;
  margin: 0 auto;
  padding: 7px 15px;
  font-size: 16px;
  font-weight: bold;
  background:var(--colorPriceBg) ;
  color:#fff ;
  text-transform: uppercase;
  border-radius: 0px;  
}
.badge--sold-out {
  top: 47%;
  position:absolute;
  z-index:100;
  width: 100%;
  margin-top: 0px;
  text-align: center;
}
.badge--sold-out .badge-label, .no-stock {
  background:var(--colorError) ;
  color:#fff ;
}
.sold-out .badge--sold-out {
  display: block;
}
.badges {
  margin:10px 0;  
  clear:both;
}
.badges img {
  max-width:100%; 
}
@media screen and (max-width:749px) {
  .badges img {
    width:100%; 
  }
}

.badge-promo, .badge-new {
  position: absolute;
  text-align: center;
  opacity: 0.9;
  z-index: 200;
  font-size:14px;
  top: 0;
  left: 0;
  padding: 7px 8px;
  color: var(--colorPriceText);
  background: var(--colorPriceBg);
  padding: 5px;
  font-weight: normal;
  text-transform: uppercase;
}
.badge-promo.position-left, .badge-new.position-left {
  left: 0;
  right: auto;
}
.badge-promo.position-right, .badge-new.position-right {
  left: auto;
  right: 0;
}
@media screen and (max-width: 749px) {
  .badge-promo, .badge-new {
    font-size: 12px;
    padding: 5px;
  }
} 

.product-grid-image--centered a { overflow:hidden; display:block; }
.show-saved-amount-false.show-saved-percent-false .sale-tag { display:none !important; }

.product-meta .show-saved-amount-false .save-text, .product-meta .show-saved-amount-false .price-sale2 {
  display:none;
}
.product-meta .show-saved-amount-true .save-text, .product-meta .show-saved-amount-true .price-sale2 {
  display:inline;
}
.product-meta .show-saved-percent-false .price-saving-percent {
  display:none;
}
.product-meta .show-saved-percent-true .price-saving-percent {
  display:inline;
}
.product-meta .show-saved-amount-true {
  display:flex ; 
}
.amount-percent-true .product-meta .show-amount .sale-tag, 
.amount-percent-false .product-meta .show-amount .show-saved-amount-true .sale-tag,
.amount-percent-true .product-meta .show-amount, 
.amount-percent-false .product-meta .show-amount .show-saved-amount-true {
  display:table-cell ;
}
.amount-percent-true .product-meta .hide-amount .sale-tag, 
.amount-percent-false .product-meta .hide-amount  .sale-tag,
.amount-percent-true .product-meta .hide-amount, 
.amount-percent-false .product-meta .hide-amount  {
  display:none ;
}

/*================ Notice of < 10 items left ================*/
.variant-quantity {
  display: none;
  color: var(--colorBtnPrimaryText);
  line-height: 34px;
  padding: 4px 12px ;
}
.variant-quantity.is-visible {
  display: inline-block;
}

/*================ Product photos ================*/

.grid .cont-photos {
  margin-bottom:16px;
}
.text-center.cont-photos .my-tab {  
  text-align:left !important;
}

.product-photo-container {
  margin-bottom: 5px;
  max-width: 100%;
}

.product-photo-container.zoom:hover {
  cursor:crosshair;
}
.product-photo-container.video-play:hover {
  cursor:pointer;
}
.product-photo-thumbs {
  display: flex;
  justify-content: center;
}

.product-photo-container a, .product-photo-thumbs a, .product-photo-container img, .product-photo-thumbs img {
  display: block;
  margin: 0 auto;
  z-index:-1;
  position:relative;
  width:100%;
}
.product-photo-container li, .product-photo-thumbs li {
  margin-bottom: var(--gutter);
}
@media screen and (min-width: 1024px) {
  .image-zoom {
    display: inline-block;
    cursor: crosshair;
  }
}
/*============================================================================
#Reviews - Product Reviews - Alireviews - Ryviu etc
==============================================================================*/

.break-reviews, .break-1 {
  padding: 15px 0 0 0;
  overflow: hidden;
  clear: both;
}
.desc-col #tab-4 .spr-review {
  width: 100%;
  margin: 0 0 10px 0;
  height: auto;
  min-height: auto;
}
a[href='#looxReviews'] {
  text-decoration: none;
  margin-top: -1rem;
  display: flex;
  margin-bottom: 0.8rem;
}

/*============================================================================
#Custom Content
==============================================================================*/

.custom-content {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  width: auto;
}
.custom__item {
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center; 
}

@media screen and (max-width: 749px) {
  .custom__item {
    flex: 1 0 100%;
    padding-left: 12px ;
    padding-right: 12px ;
    margin-bottom: 12px ;
  }
  .custom__item.small--one-half {
    flex: 1 0 50%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }  
}
.custom__item-inner {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}

.container {
  display: flex;
  align-items:flex-start;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  
}

.container-grid {
  padding:calc(var(--gutter) / 2) 0;
}

@media(min-width:750px){
  .container-grid {
    padding-top:var(--gutter);
  }
  .advanced-content .one-quarter, .advanced-content .large--one-quarter {
    width: 25%;
  }
}

/*============================================================================
#Blank States 
==============================================================================*/

.placeholder-svg {
  display: block;
  fill: var(--color-blankstate);
  background-color: var(--color-blankstate-background);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--color-blankstate-border);
}
.placeholder-noblocks {
  padding: 40px;
  text-align: center;
  max-width: 100%;
  fill: var(--color-blankstate);
}
.placeholder-noblocks.slide-link {
  background-color: var(--color-blankstate-background);
}
.placeholder-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  background-color: var(--color-blankstate-background);
}
.placeholder-background .icon {
  border: 0;
}
.placeholder-background.imagebox {
  background-color: var(--colorSecondary);
}
.placeholder-background.imagebox svg.placeholder-image {
  border: 0px;
  align-self: center;
  width: 100%;
  height: 100%;
}
.image-bar__content .placeholder-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/*============================================================================
#Apps
==============================================================================*/
.delivery-date {
  flex:1;
  display: flex;
  gap:1rem;
  align-items: center;
  margin:var(--gutter-half) 0;
}
.delivery-date p {
  margin:0;
}
.delivery-date span {
  font-weight: bold;
}

/*============================================================================
#Specials effects
==============================================================================*/
/* faceinleft */
.fadeInLeft {
  -webkit-animation-name: SFfadeInLeft;
  animation-name: SFfadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes SFfadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes SFfadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
} 

/* fadeInRight */
.fadeInRight {
  -webkit-animation-name: SFfadeInRight;
  animation-name: SFfadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFfadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes SFfadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
} 

/* fadeinup */
.fadeInUp {
  -webkit-animation-name: SFfadeInUp;
  animation-name: SFfadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFfadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes SFfadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
} 
/* fadeindown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes SFfadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fadeindown */
@-webkit-keyframes SFfadeInDown2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-120px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-50px);
  }
}

@keyframes SFfadeInDown2 {
  0% {
    opacity: 0;
    transform: translateY(-120px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50px);
  }
}
.zoomIn {
  -webkit-animation-name: SFzoomIn;
  animation-name: SFzoomIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFzoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
} 
@keyframes sfZoomOut {
  0% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform:  scale3d(1.1, 1.1, 1.1); 
  }

  50% {  
    -webkit-transform: scale3d(1, 1,1);
    transform:  scale3d(1,1,1);
  }
} 
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes SFzoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
} 
.zoomInLeft {
  -webkit-animation-name: SFzoomInLeft;
  animation-name: SFzoomInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFzoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes SFzoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: SFzoomInRight;
  animation-name: SFzoomInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFzoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes SFzoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
} 
.zoomInUp {
  -webkit-animation-name: SFzoomInUp;
  animation-name: SFzoomInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes SFzoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes SFzoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
} 

@-webkit-keyframes rightEnd {
  0% {
    left: 0;
  }

  50% {
    left: -15px;
  }

  100% {
    left: 0;
  }
}
@keyframes rightEnd {
  0% {
    left: 0;
  }

  50% {
    left: -15px;
  }

  100% {
    left: 0;
  }
}
@-webkit-keyframes topEnd {
  0% {
    top: 0;
  }

  50% {
    top: -15px;
  }

  100% {
    top: 0;
  }
}
@keyframes topEnd {
  0% {
    top: 0;
  }

  50% {
    top: -15px;
  }

  100% {
    top: 0;
  }
}
@-webkit-keyframes leftEnd {
  0% {
    left: 0;
  }

  50% {
    left: 15px;
  }

  100% {
    left: 0;
  }
}
@keyframes leftEnd {
  0% {
    left: 0;
  }

  50% {
    left: 15px;
  }

  100% {
    left: 0;
  }
}
@-webkit-keyframes bottomEnd {
  0% {
    bottom: 0;
  }

  50% {
    bottom: -15px;
  }

  100% {
    bottom: 0;
  }
}
@keyframes bottomEnd {
  0% {
    bottom: 0;
  }

  50% {
    bottom: -15px;
  }

  100% {
    bottom: 0;
  }
}

@keyframes movearrow {
  0%,
  20%,
  30%,
  40%,
  50%,
  60%,
  100% {
    transform: translate3d(0px, 0px, 0px)
  }
  15% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, -4px, 0px)
  }
  25% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, 4px, 0px)
  }
  35% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, -3px, 0px)
  }
  45% {
    animation-timing-function: ease-in;
    transform: translate3d(0px, 2px, 0px)
  }
}

@keyframes movearrow {
  0%,
  20%,
  30%,
  40%,
  50%,
  60%,
  100% {
    transform: translate3d(0px, 0px, 0px)
  }
  15% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, -4px, 0px)
  }
  25% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, 4px, 0px)
  }
  35% {
    animation-timing-function: ease-out;
    transform: translate3d(0px, -3px, 0px)
  }
  45% {
    animation-timing-function: ease-in;
    transform: translate3d(0px, 2px, 0px)
  }
}
@-webkit-keyframes shake2 {
  0% { transform:translate(0,0);-webkit-transform:translate(0,0) }
  2.0979% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
  4.1958% { transform:translate(0,0);-webkit-transform:translate(0,0) }
  6.29371% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
  8.39161% { transform:translate(0,0);-webkit-transform:translate(0,0) }
  10.48951% { transform:translate(5px,0);-webkit-transform:translate(5px,0) }
  12.58741% { transform:translate(0,0);-webkit-transform:translate(0,0) }
  100% { transform:translate(0,0);-webkit-transform:translate(0,0) }
}

/* fadein */
.fadeInSF {
  animation-name: fadeInSF;
  -webkit-animation-name: fadeInSF;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.fadeInFast {
  animation-name: fadeInFast;
  -webkit-animation-name: fadeInFast;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes fadeInSF {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInSF {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInDown {
  -webkit-animation-name: SFfadeInDown;
  animation-name: SFfadeInDown;
}
.fadeInDown2 {
  -webkit-animation-name: SFfadeInDown2;
  animation-name: SFfadeInDown2;
}
.shopify-payment-button__more-options { visibility:visible ; }

/*============================================================================
#hacks menage
==============================================================================*/

.quantity-visibility { display:none ; }
.quantity-show { display:inline-block ; }
@media screen and (min-width: 750px) {
  body .dynamic-checkout__content .shopify-cleanslate * { 
    float:right ; text-align:right ; 
    display:flex ; justify-content: flex-end; 
  }
}

.dynamic-checkout__content { display:none ; }


.additional-checkout-buttons {
  padding-top:15px;
}

/*============================================================================
Helpers
==============================================================================*/

.section-spaced {
  margin-top:var(--section-spaced);
}

.newsletter-section .section-spaced {
  margin-top:var(--section-spaced);
}

@media only screen and (max-width:749px) {
 .section-spaced {
    margin-top: calc(var(--section-spaced) / 2);
  }
}

.spacing-0 {
  padding-top: 1px;
  padding-bottom: 1px;
  transition: all 0.15s ease-in-out;
}

.spacing-1 {
  padding-top: 3px;
  padding-bottom: 3px;
  transition: all 0.15s ease-in-out;
}

.spacing-2 {
  padding-top: 6px;
  padding-bottom: 6px;
  transition: all 0.15s ease-in-out;
}

.spacing-3 {
  padding-top: 9px;
  padding-bottom: 9px;
  transition: all 0.15s ease-in-out;
}

.border-radius-none {
  border-radius:0 !important;
}

.gutter { 
  padding:var(--gutter); 
  margin:0 !important; 
}
.full-page .wrapper { 
  max-width:100%; 
}
.full-page .grid-content, .full-page .desc-full,
.full-page .cont-avis {
  max-width:var(--page-width); 
  margin:0 auto;
}

.full-width { width:100%; clear:both; }
.full-height { height:100%; }


@media only screen and (max-width:749px) {
  .full-width button { margin-top:1.5rem; } 
}

.mt-1 { margin-top:1rem !important; }
.mt-2 { margin-top:2rem !important; }
.mb-1 { margin-bottom:1rem !important; }
.mb-2 { margin-bottom:2rem !important; }
.mb-none { margin-bottom:0 !important; }
.no-marge {
  margin: 0 !important;
}

.no-content {
  width:100%;
  text-align:center;
  padding:25px !important; 
}

.flex-align-baseline {
  align-items:baseline !important;;
}
.flex-align-start {
  align-items:flex-start !important;
}

.vertical-align-true {
  align-self:center;
}

.large--hide { display: none !important;}
@media only screen and (max-width: 749px) {
  .large--hide { display: block !important; }
}
.block-center { margin:0 auto !important;  }
.left { float: left !important; }
.right { float: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important;  }
.text-right { text-align: right !important; }
.flex-center { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;  
}
.hidden { display: none !important; }
.br-none { border-radius:0 !important; }
.text-light {
  color: var(--colorTextBody );
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.elem-hidden {
  font-size:0;
  display:none ;
}
.no-pc {
  display:block; 
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

@media only screen and (min-width: 750px) {
  .display-flex { display:flex; align-items:center; }
}
@media screen and (max-width: 1023px) {
  .hide-mobile {
    display:none;
  }
}
@media screen and (max-width: 749px) {
  .small--hide {
    display:none;
  }
}
.sf-th-v {
  z-index:9999;  
}
.sf-th-v button {
  background:none;
  border:none;
}
#sflc { display:none; }

.strong {
  font-weight:bold;
}

.border-top {  
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,0.2); 
}

.shortcode {
  clear:both;
  overflow:hidden;
  padding-bottom:var(--gutter); 
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.simulate-link {
  cursor:pointer;
}

/* #wow */
 


.shopify-policy__container {
  padding:var(--gutter) 0; 
  max-width: 1170px;
}
.shopify-policy__title {
  text-align:left;
}

.localization { 
  gap:1rem;
  padding:1rem 0;
  margin:0; 
}

@media screen and (max-width: 749px) {
  .localization {    
    justify-content:center;
  }
}

.shopify-localization-form  {
  margin:0;
}
.shopify-localization-form .disclosure__button { 
  position:relative; 
  padding: 10px 30px 10px 15px;
  border:1px solid #333;
}
.shopify-localization-form .icon-caret {
  position: absolute;
  content: '';
  height: 0.6rem;
  right: 1rem;
  top: calc(50% - 0.2rem);
}
.disclosure { 
  position:relative; 
}
.disclosure__button[aria-expanded='true'] .icon-caret {
  transform: rotate(180deg);
}
.disclosure__list { 
  min-width:240px;
  background:#FFF;
  position:absolute;
  bottom:40px;
  left:0;
  margin:0;
  padding:1rem 2rem;
  border:1px solid #333;
  max-height:300px;
  overflow:auto;
}
.disclosure__list a { 
  color:#333; 
  font-size:12px; 
}

/***************************** STYLES PERSOS ******************************************************************************************/

/************************************* carousel controls ********************************/
      .carousel-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      cursor: pointer;
      z-index: 1;
      cursor:pointer;
       background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-radius: 50px;
        width: 45px;
        height: 45px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding:0;
         transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
      
      .carousel-control:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    }

    button.rts-top:hover, button.rts-bottom:hover {
        transform: translate(-50%, -0%) scale(1.1);
    }
    
    .rts-prev {
        left: -10px;
    }
    
    .rts-next {
        right: -10px;
    }

    button.rts-top {
        top: -5px;
        position: absolute;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }
    button.rts-bottom {
      bottom: -5px;
      position: absolute;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      top: auto;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
        background-size: 100% 100%;
    }

.rts-play-pause {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Masque le cercle par défaut */
.rts-play-pause .progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  visibility: hidden;
}

/* Rend visible le cercle en lecture OU pause */
.rts-play-pause.playing .progress-ring,
.rts-play-pause.paused  .progress-ring {
  visibility: visible;
}

/* Styles du cercle et animation */
.progress-ring__circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 138.2;
  stroke-dashoffset: 138.2;
  animation: ring var(--navdot-duration) linear infinite;
  animation-play-state: paused;
}

@keyframes ring {
  to { stroke-dashoffset: 0; }
}

/* En lecture, l’anneau tourne */
.rts-play-pause.playing .progress-ring__circle {
  animation-play-state: running;
}

/* En pause, il se fige */
.rts-play-pause.paused .progress-ring__circle {
  animation-play-state: paused;
}

.progress-ring__circle.paused {
  animation: none;
  stroke-dashoffset: var(--pause-offset);
}

    @media screen and (max-width:480px) {
      .carousel-control {
        bottom: -50px;
        transform: none;
        top:auto;
    }
      .rts-next {
        right: 10px;
    }
    .rts-prev {
        right: 70px;
        left: auto;
    }
      .carousel-control:hover {
        transform:none;
    }
      
    }

    .ready-to-slide {
      position:relative;
    }

    .rts-carousel {
      overflow-x:auto;
      display:flex;
      gap:10px;
      max-width:1160px;
      margin:auto;
      scrollbar-width: none; /* Pour Firefox */
      -ms-overflow-style: none; /* Pour Internet Explorer et Edge */
    }
    
    /* Desktop uniquement si max-height desktop activé */
      @media (min-width: 1025px) {
        .rts-carousel.has-max-height-desktop {
          max-height: var(--carousel-max-height-desktop, none);
          overflow-y: auto;
          margin: 10px 0;
        }
      }
      
      /* Tablet uniquement si max-height tablette activé */
      @media (max-width: 1024px) and (min-width: 481px) {
        .rts-carousel.has-max-height-tablet  {
          max-height: var(--carousel-max-height-tablet, none);
          overflow-y: auto;
          margin: 10px 0;
        }
      }
      
      /* Mobile uniquement si max-height mobile activé */
      @media (max-width: 480px) {
        .rts-carousel.has-max-height-mobile {
          max-height: var(--carousel-max-height-mobile, none);
          overflow-y: auto;
          margin: 10px 0;
        }
      }


@media screen and (max-width:1024px) {
.rts-carousel {
      max-width:100%;
    }
}
     .rts-carousel::-webkit-scrollbar {
        display: none;
    }

      .ready-to-slide .grid-item {
        flex: 0 0 calc(25% - 10px);
        max-width: calc(25% - 10px);
        padding:0;
      }

      .ready-to-slide .media.carousel-container-collections-prod {
        padding-bottom:100% !important;
        background:#F8F8F8;
        border-radius:20px;
      }

      @media screen and (max-width:480px) {
         .ready-to-slide .grid-item {
        flex: 0 0 calc(50% - 10px);
           max-width: calc(50% - 10px);
      }
      }

        @media screen and (min-width:481px) and (max-width:1024px) {
         .ready-to-slide .grid-item {
        flex: 0 0 calc(33.3333% - 10px);
           max-width: calc(33.333% - 10px);
      }
      }

/******************************** fin carousel controls ********************************/

/***************************** SECTION ABONNEMENT ******************************************/

 .abonnements-container .wishlist-gi {
    z-index: 3;
    top: 20px;
    right: 20px;
}

.abonnements-container .add-to-favorites {
    z-index: 3;
  position: absolute;
  right: 30px;
  top: 30px;
  }

  .abonnement .add-to-favorites[data-favorited="false"] svg {
    stroke: #fff;
    stroke-width: 8px;
    filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .5));
    fill: rgb(0 0 0 / 27%);
}

.abonnement .add-to-favorites[data-favorited="true"] svg {
  fill: darkred;
  stroke-width: 0;
  stroke: #fff;
  stroke-width: 8px;
  filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .5));
}
  
.abonnement-overlay-content-container {
    max-width: 800px;
    width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

  .sticky-top-image-title {
display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
}

.sticky-top-image-title img {
min-height: auto !important
  }

.abonnement-overlay-image-container {
   max-width:15%;
}

  .abonnement-overlay-more {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
}

.abonnement-overlay-content-wrapper {
  max-width: 800px;
 width: 100%;
 /* max-height: 90%;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
      border-radius: 20px;
    overflow: hidden;
}

.abonnement-overlay-content {
  background-color: #fff;
  padding: 20px;
  width: 100%;
  overflow-y: auto;
}

.abonnement-overlay-content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15%;
    background: linear-gradient(rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 1)30%);
    pointer-events: none;
}

  .abonnement-overlay-content-stycky-top {
        position: sticky;
    top: 0;
    background: #FFF;
    width: 100%;
  }

  .abonnement-overlay-content-stycky-bottom {
    position: sticky;
    top: 0;
    background: #FFF;
    width: 100%;
  }

  .abonnement-overlay-title {
    position: sticky;
    top: 0;
    background: #FFF;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 20px -20px;
    border-bottom-left-radius: 50% 5px;
    border-bottom-right-radius: 50% 5px;
   padding: 20px;
    width:100%;
}

   .abonnement-overlay-button-container {
    position: sticky;
    top: 0;
    background: #FFF;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 20px 20px;
    border-top-left-radius: 50% 5px;
    border-top-right-radius: 50% 5px;
    padding: 10px;
}

.abonnement-overlay-close {
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
  position: absolute;
      right: -10px;
    top: -10px;
    z-index: 2;
    background: #FFF;
  border:solid transparent;
  transition: all .3s;
}

.abonnement-overlay-close:hover {
  box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
      border: solid #000;
}

.abonnement-overlay-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    padding: 10px 0;
      background: #FFF;
}


  .abonnement-overlay-close:hover {
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}

.button-voir-plus-container {
    cursor: pointer;
    z-index: 10;
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: -20px;
    right: -2px;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 50px;
}

  .button-voir-plus {
    display: flex;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    
}

  .button-voir-plus svg {
width: 48px;
height: 48px;
}

  .button-voir-plus::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
    z-index: -1;
    animation: ricochet 2s infinite;
  }

  @keyframes ricochet {
    0% {
      width: 100%;
      height: 100%;
      box-shadow: 0 0 0 0 rgba(3, 102, 214, 0.7);
    }
    100% {
    width: 150%;
    height: 150%;
    box-shadow: 0 0 0 10px rgba(3, 102, 214, 0);
    opacity: 0;
    }
  }

.abonnement-general-button {
             margin: 20px auto;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background: #000;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 50px;
            display: block;
            max-width:fit-content;
             border:solid 3px transparent;
  }

.abonnement-general-button svg {
  width:20px;
  height:20px;
}

.abonnement-general-button:hover {
   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
  }

.abonnement-link {
  text-decoration:none;
      color: unset;
      width: 100%;
}

 .background-image, .section-background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 1; /* En-dessous de l'overlay */
  /* ajout ici */
   transition: opacity 0.1s ease-in-out, all 0.3s;
       overflow: hidden;
}

 .abonnement-image.loading picture img, .background-image.loading picture img, .section-background-image.loading picture img {
opacity:0;
/*transition: opacity 0.5s ease-out;*/
}

  .abonnement-image.loaded-background picture img, .background-image.loaded-background img, .section-background-image.loaded-background img {
opacity: 1;
animation: fadeIn 1s;
}
    @keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.abonnement-image picture{
     display: flex;
     justify-content: center;
}
  
.background-image.loaded-background, .section-background-image.loaded-background {
  opacity: 1;
}

  @keyframes shine {
  0% {
    background-position: -100%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}

.background-image.loading::before, .abonnement-image.loading::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgb(234 234 234 / 99%) 50%, rgba(255, 255, 255, 0) 100% );
  background-size: 200% 100%;
  animation: shine 2s linear infinite;
  z-index: 1;
  margin: 0;
    width: 100%;
}

.loading::after {
  display:none;
}

.background-image img, .section-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
  /*
.navigation-carousel-control-collections:hover {
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.abonnements-container {
    overflow:hidden;
  }

.abonnements-contain {
    position:relative;
  }

.navigation-carousel-control-collections {
  position: absolute;
  cursor: pointer;
     z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: unset;
  transition:all .3s;
  border:solid;
}

.navigation-carousel-navigation-container {
 position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 20;
    width: 100%;
  }

.navigation-carousel-control-collections.navigation-left { left: -10px; }
.navigation-carousel-control-collections.navigation-right { right: -10px; }
  */
  .most-popular {
  position: absolute;
  top: .5rem;
  left: .5rem;
  right: .5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--heading-font-family);
    z-index: 2;
}
.abonnement-contain {
    z-index: 2;
  width: 100%;
    position: relative;
}

  .abonnement-product-infos-container {
    margin: 20px 0;
}

.abonnement .divider {
  display:block !important;
  height: 1px;
  width: 100%;
  background-color: rgba(0, 0, 0, .2);
  margin-top: 2rem;
  margin-bottom: 2rem;
}
  
.overlay, .section-overlay {
  display:block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    background-size: cover;
  background-position: center;
  z-index: 1; /* En-dessous de l'overlay */
    transition:all .3s;
  /* ajout ici */
  transition: opacity 0.1s ease-in-out;
   transition: opacity 0.1s ease-in-out, all 0.3s;
 /*  border-radius: 20px;
  border-radius: var(--border-radius-abonnement); */
}
  
span.barre {
    text-decoration: line-through;
    color: #ccc;
      text-align: left;
  }

/* scrollbar */
 /* Style de base pour Chrome, Edge, et Safari */
.abonnements::-webkit-scrollbar, .abonnement-overlay-content::-webkit-scrollbar {
  width: 4px; /* Largeur de la barre de défilement */
  height:4px;
}

.abonnements::-webkit-scrollbar-track, .abonnement-overlay-content::-webkit-scrollbar-track {
  background: transparent; /* Rendre la piste de défilement transparente */
}

.abonnements::-webkit-scrollbar-thumb, .abonnement-overlay-content::-webkit-scrollbar-thumb {
  border-radius: 50px; /* Bord arrondi de la barre de défilement */
  background:transparent;
  transition:all .3s;
}

  /*cacher sur firefox et edge */
  .abonnements, .abonnement-overlay-content {
    -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: thin; /* Firefox */
    scrollbar-color: transparent transparent; /* Firefox */
}

.abonnements::-webkit-scrollbar-thumb:hover, .abonnement-overlay-content::-webkit-scrollbar-thumb:hover {
  background: #555; /* Couleur de la barre de défilement au survol */
}

    .abonnements:hover, .abonnement-dot:hover, .abonnement-overlay-content:hover, .navigation-carousel-control-collections:hover .abonnements {
    scrollbar-width: thin;  /* Firefox */
    -ms-overflow-style: auto; /* IE and Edge */
   /* scrollbar-color: #000 transparent; */
}

/* Firefox nécessite une approche différente */
@-moz-document url-prefix() {
  .abonnements {
    scrollbar-width: thin; /* "auto" ou "thin" */
    scrollbar-color: transparent transparent; /* Couleur de la barre et de la piste transparente */
  }
}

 /*fin scrollbar */

.abonnement {
  background-color: #f5f5f5;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: opacity 0.1s ease-in-out, all 0.3s;
  transition:all .3s;
      background-size: cover;
  /*
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  */
}

.popular {
    position: relative;
    box-shadow: 0 7px 30px rgba(52, 13, 135, 0.3);
    color: white;
    margin-top: -1.5rem; 
    padding-top: 3.5rem !important;
    margin-bottom: -1.5rem !important;
    padding-bottom: 3.5rem !important;
    box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
}

a.button {
transition:all .3s;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
      margin-top: 20px;
display: flex;
    width: auto;
    margin: auto;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
  margin-top:20px:
  }

a.button:hover {
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
  }

.abonnement:hover .button {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }

/*
.abonnement-infos-bottom-image {
    margin-top: 20px;
}
*/

.abonnement h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.abonnement .per-year p, .price-mini p {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.abonnement h3 {
    font-weight:bold;
    margin-top:20px;
  }

.abonnement .button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
      margin-top: 20px;
  display: block;
  width: 100%;
  margin: auto;
  border:solid;
}

.abonnement .button:hover {
  box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}

.domain-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/domain-solid-svgrepo-com_1.svg?v=1706621763");
  }

  .seo-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/seo-1-svgrepo-com_918f3b27-15d3-43ad-af3a-f7c13b058d6e.svg?v=1706621993");
  }

  .hebergement-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/server-svgrepo-com.svg?v=1706621993");
  }

   .pub-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/man-holding-white-signal-for-publicity-svgrepo-com_1.svg?v=1706621836");
  }

    .customer-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/customer-service-svgrepo-com.svg?v=1706622097");
  }

  .apps-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/apps-add-in-svgrepo-com.svg?v=1706622757");
  }

  .dev-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/tools-svgrepo-com.svg?v=1706623267");
  }

  .ready-li::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0836/5041/2866/files/wait-time-svgrepo-com.svg?v=1706623437");
  }

/* Responsive design PC */
@media screen and (min-width:1025px) {
  
  .abonnements {
    
    .navigation-hide-desktop  {
        display: none;
      }
    
    .navigation-carousel-navigation-container.navigation-top-desktop .navigation-carousel-control-collections, .navigation-carousel-navigation-container.navigation-bottom-desktop .navigation-carousel-control-collections {
    position: unset;
    }
    
    .navigation-carousel-navigation-container.navigation-bottom-desktop {
    position: unset;
        transform: none;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top:10px;
    }
     .navigation-top-desktop {
       top: -7%;
       gap: 10px;
       right: 10px;
    }
      .navigation-on-div-desktop {
        gap: 10px;
        right: 10px;
        top: 10%;
        width: auto;
      }
      .navigation-carousel-navigation-container.navigation-bottom-desktop {
          padding: 20px;
      }

  }

}

/* Responsive design TABLETTE*/
@media (min-width: 481px) and (max-width:1024px) {

 .abonnements {
  
    .navigation-carousel-navigation-container.navigation-bottom-tablet .navigation-carousel-control-collections, .navigation-carousel-navigation-container.tablet .navigation-carousel-control-collections {
    position: unset;
    }
    
    .navigation-bottom-tablet {
      position: unset !important;
      transform: none;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
    }
    
    .navigation-bottom-tablet .navigation-carousel-control-collections, .navigation-top-tablet .navigation-carousel-control-collections {
      position: unset !important;
    }
    
    .navigation-top-tablet {
      position: absolute !important;
      top: -10%;
      gap: 10px;
      right: 10px;
    }
    
    .navigation-carousel-navigation-container.navigation-bottom-tablet {
          padding: 20px;
    }

 }

}

/* Responsive design MOBILE*/
@media (max-width: 480px) {

  .abonnements {

    .navigation-bottom-mobile {
    position: unset !important;
          transform: none;
        display: flex;
        align-items: center;
        gap: 5px;
         margin-top:10px;
    }
    
    .navigation-bottom-mobile .navigation-carousel-control-collections, .navigation-top-mobile .navigation-carousel-control-collections {
    position: unset !important;
    }
    
    .navigation-top-mobile {
    position: absolute !important;
    top: -7%;
    gap: 5px;
    right: 10px;
    }

      .navigation-on-div-mobile {
        top: 10%;
        }
    
    .navigation-carousel-navigation-container.navigation-bottom-mobile  {
        padding: 20px;
    }
    
    .abonnements-container .add-to-favorites {
      right: 20px;
      top: 20px;
      }

  }
    
}

.navigation-dots {
  text-align: center;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.abonnement-dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  border:none;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  cursor:pointer;
  transition:all .3s;
}

.abonnement-dot:hover {
  opacity: 0.75;
}

  .abonnement-dot-activated {
    background-color: #000;
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    width:35px;
}

/* Masquer les points de navigation sur mobile si configuré */
@media (max-width: 480px) {
  .hide-navigation-dots-mobile .navigation-dots {
    display: none;
  }
}

@media (min-width:481px) and (max-width: 1024px) {
  .hide-navigation-dots-tablet .navigation-dots {
    display: none;
  }
}

/* Masquer les points de navigation sur desktop si configuré */
@media (min-width: 1025px) {
  .hide-navigation-dots-desktop .navigation-dots {
    display: none;
  }
}

.abonnements-tabs {
  display: flex;
  justify-content: space-evenly;
  gap: 5px;
  padding: 10px 5px;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  background: #FFF;
}

.tab-abonnement-navigation {
  background-color: transparent;
  border: none;
  padding: 2rem 1rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  flex: 1 1 0%;
  border: solid 1px #ccc;
 /* border-top: 4px solid transparent;*/
  transition:all .3s;
  border-radius: 10px !important;
  opacity: .8;
  border: solid #FFF;
  position:relative;
  overflow: hidden;
  font-size: 10px;
  padding: 20px 0px !important;
}

  .tab-abonnement-navigation.navigation-active::before {
  display:none;
  }

 .tab-abonnement-navigation::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%; /* Commence en dehors de la div */
  width: 100%; /* Largeur du reflet */
  height: 100%;
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.5) 30%, /* Intensité du reflet */
    rgba(255, 255, 255, 0) 100%
  );
  animation-delay: 10s;
  animation: slide 5s infinite;
}

@keyframes slide {
  0%, 40% { /* 3s actifs sur 5s totaux, donc l'animation doit finir à 60% */
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


.tab-abonnement-navigation:hover,
.tab-abonnement-navigation:focus {
  color: #007bff;
  border-bottom-color: #007bff;
}

/* Ajoutons un style pour l'onglet actif pour améliorer l'UX */
.tab-abonnement-navigation.navigation-active {
  border-bottom-color: #00BCD4;
  font-weight: bold;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  color: #2d2d2d;
 /* border-top-color: #4CAF50;*/
  font-weight: bold;
  box-shadow: rgb(0 212 165 / 17%) 0px 30px 60px -12px inset, #009688 0px 18px 36px -18px inset;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
  border: solid #FFF;
  opacity: 1;
}

.abonnement-text-include {
    max-width: 800px;
    margin: 20px auto;
    line-height: 1.6;
    font-size: 18px;
    padding: 50px 20px;
    background: #00000063;
    border-radius: 20px;
    margin-top: 30px;
}

.abonnements-tabs {
      display: none;
    }

.abonnement-conteneur {
    position: relative;
    width: 100%;
  padding:15px;
}

/* Styles pour l'overlay des conditions d'utilisation */
  /* Styles pour l'overlay des conditions d'utilisation */
.button-disabled {
  background-color: #ccc !important;
  cursor: not-allowed !important;
  color: #666 !important;
}

.button-disabled:hover {
  background-color: #ccc !important; 
}

    
#termsConditionOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* S'assure que l'overlay est au-dessus des autres contenus */
}

#termsConditionOverlay .overlay-content-terms {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 90%;
  max-width: 500px; /* Limite la largeur de l'overlay pour les grands écrans */
  text-align: center;
      display: flex;
    flex-direction: column;
  position:relative;
}

#termsConditionOverlay p {
  font-size: 13px;
  color: #333; /* Couleur de texte sombre pour un contraste élevé */
}

#termsConditionOverlay a {
  color: #0066cc; /* Bleu léger pour les liens */
  text-decoration: none;
}

#termsConditionOverlay a:hover {
  text-decoration: underline; /* Souligne les liens au survol pour une meilleure accessibilité */
}

#termsConditionOverlay input[type="checkbox"] {
  margin-right: 10px;
}

#termsConditionOverlay label {
  font-size: 14px;
  color: #555;
  cursor: pointer;
  margin:0;
}

#termsConditionOverlay button {
  background-color: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#termsConditionOverlay .close-button {
    margin-top: 0;
    top: -15px;
    right: -15px;
    border-radius: 50px;
    /* border: solid; */
    height: 48px;
    width: 48px;
    border: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

#termsConditionOverlay button:hover {
  background-color: #4a54e1; /* Assombrissement du bouton au survol */
}
  
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    border-radius: 10px;
    border: solid 5px #FFF;
    background: #F8F8F8;
    max-width: fit-content;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
    gap: 10px;
  }

  .checkbox-container p{
    margin:0;
  }

  .checkbox-container:hover {
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    cursor:pointer;
  }

.checkbox-container label {
    display: flex;
    align-items: center;
  cursor:pointer;
  }
	
	
input#acceptTermsCheckbox {
	padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
   cursor:pointer;
	}

.price-big {
    display: flex;
    align-items: center;
    justify-content: center;
}

span.price-old, .pricing-original {
    background: #fff;
    padding: 0 5px;
    border-radius: 10px;
    color: #000 !important;
    border: solid;
    text-decoration: line-through;
    font-size: 18px;
}

/***************************** FIN SECTION ABONNEMENT ******************************************/

/* -------------------xxxxxxxxxxxxxx DEBUT ULTIMATE-SECTION xxxxxxxxxxxxxxx-------------------- */
    .ultimate-section {
      display: flex;
      gap: 1rem;
      flex-direction:column;
    }
    .ultimate-section-wrapper {
      max-width:100%;
    }
    /* si pas de wrapper utilise le gap bloc */
    .ultimate-section-wrapper.rts-carousel.blocks-to-section {
      gap: var(--blocks-gap) !important;
    }
    
    /* si blocs-wrappers utilise le gap wrapper */
    .ultimate-section-wrapper.rts-carousel.blocks-to-wrapper {
        gap: var(--blocks-wrapper-gap-desktop);
    }
    
    
    
    .ultimate-block {
      box-sizing: border-box;
      border-radius: var(--block-border-radius);
      position:relative;
      overflow: hidden;
    }
    
    /*marges 1er et dernier enfant si carousel*/
        /* Desktop - déjà existant */
  .bd_section_container:not(.is-grid-desktop) .rts-carousel .ultimate-block-item:first-of-type {
    margin-left: calc(var(--section-block-gap-desktop, 1rem) / 2);
  }

  .bd_section_container:not(.is-grid-desktop) .rts-carousel .ultimate-block-item:last-of-type {
    margin-right: calc(var(--section-block-gap-desktop, 1rem) / 2);
  }
        .ultimate-section-wrapper.dir-desktop-carousel .ultimate-block:first-of-type {
          margin-left: calc(var(--blocks-gap, 1rem)/2);
        }
        
        .ultimate-section-wrapper.dir-desktop-carousel .ultimate-block:last-of-type {
          margin-right: calc(var(--blocks-gap, 1rem)/2);
        }
        
        /* Tablet */
        @media (max-width: 1024px) {
          .ultimate-section-wrapper.dir-tablet-carousel .ultimate-block:first-of-type {
            margin-left: calc(var(--blocks-gap, 1rem)/2);
          }
        
          .ultimate-section-wrapper.dir-tablet-carousel .ultimate-block:last-of-type {
            margin-right: calc(var(--blocks-gap, 1rem)/2);
          }
.bd_section_container:not(.is-grid-tablet) .rts-carousel .ultimate-block-item:first-of-type {
    margin-left: calc(var(--section-block-gap-tablet, 1rem) / 2);
  }
  .bd_section_container:not(.is-grid-tablet) .rts-carousel .ultimate-block-item:last-of-type {
    margin-right: calc(var(--section-block-gap-tablet, 1rem) / 2);
  }
        }
        
        /* Mobile */
        @media (max-width: 768px) {
          .ultimate-section-wrapper.dir-mobile-carousel .ultimate-block:first-of-type {
            margin-left: calc(var(--blocks-gap, 1rem)/2);
          }
        
          .ultimate-section-wrapper.dir-mobile-carousel .ultimate-block:last-of-type {
            margin-right: calc(var(--blocks-gap, 1rem)/2);
          }
                            .bd_section_container:not(.is-grid-mobile) .rts-carousel .ultimate-block-item:first-of-type {
  margin-left: calc(var(--section-block-gap-mobile, 1rem) / 2);
}
.bd_section_container:not(.is-grid-mobile) .rts-carousel .ultimate-block-item:last-of-type {
  margin-right: calc(var(--section-block-gap-mobile, 1rem) / 2);
}
        }
    
    
    
    .rts-carousel.ultimate-section-wrapper .bd_wrapper_group:first-of-type {
        margin-left: calc(var(--blocks-wrapper-gap-desktop, 1rem) / 2);
    }
    
    .rts-carousel.ultimate-section-wrapper .bd_wrapper_group:last-of-type {
       margin-right: calc(var(--blocks-wrapper-gap-desktop, 1rem) / 2);
    }
    
    
    /* Desktop : nombre de blocs par ligne */
    @media (min-width:1024px) {
      .ultimate-block {   
        flex: 0 0 calc(100% / var(--section-cols-desktop) - var(--blocks-gap, 1rem));
        max-width: calc(100% / var(--section-cols-desktop) - var(--blocks-gap, 1rem)); 
        min-width: calc(100% / var(--section-cols-desktop) - var(--blocks-gap, 1rem)); 
    
      }
      .ultimate-section-wrapper {
        flex-wrap: var(--section-dir-desktop);
      }
      .dir-desktop-wrap {
        justify-content: center;
      }
      
    }
    /* Tablet */
    @media (min-width:768px) and (max-width:1023px) {
    
      .ultimate-block {
        flex: 0 0 calc(100% / var(--section-cols-tablet) - var(--blocks-gap, 1rem));
        max-width: calc(100% / var(--section-cols-tablet) - var(--blocks-gap, 1rem)); 
        min-width: calc(100% / var(--section-cols-tablet) - var(--blocks-gap, 1rem)); 
      }
      .ultimate-section-wrapper {
        flex-wrap: var(--section-dir-tablet);
      }
      .dir-tablet-wrap {
        justify-content: center;
      }
    }
    /* Mobile */
    @media (max-width:767px) {
      .ultimate-block {
        flex: 0 0 calc(100% / var(--section-cols-tablet) - var(--blocks-gap, 1rem));
        max-width: calc(100% / var(--section-cols-mobile) - var(--blocks-gap, 1rem)); 
        min-width: calc(100% / var(--section-cols-mobile) - var(--blocks-gap, 1rem)); 
        
      }
      .ultimate-section-wrapper {
        flex-wrap: var(--section-dir-mobile);
      }
      .dir-mobile-wrap {
        justify-content: center;
      }
    }
    
    /* ===========================================================
       2. WRAPPER LAYOUT (PAR BLOC)
       =========================================================== */
    .ultimate-wrapper {
      gap: 1rem;
      z-index:3;
      position: relative;
      padding:10px 0;
      height: 100%;
    }
    
    /* Desktop wrapper */
    @media (min-width:1024px) {
       .ultimate-items-container[data-layout-desktop="grid"]{
        flex-wrap: wrap;
         justify-content: center;
      }
      .ultimate-items-container[data-layout-desktop="carousel"]{
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      /* CAROUSEL mode */
      /* Items, même basis en carousel */
      .ultimate-wrapper[data-layout-desktop] > * {
        scroll-snap-align: start;
        flex: 0 0 calc(
          (100% / var(--cols-desktop))
          - (1rem * (var(--cols-desktop) - 1) / var(--cols-desktop))
        );
        box-sizing: border-box;
      }
    }
    
    /* Tablet wrapper */
    @media (min-width:768px) and (max-width:1023px) {
       .ultimate-items-container[data-layout-tablet="grid"]{
        flex-wrap: wrap;
         justify-content: center;
      }
      .ultimate-items-container[data-layout-tablet="carousel"]{
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      .ultimate-wrapper[data-layout-tablet] > * {
        scroll-snap-align: start;
        flex: 0 0 calc(
          (100% / var(--cols-tablet))
          - (1rem * (var(--cols-tablet) - 1) / var(--cols-tablet))
        );
        box-sizing: border-box;
      }
    }
    
    /* Mobile wrapper */
    @media (max-width:767px) {
      .ultimate-items-container[data-layout-mobile="grid"]{
        flex-wrap: wrap;
        justify-content: center;
      }
      .ultimate-items-container[data-layout-mobile="carousel"]{
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
    
      .ultimate-wrapper[data-layout-mobile] > * {
        scroll-snap-align: start;
        flex: 0 0 calc(
          (100% / var(--cols-mobile))
          - (1rem * (var(--cols-mobile) - 1) / var(--cols-mobile))
        );
        box-sizing: border-box;
      }
    }
    
    /* ===========================================================
       3. ITEMS PAR LIGNE DANS CHAQUE CONTENEUR (mode grid)
       =========================================================== */
    /* Bloc Produit */
    .ultimate-items-container[data-layout-desktop="grid"] > *,
    .ultimate-items-container[data-layout-tablet="grid"] > *,
    .ultimate-items-container[data-layout-mobile="grid"] > * {
      box-sizing: border-box;
    }
    
    /* Bloc Collection / Image / Vidéo */
    .ultimate-collection-grid[data-layout-desktop="grid"] > *,
    .ultimate-images[data-layout-desktop="grid"] > *,
    .ultimate-videos[data-layout-desktop="grid"] > * {
      box-sizing: border-box;
    }
    @media (min-width:1024px) {
      .ultimate-collection-grid[data-layout-desktop="grid"] > *,
      .ultimate-images[data-layout-desktop="grid"] > *,
      .ultimate-videos[data-layout-desktop="grid"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-desktop))
          - (1rem * (var(--wrapper-cols-desktop) - 1) / var(--wrapper-cols-desktop))
        );
      }
    }
    @media (min-width:768px) and (max-width:1023px) {
      .ultimate-collection-grid[data-layout-tablet="grid"] > *,
      .ultimate-images[data-layout-tablet="grid"] > *,
      .ultimate-videos[data-layout-tablet="grid"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-tablet))
          - (1rem * (var(--wrapper-cols-tablet) - 1) / var(--wrapper-cols-tablet))
        );
      }
    }
    @media (max-width:767px) {
      .ultimate-collection-grid[data-layout-mobile="grid"] > *,
      .ultimate-images[data-layout-mobile="grid"] > *,
      .ultimate-videos[data-layout-mobile="grid"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-mobile))
          - (1rem * (var(--wrapper-cols-mobile) - 1) / var(--wrapper-cols-mobile))
        );
      }
    }
    
    /* ===========================================================
       4. CAROUSEL
       =========================================================== */
    
       .ultimate-items-container[data-layout-desktop="carousel"] > *,
    .ultimate-items-container[data-layout-tablet="carousel"] > *,
    .ultimate-items-container[data-layout-mobile="carousel"] > * {
      box-sizing: border-box;
    }
    
    /* 5. ORIENTATION DU LIEN (.bd_link_a) */
    .ultimate-items-container[data-link-dir-desktop="row"] .bd_link_a,
    .ultimate-items-container[data-link-dir-tablet="row"] .bd_link_a,
    .ultimate-items-container[data-link-dir-mobile="row"] .bd_link_a {
      display: flex !important;
    }
    @media (min-width:1024px) {
      .ultimate-items-container[data-link-dir-desktop="row"] .bd_link_a { flex-direction: row; }
      .ultimate-items-container[data-link-dir-desktop="column"] .bd_link_a { flex-direction: column; }
    }
    @media (min-width:768px) and (max-width:1023px) {
      .ultimate-items-container[data-link-dir-tablet="row"] .bd_link_a { flex-direction: row; }
      .ultimate-items-container[data-link-dir-tablet="column"] .bd_link_a { flex-direction: column; }
    }
    @media (max-width:767px) {
      .ultimate-items-container[data-link-dir-mobile="row"] .bd_link_a { flex-direction: row; }
      .ultimate-items-container[data-link-dir-mobile="column"] .bd_link_a { flex-direction: column; }
    }
    
    /* Bloc Collection / Image / Vidéo */
    .ultimate-collection-grid[data-layout-desktop="carousel"] > *,
    .ultimate-images[data-layout-desktop="carousel"] > *,
    .ultimate-videos[data-layout-desktop="carousel"] > * {
      box-sizing: border-box;
    }
    @media (min-width:1024px) {
      .ultimate-collection-grid[data-layout-desktop="carousel"] > *,
      .ultimate-images[data-layout-desktop="carousel"] > *,
      .ultimate-videos[data-layout-desktop="carousel"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-desktop))
          - (1rem * (var(--wrapper-cols-desktop) - 1) / var(--wrapper-cols-desktop))
        );
      }
    }
    @media (min-width:768px) and (max-width:1023px) {
      .ultimate-collection-grid[data-layout-tablet="carousel"] > *,
      .ultimate-images[data-layout-tablet="carousel"] > *,
      .ultimate-videos[data-layout-tablet="carousel"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-tablet))
          - (1rem * (var(--wrapper-cols-tablet) - 1) / var(--wrapper-cols-tablet))
        );
      }
    }
    @media (max-width:767px) {
      .ultimate-collection-grid[data-layout-mobile="carousel"] > *,
      .ultimate-images[data-layout-mobile="carousel"] > *,
      .ultimate-videos[data-layout-mobile="carousel"] > * {
        flex: 0 0 calc(
          (100% / var(--wrapper-cols-mobile))
          - (1rem * (var(--wrapper-cols-mobile) - 1) / var(--wrapper-cols-mobile))
        );
      }
    }
    
    /* 7. object-fit & hauteur container & mix-blend-mode */
    .ultimate-items-container .bd_img_container {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (min-width:1024px) {
      .ultimate-items-container[data-img-container-height-desktop] .bd_img_container {
        height: attr(data-img-container-height-desktop);
        min-height: attr(data-img-container-height-desktop);
      }
      .ultimate-items-container[data-img-fit-desktop="cover"] .bd_img_container img {
        object-fit: cover;
        height:100%;
        width:100%;
      }
      .ultimate-items-container[data-img-fit-desktop="contain"] .bd_img_container img {
        object-fit: contain;
      }
    }
    @media (min-width:768px) and (max-width:1023px) {
      .ultimate-items-container[data-img-container-height-tablet] .bd_img_container {
        height: attr(data-img-container-height-tablet);
        min-height: attr(data-img-container-height-tablet);
      }
      .ultimate-items-container[data-img-fit-tablet="cover"] .bd_img_container img {
        object-fit: cover;
        height:100%;
        width:100%;
      }
      .ultimate-items-container[data-img-fit-tablet="contain"] .bd_img_container img {
        object-fit: contain;
      }
    }
    @media (max-width:767px) {
      .ultimate-items-container[data-img-container-height-mobile] .bd_img_container {
        height: attr(data-img-container-height-mobile);
        min-height: attr(data-img-container-height-mobile);
      }
      .ultimate-items-container[data-img-fit-mobile="cover"] .bd_img_container img {
        object-fit: cover;
        width:100%;
        height:100%;
      }
      .ultimate-items-container[data-img-fit-mobile="contain"] .bd_img_container img {
        object-fit: contain;
      }
    }
    
    /* Mix-blend-mode */
    .ultimate-items-container[data-img-mixblend="true"] .bd_img_container img {
      mix-blend-mode: multiply;
    }
    
    .ultimate-block-item {
        flex: 0 0 calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem)); 
        max-width: calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem));
        min-width: calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem));
      overflow:hidden;
      }
    
    .ultimate-items-container {
      padding:20px 0;
    }
    /* 6. GAP entre .ultimate-block */
    @media (min-width:1024px) {
      .ultimate-section .ultimate-items-container {
        gap: var(--section-block-gap-desktop, 1rem);
      }
      .ultimate-block-item {
        flex: 0 0 calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem)); 
        max-width: calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem));
        min-width: calc(100% / var(--wrapper-cols-desktop) - var(--section-block-gap-desktop, 1rem));
      }
    }
    @media (min-width:768px) and (max-width:1023px) {
      .ultimate-section .ultimate-items-container {
        gap: var(--section-block-gap-tablet, 1rem);
      }
      .ultimate-block-item {
        flex: 0 0 calc(100% / var(--wrapper-cols-tablet) - var(--section-block-gap-tablet, 1rem)); 
        max-width: calc(100% / var(--wrapper-cols-tablet) - var(--section-block-gap-tablet, 1rem));
        min-width: calc(100% / var(--wrapper-cols-tablet) - var(--section-block-gap-tablet, 1rem));
      }
    }
    @media (max-width:767px) {
      .ultimate-section .ultimate-items-container {
        gap: var(--section-block-gap-mobile, 1rem);
      }
      .ultimate-block-item {
        flex: 0 0 calc(100% / var(--wrapper-cols-mobile) - var(--section-block-gap-mobile, 1rem)); 
        max-width: calc(100% / var(--wrapper-cols-mobile) - var(--section-block-gap-mobile, 1rem));
        min-width: calc(100% / var(--wrapper-cols-mobile) - var(--section-block-gap-mobile, 1rem));
      }
    }
    
    
    /* ===========================================================
       4. STYLES GÉNÉRAUX
       =========================================================== */
    .ultimate-title { font-size: 1.75rem; margin-bottom: .5rem; }
    .ultimate-subtitle { font-size: 1.125rem; margin-bottom: 1rem; color: #666; }
    .ultimate-text { margin:auto;text-align:center;margin:10px auto;max-width:95%;}
    .block-text-read-more-wrapper { display:flex;flex-direction: column;margin: auto;align-items: center;margin: 10px 0;padding: 10px;}
    .product-item img, .collection-item img, .image-item img {
      width: 100%; height: auto; display: block;
    }
    .ultimate-load-more {
      display: block; margin: 1rem auto; padding: .75rem 1.5rem;
      background: #000; color: #fff; border: none; cursor: pointer;
    }
    .content-wrapper {
      z-index:3;
      position:relative;
      height:100%;
    }
    .ultimate-block-link-wrapper {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: block;
    }
    
    .ultimate-block-link-wrapper .clickable-overlay {
      width: 100%;
      height: 100%;
    }
    /* positionnement générique */
    .ultimate-collection-grid .collection-item {
      position: relative;
    }
    /* 1) overlay → titre en superposition, bas-gauche */
    .ultimate-collection-grid[data-title-position="overlay"] .bd_title_container {
        position: absolute;
        top: 50%;
      transform: translateY(-50%);
        bottom: auto;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0.25rem;
        z-index: 2;
        display: flex;
        width: 100%;
    }
    .ultimate-collection-grid[data-title-position="overlay"] .bd_product_title {
          align-content: center;
    }
    .ultimate-collection-grid[data-title-position="overlay"] .bd_title_container h3 {
          background: none;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: unset;
         color: #FFF;
    }
    /*
    .bd_video_background {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }
    
    .bd_video_mode_background {
      position: absolute;
    }
    .bd_hide_on_mobile {
      display: none !important;
    }
    .bd_video_placeholder,
    .bd_video_element {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }
    .bd_parallax .bd_video_element {
      will-change: transform;
    }
    .bd_video_container {
      position: absolute; 
      top: 0; left: 0;
      width: 100%;   
      height: 100%;         
      overflow: hidden;
      border-radius: 20px;
    }
    
    .bd_video_container .video-wrapper {
      height:100%;
      position: unset;
    }
    
    .bd_video_mode_normal .bd_video_container {
      display: flex;
      align-items: center;
    }
    
    .bd_video_placeholder {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    
    .bd_video_mode_normal.bd_video_center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .bd_video_element {
      transform: scale(1.05);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .bd_video_element.bd_video_loaded {
      opacity: 1;
      transform: scale(1);
      transition: none;
    }
    
    .bd_video_mode_normal .bd_video_container {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .bd_responsive_video.bd_video_mode_normal .bd_video_container {
      height: 0;
    }
    
    .bd_responsive_video.bd_video_mode_normal {
      height: auto;
    }
    
    .bd_video_height_fixed.bd_responsive_video.bd_video_mode_normal .bd_video_container {
        height: 100%;
    }
    
    .bd_responsive_video {
      position: relative;
      width: 100%;
      height: 0;
      height: 100%;
      overflow: hidden;
      background: #000;
      border-radius: 20px;
    }
    
    .bd_responsive_video .bd_video_wrapper {
      position: unset;
    }
    
    .bd_video_container.bd_responsive_video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .bd_video_container {
      position: relative;
      overflow: hidden;
    }
      

    .bd_video_mode_normal .bd_ratio_16_9 {
      padding-top: 56.25%; 
    }
    .bd_video_mode_normal .bd_ratio_4_3 {
      padding-top: 75%; 
    }
    .bd_video_mode_normal .bd_ratio_21_9 {
      padding-top: 42.85%; 
    }
    .bd_video_mode_normal .bd_ratio_1_1 {
      padding-top: 100%; 
    }
    */
    
    .bd_play_button {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.5);
      border: none;
      color: #fff;
      font-size: 2rem;
      padding: 0.5em 0.8em;
      border-radius: 50%;
      cursor: pointer;
      z-index: 2;
    }
    .bd_play_button:hover {
      background: rgba(0,0,0,0.7);
    }
    
    .bd_header_background {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bd_header_background_text {
        position: absolute;
        z-index: 3;
        overflow: auto;
        height: 90%;
        display: flex;
    }

  /* <-------------------- CONTENEUR D'ITEMS ------------------------------------> */

    .bd-container-items-group  {
    position:relative;
    height:100%;
  }
  
  .bd_containers_items {
    height:100%;
  }

 /* conteneur des items à l’intérieur d’un conteneur d'items */
 
  .bd-container-items-group .bd_containers_items {
    display: flex;
    gap: var(--blocks-gap);
  }

   	      /* Desktop */
    @media (min-width: 1025px) {
      .bd-container-items-group .bd_containers_items {
        flex-wrap: var(--container-dir-desktop);
      }
      .bd-container-items-group .bd_containers_items > .ultimate-block {
        flex: 0 0 calc(100% / var(--container-cols-desktop) - var(--blocks-gap));
        max-width: calc(100% / var(--container-cols-desktop) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--container-cols-desktop) - var(--blocks-gap, 1rem));
      }
    }
  
    /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      .bd-container-items-group .bd_containers_items {
        flex-wrap: var(--container-dir-tablet);
      }
      .bd-container-items-group .bd_containers_items > .ultimate-block {
        flex: 0 0 calc(100% / var(--container-cols-tablet) - var(--blocks-gap));
        max-width: calc(100% / var(--container-cols-tablet) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--container-cols-tablet) - var(--blocks-gap, 1rem));
      }
    }
  
    /* Mobile */
    @media (max-width: 767px) {
      .bd-container-items-group .bd_containers_items {
        flex-wrap: var(--container-dir-mobile);
      }
      .bd-container-items-group .bd_containers_items > .ultimate-block {
        flex: 0 0 calc(100% / var(--container-cols-mobile) - var(--blocks-gap));
        max-width: calc(100% / var(--container-cols-mobile) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--container-cols-mobile) - var(--blocks-gap, 1rem));
      }
    }

     /* <-------------------- FIN CONTENEUR D'ITEMS ------------------------------------> */

  /* wrappers*/

  .bd_wrapper_group {
    position:relative;
    height:100%;
  }
  
  .bd_wrapper_items {
    height:100%;
  }

   /* conteneur des items à l’intérieur d’un wrapper */
  .bd_wrapper_group .bd_wrapper_items {
    display: flex;
    gap: var(--blocks-gap);
  }

    /* Desktop */
    @media (min-width: 1025px) {
      .bd_wrapper_group .bd_wrapper_items {
        flex-wrap: var(--wrapper-dir-desktop);
      }
      .bd_wrapper_group .bd_wrapper_items > .ultimate-block, .bd-container-items-group {
        flex: 0 0 calc(100% / var(--wrapper-cols-desktop) - var(--blocks-gap));
        max-width: calc(100% / var(--wrapper-cols-desktop) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--wrapper-cols-desktop) - var(--blocks-gap, 1rem));
      }
    }
  
    /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      .bd_wrapper_group .bd_wrapper_items {
        flex-wrap: var(--wrapper-dir-tablet);
      }
      .bd_wrapper_group .bd_wrapper_items > .ultimate-block, .bd-container-items-group {
        flex: 0 0 calc(100% / var(--wrapper-cols-tablet) - var(--blocks-gap));
        max-width: calc(100% / var(--wrapper-cols-tablet) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--wrapper-cols-tablet) - var(--blocks-gap, 1rem));
      }
    }
  
    /* Mobile */
    @media (max-width: 767px) {
      .bd_wrapper_group .bd_wrapper_items {
        flex-wrap: var(--wrapper-dir-mobile);
      }
      .bd_wrapper_group .bd_wrapper_items > .ultimate-block, .bd-container-items-group {
        flex: 0 0 calc(100% / var(--wrapper-cols-mobile) - var(--blocks-gap));
        max-width: calc(100% / var(--wrapper-cols-mobile) - var(--blocks-gap, 1rem));
        min-width: calc(100% / var(--wrapper-cols-mobile) - var(--blocks-gap, 1rem));
      }
    }

  /* disposition des wrappers & containers items DANS la section */
      .ultimate-section .ultimate-section-wrapper {
        display: flex;
        gap: var(--blocks-wrapper-gap-desktop);
      }
      
      @media (min-width:1025px) {
        .ultimate-section-wrapper {
          flex-wrap: var(--section-wrappers-dir-desktop);
          gap: var(--blocks-wrapper-gap-desktop);
        }
        .ultimate-section-wrapper > .bd_wrapper_group,
        .ultimate-section-wrapper > .bd-container-items-group {
          flex: 0 0 calc(100% / var(--section-wrappers-cols-desktop) - var(--blocks-wrapper-gap-desktop));
          max-width: calc(100% / var(--section-wrappers-cols-desktop) - var(--blocks-wrapper-gap-desktop));
          min-width: calc(100% / var(--section-wrappers-cols-desktop) - var(--blocks-wrapper-gap-desktop));
        }
      }
      
      @media (min-width:768px) and (max-width:1024px) {
        .ultimate-section-wrapper {
          flex-wrap: var(--section-wrappers-dir-tablet);
          gap: var(--blocks-wrapper-gap-tablet);
        }
        .ultimate-section-wrapper > .bd_wrapper_group,
        .ultimate-section-wrapper > .bd-container-items-group {
          flex: 0 0 calc(100% / var(--section-wrappers-cols-tablet) - var(--blocks-wrapper-gap-tablet));
          max-width: calc(100% / var(--section-wrappers-cols-tablet) - var(--blocks-wrapper-gap-tablet));
          min-width: calc(100% / var(--section-wrappers-cols-tablet) - var(--blocks-wrapper-gap-tablet));
        }
      }
      
      @media (max-width:767px) {
        .ultimate-section-wrapper {
          flex-wrap: var(--section-wrappers-dir-mobile);
          gap: var(--blocks-wrapper-gap-mobile);
        }
        .ultimate-section-wrapper > .bd_wrapper_group,
        .ultimate-section-wrapper > .bd-container-items-group {
          flex: 0 0 calc(100% / var(--section-wrappers-cols-mobile) - var(--blocks-wrapper-gap-mobile));
          max-width: calc(100% / var(--section-wrappers-cols-mobile) - var(--blocks-wrapper-gap-mobile));
          min-width: calc(100% / var(--section-wrappers-cols-mobile) - var(--blocks-wrapper-gap-mobile));
        }
      }

/* Desktop */
  /*.ultimate-block*/
  .ultimate-section [data-img-block-fit-desktop="cover"].bd_img_block.bd_img_container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*.ultimate-block[data-img-block-fit-desktop="contain"] .bd_img_block.bd_img_container img*/
.ultimate-section [data-img-block-fit-desktop="contain"].bd_img_block.bd_img_container img {
  object-fit: contain;
}

/* Tablet (ex: @media breakpoint) */
@media (max-width: 1024px) {
 /*.ultimate-block*/
 .ultimate-section [data-img-block-fit-tablet="cover"].bd_img_block.bd_img_container img {
    object-fit: cover;
  }

  /*.ultimate-block*/
  .ultimate-section [data-img-block-fit-tablet="contain"].bd_img_block.bd_img_container img {
    object-fit: contain;
  }
}

/* Mobile (ex: @media breakpoint) */
@media (max-width: 767px) {
    /*.ultimate-block*/
  .ultimate-section [data-img-block-fit-mobile="cover"].bd_img_block.bd_img_container img {
    object-fit: cover;
  }

    /*.ultimate-block*/
  .ultimate-section [data-img-block-fit-mobile="contain"].bd_img_block.bd_img_container img {
    object-fit: contain;
  }
}

/* Si l’image est utilisée en background */
  /*.ultimate-block*/
  .ultimate-section [data-img-as-bg="true"].bd_img_block.bd_img_container {
    position: absolute !important;
    height: 100%;
    z-index: -1;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

  /*.ultimate-block*/
  .ultimate-section [data-img-as-bg="true"].bd_img_block.bd_img_container picture {
    height: auto;
}

.ultimate-wrapper[data-justify-content] {
  justify-content: var(--justify-content);
    display: flex;
    flex-direction: column;
}

.ultimate-wrapper[data-full-height="true"] {
  height: 100%;
}

.ultimate-section .svg-icons {
      min-height: auto;
}

/* Flexbox Wrapper Items */
.bd_wrapper_group .bd_wrapper_items {
  flex-direction: var(--wrapper-flex-direction-mobile);
  justify-content: var(--wrapper-justify-content-mobile);
  align-items: var(--wrapper-align-items-mobile);
  align-content: var(--wrapper-align-content-mobile);
}

@media screen and (min-width: 768px) {
  .bd_wrapper_group .bd_wrapper_items {
    flex-direction: var(--wrapper-flex-direction-tablet);
    justify-content: var(--wrapper-justify-content-tablet);
    align-items: var(--wrapper-align-items-tablet);
    align-content: var(--wrapper-align-content-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .bd_wrapper_group .bd_wrapper_items {
    flex-direction: var(--wrapper-flex-direction-desktop);
    justify-content: var(--wrapper-justify-content-desktop);
    align-items: var(--wrapper-align-items-desktop);
    align-content: var(--wrapper-align-content-desktop);
  }
}

/* Flexbox Container Items */
.bd-container-items-group .bd_containers_items {
  flex-direction: var(--container-flex-direction-mobile);
  justify-content: var(--container-justify-content-mobile);
  align-items: var(--container-align-items-mobile);
  align-content: var(--container-align-content-mobile);
}

@media screen and (min-width: 768px) {
  .bd-container-items-group .bd_containers_items {
    flex-direction: var(--container-flex-direction-tablet);
    justify-content: var(--container-justify-content-tablet);
    align-items: var(--container-align-items-tablet);
    align-content: var(--container-align-content-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .bd-container-items-group .bd_containers_items {
    flex-direction: var(--container-flex-direction-desktop);
    justify-content: var(--container-justify-content-desktop);
    align-items: var(--container-align-items-desktop);
    align-content: var(--container-align-content-desktop);
  }
}

/* -------------------xxxxxxxxxxxxxx FIN ULTIMATE-SECTION xxxxxxxxxxxxxxx-------------------- */

/***************************** DEBUT STYLES BD ******************************************/

.bd_section_start {
    margin: auto;
}

.bd_skeleton {
  /*
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgb(234 234 234 / 99%) 50%, rgba(255,255,255,0) 100%);
    animation: shine 2s linear infinite;
    background-size: 300% 100%;
    min-height:350px;
 */
    position:relative;
  }

.bd_loading_placeholder_section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 20px;
    background: #0000005e;
    width:100%;
    height:100%;
    z-index:100;
}

.bd_loading_placeholder_section::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner 0.6s linear infinite;
}

 .bd_product_title {
    font-weight:bold;
    font-size: 12px;
    text-align: center;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 30px;
    text-transform: lowercase;
   /*background: linear-gradient(rgb(0 0 0), rgb(0 0 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
   color:#000;
     min-height: 30px;
   margin:10px auto;
   max-width:95%;
  }

  .bd_product_title::first-letter {
       text-transform: uppercase;
   }

.bd_img_container {
    overflow: hidden;
    border-radius: 20px;
    height: 260px;
    width: 100%;
    min-height: revert;
    background: #F8F8F8;
    position: relative;
}

.bd_img_container picture {
    width: 100%;
    height: 100%;
}

/* — Ratios — */
.bd_img_container.ratio-auto {
  aspect-ratio: auto;
}
.bd_img_container.ratio-1-1 {
  aspect-ratio: 1 / 1;
}
.bd_img_container.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.bd_img_container.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.bd_img_container.ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.bd_img_container.ratio-2-1 {
  aspect-ratio: 2 / 1;
}

.bd_img_container.ratio-21-9 {
  aspect-ratio: 21 / 9;
}

.bd_img_container.ratio-9-16 {
  aspect-ratio: 9 / 16;
}

.bd_img_container.ratio_defined {
  height: auto !important;
  min-height: auto !important;
}

/* — Masques via clip-path — */
.bd_img_container.mask-none img {
  clip-path: none;
}
.bd_img_container.mask-circle img {
  clip-path: circle(50% at 50% 50%);
}
.bd_img_container.mask-ellipse img {
  clip-path: ellipse(50% 30% at 50% 50%);
}
.bd_img_container.mask-hexagon img {
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%,
    75% 100%, 25% 100%,
    0% 50%
  );
}

.bd_img_container.masktype-mask-image img, .bd_img_container.masktype-clip img,
.bd_img_container.masktype-mask-image picture, .bd_img_container.masktype-clip picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd_img_container.masktype-clip.mask-star img {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.bd_img_container.masktype-clip.mask-heart img {
mask:
   radial-gradient(at 70% 31%,#000 29%,#0000 30%),
   radial-gradient(at 30% 31%,#000 29%,#0000 30%),
   linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
}

/* Mask-image (PNG/SVG) */
.bd_img_container.masktype-mask-image {
  /* le mask-image est injecté inline via le style Liquid */
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Overlay */
.bd_img_overlay {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Conteneur de blob : on masque tout hors de la forme */
.blob-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  will-change: clip-path;
}

svg.blob-defs {
  position: absolute;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  pointer-events: none;
}


.bd_container_img_loading {
   background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgb(234 234 234 / 99%) 50%, rgba(255,255,255,0) 100%);
    animation: shine 2s linear infinite;
    background-size: 300% 100% !important;
}

 .bd_link_a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none !important;
    width: 100%;
  }

  .bd_product_infos_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: calc(100% - 5%);
    min-width:0;
  }

  .bd_product_container img {
      width: 100%;
      transition: all .3s;
      height: 100%;
     filter: saturate(1.2);
  }

.bd_product_container:hover .bd_img_container img {
  transform: scale(1.02);
}
  
  .abonnements-header {
    padding:10px;
    }

.bd_product_container, .bd_skeleton {
  height:auto;
}

.bd_product_container , .bd_skeleton {
  padding: var(--padding-top-bottom-desktop) var(--padding-left-right-desktop);
}

.bd_product_container, .bd_skeleton, .bd_product_container .section-overlay, .bd_product_container .bd_img_container {
  border-radius: var(--block-border-radius);
}

.bd_img_container {
  flex: var(--abonnement-image-flex)!important;
}

.bd_product_infos_container {
  flex: var(--bottom-image-flex);
  text-align: var(--text-align);
}

@media screen and (max-width: 767px) {
  .bd_product_infos_container {
    flex: var(--bottom-image-flex-mobile, var(--bottom-image-flex))!important;
  }

  .bd_img_container {
    flex: var(--abonnement-image-flex-mobile, var(--abonnement-image-flex))!important;
  }

  .bd_link_a {
    display: flex;
  }
}



/* Tablette (par défaut autour de 768px) */
@media screen and (max-width: 1024px) {
  .bd_product_container, .bd_skeleton {
    padding: var(--padding-top-bottom-tablet) var(--padding-left-right-tablet);
  }
}

/* Mobile (par défaut autour de 640px) */
@media screen and (max-width: 767px) {
  .bd_product_container, .bd_skeleton {
    padding: var(--padding-top-bottom-mobile) var(--padding-left-right-mobile);
  }
}

.bd_spinner{
width: 48px;
    height: 48px;
    border: 5px dotted #333;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation_bd_spinner 2s linear infinite;
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin: auto;
    left: 0;
    right: 0;
}

@keyframes rotation_bd_spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.bd_blog_author {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-bottom: 0.25em;
}

.bd_blog_date {
    font-size: 10px;
    color: #999;
    margin-bottom: 1em;
}

.bd_blog_excerpt {
    text-align: center;
    max-width: 95%;
    color: #555;
    font-size: 13px;
    /* margin: 20px 0; */
    padding: 0 15px;
    border-left: 4px solid #ccc;
    background-color: #f9f9f9;
    text-align: justify;
    position: relative;
    padding: 15px 5px;
}

  @media screen and (min-width:768px) {
    .bd_blog_excerpt {
    padding: 10px 40px;
  }
  }

.bd_blog_excerpt::before, .bd_blog_excerpt::after {
    content: '“'; /* Guillemet ouvrant pour ::before */
    font-size: 3em; /* Taille plus grande pour un effet visuel */
    color: #ccc; /* Couleur assortie à la bordure */
    position: absolute; /* Positionnement absolu par rapport au parent .excerpt */
}

.bd_blog_excerpt::after {
    content: '”'; /* Guillemet fermant pour ::after */
}

.bd_blog_excerpt::before {
    top: 0; /* Aligné en haut du bloc de texte */
    left: 10px; /* Un peu décalé du bord gauche */
    transform: translate(0, -25%); /* Léger décalage vers le haut */
}

.bd_blog_excerpt::after {
    bottom: 0; /* Aligné en bas du bloc de texte */
    right: 10px; /* Un peu décalé du bord droit */
    transform: translate(0, 25%); /* Léger décalage vers le bas */
}

/*
.bd_navdot {
    position: relative;
    width: 15px;
    height: 15px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
  border:none;
}

.bd_navdot.active {
  background: #333;
  outline: solid 3Px #efefef;
  outline-offset: 3px;
}


.bd_navdot.active::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid #000000;
    animation: l18 var(--carousel-interval) infinite linear;
    border-radius: 50px;
}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}
*/

.bd_navdots-container {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    margin-bottom: 10px;
    max-width: 100%;
    overflow: auto;
    padding: 5px;
    z-index: 20;
      position: sticky;
}

.bd_navdot {
  width: 22px;
  height: 22px;
  border-radius: 20px;
  color: #ddd;
  position: relative;
  transition:all .3s;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border:none;
}
.bd_navdot:hover {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}
.bd_navdot.active {
 background:#333;
      box-shadow: inset rgb(0 0 0) 0px 0px 5px 0px, rgb(255 255 255 / 43%) 0px -2px 6px 1px inset;
  box-shadow: rgb(0 0 0) 2px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) 0px -2px 6px 1px inset;
}
.bd_navdot.dot-animated.active {
  width: 120px;
  height: 22px;
  border-radius: 20px;
  color: #333;
  position: relative;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  background:none;
}
.bd_navdot.dot-animated.active::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: l6 var(--navdot-duration, 30000ms) infinite;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  box-shadow: rgb(0 0 0) 2px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) 0px -2px 6px 1px inset;
}
@keyframes l6 {
    100% {inset:0}
}

/* Ajoute cette règle CSS 
   pour forcer la pause de l’animation si la classe .paused est présente */
.bd_navdot.active.paused::before {
  animation-play-state: paused !important;
  display:none;
}
/* dans le cas ou l'autoplay est sur pause en elève le grand dot */
.bd_navdot.dot-animated.active.paused {
  width: 22px;
  height: 22px;
  background:#333;
  box-shadow: inset rgb(0 0 0) 0px 0px 5px 0px, rgb(255 255 255 / 43%) 0px -2px 6px 1px inset;
  box-shadow: rgb(0 0 0) 2px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) 0px -2px 6px 1px inset;
  border:solid red;
}

@media screen and (min-width: 1025px) {
    .navdots-hide-desktop {
      display: none !important;
    }
}

/* Cacher sur tablette */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navdots-hide-tablet {
      display: none !important;
    }
}

/* Cacher sur mobile */
@media screen and (max-width: 767px) {
    .navdots-hide-mobile {
      display: none !important;
    }
}

.loaded-background.bd_background_parralax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.collection-description-wrapper {
  position:relative;
}

/*
.bd_read_more_button:hover {
    border-color: #aaa;
        outline: solid #aaa;
    outline-offset: 3px;
}

.bd_read_more_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:13px;
}

.bd_read_more_text.expanded {
  display: block;
  -webkit-line-clamp: none !important;
  max-height: none !important;
}

.bd_read_more_text {
  h2, h3, h4, h5, h6 {
    font-size:16px;
    text-transform:lowercase;
  }
}

.bd_read_more_text {
  h2::first-letter , h3::first-letter , h4::first-letter , h5::first-letter , h6::first-letter  {
    text-transform:uppercase;
  }
}

.bd_read_more_button {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  font-size: 0.9em;
     background-color: transparent;
  color: #333;
  border: 1px solid #ddd;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: system-ui, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
  color: #FFF;
  justify-content: center;
  margin: auto;
  margin-top: 5px;
}


.expanded-with-nav {
  overflow-y: auto;
    max-height: 300px;  

  scrollbar-width: none; 
  -ms-overflow-style: none;  
  display:block !important;
}
.expanded-with-nav::-webkit-scrollbar {
  display: none;
}


.read-more-nav-controls {
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px; 
  z-index: 10;
}


.read-more-nav-controls button {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.read-more-nav-controls button:hover {
  background-color: #f0f0f0;
}


.read-more-nav-controls svg {
  width: 20px;
  height: 20px;
  fill: #333;
}
*/

/* --- Bouton "Lire plus" --- */
.bd_read_more_button {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  background-color: transparent;
  border: 1px solid #ddd;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
  color: #FFF;
  justify-content: center;
  margin: auto;
  margin-top: 5px;
  /* Priorité STYLE_2 : Transition modifiée */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Survol du bouton */
.bd_read_more_button:hover {
  border-color: #aaa;
  outline: solid #aaa;
  outline-offset: 3px;
}

/* Bouton masqué avec animation fluide */
.bd_read_more_button.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* --- Texte tronqué/expand --- */
.bd_read_more_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  /* Priorité STYLE_2 */
  padding-right: 10px;
  position: relative; /* Pour overlays/nav */
}

.bd_read_more_text.expanded {
  display: block;
  -webkit-line-clamp: none !important;
  max-height: none !important;
}

/* Styles sur titres à l'intérieur */
.bd_read_more_text h2,
.bd_read_more_text h3,
.bd_read_more_text h4,
.bd_read_more_text h5,
.bd_read_more_text h6 {
  font-size: 16px;
  text-transform: lowercase;
}

.bd_read_more_text h2::first-letter,
.bd_read_more_text h3::first-letter,
.bd_read_more_text h4::first-letter,
.bd_read_more_text h5::first-letter,
.bd_read_more_text h6::first-letter {
  text-transform: uppercase;
}

/* --- Contenu déroulé avec navigation --- */
.expanded-with-nav {
  overflow-y: auto;
  max-height: 300px;  
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  display: block !important; /* Priorité STYLE_1 */
}
.expanded-with-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari et Opera */
}

/* --- Contrôles de navigation latéraux --- */
.read-more-nav-controls {
  position: absolute;
  top: 50%;
  right: 10px; /* Priorité STYLE_2 (remplace -35px de STYLE_1) */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

/* Boutons des contrôles nav */
.read-more-nav-controls button {
  background-color: rgba(255,255,255,0.8);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Transitions prioritaires STYLE_2 */
  transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.2s ease;
}
.read-more-nav-controls button:hover {
  background-color: #f0f0f0;
  transform: scale(1.15); /* Effet de zoom au survol (nouveau) */
}

/* Icônes SVG dans les boutons nav */
.read-more-nav-controls svg {
  width: 20px;
  height: 20px;
  fill: #333;
  pointer-events: none;
}

/* --- Overlay dégradé en bas du texte (nouveau STYLE_2) --- */
.read-more-gradient-overlay {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(180deg, transparent, #ffffff3d);
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

/* --- Flèche centrale descendante (nouveau STYLE_2) --- */
.read-more-nav-center-down {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background-color: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: pulse 2s infinite;
}
.read-more-nav-center-down svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* NOUVEAU: Style pour rendre la flèche centrale "sticky" */
.read-more-nav-center-down.is-sticky {
  position: fixed;
  bottom: 20px; /* ou la valeur de votre choix */
  animation: none; /* On peut désactiver le pulse en mode sticky si on préfère */
}

/* Vous pouvez aussi ajuster son apparence en mode sticky si besoin */
.read-more-nav-center-down.is-sticky:hover {
   transform: translateX(-50%) scale(1.1);
}

/* Le style de base de la flèche centrale reste le même */
.read-more-nav-center-down {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.2s ease;
  animation: pulse 2s infinite; 
}

@keyframes pulse {
  0% { transform: translateX(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); }
  70% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { transform: translateX(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}


.bd_link_button {
    padding: 5px 20px;
    max-width: 90%;
    margin: auto;
    margin: 5px auto;
    background: rgba(0, 0, 0, .5);
    color: #FFF;
    box-shadow: none;
    border: none;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    z-index:1;
}

.bd_link_button:hover {
outline: solid 2px;
outline-offset: 3px;
}

.bd_icon_button {
    max-width: 20px;
    max-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*ajout retiré si bug */
.bd_wrapper_items.rts-carousel, .ultimate-section-wrapper.rts-carousel {
 /* margin:unset;*/
      width: 100%;
}

.ultimate-section .rts-carousel {
  max-width:100%;
}

.bd_wrapper_group {
  margin:auto;
}
/* fin ajout retiré si bug */

/* Ribbon Styles */
.bd_ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index:10;
}
.bd_ribbon::before,
.bd_ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.bd_ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* Positions */
.bd_ribbon_top_left { top: -10px; left: -10px; }
.bd_ribbon_top_left::before,
.bd_ribbon_top_left::after { border-top-color: transparent; border-left-color: transparent; }
.bd_ribbon_top_left::before { top: 0; right: 0; }
.bd_ribbon_top_left::after { bottom: 0; left: 0; }
.bd_ribbon_top_left span { right: -25px; top: 30px; transform: rotate(-45deg); }

.bd_ribbon_top_right { top: -10px; right: -10px; }
.bd_ribbon_top_right::before,
.bd_ribbon_top_right::after { border-top-color: transparent; border-right-color: transparent; }
.bd_ribbon_top_right::before { top: 0; left: 0; }
.bd_ribbon_top_right::after { bottom: 0; right: 0; }
.bd_ribbon_top_right span { left: -25px; top: 30px; transform: rotate(45deg); }

.bd_ribbon_bottom_left { bottom: -10px; left: -10px; }
.bd_ribbon_bottom_left::before,
.bd_ribbon_bottom_left::after { border-bottom-color: transparent; border-left-color: transparent; }
.bd_ribbon_bottom_left::before { bottom: 0; right: 0; }
.bd_ribbon_bottom_left::after { top: 0; left: 0; }
.bd_ribbon_bottom_left span { right: -25px; bottom: 30px; transform: rotate(225deg); }

.bd_ribbon_bottom_right { bottom: -10px; right: -10px; }
.bd_ribbon_bottom_right::before,
.bd_ribbon_bottom_right::after { border-bottom-color: transparent; border-right-color: transparent; }
.bd_ribbon_bottom_right::before { bottom: 0; left: 0; }
.bd_ribbon_bottom_right::after { top: 0; right: 0; }
.bd_ribbon_bottom_right span { left: -25px; bottom: 30px; transform: rotate(-225deg); }

/* Common base for bd_ribbon dynamic */
.bd_ribbons-dynamic {
}

/* STYLE 1 */
.bd_ribbon_style1 {
    position: absolute;
    /* top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: 34px;
}

.bd_ribbon_style1 .bd_line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color, #F1DF40);
}
.bd_ribbon_style1 span {
  font-size: 1em;
  display: inline-block;
  text-align: center;
  width: 100%;
  animation: bd_marquee 4s linear infinite;
}
.bd_ribbon_style1 span:nth-child(1) {
  position: absolute;
 /* left: -100%;*/
  animation: bd_marquee 4s 2s linear infinite;
}
@keyframes bd_marquee {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* STYLE 2 */
.bd_ribbon_style2 .bd_text {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  height: 34px;
  font-size: 1em;
  background-color: var(--color, #F1DF40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.bd_ribbon_style2 .bd_border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 30px solid #000;
  outline-offset: -30px;
  z-index: 3;
}
.bd_ribbon_style2 .bd_border span {
  position: absolute;
  bottom: -100%;
  width: 30px;
  height: 30px;
  font-size: 0.8em;
  letter-spacing: 2px;
  color: var(--color, #F1DF40);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bd_border 8s linear infinite;
}
/* On peut ajouter animation-delay par nth-child comme dans ton SCSS original */

/* Animation delay automatique pour bd_ribbon_style2 */
.bd_ribbon_style2 .bd_border span:nth-child(1) { animation-delay: 1s; }
.bd_ribbon_style2 .bd_border span:nth-child(2) { animation-delay: 2s; }
.bd_ribbon_style2 .bd_border span:nth-child(3) { animation-delay: 3s; }
.bd_ribbon_style2 .bd_border span:nth-child(4) { animation-delay: 4s; }
.bd_ribbon_style2 .bd_border span:nth-child(5) { animation-delay: 5s; }
.bd_ribbon_style2 .bd_border span:nth-child(6) { animation-delay: 6s; }
.bd_ribbon_style2 .bd_border span:nth-child(7) { animation-delay: 7s; }
.bd_ribbon_style2 .bd_border span:nth-child(8) { animation-delay: 8s; }

@keyframes bd_border {
	0% {
		left: 0px;
		bottom: 0px;
		right: auto;
		top: auto;
    @include transform(rotate(0deg));
	}
	0.001% {
		left: auto;
		bottom: 0px;
		right: 80%;
		top: auto;
	}
	25% {
		left: auto;
		bottom: 0px;
		right: 0;
		top: auto;
    @include transform(rotate(0deg));
	}
	25.001% {
		left: auto;
		bottom: auto;
		right: 0;
		top: 80%;
    @include transform(rotate(90deg));
	}
	50% {
		left: auto;
		bottom: auto;
		right: 0;
		top: 0;
    @include transform(rotate(90deg));
	}
	50.001% {
		left: 80%;
		bottom: auto;
		right: auto;
		top: 0;
    @include transform(rotate(0deg));
	}
	75% {
		left: 0px;
		bottom: auto;
		right: auto;
		top: auto;
    @include transform(rotate(0deg));
	}
	75.001% {
		left: 0px;
		bottom: 80%;
		right: auto;
		top: auto;
    @include transform(rotate(-90deg));
	}
	99.881% {
		left: 0px;
		bottom: 0px;
		right: auto;
		top: auto;
    @include transform(rotate(-90deg));
	}
	100% {
		left: 0px;
		bottom: 0px;
		right: auto;
		top: auto;
    @include transform(rotate(0deg));
	}
}

/* STYLE 3 */
.bd_ribbon_style3 {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
      z-index: 3;
}

.bd_ribbon_style3 .bd_line {
  height: 34px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: var(--color, #F1DF40);
  text-align: center;
}
.bd_ribbon_style3 span {
  font-size: 1em;
  display: inline-block;
  width: 100%;
  animation: bd_marquee_top 2s linear infinite;
}
.bd_ribbon_style3 span:nth-child(1) {
  position: absolute;
  animation: bd_marquee_top 2s 1s linear infinite;
}
@keyframes bd_marquee_top {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* STYLE 4 */
.bd_ribbon_style4 {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
}
.bd_ribbon_style4 .bd_btn {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  bottom: -45px;
  right: -45px;
  background-color: #000;
}
.bd_ribbon_style4 .bd_box_rotate {
 /* overflow: hidden;*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bd_ribbon_style4 .bd_box_rotate:before {
  content: "";
  border-radius: 50%;
  width: 170px;
  height: 170px;
  position: absolute;
  bottom: -80px;
  right: -80px;
  border: 30px solid var(--color, #F1DF40);
}
.bd_ribbon_style4 svg {
  width: 494px;
  height: auto;
  position: absolute;
  bottom: -242px;
  right: -244px;
  animation: bd_rotate 8s linear infinite;
}
.bd_ribbon_style4 text {
  font-size: 10px;
  letter-spacing: 1.15px;
  font-weight: bold;
}

@keyframes bd_rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.bd_ribbon_style4 .bd_box_rotate svg:nth-child(1) { animation-delay: 0s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(2) { animation-delay: 4s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(3) { animation-delay: 8s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(4) { animation-delay: 12s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(5) { animation-delay: 16s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(6) { animation-delay: 20s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(7) { animation-delay: 24s; }
.bd_ribbon_style4 .bd_box_rotate svg:nth-child(8) { animation-delay: 28s; }

/* Styles pour contrôler haut/bas sur bande (style 1 et 3) */
.bd_ribbon_top {
  top: 0;
  bottom: auto;
}

.bd_ribbon_bottom {
  bottom: 0;
  top: auto;
}

/* Styles pour les coins (style 4) */
.bd_corner_top-left {
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
}

.bd_corner_top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

.bd_corner_bottom-left {
  bottom: 0;
  left: 0;
  top: auto;
  right: auto;
}

.bd_corner_bottom-right {
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
}

.bd_ribbon_style1 .bd_line {
  background-color: var(--ruban-bg);
  font-size: var(--ruban-font-size);
  height: var(--ruban-size);
  color: var(--ruban-text);
}

.bd_ribbon_style2 .bd_text {
  background-color: var(--ruban-bg);
  font-size: var(--ruban-font-size);
  color: var(--ruban-text);
  height: var(--ruban-size);
}

.bd_ribbon_style2 .bd_border {
  outline-color: var(--round-bg);
}

.bd_ribbon_style2 .bd_border span {
  font-size: var(--ruban-font-size);
  color: var(--ruban-text);
}

.bd_ribbon_style3 .bd_line {
  background-color: var(--ruban-bg);
  font-size: var(--ruban-font-size);
  height: var(--ruban-size);
  color: var(--ruban-text);
}

.bd_ribbon_style4 .bd_box_rotate:before {
  border-color: var(--ruban-bg);
}

.bd_ribbon_style4 textPath {
  fill: var(--ruban-text);
  font-size: calc(var(--ruban-font-size) / 2);
}

.bd_ribbon_style4 .bd_btn {
  background-color: var(--round-bg);
}

/***************************** FIN STYLES BD ******************************************/

/************************ DEBUT carousel variantes collections ***********************/
     .carousel-container-collections-prod {
      position: relative;
      /* ajout ici pour meilleur controle défilement sur mobile */
       touch-action: pan-y;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
       -webkit-overflow-scrolling: touch;
       scroll-snap-align: center;
    }
    
    .carousel-prev-collections,
    .carousel-next-collections {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      cursor: pointer;
      z-index: 10; /* S'assurer que les boutons sont au-dessus de l'image */
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
      background-color: rgba(255, 255, 255, 0);
      box-shadow:none;
      height: 48px;
    width: 48px;
    }
    
    .carousel-prev-collections {
      left: 10px;
    }
    
    .carousel-next-collections {
      right: 10px;
    }
    
    .carousel-prev-collections:hover,
    .carousel-next-collections:hover {
      background-color: rgba(255, 255, 255, 1);
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; !important;
    }
    
    .product-featured-image {
      transition: opacity 0.3s ease; /* Transition douce pour le changement d'image */
    }

      .carousel-dots-wrapper {
          overflow: hidden;
          width: 100px;
          margin: 0 auto;
          position: absolute;
          bottom: 10px;
          left: 0;
          right: 0;
          align-items: center;
          justify-content: center;
          background: #0000005e;
          border-radius: 50px;
      }

      .carousel-dots {
          text-align: center;
          padding-top: 10px;
          display: flex;
          transition: transform 0.3s ease;
          padding: 5px 0;
      }
      
      .carousel-dot {
         flex: 0 0 8px; /* Chaque point a une largeur fixe de 8px */
        height: 8px;
        margin: 0 4px;
        background-color: #FFF; /* Couleur de base des points */
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.4s;
        box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
      }
      
      .carousel-dot.active {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        width:24px;
        border-radius:20px;
            flex: 0 0 24px;
      }

    @media screen and (max-width:480px) {
    .carousel-prev-collections,
    .carousel-next-collections {
      top: auto;
      bottom:10px;
      transform:none;
       display: none;
    }
    }

    
    .old-preview {
        justify-content: center;
        align-items: center;
        display: flex;
        align-content: center;
    }
    
    .old-preview:before {
     /*   content: '';
        width: 48px;
        height: 48px;
        border: 5px dotted #000;
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotation 2s linear infinite;
        position: absolute;
        top: calc(50% - 24px);
        left: calc(50% - 24px);
      */
    }

        .old-preview:before {
            font-size: 1em;
            font-weight: bold;
            background: linear-gradient(to right, #d3d3d3, #4d4d4d, #d3d3d3);
            background-size: 200% auto; /* Largeur du fond étendue pour l'animation */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            animation: gradientShift 3s linear infinite;
          content:'';
          position:absolute;
          top:0;
          left:0;
         /* content:"Sac-Transparent.com"; nom shop dans theme.liquid */ 
          box-sizing: border-box;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
          width:100%;
          text-align:center;
        }
    
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    } 
/* variantes carousel */
.variant-carousel {
    display: flex;
    align-items: center;
    position: relative;
}

.variant-images-container {
  overflow-x: auto; /* Permet le défilement horizontal */
  white-space: nowrap; /* Empêche le retour à la ligne des éléments */
  width: 100%; /* Ajustez la largeur selon vos besoins */
  display: flex;
    scrollbar-width: none; /* Pour Firefox */
    -ms-overflow-style: none; /* Pour Internet Explorer et Edge */
}

/* Pour Webkit (Chrome, Safari, Edge basé sur Chromium) */
.variant-images-container::-webkit-scrollbar {
    display: none;
}

.variant-images {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  margin: 5px;
}

.variante-img-contain-grid:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.variant-images.swatch.clearfix {
    flex-direction:column;
}

.variante-img-contain-grid {
  /*  flex: 0 0 calc(25% - 5px);*/
    background: #F4F4F4;
    border-radius: 10px;
    overflow: hidden;
    width: 30px;
    aspect-ratio: 1;
}
.variant-prev, .variant-next {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    background: #FFF;
    z-index: 2;
    margin:0;
    height:100%;
    padding: 0;
}

button.variant-next:before {
    content: '';
    background: linear-gradient(270deg, #ffffff, #fffffff2, #ffffff8a);
    width: 20px;
    height: 100%;
    padding: 1px;
    position: absolute;
    /* left: 0px; */
    right: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

button.variant-prev:after {
    content: '';
    background: linear-gradient(270deg, #ffffff, #fffffff2, #ffffff8a);
    width: 20px;
    height: 100%;
    padding: 1px;
    position: absolute;
    /* left: 0px; */
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

button.variant-prev {
    left: 0;
}

button.variant-next {
    right: 0;
}

.variant-prev[style*="opacity: 0.5"], .variant-next[style*="opacity: 0.5"] {
  cursor: not-allowed; /* Changer le curseur lorsque le défilement n'est pas possible */
}

.variante-img-grid {
  opacity:0;
  cursor: pointer;
  transition: opacity 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode:multiply;
  background:#F4F4F4;
}

img.variante-img-grid.loaded {
    object-fit: contain;
}

/*************************************** fin carousel variantes collections ****************************************/

/*************************************** sections perso bd + abo ****************************************************/
 .background-image, .section-background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
   z-index: 1;/* En-dessous de l'overlay */
  /* ajout ici */
   transition: opacity 0.1s ease-in-out, all 0.3s;
  overflow: hidden;
}

.background-image img, .section-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.section-background-image.has-before-background::before,
.background-image.has-before-background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-image: var(--background-before-image);
  background-position: center;
  background-repeat: no-repeat;
}
.overlay, .section-overlay {
  display:block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    background-size: cover;
  background-position: center;
  z-index: 1; /* En-dessous de l'overlay */
    transition:all .3s;
  /* ajout ici */
  transition: opacity 0.1s ease-in-out;
   transition: opacity 0.1s ease-in-out, all 0.3s;
}

.abonnement-general-button {
             margin: 20px auto;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background: #000;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 50px;
            display: block;
            max-width:fit-content;
             border:solid 3px transparent;
  }

.abonnement-general-button:hover {
   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
  }

 .navigation-carousel-control-collections {
  position: absolute;
  cursor: pointer;
      z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
   width: var(--carousel-control-width, 48px);
  height: var(--carousel-control-height, 48px);
  border-radius: var(--carousel-control-border-radius, 50px);
  border: var(--carousel-control-border-width, 0px) solid var(--carousel-control-border-color, transparent);
    background-color: var(--carousel-control-background-color, #FFFFFF);
  color: var(--carousel-control-text-color, #000000);
      font-size: unset;
   background-image: var(--carousel-control-linear-gradient);
  box-shadow: var(--carousel-control-box-shadow);
  transition:all .3s;
  border:solid;
  min-width:25px;
  min-height:35px;
}
  
  .navigation-carousel-navigation-container {
 position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 20;
    width: 100%;
  }

.navigation-carousel-control-collections.navigation-left { left: -10px; }
.navigation-carousel-control-collections.navigation-right { right: -10px; }

.navigation-carousel-control-collections {
        position:unset;
      }
  
/* nav pc */
@media screen and (min-width:1025px) {
 .navigation-carousel-navigation-container.navigation-hide-desktop  {
    display: none;
  }

  .navigation-carousel-navigation-container {
    justify-content: var(--justify-navigation-content-pc);
  }

   .navigation-carousel-navigation-container.navigation-top-desktop .navigation-carousel-control-collections, .navigation-carousel-navigation-container.navigation-bottom-desktop .navigation-carousel-control-collections {
  position: unset;
  }
    
  .navigation-carousel-navigation-container.navigation-bottom-desktop {
      transform: none;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top:10px;
     padding: 20px;
     position: unset;
  }
  .navigation-carousel-navigation-container.navigation-top-desktop {
     top: -7%;
     gap: 10px;
     right: 10px;
  }
  .navigation-carousel-navigation-container.navigation-on-div-desktop {
          gap: 10px;
          right: 10px;
          top: 13%;
      width: auto;
  }

}

/* fin   */                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    nav pc */


/* nav mobile */

@media (max-width: 480px) {

  .navigation-hide-mobile  {
    display: none;
  }

  .navigation-carousel-navigation-container {
    justify-content: var(--justify-navigation-content-mobile);
  }
 
    .navigation-carousel-navigation-container.navigation-bottom-mobile {
    position: unset !important;
          transform: none;
        display: flex;
        align-items: center;
        gap: 5px;
         margin-top:10px;
    }
    
    .navigation-bottom-mobile .navigation-carousel-control-collections, .navigation-top-mobile .navigation-carousel-control-collections {
    position: unset !important;
    }
    
    .navigation-carousel-navigation-container.navigation-top-mobile {
    position: absolute !important;
    top: -7%;
    gap: 5px;
    right: 10px;
    }
    
    .navigation-carousel-navigation-container.navigation-bottom-mobile  {
        padding: 20px;
    }

  .navigation-carousel-navigation-container.navigation-on-div-mobile {
        gap: 10px;
        right: 5px;
        top: 8%;
        width: auto;
  }

} /* fin nav mobile */

/* nav tablette */

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

  .navigation-hide-tablet  {
    display: none;
  }

  .navigation-carousel-navigation-container.navigation-bottom-tablet .navigation-carousel-control-collections, .navigation-carousel-navigation-container.tablet .navigation-carousel-control-collections {
  position: unset;
  }
  
  .navigation-carousel-navigation-container {
    justify-content: var(--justify-navigation-content-tablet);
  }
  
  .navigation-carousel-navigation-container.navigation-bottom-tablet {
    position: unset !important;
    transform: none;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
  }
  
  .navigation-bottom-tablet .navigation-carousel-control-collections, .navigation-top-tablet .navigation-carousel-control-collections {
    position: unset !important;
  }
    
  .navigation-carousel-navigation-container.navigation-top-tablet {
    position: absolute !important;
    top: -10%;
    gap: 10px;
    right: 10px;
  }
  
  .navigation-carousel-navigation-container.navigation-bottom-tablet {
        padding: 20px;
  }
   .navigation-carousel-navigation-container.navigation-on-div-tablet {
        gap: 10px;
        right: 10px;
        top: 13%;
        width: auto;
  }
}

/******************************************************** fin sections perso bd + abo *********************************************/

/* stock produit colllections */
    .stock-advise {
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
    
    .pulse {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: green;
      position: relative;
      animation: fadeOutPulse 1.5s infinite;
    }
    
    @keyframes fadeOutPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.7);
      }
      100% {
        box-shadow: 0 0 0 5px rgba(0, 128, 0, 0);
      }
    }
/* fin stock produit colllections */

/************************** SECTIONS PERSOS (HISTORIQUE, RECOMMENDATIONS, NOUVEAUTES) *********************************************/
/* CUSTOM CSS SECTIONS (historique, novueautes...) */
   /* ----- MOBILE ----- */
    @media (max-width: 480px) {
      .bd_section_container .bd_product_container,
      .bd_section_container .bd_skeleton {
        flex: 0 0 var(--bd-item-width-mobile);
        max-width: var(--bd-item-width-mobile);
        padding-top: var(--padding-top-bottom-mobile, 0px);
        padding-bottom: var(--padding-top-bottom-mobile, 0px);
        padding-left: var(--padding-left-right-mobile, 0px);
        padding-right: var(--padding-left-right-mobile, 0px);
      }
      .bd_section_container .bd_carousel {
        max-width: calc(100% - var(--bd-gap-mobile, 0) * 1px / 2);
        gap: calc(var(--bd-gap-mobile, 0) * 1px);
        flex-wrap: unset;
      }
      .bd_section_container.is-grid-mobile .bd_carousel {
        flex-wrap: wrap;
      }
      .bd_section_container.no-grid-mobile .bd_carousel > div:first-child {
        margin-left: calc(var(--bd-gap-mobile, 0) * 1px / 2);
      }
      .bd_section_container.no-grid-mobile .bd_carousel > div:last-child {
        margin-right: calc(var(--bd-gap-mobile, 0) * 1px / 2);
      }
      .bd_section_container .bd_img_container {
        height: var(--bd-image-height-mobile);
      }
      .bd_section_container .bd_link_a {
        flex-direction: var(--bd-flex-dir-mobile, row);
        gap: var(--bd-link-a-gap-mobile, 0)px;
      }
      .bd_section_container .bd_product_title,
      .bd_section_container h3.bd_product_title {
        font-size: var(--bd-abonnement-title-size-mobile, 16px) !important;
      }
      .bd_section_container .navigation-carousel-navigation-container {
        display: flex !important;
      }
      .bd_section_container.hide-arrows-mobile .navigation-carousel-navigation-container.navigation-hide-mobile {
        display: none !important;
      }
      .bd_section_container.nav-top-mobile .bd_carousel {
        margin-top: 50px;
      }
      .bd_section_container .bd_img_container {
        flex: 1 1 var(--bd-img-flex-mobile, 50%);
      }
      .bd_section_container .bd_product_infos_container {
        flex: 1 1 calc(100% - var(--bd-img-flex-mobile, 50%));
      }
    }
    
    /* ----- TABLET ----- */
    @media (min-width: 481px) and (max-width: 1024px) {
      .bd_section_container .bd_product_container,
      .bd_section_container .bd_skeleton {
        flex: 0 0 var(--bd-item-width-tablet);
        max-width: var(--bd-item-width-tablet);
        padding-top: var(--padding-top-bottom-tablet, 0px);
        padding-bottom: var(--padding-top-bottom-tablet, 0px);
        padding-left: var(--padding-left-right-tablet, 0px);
        padding-right: var(--padding-left-right-tablet, 0px);
      }
      .bd_section_container .bd_carousel {
        max-width: calc(100% - var(--bd-gap-tablet, 0) * 1px / 2);
        gap: calc(var(--bd-gap-tablet, 0) * 1px);
        flex-wrap: unset;
      }
      .bd_section_container.is-grid-tablet .bd_carousel {
        flex-wrap: wrap;
      }
      .bd_section_container.no-grid-tablet .bd_carousel > div:first-child {
        margin-left: calc(var(--bd-gap-tablet, 0) * 1px / 2);
      }
      .bd_section_container.no-grid-tablet .bd_carousel > div:last-child {
        margin-right: calc(var(--bd-gap-tablet, 0) * 1px / 2);
      }
      .bd_section_container .bd_img_container {
        height: var(--bd-image-height-tablet);
      }
      .bd_section_container .bd_link_a {
        flex-direction: var(--bd-flex-dir-tablet, row);
        gap: var(--bd-link-a-gap-tablet, 0)px;
      }
      .bd_section_container .navigation-carousel-navigation-container {
        display: flex !important;
      }
      .bd_section_container.hide-arrows-tablet .navigation-carousel-navigation-container.navigation-hide-tablet {
        display: none !important;
      }
      .bd_section_container.nav-top-tablet .bd_carousel {
        margin-top: 50px;
      }
      .bd_section_container .bd_img_container {
        flex: 1 1 var(--bd-img-flex-tablet, 50%);
      }
      .bd_section_container .bd_product_infos_container {
        flex: 1 1 calc(100% - var(--bd-img-flex-tablet, 50%));
      }
    }
    
    /* ----- DESKTOP ----- */
    @media (min-width: 1025px) {
      .bd_section_container .bd_product_container,
      .bd_section_container .bd_skeleton {
        flex: 0 0 var(--bd-item-width-desktop);
        max-width: var(--bd-item-width-desktop);
        padding-top: var(--padding-top-bottom-desktop, 0px);
        padding-bottom: var(--padding-top-bottom-desktop, 0px);
        padding-left: var(--padding-left-right-desktop, 0px);
        padding-right: var(--padding-left-right-desktop, 0px);
      }
      .bd_section_container .bd_carousel {
        max-width: var(--container-max-width, 1200px);
        gap: calc(var(--bd-gap-desktop, 0) * 1px);
        flex-wrap: unset;
      }
      .bd_section_container.is-grid-desktop .bd_carousel {
        flex-wrap: wrap;
      }
      .bd_section_container.no-grid-desktop .bd_carousel > div:first-child {
        margin-left: calc(var(--bd-gap-desktop, 0) * 1px / 2);
      }
      .bd_section_container.no-grid-desktop .bd_carousel > div:last-child {
        margin-right: calc(var(--bd-gap-desktop, 0) * 1px / 2);
      }
      .bd_section_container .bd_img_container {
        height: var(--bd-image-height-desktop);
      }
      .bd_section_container .bd_link_a {
        flex-direction: var(--bd-flex-dir-desktop, row);
        gap: var(--bd-link-a-gap-desktop, 0)px;
      }
      .bd_section_container.nav-top-desktop .bd_carousel {
        margin-top: 50px;
      }
      .bd_section_container .bd_img_container {
        flex: 1 1 var(--bd-img-flex-desktop, 50%);
      }
      .bd_section_container .bd_product_infos_container {
        flex: 1 1 calc(100% - var(--bd-img-flex-desktop, 50%));
      }
    }
    
    /* ----- GENERIC ----- */
    .bd_section_container .bd_img_container {
        border-radius: var(--bd-img-border-radius, 0px);
        background: var(--bd-img-bg, transparent);
      }
    
    .bd_section_container .bd_product_title {
        font-size: var(--bd-title-size, 20px);
      }
      .bd_section_container .bd_section_start,
      .bd_section_container .full-screen-it {
        max-width: var(--full-screen, 100%);
        margin: auto;
      }
      .bd_section_container .background-image img,
      .bd_section_container .section-background-image img {
        max-width: var(--use-bg-img-max-width, 100%);
      }
      .bd_section_container .bd_product_container,
      .bd_section_container .bd_skeleton {
        border-radius: var(--product-border-radius, 0px);
        background: var(--product-bg, #fff);
        overflow:hidden;
      }
      .bd_section_container .bd_product_container img {
        object-fit: var(--image-object-fit-style, cover);
        mix-blend-mode: normal;
        background: var(--img-bg, transparent);
      }
      .bd_section_container.has-blend-mode .bd_product_container img {
        mix-blend-mode: multiply;
      }
      .bd_section_container .has-blend-mode .bd_product_container img {
        mix-blend-mode: multiply;
      }
      .bd_section_container .abonnements-header {
        text-align: var(--abonnements-header-text-align, left);
      }
      .bd_section_container.has-custom-width .abonnements-header {
        max-width: var(--custom-max-width, 100%);
        margin: auto;
      }
      .bd_section_container.has-shadow .abonnements-container {
        box-shadow: rgba(0, 0, 0, 0.95) 0px 5px 35px;
        position: relative;
        z-index: 2;
      }
      .bd_section_container.has-glass-effect .bd_product_container {
        background: rgba(255, 255, 255, 0.2 ) !important;
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
      .bd_section_container.has-liquid-html .html-liquid-zone-section {
        max-width: var(--code-section-max-width, 100%);
        text-align: var(--code-section-text-align, left);
        margin:auto;
        z-index:10;
        position:relative;
        padding:10px;
        width:100%;
      }
      .bd_section_container.has-bg-image .abonnement-general-button {
        z-index:10;
        position:relative;
      }
      .bd_section_container.abonnement-btn-svg .abonnement-general-button {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
      }
    
      .bd_section_container.has-bg-image .abonnements-header,
      .bd_section_container.has-bg-image .bd_product_container,
      .bd_section_container.has-bg-image .bd_section_second_container {
        position: relative;
        z-index: 1;
      }
      .bd_section_container.has-bg-image .section-background-image {
        border-radius:0px !important;
      }
      .bd_section_container.has-parallax .section-background-image picture {
        display: none;
      }
      .bd_section_container.has-parallax .section-background-image {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: opacity 2s ease-in-out;
      }
      .bd_section_container.has-parallax .bd_product_container:hover {
        transform:none !important;
      }

/************************** FIN SECTIONS PERSOS (HISTORIQUE, RECOMMENDATIONS, NOUVEAUTES) *********************************************/

/************************ SKELETONS ********************************/
@keyframes loadingShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.skeleton {
  background: linear-gradient(
    to left,
    #e0e0e0 0%,
    #f5f5f5 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: loadingShimmer 1.5s infinite linear;
}

.skeleton.skeleton-image {
    position: absolute;
    width: 90%;
    margin: 20px auto;
    height: 40%;
    right: 0;
    left: 0;
    border-radius: 20px;
    z-index: 1;
    right: 20px;
    left: 20px;
    max-width: calc(90% - 10px);
}

.skeleton.skeleton-title {
position: absolute;
width: 90%;
max-width: calc(90% - 10px);
height: 10%;
right: 20px;
left: 20px;
z-index: 1;
margin: 20px 0;
border-radius: 10px;
top: 45%;
}

.skeleton.skeleton-vendor {
    position: absolute;
    width: 90%;
    height: 7%;
    right: 0;
    left: 0;
    z-index: 1;
    margin: 10px;
    border-radius: 10px;
    top: 60%;
    margin-left: 10px;
    right: 20px;
    left: 20px;
    max-width: calc(90% - 10px);
    margin: 15px 0;
}

.skeleton.skeleton-price {
    position: absolute;
    width: 90%;
    height: 10%;
    right: 0;
    left: 0;
    z-index: 1;
    margin: 20px auto;
    border-radius: 10px;
    top: 80%;
}

.bd_skeleton {
  /*
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(234 234 234 / 99%) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shine 2s linear infinite;
    background-size: 300% 100%;
  */
    min-height: 350px;
    position: relative;
}

.bd_spinner {
z-index:2;
}

@media screen and (max-width:600px) {
  .skeleton.skeleton-image {
      height: 50%;
      right: 10px;
      left: 10px;
      max-width: calc(90% - 5px);
  	  margin: 10px auto;
  }
  		
  .skeleton.skeleton-title {
    top: 55%;
    right: 10px;
    left: 10px;
    max-width: calc(90% - 5px);
    margin: 10px auto;
  }
  	
  	
  .skeleton.skeleton-vendor {
    top: 70%;
  	height: 5%;
  	right: 10px;
      left: 10px;
      max-width: calc(90% - 5px);
      margin: 5px auto;
  }
} 

/************************************ FIN SKELETONS *******************************************************/

/**************************************************** VARIANTES & BOUTONS ************************************/

ul.variant-image-list {
    display: flex;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    padding: 10px;
  overflow-x: auto;
}

li.variant-image-item {
    max-width: 50px;
    background: #F8F8F8;
    border-radius: 4px;
}

.product-to-replace-container {
    max-width: 100%;
    width:100%;
	}
	
.grid-item.hack-img.slick-slide.slick-current.slick-active {
  	    min-height: 100%;
    width: 100%;
}

button.bd-add-to-cart-btn {
    padding: 10px 15Px;
    width: 100%;
    max-width: 100%;
    /*
    outline: solid #000;
    outline-offset: 3px;
    display: flex;
    align-items: center;
    */
    justify-content: center;
}

.bd_addtocart {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 50px;
  margin:0;
  display: flex;
  gap: 10px;
  align-items: center;
  outline: solid #CCC;
outline-offset: 2px;
  transition:all .3s;
  max-height: 48px;
}

.bd_addtocart:hover {
   outline: solid #000;
}
span.bd_svg_addtocart svg {
    height: 20px;
    width: 20px;
}

.bd-add-to-cart-wrapper {
    max-width: calc(100% - 20px);
    margin: 10px auto;
    width: 100%;
}

.variant-wrapper {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

.variant-wrapper.variants-buttons {
    flex-direction: column;
}

.variant-button-group {
  display: flex;
  overflow: auto;
 /* 
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  */
  gap: 0.5rem;
  position: relative;
  min-height: 30px;
  margin: 5px;
}

.product-variant-selects.select-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 50px;
    /* outline: solid 1.5px; */
    border-color: #2d7ff9;
    color: #1358b8;
    border: 1.5px solid #ddd;
    mix-blend-mode: multiply;
    margin: 5px auto;
    width: 100%;
    height: 38px;
    max-height: 38px;
    background: #FFF;
    min-height: 38px;
    max-width: calc(100% - 25px);
    border: none;
}

 select:hover {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.empty-variants-design-first {
    min-height: 50px;
    margin: 5px auto;
}

.product-variant-selects select {
    margin: 0;
    border-radius: 50px;
  border: none;
      text-align: center;
    padding: 0;
    background-position: bottom 5px center;
}

.product-variant-selects.no-carousel {
    min-height: 50px;
}

.variant-carousel {
  max-width:100% ;
}

@media screen and (min-width:768px) {
  .product-variant-selects.with-variants-carousel.select-mode {
      flex: 1 1 30%;
      max-width: 30%;
  }
  
  .variant-wrapper.multi-options .variant-carousel {
      flex: 1 1 70%;
      max-width: 70%;
  }
  
  .variant-wrapper {
      flex-direction: row;
      max-width: calc(100% - 20px);
      margin: 5px auto;
      width: 100%;
      min-height: 50px;
  }
}

.variant-wrapper.multi-options.variants-buttons {
    flex-direction: column;
}

.variant-wrapper.multi-options.variants-buttons .product-variant-selects.with-variants-carousel,
.variant-wrapper.multi-options.variants-buttons .variant-carousel {
flex: 1 1 100%;
max-width: 100%;
   }

.variant-btns-scroll.variant-btns-carousel {
  overflow-x: auto;
  display: flex;
  gap: 0.5rem;
  scrollbar-width: none;
  scrollbar-color: #d0d0d0 transparent;
  padding-bottom: 2px;
  width: 100%;
  max-width: 100%;
}

.variant-btns-scroll.variant-btns-grid {
  display: flex;
  flex-wrap: wrap;
  overflow-x: unset;
  gap: 0.5rem;
}

.variant-btns-scroll::-webkit-scrollbar {
  height: 6px;
  background: transparent;
}
.variant-btns-scroll::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}

.variant-btn {
    display: inline-block;
    padding: 0.55em 1em;
    font-size: .8rem;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #222;
    border-radius: 2em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.12s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    font-weight: 500;
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    flex: 1 1 25%;
    min-width: 25%;
    height: 30px;
    justify-content: space-around;
    align-items: center;
}
.variant-btn:hover,
.variant-btn:focus,
.product-variant-selects:focus {
  border-color: #555;
  color: #111;
  background: #f7f7f7;
}

.variant-btn.active {
  border-color: #2d7ff9;
  background: linear-gradient(90deg,#e8f1fd 0%,#f3f8ff 100%);
  color: #1358b8;
  box-shadow: 0 2px 8px rgba(45,127,249,0.09);
  font-weight: 600;
}

button.variant-btn.variant-btn-disabled {
    opacity: .2;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.variant-btn-disabled:hover,
.variant-btn-disabled:focus {
 border-color: none;
}

.variante-img-contain-grid.active {
    outline: solid 1.5px;
    border-color: #2d7ff9;
    background: linear-gradient(90deg, #e8f1fd 0%, #f3f8ff 100%);
    color: #1358b8;
    box-shadow: 0 2px 8px rgba(45, 127, 249, 0.09);
    border: 1.5px solid #ddd;
}

.variante-img-contain-grid {
  padding:1px;
}


/* Responsive (Mobile) */
@media (max-width: 600px) {
  .variant-btn {
    font-size: 0.97rem;
    padding: 0.5em 1em;
  }
  .db_addtocart_desktop {
    display:none !important;
  }
}

@media screen and (min-width:601px) {
  .db_addtocart_mobile {
    display:none !important;
  }
}


/************************************************** modale Lighthouse et le carrousel ***************************************************/

/* CAROUSEL REUTILSIABLE QUICKVIEW */

.carousel-images-wrapper {
    position: relative;
}

.thumb-img-container { min-width:50px; min-height:50px; max-width:50px; background:#F8F8F8; border-radius:10px; aspect-ratio:1; transition: opacity .2s, box-shadow .2s; opacity:.7; }
.thumb-img-container:hover {  opacity:.9; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; }
.thumb-img-container.active { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;opacity:1; }
.carousel-thumb-img {  object-fit: cover; border-radius: 6px; cursor: pointer; opacity: 0.5; transition: opacity .2s, box-shadow .2s;}
.carousel-thumb-img.active { opacity: 1;}
.carousel-main-image { max-width: 100%; border-radius: 10px; }

.quickview-carousel-button.prev { left: 10px; }
.quickview-carousel-button.next { right: 10px; }
.quickview-thumbnails-btn.prev { left: 0; top: 50%; transform: translateY(-50%);}
.quickview-thumbnails-btn.next { right: 0; top: 50%; transform: translateY(-50%);}
.quickview-thumbnails-container { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; position: relative;}

.carousel-thumb-img.active, .quickview-thumbnail-image.active {
  outline: 2px solid var(--mainColor);
  filter: brightness(1.1);
}
.quickview-thumbnails-btn[disabled],
.quickview-thumbnails-btn[style*="opacity: 0.2"] {
  pointer-events: none;
  cursor: default;
}


.carousel-dots-generic-wrapper {
      overflow: hidden;
    width: 100px;
    margin: 0 auto;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    align-items: center;
    background: #FFF;
    border-radius: 50px;
}

.carousel-dots-generic {
  text-align: center;
    padding-top: 10px;
    display: flex;
    transition: transform 0.3s ease;
    padding: 5px 0;
}

.carousel-dot-btn {
    flex: 0 0 8px;
    height: 8px;
    margin: 0 4px;
    background-color: #bbbbbb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s;
    border: none;
    padding: 0;
  cursor: pointer;
  opacity: 0.6;
}

.carousel-dot-btn.active,
.carousel-dot-btn:focus {
    width: 24px;
    border-radius: 20px;
    flex: 0 0 24px;
    background: #111;
    opacity: 1;
}

.carousel-dot-btn:focus {
  box-shadow: 0 0 0 2px #007aff33;
}
  
.carousel-dots-generic-wrapper::-webkit-scrollbar {
  display: none;
}

/* --- Styles de la modale (Lightbox) --- */
.carousel-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background: rgba(10, 10, 10, 0.88);
  display: none; /* Masqué par défaut */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.28s;
  max-height: 100dvh;
  z-index: 10000;
}

.carousel-lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 34px;
  z-index: 2100;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.carousel-lightbox-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 90vw;
  max-height: 70dvh;
  max-height: 90dvh;
  max-width: fit-content;
}

.carousel-lightbox-image-box {
  position: relative;
  overflow: hidden;
  width: 90vw;
  max-width: 90vw;
  height: 70vh;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 12px;
  max-width: fit-content;
  aspect-ratio: 1;
  max-height: fit-content;
  height: 100vh;
}

.carousel-lightbox-img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
  transition: transform .3s cubic-bezier(.42, 0, .58, 1);
  position: absolute;
  cursor: zoom-in;
  height: auto;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background:#F8F8F8;
}

.carousel-lightbox-img.zoomed {
  cursor: move;
  cursor: zoom-out;
}

.carousel-lightbox-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}

.carousel-lightbox-nav-inner {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.carousel-lightbox-arrow {
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  user-select: none;
  min-width: 48px;
}

.carousel-lightbox-dots {
  display: flex;
  gap: 10px;
  user-select: none;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.carousel-lightbox-dots .carousel-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: #999;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
}

.carousel-lightbox-dots .carousel-dot-btn.active {
  background-color: #fff;
  opacity: 1;
}

/* --- Styles du carrousel principal --- */
.carousel-zoom-icon {
    position: absolute;
    top: auto;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    z-index: 30;
    border: none;
    background: rgba(40, 40, 40, 0.45);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-in;
    backdrop-filter: blur(2px);
}

.carousel-lightbox-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  min-height: 64px;
  min-width: 64px;
  margin: auto;
}
.carousel-lightbox-spinner:after {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #bbb;
  border-top: 4px solid #333;
  animation: carousel-spinner-rotate 1s linear infinite;
}
@keyframes carousel-spinner-rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}


@media screen and (min-width:768px) {
  .carousel-lightbox-arrow {
    position: absolute;
    top: 50%;
  }
  
  .carousel-lightbox-count {
    position: absolute;
    bottom: 5%;
    top: auto;
    background: #686868;
    padding: 2px 5Px;
    border-radius: 10px;
    color: #FFF;
}
  
  button#lightbox-arrow-prev {
      left: 20px;
  }
  
  button#lightbox-arrow-next {
      right: 20Px;
  }
}

@media screen and (max-width:767px) {
  .carousel-lightbox-image-box {
  max-height: fit-content;
        width: 100vw;
    }
  .carousel-lightbox-nav {
    margin-bottom: 0;
    background: #F8F8F8;
  }
  .carousel-lightbox-nav-inner {
    justify-content: space-around;
  }
  .carousel-lightbox-arrow {
    color: #343434;
}
  .carousel-lightbox-image-container {
    max-width: fit-content;
  }
}


/**************************************************************************************

********************************* IMAGE PRODUIT ***************************************

***************************************************************************************/


button.main-arrow, button.thumbs-arrow {
    position: absolute;
    top: 50%;
     transform: translateY(-50%);
    border: none;
    cursor: pointer;
    background: linear-gradient(rgb(246 246 246), rgb(228 228 228));
    color: #333;
    border-radius: 50px;
    width: 45px;
    height: 45px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
    background: rgb(243 243 243 / 0.5);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

button.main-arrow.next, button.thumbs-arrow.next {
    right: 10px;
}
button.main-arrow.prev, button.thumbs-arrow.prev {
    left: 10px;
}

.thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: scroll;
    scrollbar-width: none;
    padding:10px;
}

.thumb-img-container.bd_container_img_loading {
    flex: 0 0 calc(20% - 10px);
    max-width: calc(20% - 10px);
}

.main-image {
    min-height: 600px;
    min-width: 100%;
}

@media screen and (max-width:767px) {
  .main-image {
      min-height: 300px;
      min-width: 100%;
  }
}

.main-image.bd_container_img_loading.carousel_mode.display_all_images {
    display: flex;
    overflow: scroll;
}

.carousel_mode.display_all_images img.carousel-main-image {
    flex: 0 0 90%;
}

/*
 * Styles pour le mode carrousel de l'image principale
 */

/* Conteneur principal lorsque le mode carrousel est activé */
.main-image.carousel-mode {
  overflow: hidden;
  position: relative;
  background: #FFF !important;
}

/* Conteneur qui enveloppe et fait défiler toutes les images */
.main-image-carousel-wrapper {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  height: 100%;
  gap: var(--carousel-gap, 10px);
}

/* Chaque "slide" contenant une image */
.main-image-slide {
  flex: 0 0 var(--slide-width, 100%);
  min-width: var(--slide-width, 100%);
  position: relative;
  overflow: hidden;
  background: #F8F8F8;
  border-radius: 20px;
}

/* Assure que l'image remplit correctement son conteneur */
.main-image-slide .carousel-main-image,
.main-image > .carousel-main-image,
.main-image picture .carousel-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.main-image > .main-image-placeholder,
.main-image picture > .main-image-placeholder {
  filter: blur(8px);
  transform: scale(1.1);
}

.main-image-counter {
  position: absolute;
  bottom: 15px;
  left: 90%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

img.lqip-placeholder {
  position: absolute;
}
div.main-image.carousel-mode > div > div:nth-child(1) > img.lqip-placeholder {
  display: none !important;
}
.lqip-placeholder {
  filter: blur(8px);
  z-index: 2;
  transition: opacity 0.4s ease-in-out;
}

.bd_container_img_loading.lqip {
  overflow: hidden;
}
.bd_container_img_loading.lqip img {
  opacity: 1 !important;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
}
img.lqip.loaded {
  transition: filter 0.7s ease-out, transform 0.7s ease-out;
  filter: blur(0px);
}
img.lqip {
  filter: blur(15px);
}

/* Base */
.product-images-contain {
  display: flex;
  flex-direction: column;
}

/* Nouvelles Règles de positionnement des contrôles */
.carousel-images-wrapper {
  position: relative;
}
.carousel-controls-below-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  gap: 15px;
}
.carousel-controls-below-wrapper .main-arrow {
  position: static;
  transform: none;
}
.carousel-controls-below-wrapper .main-image-counter {
  position: static;
  transform: none;
}
.carousel-zoom-icon-each {
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.main-image-slide:hover .carousel-zoom-icon-each {
  opacity: 1;
}

/* Styles pour les options configurables */
@media (min-width: 992px) {
  .product-carousel { --slide-width: var(--slide-width-pc, 100%); }
  .product-carousel[data-arrows-pos-pc="hidden"] .main-arrow { display: none !important; }
  .product-carousel[data-dots-pos-pc="hidden"] .carousel-dots-generic-wrapper { display: none !important; }
  .product-carousel[data-counter-pos-pc="hidden"] .main-image-counter { display: none !important; }
  .product-carousel[data-zoom-icon-pc="hidden"] .carousel-zoom-icon { display: none !important; }
  .product-carousel[data-layout-pc="grid"][data-zoom-icon-pc="show_on_each"] .carousel-zoom-icon { display: none !important; }
  .product-carousel[data-layout-pc="collage"][data-zoom-icon-pc="show_on_each"] .carousel-zoom-icon { display: none !important; }
}
@media (max-width: 991.98px) {
  .product-carousel { --slide-width: var(--slide-width-mobile, 100%); }
  .product-carousel[data-arrows-pos-mobile="hidden"] .main-arrow { display: none !important; }
  .product-carousel[data-dots-pos-mobile="hidden"] .carousel-dots-generic-wrapper { display: none !important; }
  .product-carousel[data-counter-pos-mobile="hidden"] .main-image-counter { display: none !important; }
  .product-carousel[data-zoom-icon-mobile="hidden"] .carousel-zoom-icon,
  .product-carousel[data-zoom-icon-mobile="hidden"] .carousel-zoom-icon-each { display: none !important; }
  .product-carousel .carousel-controls-below-wrapper.hide-on-mobile {display: none;}
}

/* Masquer les éléments non pertinents par défaut */
.layout-pc-carousel-main .thumbnails-container-contain,
.layout-pc-grid .thumbnails-container-contain,
.layout-pc-grid .carousel-dots-generic-wrapper,
.layout-pc-grid .carousel-zoom-icon,
.layout-pc-collage .thumbnails-container-contain,
.layout-pc-collage .carousel-dots-generic-wrapper,
.layout-pc-collage .carousel-zoom-icon {
  display: none !important;
}
.layout-pc-grid .main-arrow,
.layout-pc-grid .main-image-counter,
.layout-pc-collage .main-arrow,
.layout-pc-collage .main-image-counter {
  display: none;
}

/* MISES EN PAGE PC */
@media (min-width: 992px) {
  .layout-pc-thumbs-bottom .thumb-img-container { min-width: 100px; max-width: 100px;}
  .layout-pc-thumbs-left .product-images-contain { flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .layout-pc-thumbs-left .thumbnails-container-contain { order: -1; width: 100px; margin-right: 0px; flex: 0 0 calc(10% - 10px); }
  .layout-pc-thumbs-left .thumbnails-container-contain.thumbnails-vertical .thumbnails { flex-direction: column; overflow-y: auto; overflow-x: hidden; max-height: 550px; scrollbar-width: none; padding: 5px; }
  .layout-pc-thumbs-left .thumbnails-container-contain.thumbnails-vertical .thumb-img-container { width: 100%; margin-bottom: 0px; margin-right: 0; padding: 0px; }
  .layout-pc-thumbs-left .carousel-images-wrapper { flex-grow: 1; flex: 1 1 calc(90% - 10px); }
  .layout-pc-thumbs-left .thumbs-arrow.prev { transform: rotate(90deg) translateX(-10px); left: 0; bottom: auto; top: 0; }
  .layout-pc-thumbs-left .thumbs-arrow.next { transform: rotate(90deg) translateX(10px); left: 0; bottom: 0; top: auto; }
  .layout-pc-thumbs-left .carousel-controls-below-wrapper { flex: 100%; }
  .layout-pc-thumbs-bottom .main-image-carousel-wrapper,
  .layout-pc-thumbs-left .main-image-carousel-wrapper { gap: var(--gap-pc);}
  .product-carousel .carousel-controls-below-wrapper.hide-on-pc { display: none;}
  .layout-pc-grid .main-image-carousel-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; transform: none !important; }
  .layout-pc-grid .main-image-slide { flex-basis: auto; width: 100%; cursor: zoom-in; }
  .layout-pc-grid .main-image-slide:nth-child(0n + 1) { grid-column: 1 / -1; width: 100%; aspect-ratio: 600 / 600; }
  #sticky-description-left-x { position:sticky; top:90px; }
  .layout-pc-collage .main-image-carousel-wrapper { display: grid; padding: 5px; grid-template-columns: repeat(2, 1fr); transform: none !important; gap: 5px; }
  .layout-pc-collage .main-image-slide { cursor: zoom-in; border-radius: 10px; }
  .layout-pc-collage .main-image-slide:nth-child(3n + 1) { grid-column: 1 / -1; }
  .layout-pc-collage .main-image-slide:nth-child(0n + 1) { width: 100%; aspect-ratio: 600 / 600; }
}

/* MISES EN PAGE MOBILE (RÉINITIALISATION) */
@media (max-width: 991.98px) {
  .product-images-contain { flex-direction: column !important; }
  .carousel-dots-generic-wrapper, .layout-pc-collage .carousel-dots-generic-wrapper { display: block !important; }
  .layout-pc-grid .main-image-carousel-wrapper,
  .layout-pc-collage .main-image-carousel-wrapper { display: flex !important; }
  .main-arrow, .main-image-counter { display: block !important; }
  .layout-mobile-carousel-with-thumbs .thumbnails-container-contain { display: block !important; width: 100%; margin-right: 0; order: 2; }
  .layout-mobile-carousel-no-thumbs .thumbnails-container-contain { display: none !important; }
  .thumbnails-container-contain.thumbnails-vertical .thumbnails,
  .thumbnails-container-contain .thumbnails { flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; }
  .thumbnails-container-contain.thumbnails-vertical .thumb-img-container,
  .thumbnails-container-contain .thumb-img-container { margin-right: 10px !important; margin-bottom: 0 !important; }
  .thumbnails-container-contain.thumbnails-vertical .thumbs-arrow.prev,
  .thumbnails-container-contain.thumbnails-vertical .thumbs-arrow.next { transform: none !important; left: 10px; }
  .thumbnails-container-contain.thumbnails-vertical .thumbs-arrow.next { left: auto; right: 10px; }
  .carousel-zoom-icon-each { opacity: 1; }
  .thumbnails { padding: 10px 0; }
  .layout-pc-thumbs-bottom .main-image-carousel-wrapper,
  .layout-pc-thumbs-left .main-image-carousel-wrapper { gap: var(--gap-mobile);}
}

.main-image-slide.not-highlighted,
.thumb-img-container.not-highlighted {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.main-image-slide.is-highlighted,
.thumb-img-container.is-highlighted {
  opacity: 1 !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  z-index: 2;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.main-arrow.is-invisible,
.thumbs-arrow.is-invisible {
  pointer-events: none;
  opacity: 0 !important;
  transition: opacity 0.2s;
}

/* Collage sticky spécifique */
@media screen and (min-width:992px) {
  .layout-pc-collage.layout-pc-collage-sticky .main-image-slide:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 9;
    position: sticky;
    top: 90px;
    height: calc(100dvh - 92px);
    align-self: start;
  }
  .layout-pc-collage.layout-pc-collage-sticky .main-image-slide:nth-child(1) img {
    object-fit: contain;
  }
  .layout-pc-collage.layout-pc-collage-sticky .main-image-slide:not(:first-child) {
    grid-column: 2;
  }
  .layout-pc-collage.layout-pc-collage-sticky .main-image-slide:nth-child(0n + 1) {
    width: 100%;
    aspect-ratio: 600 / 600;
    grid-column: 1 / 2;
    position: sticky;
    top: 80px;
    height: 100vh;
    max-height: calc(100dvh - 12dvh);
  }
  .layout-pc-collage.layout-pc-collage-sticky .main-image.carousel-mode {
    overflow: unset;
  }
  .layout-pc-collage.layout-pc-collage-sticky .main-image-carousel-wrapper {
    display: grid;
    grid-template-columns: 1fr .75fr;
    grid-auto-rows: min-content;
    gap: 5px;
  }
   /*x1*/
  .layout-pc-collage.layout-pc-collage-sticky.small-one .main-image-carousel-wrapper {
    display: block;
  }
  /*x2-3*/
   .layout-pc-collage.layout-pc-collage-sticky.small-two .main-image-carousel-wrapper,
   .layout-pc-collage.layout-pc-collage-sticky.small-three .main-image-carousel-wrapper {
      grid-template-columns: 1fr 1fr;
   }
  .layout-pc-collage.layout-pc-collage-sticky.small-two .main-image-slide img,
  .layout-pc-collage.layout-pc-collage-sticky.small-three .main-image-slide img {
       object-fit: contain;
    }
    /*x2*/
    .layout-pc-collage.layout-pc-collage-sticky.small-two .main-image-slide:nth-child(1) {
      grid-row: 1 / 1;
    }
    /*x3*/
    .layout-pc-collage.layout-pc-collage-sticky.small-three .main-image-slide:nth-child(1) {
      grid-area: 1 / 1;
    }
}

@media screen and (max-width:600px) {
  button.main-arrow, button.thumbs-arrow {
      top: 90%;
  }
  	
  .carousel-zoom-icon, .carousel-zoom-icon-each {
  	bottom:20%;
  }
  	
  .main-image-counter {
  	bottom: 90%;
      font-size: 10px;
  }
}

/*************************************************** VARIANTES PAGE PRODUIT ***************************************************/
    /* ==========================================================================
       1. Base Commune Raffinée
       ========================================================================== */
    .bd_swatch_variants_container {
      font-size: 1.08rem;
        letter-spacing: .01em;
        background: var(--color-bg);
        padding: 2.2rem 1.4rem 1.7rem 1.4rem;
        border-radius: 2.2rem;
        margin-bottom: 2.2rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        border: none;
        background: #F4F4F4;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    
    .swatch-container .swatch {
        margin-bottom: 20px;
    }
    
    .swatch .header {
        font-size: 0.9rem; /* Police légèrement réduite */
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .swatch .header .header-variant-title {
        font-weight: 400;
        text-transform: none;
        color: #666;
    }
    
    .swatch .swatch-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px;
      max-width: 100%;
      padding:2Px;
}


    
    /* Masquer les inputs radio natifs */
    .swatch .input-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .swatch .swatch-element {
        position: relative;
        flex: 0 0 calc(12.5% - 8px);
    }
    
    /* ==========================================================================
       2. Sélecteurs de Taille (Boutons) - Style Fin
       ========================================================================== */
    .swatch:not(.variant-images) .swatch-element label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 42px; /* Largeur et hauteur réduites */
        height: 42px;
        margin: 0; padding: 0 8px;
        border: 1px solid #ddd; /* Bordure plus fine */
        border-radius: 6px; /* Arrondi subtil */
        background-color: #fff;
        color: #444;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease-out; /* Transition plus rapide */
        user-select: none;
    }
    
    /* Effet au survol : un simple changement de bordure, sans ombre */
    .swatch:not(.variant-images) .swatch-element label:hover {
        border-color: #888;
    }
    
    /* Variante SÉLECTIONNÉE : nette et affirmée */
    .swatch:not(.variant-images) .input-radio:checked + label {
        border-color: #222;
        background-color: #222;
        color: #fff;
    }
    
    /* Variante ÉPUISÉE : visuellement désactivée */
    .swatch:not(.variant-images) .swatch-element.soldout label {
        color: #bbb;
        background-color: #f9f9f9;
        cursor: not-allowed;
        position: relative;
        overflow: hidden;
    }
    
    .swatch:not(.variant-images) .swatch-element.soldout label:hover {
        border-color: #ddd; /* Pas d'effet au survol */
    }
    
    /* Ligne diagonale plus fine pour barrer l'option */
    .swatch:not(.variant-images) .swatch-element.soldout label::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px; /* Ligne plus fine */
        background-color: #ddd;
        transform: rotate(-45deg);
    }
    
    .swatch:not(.variant-images) .swatch-element.soldout label .crossed-out {
        display: none;
    }

    @media screen and (max-width:750px) {
          .swatch .swatch-element {
          flex: 0 0 calc(25% - 8px);
      }
    }
    
    /* ==========================================================================
       3. Sélecteurs de Couleur (Images) - Style Épuré
       ========================================================================== */
   .bd_swatch_variants_container .variant-images {
     gap: 0;
     margin: 10px 0;
   }

   .bd_swatch_variants_container .swatch.clearfix {
    margin: 10px;
  }

    .variant-images .swatch-element label {
        display: block;
        width: 44px;
        height: 44px;
        border: 1.5px solid #fff;
        outline: 1px solid #e0e0e0;
        padding: 2px;
        border-radius: 10px;
        cursor: pointer;
        transition: outline-color 0.15s ease-out;
        position: relative;
        overflow: hidden;
        margin: 0;
    }
    
    .variant-images .swatch-element label img:not(.crossed-out) {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    /* Effet au survol */
    .variant-images .swatch-element label:hover {
        outline-color: #999;
    }
    
    /* Variante SÉLECTIONNÉE : la bordure externe s'affirme */
    .variant-images .input-radio:checked + label {
        outline-color: #222;
        outline-width: 1.5px; /* Bordure légèrement plus épaisse pour la sélection */
    }
    
    /* Variante ÉPUISÉE */
    .variant-images .swatch-element.soldout label {
        cursor: not-allowed;
        outline-color: #e0e0e0;
    }
    
    .variant-images .swatch-element.soldout label:hover {
        outline-color: #e0e0e0; /* Pas d'effet */
    }
    
    /* Superposition grisée pour indiquer l'indisponibilité */
    .variant-images .swatch-element.soldout label::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.5); /* Voile blanc semi-transparent */
        border-radius: 50%;
    }
    
    .variant-images .swatch-element.soldout label .crossed-out {
        display: block;
        position: absolute;
        z-index: 1; /* S'assure que la croix est au-dessus du voile */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 45%;
        height: 45%;
        opacity: 0.6;
    }
    
    /* ==========================================================================
       4. Gestion pour Nombreuses Variantes (Version Corrigée)
       ========================================================================== */
    
    /* Cache les variantes qui ont cette classe (ajoutée par le JS) */
    .swatch-element.variant-hidden {
        display: none !important;
    }
    
    /* Style du bouton "Voir plus" */
    .btn-see-more {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        height: 48px;
        padding: 0 15px;
        border: 1.5px dashed #b0b0b0;
        border-radius: 8px;
        background-color: #f8f8f8;
        color: #333;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    
    .btn-see-more:hover {
        border-color: #888;
        background-color: #f0f0f0;
    }

    form#addToCartFormId2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}



/******************************* Début styles rajoutés ********************************/

  /* wishlist - quickview */
  /*
    button.product-quickview {
        padding: 10px;
        border-radius: 50%;
        border: none;
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFF;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        transition: all .3s;
        z-index: 10;
        position: absolute;
        bottom: 35px;
        right: 10px;
        width: 44px;
        height: 44px;
        top: 20%;
    }

    button.product-quickview span {
      display:none;
    }

    @media screen and (max-width:1024px) {
      button.product-quickview span {
        font-size: 7px !important;
        line-height: .8;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      button.product-quickview i.fa.fa-eye {
       width: 18px;
       height: 18px;
      }
      
      button.product-quickview {
          display: flex;
          flex-direction: column;
          gap: 0;
      }
    }

    
    .add-to-wishlist {
        position: absolute;
        top: 10px;
        left: 10px;
    	background: none;
        color: white;
        font-size: 25Px;
        border: none;
        cursor: pointer;
        border-radius: 3px;
        display: inline-block;
        text-align: center;
        transition: background-color 0.3s;
        z-index: 2;
        border-radius: 50%;
        padding: 0;
    }
      
      .quickview-gi {
          position: absolute;
          right: 0;
          bottom: 35%;
      }
        
      div#wishlist-gi {
          position: absolute;
          top: 10px;
          left: auto;
          right:10px;
      }
    
    .quickview-gi {
        position: absolute;
        right: 0;
        bottom: 35%;
    }
    
    .default-collections .quickview-gi {
        top: 45%;
        right: 5px;
    }


    .bd_similar-products-btn {
        position: absolute;
        top: 55px;
        right: 10px;
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        transform: scale(0.8);
    }

    .bd_img_container:hover .bd_similar-products-btn,
    .product-grid-item:hover .bd_similar-products-btn {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.1s;
    }

    .bd_similar-products-btn:hover {
        background-color: #fff;
        transform: scale(1.1) rotate(15deg);
    }

    .bd_similar-products-btn svg {
        width: 20px;
        height: 20px;
    }

  .dynamic-recommendations-container .add-to-wishlist,
    .dynamic-recommendations-container .product-quickview {
        position: absolute !important;
        top: 10px;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        background-color: rgb(187 187 187 / 14%);
        backdrop-filter: blur(5px);
        border-radius: 50%;
      max-width: 30px;
        max-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .dynamic-recommendations-container .add-to-wishlist .fa.fa-heart-o,
    .dynamic-recommendations-container .add-to-wishlist svg {
      max-width: 20px;
      max-height: 20px;

    }

    .dynamic-recommendations-container .product-grid-item:hover .add-to-wishlist,
    .dynamic-recommendations-container .product-grid-item:hover .product-quickview {
        opacity: 1;
        transform: translateY(0);
    }

    .dynamic-recommendations-container .add-to-wishlist, .dynamic-recommendations-container .product-quickview { right: 5px; }
    .dynamic-recommendations-container .product-quickview { bottom:0;margin-bottom: 0; }
    .dynamic-recommendations-container .add-to-wishlist:hover,
    .dynamic-recommendations-container .product-quickview:hover {
        background-color: #fff;
    }

  */
    .wishlist-gi svg, button.add-to-wishlist svg {
        stroke: #fff;
        stroke-width: 8px;
        filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.5));
        fill: rgb(0 0 0 / 27%);
        width: 30px;
        height: 30px;
    }

    .quickview-gi .fa-eye:before {
            content: "";
      }
    .wishlist-gi .fa-heart-o:before, .wishlist-gi .fa-heart:before {
          content: "";
      }
    
    .user-icons {
    position:unset;
        left: 0;
        top: 0;
        padding: 0;
        width: auto;
        height: auto;
        /* z-index: 10; */
    }

    .add-to-wishlist {
      background: none;
      border: none;
    }
    button.bd_similar-products-btn {
    background: none;
    }

    /* patch pour scale */
    /* ================================================================= */
    /* == STYLES V3 - ICONES (TAILLE ADAPTATIVE & CONTRÔLÉE) == */
    /* ================================================================= */

    /* ------------------------------------------------------------------ */
    /* 0. NOUVEAU : Le conteneur de l'image devient une référence de taille
    /* ------------------------------------------------------------------ */
    .bd_img_container {
      position: relative;
      overflow: hidden;
      container-type: inline-size; /* Permet d'utiliser les unités cqw */
    }

    /* ------------------------------------------------------------------ */
    /* 1. RESET & STYLE COMMUN DES BOUTONS
    /* ------------------------------------------------------------------ */
    .bd-action-icons-wrapper .add-to-wishlist,
    .bd-action-icons-wrapper .product-quickview,
    .bd-action-icons-wrapper .bd_similar-products-btn {
      /* ... (les autres styles restent identiques) ... */
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(5px);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 50%;

      /* -- MODIFICATION : La taille devient adaptative -- */
      width: clamp(20px, 12cqw, 40px);
      height: clamp(20px, 12cqw, 40px);
    }


    /* ----------------------------------------- */
    /* 2. STYLE DU CONTENEUR DES ICÔNES
    /* ----------------------------------------- */
    .bd-action-icons-wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 1;
      transform: none;
    }


    /* ----------------------------------------- */
    /* 3. STYLE DES ICÔNES (SVG)
    /* ----------------------------------------- */
    .bd-action-icons-wrapper button svg {
      color: #212121;
      /*
        stroke: currentColor;
        fill: currentColor;
      */
      transition: color 0.25s ease, transform 0.25s ease;

      /* -- MODIFICATION : La taille du SVG s'adapte aussi -- */
      /* On utilise la moitié de la taille du bouton pour un bon ratio */
      width: clamp(16px, 6cqw, 20px);
      height: clamp(16px, 6cqw, 20px);
    }


    /* ------------------------------------------------------------------ */
    /* 4. EFFETS AU SURVOL & FOCUS (identiques)
    /* ------------------------------------------------------------------ */
    .bd-action-icons-wrapper .add-to-wishlist:hover,
    .bd-action-icons-wrapper .product-quickview:hover,
    .bd-action-icons-wrapper .bd_similar-products-btn:hover,
    .bd-action-icons-wrapper .add-to-wishlist:focus-visible,
    .bd-action-icons-wrapper .product-quickview:focus-visible,
    .bd-action-icons-wrapper .bd_similar-products-btn:focus-visible {
      background-color: #FFFFFF;
      transform: scale(1.1);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .bd-action-icons-wrapper button:hover svg {
      transform: scale(1.05);
    }

    .bd-action-icons-wrapper button:focus-visible {
      outline: 2px solid #333;
      outline-offset: 2px;
    }


  /* fin wishlist - quickview */

img[data-src] {
  opacity:0;
  transition:opacity .3s ease-in-out;
}
img[data-src].loaded {
  opacity:1;
}

.bd_product_badge {
    background: linear-gradient(45deg, #000, #B6172B, #595959);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
    top: 0 !important;
    position: absolute;
    color: #FFF;
    padding: 5px;
    right: auto;
    left: 0;
    border-bottom-right-radius: 20px;
}

/*sticky image produit */
.wrapper1, .wrapper2 {
    overflow: visible;
}
.product-image-container-carousel.sticky-description-gauche,
.product-image-container-carousel.sticky-description-bas {
  height: fit-content;
  position: sticky;
  top: 80px;
}
  /* fin sticky image */

/* ==========================================================================
   # Text Highlight
   ========================================================================== */
.text-highlight {
  /* Style de base pour la surbrillance */
  background-color: var(--color-text-highlight-bg);
  color: inherit; /* Le texte garde sa couleur originale */
  padding: 0.1em 0.4em;
  border-radius: 0.25rem; /* Bords légèrement arrondis */
  white-space:-moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space:-pre-wrap !important;      /* Opera 4-6 */
  white-space:-o-pre-wrap !important;    /* Opera 7 */
  white-space:pre-wrap !important;       /* css-3 */
  word-wrap:break-word !important;       /* Internet Explorer 5.5+ */
  word-break:break-all;
  white-space:normal;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  -webkit-background-clip: text;
  background-clip: text;
}

.text-highlight--gradient {
  /* Style pour la surbrillance en dégradé */
  background-color: transparent;
  background-image: var(--gradient-text-highlight);
  background-size: 100%;
  background-repeat: repeat;
}

/* Amélioration : une légère animation au survol pour un effet premium */
.text-highlight:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
:root {
  --color-text-highlight-bg: #000000;
  --gradient-text-highlight: linear-gradient(180deg, rgba(251, 51, 166, 1), rgba(127, 72, 176, 1) 50%, rgba(48, 145, 211, 1) 100%);
}


/* ==========================================================================
   MEGA MENU
   ========================================================================== */

 /* --- AJOUT DES SCHÉMAS DE COULEURS v3.0 --- */
  .color-scheme--light {
    --menu-background: #ffffff;
    --column-background: #f9f9f9;
    --border-color: #f0f0f0;
    --text-color-primary: #1a1a1a;
    --text-color-secondary: #666666;
    --accent-color: #1a1a1a;
    --accent-color-hover: #555555;
    --link-hover-background: #f0f0f0;
    --card-background: #ffffff;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 8px 25px rgba(0,0,0,0.08);
  }
  .color-scheme--dark {
    --menu-background: #1e1e1e;
    --column-background: #252525;
    --border-color: #333333;
    --text-color-primary: #f5f5f5;
    --text-color-secondary: #a0a0a0;
    --accent-color: #ffffff;
    --accent-color-hover: #cccccc;
    --link-hover-background: #333333;
    --card-background: #2a2a2a;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.1);
    --card-shadow-hover: 0 8px 25px rgba(0,0,0,0.2);
  }
  .color-scheme--ocean {
    --menu-background: #f0f7fa;
    --column-background: #e1eef4;
    --border-color: #cddde6;
    --text-color-primary: #0a3d62;
    --text-color-secondary: #4a6a8f;
    --accent-color: #3c6382;
    --accent-color-hover: #0a3d62;
    --link-hover-background: #d4e3eb;
    --card-background: #ffffff;
    --card-shadow: 0 4px 15px rgba(60, 99, 130, 0.05);
    --card-shadow-hover: 0 8px 25px rgba(60, 99, 130, 0.1);
  }
  .color-scheme--forest {
    --menu-background: #f4f3ef;
    --column-background: #e8e6e1;
    --border-color: #dcd9d2;
    --text-color-primary: #3d402e;
    --text-color-secondary: #7a7c68;
    --accent-color: #596a3a;
    --accent-color-hover: #3d402e;
    --link-hover-background: #e2e0d9;
    --card-background: #ffffff;
    --card-shadow: 0 4px 15px rgba(89, 106, 58, 0.05);
    --card-shadow-hover: 0 8px 25px rgba(89, 106, 58, 0.1);
  }
  
/* --- UI/UX Overhaul by Gemini --- */
:root {
  --mega-menu-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.mega-menu-container {
  /*
  --menu-background: #ffffff;
  --column-background: #f9f9f9;
  --border-color: #f0f0f0;
  --text-color-primary: #1a1a1a;
  --text-color-secondary: #666666;
  --text-color-tertiary: #000000;
  --accent-color: #1a1a1a;
  --accent-color-hover: #555555;
  --link-hover-background: #f5f5f5;
  --card-background: #ffffff;
  --card-shadow: 0 4px 15px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 8px 25px rgba(0,0,0,0.08);
  */
  --text-color-tertiary: #000000;
  --border-radius-lg: 16px;
  --border-radius-md: 10px;
  --transition-fast: 0.2s;
  --transition-medium: 0.4s;
  --transition-easing: cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  position: relative;
  font-family: var(--mega-menu-font);
}
  /*
@media (prefers-color-scheme: dark) {
 .mega-menu-container {
    --menu-background: #1e1e1e;
    --column-background: #252525;
    --border-color: #333333;
    --text-color-primary: #f5f5f5;
    --text-color-secondary: #a0a0a0;
    --accent-color: #ffffff;
    --accent-color-hover: #cccccc;
    --link-hover-background: #333333;
    --card-background: #2a2a2a;
 }
}
  */

html {
  scroll-behavior: smooth;
}

.mega-menu-container[data-sub-menu-active="true"] {
  min-height: 300px;
}
.mega-menu, .mega-menu__sub-panel-content {
  background: var(--menu-background);
}
.mega-menu__panel {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-medium) var(--transition-easing), visibility var(--transition-medium);
}
.mega-menu__panel--main {
  visibility: visible;
  transform: translateX(0);
}
.mega-menu__panel--sub {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  visibility: hidden;
  background: var(--menu-background);
  padding: 1.5rem;
  overflow-y: auto;
}
.mega-menu-container[data-sub-menu-active="true"] .mega-menu__panel--main {
  transform: translateX(-100%);
  visibility: hidden;
}
.mega-menu-container[data-sub-menu-active="true"] .mega-menu__panel--sub {
  transform: translateX(0);
  visibility: visible;
}
.mega-menu__sub-panel-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.mega-menu__back-button {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.mega-menu__back-button:hover {
  color: var(--accent-color-hover);
}
.mega-menu {
  display: flex;
  flex-wrap: wrap; /* changé pour pouvoir faire retourner à la ligne */
  box-shadow: none;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  overflow-y: auto;
  max-height: calc(100dvh - var(--header-height));
  height: 100%;
  scrollbar-width: none;
  padding-bottom: 50px;
}
.mega-menu__col {
  padding: 2rem;
  background: transparent;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}
.mega-menu__col:first-child {
  background: var(--column-background);
}
.mega-menu__col:last-child { border-right: none; }

.w-1\/4 { flex-basis: 25%; } .w-1\/3 { flex-basis: 33.3333%; }
.w-1\/2 { flex-basis: 50%; } .w-2\/3 { flex-basis: 66.6666%; }
.w-3\/4 { flex-basis: 75%; } .w-full { flex-basis: 100%; }

.mega-menu__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
.mega-menu__desc {
  font-size: 0.95rem;
  color: var(--text-color-secondary);
  line-height: 1.6;
  margin: 0;
}
.mega-menu__links-list, .mega-menu__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mega-menu__link {
  color: var(--text-color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: relative;
}
.mega-menu__link:hover {
  color: var(--accent-color);
  background: var(--link-hover-background);
}
.mega-menu__link-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
}

.mega-menu__grid {
  display: grid;
  gap: 1.5rem;
}
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.mega-menu__card {
  background: var(--card-background);
  border-radius: var(--border-radius-md);
  box-shadow: none;
  border: 1px solid transparent;
  text-align: left;
  text-decoration: none;
  color: var(--text-color-primary);
  transition: box-shadow var(--transition-medium) var(--transition-easing), transform var(--transition-medium) var(--transition-easing), border-color var(--transition-medium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mega-menu__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-color);
}
.mega-menu__card-image-wrapper {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--column-background);
}
.mega-menu__card-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium) ease;
}
.mega-menu__card:hover .mega-menu__card-image {
  transform: scale(1.05);
}
.mega-menu__card-placeholder .placeholder-svg {
  width: 100%; height: 100%; color: var(--border-color);
}
.mega-menu__card-content {
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-grow: 1;
  justify-content: center;
}
.mega-menu__card-title { font-weight: 600; font-size: 0.95rem; }
.mega-menu__card-price { font-size: 0.9rem; color: var(--text-color-secondary); display: flex; gap: 0.5rem; justify-content: center; align-items: center;}

.badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 1em;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  width: auto;
}
.badge-sale { background: #ffeded; color: #d82c0d; }
.badge-new { background: #eafcef; color: #008a31; }
.badge-custom-on-image {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: var(--accent-color);
  color: var(--menu-background);
}

.bd-mega-menu-section-container .btn {
  display: inline-block;
  padding: 0.8em 1.5em;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--accent-color);
  transition: all var(--transition-fast) ease;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.bd-mega-menu-section-container .btn-primary { background: var(--accent-color); color: var(--menu-background); }
.bd-mega-menu-section-container .btn-primary:hover { background: var(--accent-color-hover); border-color: var(--accent-color-hover); }
.bd-mega-menu-section-container .btn-secondary { background: transparent; color: var(--accent-color); }
.bd-mega-menu-section-container .btn-secondary:hover { background: var(--accent-color); color: var(--menu-background); }

.mega-menu__articles { display: flex; flex-direction: column; gap: 1rem; }
.mega-menu__article-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; border-radius: var(--border-radius-md); padding: 0.5rem; margin: -0.5rem; transition: background-color var(--transition-fast); }
.mega-menu__article-link:hover { background-color: var(--link-hover-background); }
.mega-menu__article-image-wrapper { width: 60px; height: 60px; flex-shrink: 0; overflow: hidden; border-radius: var(--border-radius-md);}
.mega-menu__article-image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-medium) ease; }
.mega-menu__article-link:hover .mega-menu__article-image { transform: scale(1.08); }
.mega-menu__article-content .font-semibold { transition: color var(--transition-fast); font-weight: 500; font-size: 0.95rem; }
.mega-menu__article-link:hover .font-semibold { color: var(--accent-color-hover); }

.mega-menu__separator { border: 0; height: 1px; background: var(--border-color); margin: 0; }

.mega-menu-accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.25rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--text-color-primary);
  transition: color var(--transition-fast);
}
.mega-menu-accordion__trigger:hover { color: var(--accent-color-hover); }
.mega-menu-accordion__chevron {
  transition: transform var(--transition-medium) var(--transition-easing);
  flex-shrink: 0;
  margin-left: 1rem;
}
.mega-menu-accordion__trigger[aria-expanded="true"] .mega-menu-accordion__chevron { transform: rotate(180deg); }
.mega-menu-accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-medium) var(--transition-easing);
}
.mega-menu-accordion__content[hidden] { display: none; }
.mega-menu-accordion__content-inner {
  overflow: hidden;
  padding-top: 1.5rem;
}

.mega-menu-accordion__trigger button {
  border-radius:0px !important;
}

:is(.mega-menu__link, .btn, .mega-menu-accordion__trigger, .mega-menu__back-button):focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* --- Menu de Navigation Amélioré --- */
.mega-menu__nav-menu .mega-menu__link span {
  flex-grow: 1;
}
.mega-menu__nav-list { gap: 0.25rem; }
.mega-menu__nav-chevron {
  transition: transform var(--transition-medium) var(--transition-easing);
  color: var(--text-color-secondary);
}
.mega-menu__link:hover .mega-menu__nav-chevron {
  color: var(--accent-color-hover);
}
.mega-menu__nav-item--has-children > .mega-menu__nav-panel-content {
  display: none;
}
.mega-menu__nav-item--has-children.is-open > .mega-menu__nav-panel-content {
  display: block;
}
.mega-menu__nav-list--level-2, .mega-menu__nav-list--level-3 {
  padding-left: 1.25rem;
  margin-top: 0.75rem;
  border-left: 1px solid var(--border-color);
}
.mega-menu__nav-list--level-2 .mega-menu__link,
.mega-menu__nav-list--level-3 .mega-menu__link {
  font-size: 0.95em;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.mega-menu__nav-list--level-3 { padding-left: 1.25rem; }
.mega-menu__nav-panel-content {
  padding-top: 0.75rem;
}

/* --- Menu Spécial Collections --- */
.special-collections-menu { display: flex; flex-direction: column; gap: 1rem; }
.special-collections__item { position: relative; transition: all var(--transition-medium) ease; }
.special-collections__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  min-height: 140px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--column-background);
  transition: transform var(--transition-medium) var(--transition-easing);
}
.special-collections__item:hover .special-collections__card:not(.is-expanded .special-collections__card) {
  transform: scale(1.01);
}
.special-collections__overlay { position: absolute; inset: 0; z-index: 1; transition: opacity var(--transition-fast) ease; }
.special-collections__content { position: relative; z-index: 2; }
.special-collections__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
  margin: 0 0 1rem 0;
}
.special-collections__full-link { position: absolute; inset: 0; z-index: 3; }
.special-collections__expand-btn {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast) ease;
  aspect-ratio: 1;
}
.special-collections__expand-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.special-collections__item.is-expanded .special-collections__expand-btn svg { transform: rotate(45deg); }

.special-collections__children-wrapper {
  overflow: hidden;
  position: relative;
  background-color: var(--column-background);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-medium) var(--transition-easing), padding var(--transition-medium) ease;
}
.special-collections__children-wrapper[hidden] {
  padding-top: 0; padding-bottom: 0;
}
.special-collections__item.is-expanded .special-collections__children-wrapper {
  grid-template-rows: 1fr;
  padding: 1.5rem;
}
.special-collections__children-container {
  min-height: 0;
}
.special-collections__children-container.is-scrollable {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  margin: unset;
}
.special-collections__children-container.is-scrollable::-webkit-scrollbar { display: none; /* Safari and Chrome */ }

.special-collections__children-container.is-scrollable > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  flex-basis: calc((100% - (var(--scroll-items-mobile, 1.5) - 1) * 1rem) / var(--scroll-items-mobile, 1.5));
}

.special-collections__children-container.is-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--grid-cols-mobile, 2), 1fr);
}

.special-collections__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 0.5rem));
  z-index: 5;
  background: var(--menu-background);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-primary);
  transition: all var(--transition-fast);
}
.special-collections__nav-btn:hover { border-color: var(--accent-color); color: var(--accent-color); transform: translateY(calc(-50% - 0.5rem)) scale(1.1); }
.special-collections__nav-btn--prev { left: 0.5rem; }
.special-collections__nav-btn--next { right: 0.5rem; }
.special-collections__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(calc(-50% - 0.5rem)) scale(1); }


/* --- Responsive & Mobile --- */
@media (max-width: 992px) {
  .mega-menu {
   /* flex-direction: column;  empêche le scroll*/ 
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .mega-menu__col {
    width: 100% !important; /* Override inline styles */
    flex-basis: auto !important;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
  }
  .mega-menu__col:last-child { border-bottom: none; }
  .mega-menu-container {
    max-width:100%;
  }
  .mega-menu-container.is-loading .mega-menu-skeleton {
    flex-direction: column;
    min-height: calc(100dvh - var(--header-height));
    border-radius: 0px;
 }
  
}

@media (min-width: 767px) {
  .special-collections__children-container.is-scrollable > * {
    flex-basis: calc((100% - (var(--scroll-items-desktop, 4) - 1) * 1rem) / var(--scroll-items-desktop, 4));
  }
  .special-collections__children-container.is-grid {
    grid-template-columns: repeat(var(--grid-cols-desktop, 4), 1fr);
  }
}
  
.mega-menu__card-container {
  overflow: hidden;
}

/* --- Bloc Bouton CTA --- */
.mega-menu-button__wrapper {
  display: flex;
  width: 100%;
  margin: 0.5rem 0;
  /* Centrage du bouton à l'intérieur du wrapper s'il n'a pas de classe d'alignement */
  justify-content: center;
}

.mega-menu-button {
  --button-primary-bg: var(--accent-color);
  --button-primary-text: var(--menu-background);
  --button-primary-bg-hover: var(--menu-background);
  --button-primary-text-hover: var(--accent-color);
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  z-index: 1;
  overflow: hidden;
  transition: color 0.4s var(--transition-easing), border-color 0.4s var(--transition-easing), transform 0.3s var(--transition-easing);
  border-radius: var(--mm-button-border-radius, 30px);
  gap: 0.6em;
}

.mega-menu-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}
.mega-menu-button__icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}


.mega-menu-button:hover {
  transform: translateY(-2px);
}

.mega-menu-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--button-primary-bg-hover);
  border-radius: inherit;
  transform: scale(0);
  transition: transform 0.4s var(--transition-easing);
  z-index: -1;
}

.mega-menu-button:hover::before {
  transform: scale(1);
}

.mega-menu-button__text {
  position: relative;
  z-index: 2;
  transition: color 0.4s var(--transition-easing);
}

/* --- Styles de boutons --- */
.mm-button--primary {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}
.mm-button--primary:hover {
  color: var(--button-primary-text-hover);
}

.mm-button--secondary {
  background-color: transparent;
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.mm-button--secondary:hover {
  color: var(--button-primary-text);
}
.mm-button--secondary::before {
  background-color: var(--accent-color);
}

.mm-button--tertiary {
  background-color: transparent;
  border-color: transparent;
  color: var(--accent-color);
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.mm-button--tertiary:hover {
  color: var(--accent-color-hover);
}
.mm-button--tertiary::before {
  background-color: var(--link-hover-background);
}


/* --- Tailles de boutons --- */
.mm-button--small {
  font-size: 0.8rem;
  padding: 0.5em 1.2em;
}
.mm-button--medium {
  font-size: 0.95rem;
  padding: 0.8em 1.8em;
}
.mm-button--large {
  font-size: 1.1rem;
  padding: 1em 2.2em;
}

/* --- Alignement --- */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.w-full { width: 100%; }

/* --- Bloc Zone de Réduction --- */
.mm-discount-zone {
  display: flex;
  position: relative;
  width: 100%;
  padding: 2.5rem 2rem;
  border-radius: var(--border-radius-lg, 16px);
  background-color: var(--dz-bg-color);
  color: var(--dz-text-color);
  overflow: hidden;
  transition: transform 0.4s var(--transition-easing);
}

.mm-discount-zone:hover {
  transform: scale(1.02);
}

.mm-discount-zone__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  width: 100%;
  z-index: 2;
}

.mm-discount-zone__pre-heading {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.mm-discount-zone__heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--dz-text-color);
}

.mm-discount-zone__description {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 45ch;
  opacity: 0.9;
}
.mm-discount-zone__description p {
  margin: 0;
}

.mm-discount-zone__button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8em 2em;
  border-radius: 50px;
  background-color: var(--dz-text-color);
  color: var(--dz-bg-color);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.mm-discount-zone__button:hover {
  transform: scale(1.05);
}

/* Layout Bannière */
.mm-discount-zone--banner {
  min-height: 180px;
  justify-content: center;
}

/* --- Compte à rebours --- */
.mm-countdown {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  margin-top: 0.5rem;
}
.mm-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  background: rgba(0,0,0,0.05);
  padding: 0.6rem 0.8rem;
  border-radius: var(--border-radius-md, 10px);
  min-width: 50px;
}
.mm-countdown__value {
  font-size: 1.5rem;
  font-weight: 600;
}
.mm-countdown__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.mm-countdown__separator {
  font-size: 1.5rem;
  font-weight: 600;
  animation: countdown-blink 1.5s infinite;
}

@keyframes countdown-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Product List Enhancements --- */
.product-list-wrapper {
  position: relative;
  width: 100%;
}

.product-list-container {
  width: 100%;
}

/* --- Layout: Grid --- */
.layout--grid {
  display: grid;
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .grid-cols-mobile--1 { grid-template-columns: 1fr; }
  .grid-cols-mobile--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-cols-desktop--1 { grid-template-columns: 1fr; }
  .grid-cols-desktop--2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-desktop--3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-desktop--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Layout: Scroll --- */
.layout--scroll {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem; /* Espace pour l'ombre de la carte */
  margin-bottom: -1rem;
  scrollbar-width: none; /* Firefox */
}
.layout--scroll::-webkit-scrollbar { display: none; }
.layout--scroll > .mega-menu__card-container {
  flex: 0 0 calc((100% - (var(--products-per-view, 3) - 1) * 1.5rem) / var(--products-per-view, 3));
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .layout--scroll > .mega-menu__card-container {
    flex-basis: 70%; /* Plus de produits visibles sur mobile */
  }
}

.product-list-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s var(--transition-easing);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.product-list-nav:hover {
  transform: translateY(-50%) scale(1.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.product-list-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.9);
}
.product-list-nav--prev { left: -20px; }
.product-list-nav--next { right: -20px; }

/* --- Layout: Collage --- */
.layout--collage {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.layout--collage .mega-menu__card-container:nth-child(5n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
.layout--collage .mega-menu__card-container:nth-child(5n+4) {
  grid-row: span 2;
}
@media (max-width: 767px) {
  .layout--collage,
  .layout--collage .mega-menu__card-container:nth-child(5n+1),
  .layout--collage .mega-menu__card-container:nth-child(5n+4) {
    grid-template-columns: 1fr;
    grid-column: auto;
    grid-row: auto;
  }
}

/* --- Placeholder Styles --- */
.mega-menu__card-container.is-placeholder .mega-menu__card-image-wrapper {
  background: var(--column-background);
}
.mega-menu__card-container.is-placeholder .placeholder-line {
  height: 1em;
  background-color: var(--column-background);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

  /* --- Mega Menu Articles: Layouts & Styles (Version Corrigée) --- */

/* Conteneur principal des articles */
.mega-menu__articles {
  --article-gap: 1.25rem;
  gap: var(--article-gap);
}

/* Structure de base pour un article (div.mega-menu__article-item) */
.mega-menu__article-item {
  display: flex;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.mega-menu__article-title-link,
.mega-menu__article-image-link {
  color: inherit;
  text-decoration: none;
      line-height: 1;
}
.mega-menu__article-image-link:focus-visible,
.mega-menu__article-title-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* == MISE EN PAGE : LISTE VERTICALE == */
.mm-articles--layout-desktop-list,
.mm-articles--layout-mobile-list {
  display: flex;
  flex-direction: column;
}
.mm-articles--layout-desktop-list .mega-menu__article-item,
.mm-articles--layout-mobile-list .mega-menu__article-item {
  flex-direction: row;
  align-items: center;
  padding: 0.5rem;
  margin: 0 -0.5rem; /* Compense le padding pour l'effet de survol */
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-fast);
}
.mm-articles--layout-desktop-list .mega-menu__article-item:hover,
.mm-articles--layout-mobile-list .mega-menu__article-item:hover {
  background-color: var(--link-hover-background);
}
.mm-articles--layout-desktop-list .mega-menu__article-image-wrapper,
.mm-articles--layout-mobile-list .mega-menu__article-image-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.mm-articles--layout-desktop-list .mega-menu__article-content,
.mm-articles--layout-mobile-list .mega-menu__article-content {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mm-articles--layout-desktop-list .mega-menu-article-button__wrapper,
.mm-articles--layout-mobile-list .mega-menu-article-button__wrapper {
  padding-top: 0.25rem;
}

/* == MISE EN PAGE : GRILLE & DÉFILEMENT (Apparence de carte) == */
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-item {
  flex-direction: column;
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s var(--transition-easing), box-shadow 0.3s var(--transition-easing);
  min-height: -webkit-fill-available;
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-image-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-image {
  transition: transform 0.4s ease;
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-item:hover .mega-menu__article-image {
  transform: scale(1.05);
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-content .font-semibold {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-color-primary);
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-title-link:hover .font-semibold {
  color: var(--accent-color);
}
.mega-menu__articles:not([class*="-list"]) .mega-menu__article-content .text-xs {
  margin-top: 0.5rem;
  display: block;
  color: var(--text-color-secondary);
}

/* --- Règles pour les conteneurs Grille et Défilement --- */

/* Mobile */
.mm-articles--layout-mobile-grid {
  display: grid;
  grid-template-columns: repeat(var(--mm-articles-cols-mobile, 2), 1fr);
}
.mm-articles--layout-mobile-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mm-articles--layout-mobile-scroll::-webkit-scrollbar { display: none; }
.mm-articles--layout-mobile-scroll > .mega-menu__article-item {
  scroll-snap-align: start;
  width: calc((100% - (var(--mm-articles-per-view-mobile, 1.5) - 1) * var(--article-gap)) / var(--mm-articles-per-view-mobile, 1.5));
  flex-shrink: 0;
}

/* Desktop */
@media (min-width: 993px) {
  .mm-articles--layout-desktop-grid {
    display: grid;
    grid-template-columns: repeat(var(--mm-articles-cols-desktop, 3), 1fr);
  }
  .mm-articles--layout-desktop-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mm-articles--layout-desktop-scroll::-webkit-scrollbar { display: none; }
  .mm-articles--layout-desktop-scroll > .mega-menu__article-item {
    scroll-snap-align: start;
    width: calc((100% - (var(--mm-articles-per-view-desktop, 2.5) - 1) * var(--article-gap)) / var(--mm-articles-per-view-desktop, 2.5));
    flex-shrink: 0;
  }
}

/* Positionnement du bouton à l'intérieur de la carte */
.mega-menu-article-button__wrapper {
  margin-top: auto;
  padding-top: 1rem;
}
.mega-menu-article-button__wrapper .mega-menu-button {
  width: 100%;
}
.mega-menu-article-button__wrapper .mm-button--tertiary {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

/* maj menu_special_collections et collections_multi */
                          /* --- Améliorations Mega Menu --- */

/* Gestion du ratio d'image */
.mega-menu__card-image-wrapper {
  position: relative;
  overflow: hidden;
}
.image-ratio--square { aspect-ratio: 1 / 1; }
.image-ratio--portrait { aspect-ratio: 4 / 3; }
.image-ratio--landscape { aspect-ratio: 16 / 9; }
.image-ratio--vertical { aspect-ratio: 2 / 3; }
.image-ratio--vertical-long { aspect-ratio: 9 / 16; }

.mega-menu__card-image-wrapper.image-ratio--square img,
.mega-menu__card-image-wrapper.image-ratio--portrait img,
.mega-menu__card-image-wrapper.image-ratio--landscape img,
.mega-menu__card-image-wrapper.image-ratio--vertical img,
.mega-menu__card-image-wrapper.image-ratio--vertical-long img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- CSS POUR RATIO PERSONNALISÉ (VERSION GLOBALE) --- */
/*
.bd-mega-menu-section-container .image-ratio--custom {
  aspect-ratio: var(--aspect-ratio-mobile, 9 / 16);
}

@media screen and (min-width: 768px) {
  .bd-mega-menu-section-container .image-ratio--custom {
    aspect-ratio: var(--aspect-ratio-desktop, 16 / 9);
  }
}
*/

/* --- CSS POUR RATIO & HAUTEUR MAX DE L'IMAGE PROMOTIONNELLE --- */
.bd-mega-menu-section-container .mega-menu__custom-img-wrapper {
  /* Applique la hauteur max mobile et centre l'image si sa largeur est réduite */
  max-height: var(--max-height-mobile, none);
  width: 100%;
}

.bd-mega-menu-section-container .image-ratio--custom {
  aspect-ratio: var(--aspect-ratio-mobile, 9 / 16);
}

@media screen and (min-width: 768px) {
  .bd-mega-menu-section-container .mega-menu__custom-img-wrapper {
    /* Applique la hauteur max desktop */
    max-height: var(--max-height-desktop, none);
    width: 100%;
  }

  .bd-mega-menu-section-container .image-ratio--custom {
    aspect-ratio: var(--aspect-ratio-desktop, 16 / 9);
  }
}

/* Gestion de la position du contenu sur l'image */
.mega-menu__card.content-on-image {
  display: grid;
  grid-template: 'card' 1fr / 1fr;
  text-decoration: none;
}
.mega-menu__card.content-on-image > * {
  grid-area: card;
}
.mega-menu__card.content-on-image .mega-menu__card-image-wrapper {
  z-index: 1;
}
.mega-menu__card.content-on-image .mega-menu__card-content {
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  color: #ffffff; /* Couleur de texte par défaut sur l'overlay */
  background: transparent;
}
/* Aligne le contenu (classes Tailwind-like pour compatibilité) */
.mega-menu__card.content-on-image .mega-menu__card-content.items-center { align-items: center; }
.mega-menu__card.content-on-image .mega-menu__card-content.items-start { align-items: flex-start; }
.mega-menu__card.content-on-image .mega-menu__card-content.items-end { align-items: flex-end; }
.mega-menu__card.content-on-image .mega-menu__card-content.justify-center { justify-content: center; }
.mega-menu__card.content-on-image .mega-menu__card-content.justify-start { justify-content: flex-start; }
.mega-menu__card.content-on-image .mega-menu__card-content.justify-end { justify-content: flex-end; }
.mega-menu__card.content-on-image .mega-menu__card-content.text-center { text-align: center; }
.mega-menu__card.content-on-image .mega-menu__card-content.text-left { text-align: left; }
.mega-menu__card.content-on-image .mega-menu__card-content.text-right { text-align: right; }

.mega-menu__card-content .product-count {
  opacity: 0.8;
  font-weight: normal;
  font-size: 0.9em;
  margin-left: 0.3em;
}

/* Overlay pour le contenu sur l'image */
.card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: background-color 0.3s ease;
}
.mega-menu__card:hover .card__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Ajustement pour les titres des cartes spéciales (niveau 1) */
.special-collections__content {
  display: flex;
  flex-direction: column;
}
.special-collections__content.items-center { align-items: center; }
.special-collections__content.items-start { align-items: flex-start; }
.special-collections__content.items-end { align-items: flex-end; }
.special-collections__content.justify-center { justify-content: center; }
.special-collections__content.justify-start { justify-content: flex-start; }
.special-collections__content.justify-end { justify-content: flex-end; }
.special-collections__content.text-center { text-align: center; }
.special-collections__content.text-left { text-align: left; }
.special-collections__content.text-right { text-align: right; }

/* maj bloc image */
                          
/* -- Styles pour Image Promotionnelle avec Superposition (v3 Architecture Corrigée) -- */

/* Conteneur principal qui gère le ratio d'aspect */
.mega-menu__custom-img-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius-md, 10px);
  color: var(--overlay-text-color);
  text-decoration: none;
}

/* Application du ratio d'aspect */
.mega-menu__custom-img-wrapper.image-ratio--square { aspect-ratio: 1 / 1; }
.mega-menu__custom-img-wrapper.image-ratio--portrait { aspect-ratio: 3 / 4; }
.mega-menu__custom-img-wrapper.image-ratio--landscape { aspect-ratio: 16 / 9; }
.mega-menu__custom-img-wrapper.image-ratio--vertical { aspect-ratio: 2 / 3; }
.mega-menu__custom-img-wrapper.image-ratio--vertical-long { aspect-ratio: 9 / 16; }

/* L'image elle-même, qui remplit le conteneur */
.mega-menu__custom-img-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  z-index: 1;
}
.mega-menu__custom-img-wrapper:hover .mega-menu__custom-img-image {
  transform: scale(1.05);
}

/* Le filtre de couleur ou dégradé */
.mega-menu__custom-img-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-background);
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mega-menu__custom-img-wrapper:hover .mega-menu__custom-img-overlay {
  opacity: 0.85;
}

/* Le conteneur du contenu textuel et du bouton */
.mega-menu__custom-img-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  pointer-events: none;
}

/* Wrapper pour le texte, pour un meilleur alignement vertical */
.mega-menu__custom-img-text-wrapper {
 /* flex-grow: 1;*/
  display: flex;
  flex-direction: column;
}

/* Application des classes de positionnement au contenu */
.mega-menu__custom-img-content.items-center { align-items: center; }
.mega-menu__custom-img-content.items-start { align-items: flex-start; }
.mega-menu__custom-img-content.items-end { align-items: flex-end; }
.mega-menu__custom-img-content.text-center { text-align: center; }
.mega-menu__custom-img-content.text-left { text-align: left; }
.mega-menu__custom-img-content.text-right { text-align: right; }

.mega-menu__custom-img-content .mega-menu__custom-img-text-wrapper.justify-center { justify-content: center; }
.mega-menu__custom-img-content .mega-menu__custom-img-text-wrapper.justify-start { justify-content: flex-start; }
.mega-menu__custom-img-content .mega-menu__custom-img-text-wrapper.justify-end { justify-content: flex-end; }


/* Styles du Titre et du Texte */
.mega-menu__custom-img-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.mega-menu__custom-img-text {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 45ch;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}
.mega-menu__custom-img-text p { margin: 0; }

/* Permet au bouton d'être cliquable et le positionne */
.mega-menu__custom-img-content .mega-menu-button__wrapper {
  pointer-events: auto;
  margin-top: 1.5rem;
  flex-shrink: 0;
}

/* ==========================================================================
   #Mega Menu Marquee Block Styles
   ========================================================================== */
.mega-menu__marquee-container {
  --marquee-speed: 20s;
  --marquee-bg: #000000;
  --marquee-text-color: #ffffff;
  --marquee-padding-vertical: 12px;
  --marquee-padding-horizontal: 0;
  --marquee-border-radius: 8px;

  background-color: var(--marquee-bg);
  color: var(--marquee-text-color);
  padding: var(--marquee-padding-vertical) var(--marquee-padding-horizontal);
  border-radius: var(--marquee-border-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mega-menu__marquee-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
  will-change: transform;
}

.mega-menu__marquee-container.pause-on-hover:hover .mega-menu__marquee-track {
  animation-play-state: paused;
}

.mega-menu__marquee-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.mega-menu__marquee-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  font-size: 0.9rem;
  font-weight: 500;
}

.mega-menu__marquee-item-image {
  height: 24px;
  width: auto;
  max-width: 80px;
  border-radius: 4px;
  object-fit: contain;
}

.mega-menu__marquee-item-text {
  transition: color 0.3s ease;
}

/* Styles pour les liens à l'intérieur du texte défilant */
.mega-menu__marquee-item-text a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: all 0.2s ease-out;
}
.mega-menu__marquee-item-text a:hover {
  opacity: 0.8;
  text-decoration-color: transparent;
}

/* Styles pour le texte en dégradé */
.mega-menu__marquee-container.has-gradient-text .mega-menu__marquee-item-text {
  background: var(--marquee-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Styles pour les séparateurs */
.mega-menu__marquee-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 2rem; /* 32px */
  opacity: 0.7;
}
.separator-dot {
  font-size: 1.5rem;
  line-height: 1;
}
.separator-line {
  font-size: 1.25rem;
  font-weight: 100;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- NOUVEAUX STYLES POUR LES AMÉLIORATIONS UI/UX v2.5 --- */

  /* Conteneur global */
  .bd-mega-menu-section-container {
    --mm-spacing-bottom: 50px; /* Espace de sécurité en bas */
    max-height: calc(100dvh - var(--header-height));
    padding-bottom: 0 !important; /* Le padding sera interne */
  }

  /* Panneau principal */
  .mega-menu__panel--main {
    position: relative; /* Contexte pour les éléments positionnés */
    overflow-y: auto;
   max-height: calc(100dvh - var(--header-height));
  }

  /* Bouton Fermer */
  .mega-menu__close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-primary);
    transition: all 0.2s ease;
  }
  .mega-menu__close-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background: var(--column-background);
  }

  /* Flèches de défilement vertical */
  .mega-menu__scroll-nav {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: none; /* Caché par défaut, affiché par JS */
    flex-direction: column;
    gap: 0.5rem;
  }
  .mega-menu-container.has-overflow .mega-menu__scroll-nav {
    display: flex;
  }
  .mega-menu__scroll-btn {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-secondary);
    transition: all 0.2s ease;
  }
  .mega-menu__scroll-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
  }
  .mega-menu__scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: scale(1);
    border-color: var(--border-color);
    color: var(--text-color-secondary);
  }
  
  /* Squelette de chargement */
  .mega-menu-skeleton {
    display: none; /* Caché par défaut */
    width: 100%;
    padding: 2rem;
    background: var(--menu-background);
    gap: 2rem;
    border-radius: 20px;
    position: relative;
  }
  .mega-menu-container.is-loading .mega-menu-skeleton {
    display: flex;
  }

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .mega-menu-skeleton__col {
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .mega-menu-skeleton__col {
    flex: 1;
    min-width: 220px;
  }
  .mega-menu-skeleton__col.is-main {
    flex: 3;
  }
  .mega-menu-skeleton__line-sm, .mega-menu-skeleton__line-md, .mega-menu-skeleton__line-lg {
    height: 1em;
    background-color: var(--column-background);
    border-radius: 4px;
    margin-bottom: 1.25rem;
  }
  .mega-menu-skeleton__line-sm { width: 40%; }
  .mega-menu-skeleton__line-md { width: 80%; }
  .mega-menu-skeleton__line-lg { width: 100%; }

  .mega-menu-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .mega-menu-skeleton__card {
    background-color: var(--column-background);
    border-radius: var(--border-radius-md);
    aspect-ratio: 1 / 1.2;
  }   

    /* --- STYLES POUR LE NOUVEAU BLOC ONGLETS (TABS) v2.8 --- */
  .mega-menu-tabs-wrapper {
    display: flex;
    width: 100%;
    min-height: 400px;
  }
  .mega-menu-tabs__nav {
    flex-basis: 25%;
    flex-shrink: 0;
    padding: 1.5rem;
    background-color: var(--column-background);
    border-right: 1px solid var(--border-color);
  }
  .mega-menu-tabs__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-color-secondary);
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
  }
  .mega-menu-tabs__trigger:hover,
   .mega-menu-tabs__accordion-trigger {
    background-color: var(--link-hover-background);
    color: var(--text-color-primary);
  }
  .mega-menu-tabs__trigger.is-active,
  .mega-menu-tabs__trigger[aria-selected="true"],
  .mega-menu-tabs__accordion-trigger[aria-expanded="true"] {
    background-color: var(--accent-color);
    color: var(--menu-background);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  .mega-menu-tabs__icon {
    margin-right: 0.75rem;
    font-size: 1.2em;
    opacity: 0.8;
  }
  .mega-menu-tabs__trigger.is-active .mega-menu-tabs__icon {
    opacity: 1;
  }
  .mega-menu-tabs__content {
    flex-grow: 1;
    padding: 2rem;
  }
  .mega-menu-tabs__panel {
    animation: fadeIn 0.4s ease forwards;
  }
  /* Comportement accordéon sur mobile */
  .mega-menu-tabs__accordion-trigger, .mega-menu-tabs__accordion-content {
    display: none;
  }

  /* Responsive pour les onglets */
  @media (max-width: 992px) {
    .mega-menu-tabs-wrapper {
      flex-direction: column;
      min-height: 0;
    }
    .mega-menu-tabs__nav,
    .mega-menu-tabs__panel {
      display: none; /* On cache la vue PC */
    }
    .mega-menu-tabs__accordion-trigger {
      display: flex; /* On affiche le trigger mobile */
      width: 100%;
      border-bottom: 1px solid var(--border-color);
      justify-content: space-between;
      align-items: center;
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      background-color: var(--link-hover-background);
      color: var(--text-color-primary);
      padding:15px 10px;
    }
    .mega-menu-tabs__accordion-trigger .mega-menu-accordion__chevron {
      transition: transform 0.3s ease;
    }
    .mega-menu-tabs__accordion-trigger[aria-expanded="true"] .mega-menu-accordion__chevron {
      transform: rotate(180deg);
    }
    .mega-menu-tabs__accordion-content {
      display: none; /* Géré par l'attribut 'hidden' */
      padding: 1.5rem;
      border-bottom: 1px solid var(--border-color);
    }
    .mega-menu-tabs__accordion-content:not([hidden]) {
      display: block;
    }
  }      

                       /* --- STYLES CORRIGÉS POUR LES ONGLETS (TABS) v2.9 --- */
  .mega-menu-tabs__panel {
    animation: fadeIn 0.4s ease forwards;
  }
  .mega-menu-tabs__accordion-trigger {
    display: none;
  }
  .mega-menu-tabs__content-wrapper {
    /* Par défaut (desktop), le wrapper est visible */
    display: block; 
  }
  
  @media (max-width: 992px) {
    .mega-menu-tabs-wrapper { flex-direction: column; min-height: 0; }
    .mega-menu-tabs__nav { display: none; }
    .mega-menu-tabs__panel { display: block !important;margin-bottom: 10px; }
    .mega-menu-tabs__accordion-trigger { display: flex;margin: 5Px auto;}
    
    .mega-menu-tabs__content-wrapper {
      padding: 1.5rem;
      border-bottom: 1px solid var(--border-color);
    }
    .mega-menu-tabs__content-wrapper[hidden] {
      display: none;
    }
    /* patch blanc mobile*/
        .bd-mega-menu-section-container.active {
            overflow: hidden;
        }
        .mega-menu__panel--main {
          height: calc(100dvh - var(--header-height));
          min-height: calc(100dvh - var(--header-height));
          max-height: calc(100dvh - var(--header-height));
        }
    
      .mega-menu__close-btn,
      .mega-menu__scroll-btn {
        width:30px;
        height:30px;
      }
    .mega-menu__scroll-nav,
    .mega-menu__close-btn {
      right:5px;
    }
  }

  /* --- AJOUT POUR VISIBILITE SECTION SEULE ET EDITEUR --- */
  .bd-mega-menu-section-container.is-page-section {
    position: relative;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    z-index: 1;
    max-height: none;
    top: 0 !important; 
  }
  .bd-mega-menu-section-container.is-page-section .mega-menu__close-btn {
    display:none;
  }
  .bd-mega-menu-section-container.is-page-section .mega-menu-container,
  .bd-mega-menu-section-container.is-visible-in-editor .mega-menu-container {
    display: block !important;
  }
  .bd-mega-menu-section-container.is-page-section .mega-menu,
  .bd-mega-menu-section-container.is-visible-in-editor .mega-menu,
  .bd-mega-menu-section-container.is-page-section .mega-menu__panel--main,
  .bd-mega-menu-section-container.is-visible-in-editor .mega-menu__panel--main {
        max-height: none;
  }
  
  .bd-mega-menu-section-container.is-visible-in-editor {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: relative !important;
    z-index: 50 !important;
    box-shadow: 0 0 0 2px blue; /* Pour le repérer facilement */
    margin-bottom: 2rem;
    top:2px !important;
    max-height: none;
  }

  /* patch 31-08 */
  /* --- AMÉLIORATIONS BLOC COLLECTIONS_MULTI --- */


.mega-menu__card-image-wrapper .collection-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background-color: var(--accent-color);
  color: var(--menu-background);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.mega-menu__collections-container.is-grid,
.special-collections__children-container.is-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--grid-cols-mobile, 2), 1fr);
}

.mega-menu__collections-container.is-scrollable,
.special-collections__children-container.is-scrollable {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.mega-menu__collections-container.is-scrollable::-webkit-scrollbar,
.special-collections__children-container.is-scrollable::-webkit-scrollbar { display: none; }

.mega-menu__collections-container.is-scrollable > .mega-menu__card,
.special-collections__children-container.is-scrollable > .mega-menu__card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: calc((100% - (var(--scroll-items-mobile, 1.5) - 1) * 1rem) / var(--scroll-items-mobile, 1.5));
}

.mega-menu__collections-container.is-scrollable-vertical,
.special-collections__children-container.is-scrollable-vertical {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
  overflow-y: auto;
  padding-right: 0.5rem; 
}


.special-collections__card {
  max-height: var(--max-height-mobile, none);
  margin-inline: auto;
}


.special-collections__children-wrapper {
  margin-top: var(--overlap-mobile, 0);
  transition: margin-top 0.4s var(--transition-easing);
}


@media screen and (min-width: 768px) {
  .mega-menu__collections-container.is-grid,
  .special-collections__children-container.is-grid,
  
  .mega-menu__collections-container.is-scrollable-vertical,
  .special-collections__children-container.is-scrollable-vertical {
    grid-template-columns: repeat(var(--grid-cols-desktop, 4), 1fr);
  }

  .mega-menu__collections-container.is-scrollable > .mega-menu__card,
  .special-collections__children-container.is-scrollable > .mega-menu__card {
    width: calc((100% - (var(--scroll-items-desktop, 4) - 1) * 1rem) / var(--scroll-items-desktop, 4));
  }
  .special-collections__card {
    max-height: var(--max-height-desktop, none);
  }

  .special-collections__children-wrapper {
    margin-top: var(--overlap-desktop, 0);
  }
}

.special-collections__item .special-collections__children-wrapper {
  max-height:0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: 
    max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.4s ease,
    transform 0.4s ease;
}
.special-collections__item.is-expanded .special-collections__children-wrapper {
  max-height:none;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mega-menu__marquee-track {
  will-change: transform;
}
.mega-menu__marquee-container.is-animated .mega-menu__marquee-track {
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

.mega-menu__marquee-item p {
  margin:0;
}
  

.mega-menu__marquee-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  will-change: transform;
}

.mega-menu__marquee-container.is-animated .mega-menu__marquee-track {
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

.mega-menu__marquee-half {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}



.special-collections-menu.automatic-block {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--main-cols-mobile, 1), 1fr);
}

@media (min-width: 768px) {
  .special-collections-menu.automatic-block {
    grid-template-columns: repeat(var(--main-cols-desktop, 3), 1fr);
  }
}

.special-collections-menu.automatic-block .special-collections__card.image-ratio--custom {
  aspect-ratio: var(--aspect-ratio-mobile, 4 / 3);
}

@media (min-width: 768px) {
  .special-collections-menu.automatic-block .special-collections__card.image-ratio--custom {
    aspect-ratio: var(--aspect-ratio-desktop, 16 / 9);
  }
}


.special-collections-menu.automatic-block .special-collections__title.has-gradient-text {
  background: var(--main-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: initial;
}


.special-collections-menu.automatic-block .special-collections__item > .mega-menu-button__wrapper {
  margin-top: 1rem;
}


.special-collections-menu.automatic-block .special-collections__card {
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}
.special-collections-menu.automatic-block .special-collections__card > .special-collections__content {
  width: 100%;
}
.special-collections-menu.automatic-block .special-collections__card > .special-collections__expand-btn {
  margin-left: auto; 
  margin-top: auto; 
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}



.special-collections-menu.automatic-block .special-collections__card {
  display: flex; 
  text-decoration: none; 
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
}


.special-collections-menu.automatic-block .special-collections__card > .special-collections__content {
  width: 100%;
  flex-grow: 1; 
  display: flex; 
  flex-direction: column;
  z-index: 2; 
}

.special-collections-menu.automatic-block .special-collections__card > .special-collections__expand-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 3; 
}

.special-collections__content.items-center { align-items: center; }
.special-collections__content.items-start { align-items: flex-start; }
.special-collections__content.items-end { align-items: flex-end; }
.special-collections__content.justify-center { justify-content: center; }
.special-collections__content.justify-start { justify-content: flex-start; }
.special-collections__content.justify-end { justify-content: flex-end; }
.special-collections__content.text-center { text-align: center; }
.special-collections__content.text-left { text-align: left; }
.special-collections__content.text-right { text-align: right; }

                         /******* fin MEGA MENU *****/

.no-template-index.no-padding-transparent-header {
  padding:0 !important;
}

/* Désactive la sélection de texte/image pendant le drag */
body.no-user-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
}

.bd_carousel_container {
  padding:20px 0;
}

/***************************** SNIPPET TRUSTBADGE ******************************/
 .l4al.l4al-trustbadge img, .l4al.l4al-trustbadge svg{ max-height: unset!important; width: 200px; max-width:100%;
    height: auto !important; }
  .l4al {    
     list-style: none;
    padding: 0;
    --btn_sh_inner: 0 2px 4px rgba(0,0,0,.1);
         margin-top:40px;
}
    .l4al li {
    position: relative;
    z-index: 3;
    margin: 0 0 10px;
    padding: var(--main_fz) calc(var(--main_fz)* 1.1428571429);
      font-size:1em;
}
  .l4al li:before {
        content: "";
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: 0;
    text-align: left;
    text-indent: -3000em;
    direction: ltr;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0);
    background: #FFF;
  }
  .cols>* {
    display: block;
    position: relative;
    clear: none;
    float: right;
    border: 0 solid rgba(0,0,0,0);
    border-left-width: 16px;
}
  .l4al li:not([class*=overlay]):before {
    border-color: #F4F4F4;
}
  .l4al li>i.sticky {
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    margin-top: -10px;
    padding: 0 6px;
    border-width: 0;
    background: var(--body_bg);
    font-size: var(--size_20_f);
    line-height: var(--size_20_f);
}
  [class*=icon-] {
    font-family: i!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  .icon-lock:before {
 content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTUyLDI0aC00di04YzAtOC44MzYtNy4xNjQtMTYtMTYtMTZTMTYsNy4xNjQsMTYsMTZ2OGgtNGMtMi4yMTEsMC00LDEuNzg5LTQsNHYzMmMwLDIuMjExLDEuNzg5LDQsNCw0aDQwIGMyLjIxMSwwLDQtMS43ODksNC00VjI4QzU2LDI1Ljc4OSw1NC4yMTEsMjQsNTIsMjR6IE0zMiw0OGMtMi4yMTEsMC00LTEuNzg5LTQtNHMxLjc4OS00LDQtNHM0LDEuNzg5LDQsNFMzNC4yMTEsNDgsMzIsNDh6IE00MCwyNCBIMjR2LThjMC00LjQxOCwzLjU4Mi04LDgtOHM4LDMuNTgyLDgsOFYyNHoiPjwvcGF0aD4gPC9nPjwvc3ZnPg==');
     position: absolute;
            left: 0;
            top: 50%;
    width: 20px;
    height: 20px;
}
   .l4al li>i.sticky~* {
    padding-left: 0;
    padding-right: 0;
}
  .l4al li:after {
    z-index: -2;
    box-shadow: var(--btn_sh_inner);
    border-radius: var(--b2r);
    background: var(--body_bg);
}
  span.cols.cols-mobile.align-middle {
    display: flex;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding-right:5px;
}
  .l4al li.size-m {
    padding-top: 17px;
    padding-bottom: 17px;
}
   .l4al p, .l4al h1, .l4al h2, .l4al h3, .l4al h4, .l4al h5, .l4al h6 {
    margin-bottom: 1px;
    font-size: 1em;
    line-height: 1.5;
    margin:0;
}

.bd_mini-cart__block .l4al li.size-m {
        padding: 10px 5px;
        padding-bottom: 5px;
    }

    .bd_mini-cart-drbd_mini-cart__block span.cols.cols-mobile.align-middle {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }
    .bd_mini-cart-drbd_mini-cart__block .cols span {
        flex: 0 1 auto;
        font-size: 10px;
    }

    .bd_mini-cart-drbd_mini-cart__block .bd_payment-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2px;
        max-width: 100%;
        flex: 0 0 auto;
        flex: 1 1 auto;
        min-width: 0;
        border-left-width:0;
    }

    .bd_mini-cart__block .l4al.l4al-trustbadge img, 
     .bd_mini-cart__block .l4al.l4al-trustbadge svg {
        max-height: unset!important;
        width: auto;
        height: auto !important;
        max-width: calc(30px - 5px);
        max-width: inherit;
        height: 25px;
        border-radius: 4px;
        padding: 2px 5px;
        background: #efefef;
        max-width: inherit;
        width: auto;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
    .bd_mini-cart-drbd_mini-cart__block span.cols.cols-mobile.align-middle {
    padding-right:5px;
}

   .bd_mini-cart__block .l4al {
  margin-top: 5px;
    margin-bottom: 0;
}

.bd_mini-cart__block p {
  font-size:8px;
}

/*************************** Fin TRUSTBADGE ******************************************************/


/************************** RECOMMENDATIONS DE PRODUITS ******************************/
/*
====================================================================================
// Fichier : assets/product-recommendations-engine.css
// Auteur: Gemini
// Description: Styles premium pour le moteur de recommandations dynamiques,
// ciblant la structure HTML spécifique du thème.
====================================================================================
*/
.dynamic-recommendations-container .product-recommendations-engine__heading {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 24px 0;
  color: #1c1c1c;
}

/* --- Skeletons / Placeholders animés --- */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.dynamic-recommendations-container .reco-placeholders-grid,
.dynamic-recommendations-container .reco-placeholders-carousel {
  display: grid;
  grid-gap: 16px;
}

.dynamic-recommendations-container .reco-placeholders-grid {
  grid-template-columns: repeat(var(--products-per-row, 4), 1fr);
}

.dynamic-recommendations-container .reco-placeholders-carousel {
  grid-template-columns: repeat(var(--limit, 4), 1fr);
}

.dynamic-recommendations-container .reco-placeholder {
  border-radius: 12px;
  overflow: hidden;
}


.dynamic-recommendations-container .reco-placeholder__image,
.dynamic-recommendations-container .reco-placeholder__text {
  background: #f0f0f0;
  background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation: shimmer 1.5s linear infinite;
}

.dynamic-recommendations-container .reco-placeholder__image {
  height: 0;
  padding-bottom: 125%; 
}

.dynamic-recommendations-container .reco-placeholder__text {
  height: 14px;
  margin: 12px auto 8px;
  width: 80%;
  border-radius: 4px;
}
.dynamic-recommendations-container .reco-placeholder__text--short {
  width: 50%;
  margin-top: 0;
}


/* --- Styles des Cartes Produits (générées par createProductGeneric) --- */
.dynamic-recommendations-container .product-grid-item {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative; /* Pour positionner les boutons */
}

.dynamic-recommendations-container .product-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dynamic-recommendations-container .image-container {
  overflow: hidden;
  border-radius: 0;
  position: relative;
  background: #F2F2F2;
}

.dynamic-recommendations-container .bd_img_container {
  height:auto;
}

.dynamic-recommendations-container .product-featured-image {
  display: block;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  mix-blend-mode: multiply;
}

.dynamic-recommendations-container .product-grid-item:hover .product-featured-image {
  transform: scale(1.05);
}

.dynamic-recommendations-container .info-produits-nouveautes {
  padding: 12px;
  text-align: center;
  background:#333
}

.dynamic-recommendations-container .product-title {
  font-weight: 500;
  margin: 0 0 4px 0;
  font-size: 0.9rem;
  color: #FFF !important;
}

.dynamic-recommendations-container .money {
  font-size: 0.9rem;
  color:#CCC !important;
}


/* --- Contrôles du Carrousel --- */
.dynamic-recommendations-container .reco-carousel-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    gap: 8px;
}

.dynamic-recommendations-container .reco-carousel-controls button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    color: #1c1c1c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dynamic-recommendations-container .reco-carousel-controls button:hover {
    background-color: #1c1c1c;
    color: #fff;
    transform: scale(1.1);
}

.dynamic-recommendations-container .reco-carousel-controls button svg {
    width: 16px;
    height: 16px;
}

/*
====================================================================================
// Fichier : assets/product-recommendations-engine.css
// Auteur: Gemini
// Description: Styles premium pour le moteur de recommandations dynamiques.
// Version 11: Ajout des styles pour cartes horizontales et carrousel intégré.
====================================================================================
*/

/* --- Conteneur principal --- */
.dynamic-recommendations-container {
  padding: 24px 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: 24px;
  background-color: #fafafa;
  position: relative;
  max-width:100%;
  min-width:0;
}

.dynamic-recommendations-container .product-recommendations-engine__heading {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 24px 0;
  color: #1c1c1c;
}

/* --- Placeholders animés --- */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.reco-placeholders {
  display: grid;
  gap: var(--grid-gap, 16px);
  grid-template-columns: repeat(var(--products-per-row-mobile, 2), 1fr);
}
@media (min-width: 768px) {
  .reco-placeholders {
    grid-template-columns: repeat(var(--products-per-row-desktop, 4), 1fr);
  }
}


.reco-placeholder__image, .reco-placeholder__text {
  background: #f0f0f0;
  background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation: shimmer 1.5s linear infinite;
}


.reco-placeholder.is-vertical { border-radius: 12px; overflow: hidden; }
.reco-placeholder.is-vertical .reco-placeholder__image { height: 0; padding-bottom: 125%; }
.reco-placeholder.is-vertical .reco-placeholder__text { height: 14px; margin: 12px 10%; width: 80%; border-radius: 4px; }
.reco-placeholder.is-vertical .reco-placeholder__text--short { width: 50%; margin-top: -4px; }


.reco-placeholder.is-horizontal { display: flex; gap: 12px; }
.reco-placeholder.is-horizontal .reco-placeholder__image { flex: 0 0 80px; height: 100px; border-radius: 8px; }
.reco-placeholder.is-horizontal .reco-placeholder__info { flex: 1; padding: 8px 0; }
.reco-placeholder.is-horizontal .reco-placeholder__text { height: 14px; margin: 0 0 12px 0; width: 90%; border-radius: 4px; }
.reco-placeholder.is-horizontal .reco-placeholder__text--short { width: 60%; margin-top: 0; }


/* --- Grille et Carrousel --- */
.product-reco-grid {
  display: grid;
  gap: var(--grid-gap, 16px);
  grid-template-columns: repeat(var(--products-per-row-mobile, 2), 1fr);
}
@media (min-width: 768px) {
  .product-reco-grid {
    grid-template-columns: repeat(var(--products-per-row-desktop, 4), 1fr);
  }
}

.product-reco-carousel { overflow: hidden; }
.product-reco-carousel-track {
  display: flex;
  gap: var(--grid-gap, 16px);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-reco-carousel-track > * {
  flex-shrink: 0;
  width: calc(100% / var(--products-per-row-mobile, 2) - var(--grid-gap, 16px) * (var(--products-per-row-mobile, 2) - 1) / var(--products-per-row-mobile, 2));
}
@media (min-width: 768px) {
  .product-reco-carousel-track > * {
    width: calc(100% / var(--products-per-row-desktop, 4) - var(--grid-gap, 16px) * (var(--products-per-row-desktop, 4) - 1) / var(--products-per-row-desktop, 4));
  }
}

/* --- Styles des Cartes Produits --- */
.product-reco-grid.is-horizontal,
.product-reco-carousel-track.is-horizontal {
  grid-template-columns: repeat(1, 1fr); /* Grille horizontale est toujours 1 colonne */
}
@media (min-width: 768px) {
    .product-reco-grid.is-horizontal { grid-template-columns: repeat(var(--products-per-row-desktop, 2), 1fr); }
}

/* Style Carte Verticale */
.product-grid-item.is-vertical {
  background-color: #333;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-grid-item.is-vertical:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dynamic-recommendations-container .bd-add-to-cart-btn.bd_addtocart {
  background:#F8F8F8;
  font-size:10px;
}

.dynamic-recommendations-container .product-variant-selects.select-mode {
  mix-blend-mode: unset;
  background: #ffffff17 !important;
}

.dynamic-recommendations-container .variant-prev,
.dynamic-recommendations-container .variant-next,
.dynamic-recommendations-container .product-variant-selects select {
  color:#FFF;
}

.dynamic-recommendations-container button.variant-next:before {
  background: linear-gradient(270deg, #333, #333, #3333338a);
}
.dynamic-recommendations-container button.variant-prev:after {
background: linear-gradient(270deg, #3333338a, #333, #333333);
}
.dynamic-recommendations-container .bd_product_badge {
border-radius: 50px;
    background: #333;
    padding: 5px 10px;
    font-size: 8px;
     top: 5px !important;
}

.dynamic-recommendations-container .bd_product_infos_container { max-width:100% !important;}
.product-grid-item.is-vertical .image-container { overflow: hidden;min-height:180px;max-height:180px; }
.product-grid-item.is-vertical .product-featured-image { transition: transform 0.4s ease;min-height:180px;object-fit:contain; }
.product-grid-item.is-vertical:hover .product-featured-image { transform: scale(1.05); }
.product-grid-item.is-vertical .info-produits-nouveautes { padding: 12px; text-align: center; }
.product-grid-item.is-vertical .variant-wrapper {height: 100% !important; }
.product-grid-item.is-vertical .variant-wrapper.multi-options.select-mode .product-variant-selects.select-mode {  
    max-width: 35px;
    max-height: 35px !important;
    min-height: 35px !important;
}
.product-grid-item.is-vertical .variant-wrapper.multi-options.select-mode
.product-grid-item.is-vertical .bd_product_title {min-height:auto;-webkit-line-clamp: 1;}
.dynamic-recommendations-container .product-grid-item.is-vertical .bd_link_a { height:100%;justify-content: flex-start;}
.dynamic-recommendations-container .product-grid-item.is-vertical .product-quickview {margin-bottom:0 !important;}
/* Style Carte Horizontale */
.product-grid-item.is-horizontal {
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding:2Px;
}
.product-grid-item.is-horizontal .bd_link_a {  flex-direction: row;align-items: stretch;}
.dynamic-recommendations-container .product-grid-item.is-horizontal .add-to-wishlist {position:fixed !important;}

.product-grid-item.is-horizontal .image-container.bd_img_container { flex: 0 0 40% !important; }
.product-grid-item.is-horizontal .info-produits-nouveautes { flex: 1; text-align: left; padding: 12px; }
.product-grid-item.is-horizontal .product-title { margin-bottom: 8px; }

/* --- Contrôles du Carrousel intégré --- */
.reco-carousel-controls {
    position: absolute;
    top: 10%;
    left: 0px;
    right: 10px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* Laisse passer les clics */
      z-index: 2;
}
.reco-carousel-controls button {
  pointer-events: all; /* Rend les boutons cliquables */
  width: 40px; height: 40px; border-radius: 50%;
  background-color: #fff; border: 1px solid #e5e5e5;
  color: #1c1c1c; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.reco-carousel-controls button:hover {
  background-color: #1c1c1c; color: #fff; transform: scale(1.1);
}
.reco-carousel-controls button.disabled {
  opacity: 0.3; pointer-events: none;
}
.reco-carousel-controls button svg { width: 18px; height: 18px; }

/* Points de navigation */
.reco-carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 24px;
}
.reco-carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: #ccc; border: none; padding: 0;
  cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease;
}
.reco-carousel-dots button.active { background-color: #1c1c1c; transform: scale(1.2); }


/*
********************************************************
    SKELETONS
********************************************************
*/
/* skeletons*/
.skeleton-product-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--bd-scheme-product-card-bg, #1e1e1e) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid var(--bd-scheme-borders, rgba(255, 255, 255, 0.1));
  position: relative;
  min-height: auto !important;
  max-height: fit-content;
  padding: 10px;
}

/* Base skeleton */
.bd_skeleton_new {
  background-color: var(--bd-scheme-skeleton-base, hsl(210, 9%, 28%));
  position: relative;
  overflow: hidden;
}

.bd_skeleton_new::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    110deg,
    transparent 30%,
    var(--bd-scheme-skeleton-shine, rgba(255, 255, 255, 0.1)) 50%,
    transparent 70%
  );
  animation: elegant-shimmer 2.2s ease-in-out infinite;
}

@keyframes elegant-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-image-container {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  padding-top: 70%;
  max-width: calc(100% - 10px);
  margin: auto;
  margin-top: auto;
  margin-top: 5px;
  border-radius: 20px;
}

.skeleton-carousel-dots-container {
  backdrop-filter: blur(2px);
}

.skeleton-carousel-dots-container {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.skeleton-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: var(--bd-scheme-borders, hsl(210, 9%, 28%));
}

.skeleton-carousel-dot.active {
  background-color: var(--bd-scheme-text-secondary, hsl(210, 9%, 45%));
}

.skeleton-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.skeleton-title {
  width: 80%;
  height: 22px;
  border-radius: 6px;
}
.skeleton-price {
  width: 45%;
  height: 20px;
  border-radius: 6px;
}
.skeleton-extra-info {
  width: 65%;
  height: 16px;
  border-radius: 6px;
}

.skeleton-variant-container {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.skeleton-variant-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bd-scheme-product-card-bg, #1e1e1e);
  box-shadow: 0 0 0 1px var(--bd-scheme-borders, rgba(255, 255, 255, 0.1));
}

.skeleton-atc-button {
  width: 100%;
  height: 30px;
  border-radius: 20px;
  max-width: calc(100% - 10px);
}

/*
--------------------------------------------------------
    NOUVEAUX SCHÉMAS DE COULEURS VIA VARIABLES CSS
--------------------------------------------------------
*/

/* --- Thème 'Clair' --- */
.bd_skeleton[data-skeleton-scheme='clair'] {
  --bd-scheme-product-card-bg: #ffffff;
  --bd-scheme-borders: #e9e9e9;
  --bd-scheme-skeleton-base: #f0f0f0;
  --bd-scheme-skeleton-shine: rgba(0, 0, 0, 0.08);
  --bd-scheme-text-secondary: #cccccc;
}

/* --- Thème 'Sombre' (par défaut) --- */
.bd_skeleton[data-skeleton-scheme='sombre'] {
  --bd-scheme-product-card-bg: #1e1e1e;
  --bd-scheme-borders: rgba(255, 255, 255, 0.1);
  --bd-scheme-skeleton-base: hsl(210, 9%, 28%);
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.1);
  --bd-scheme-text-secondary: hsl(210, 9%, 45%);
}

/* --- Thème 'Noir & Blanc' --- */
.bd_skeleton[data-skeleton-scheme='noir_blanc'] {
  --bd-scheme-product-card-bg: #000000;
  --bd-scheme-borders: #333333;
  --bd-scheme-skeleton-base: #222222;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.15);
  --bd-scheme-text-secondary: #ffffff;
}

/* --- Thème 'Noir, Blanc, Gris' --- */
.bd_skeleton[data-skeleton-scheme='noir_blanc_gris'] {
  --bd-scheme-product-card-bg: #f5f5f5;
  --bd-scheme-borders: #dcdcdc;
  --bd-scheme-skeleton-base: #e0e0e0;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.5);
  --bd-scheme-text-secondary: #b0b0b0;
}

/* --- Thème 'Océanique' --- */
.bd_skeleton[data-skeleton-scheme='oceanique'] {
  --bd-scheme-product-card-bg: #e0f7fa;
  --bd-scheme-borders: #b2ebf2;
  --bd-scheme-skeleton-base: #4dd0e1;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.3);
  --bd-scheme-text-secondary: #006064;
}

/* --- Thème 'Forêt' --- */
.bd_skeleton[data-skeleton-scheme='foret'] {
  --bd-scheme-product-card-bg: #f1f8e9;
  --bd-scheme-borders: #dcedc8;
  --bd-scheme-skeleton-base: #9ccc65;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.3);
  --bd-scheme-text-secondary: #33691e;
}

/* --- Thème 'Lacoste' --- */
.bd_skeleton[data-skeleton-scheme='lacoste'] {
  --bd-scheme-product-card-bg: #ffffff;
  --bd-scheme-borders: #e0e0e0;
  --bd-scheme-skeleton-base: #004526;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.2);
  --bd-scheme-text-secondary: #2e7d32;
}

/* --- Thème 'Zalando' --- */
.bd_skeleton[data-skeleton-scheme='zalando'] {
  --bd-scheme-product-card-bg: #ffffff;
  --bd-scheme-borders: #eeeeee;
  --bd-scheme-skeleton-base: #ff6900;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.3);
  --bd-scheme-text-secondary: #212121;
}

/* --- Thème 'Or Rose' --- */
.bd_skeleton[data-skeleton-scheme='or_rose'] {
  --bd-scheme-product-card-bg: #fdf0f2;
  --bd-scheme-borders: #f9e2e5;
  --bd-scheme-skeleton-base: #e5b0b8;
  --bd-scheme-skeleton-shine: rgba(255, 255, 255, 0.4);
  --bd-scheme-text-secondary: #b76e79;
}

/* --- Thème 'Noir Luxe' --- */
.bd_skeleton[data-skeleton-scheme='noir_luxe'] {
  --bd-scheme-product-card-bg: #0a0a0a;
  --bd-scheme-borders: #2d2d2d;
  --bd-scheme-skeleton-base: #1c1c1c;
  --bd-scheme-skeleton-shine: rgba(212, 175, 55, 0.1); /* Gold shine */
  --bd-scheme-text-secondary: #d4af37;
}

/* --- Thème 'Blanc Luxe' --- */
.bd_skeleton[data-skeleton-scheme='blanc_luxe'] {
  --bd-scheme-product-card-bg: #ffffff;
  --bd-scheme-borders: #f0f0f0;
  --bd-scheme-skeleton-base: #e8e8e8;
  --bd-scheme-skeleton-shine: rgba(0, 0, 0, 0.07);
  --bd-scheme-text-secondary: #333333;
}

/* --- Thème 'Personnalisé' --- */
.bd_skeleton[data-skeleton-scheme='personnalise'] {
  --bd-scheme-product-card-bg: #37474f;
  --bd-scheme-borders: #ffccbc;
  --bd-scheme-skeleton-base: #d1c4e9;
  --bd-scheme-skeleton-shine: #f9f1ef;
  --bd-scheme-text-secondary: #fef9c3;
}

/* On doit aussi surcharger la couleur de la bordure des pastilles de variantes
  pour qu'elle corresponde au nouveau fond de la carte personnalisé.
*/
.bd_skeleton[data-skeleton-scheme='personnalise'] .skeleton-variant-swatch {
  border-color: var(--bd-scheme-product-card-bg, #37474f);
}

/* horizontal */
/* =================================================================== */
/* STYLES POUR LA VUE HORIZONTALE (.product-is-horizontal)             */
/* Ces règles surchargent les styles verticaux par défaut.             */
/* =================================================================== */

/* Mobile: max 767px */
@media (max-width: 767px) {
  .product-card-is-horizontal-mobile .skeleton-card-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
  }

  .product-card-is-horizontal-mobile .skeleton-image-container {
    flex-shrink: 0;
    width: 140px;
    height: 100%;
  }

  .product-card-is-horizontal-mobile .skeleton-image {
    padding-top: 100%;
    height: 100%;
  }

  .product-card-is-horizontal-mobile .skeleton-body {
    flex-grow: 1;
    padding: 5px 0 0 0;
  }

  .product-card-is-horizontal-mobile .skeleton-atc-button {
    height: 38px;
    margin-top: 20px;
  }
}

/* Tablet: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card-is-horizontal-tablet .skeleton-card-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
  }

  .product-card-is-horizontal-tablet .skeleton-image-container {
    flex-shrink: 0;
    width: 140px;
    height: 100%;
  }

  .product-card-is-horizontal-tablet .skeleton-image {
    padding-top: 100%;
    height: 100%;
  }

  .product-card-is-horizontal-tablet .skeleton-body {
    flex-grow: 1;
    padding: 5px 0 0 0;
  }

  .product-card-is-horizontal-tablet .skeleton-atc-button {
    height: 38px;
    margin-top: 20px;
  }
}

/* Desktop: 1024px and above */
@media (min-width: 1024px) {
  .product-card-is-horizontal-desktop .skeleton-card-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
  }

  .product-card-is-horizontal-desktop .skeleton-image-container {
    flex-shrink: 0;
    width: 140px;
    height: 100%;
  }

  .product-card-is-horizontal-desktop .skeleton-image {
    padding-top: 100%;
    height: 100%;
  }

  .product-card-is-horizontal-desktop .skeleton-body {
    flex-grow: 1;
    padding: 5px 0 0 0;
  }

  .product-card-is-horizontal-desktop .skeleton-atc-button {
    height: 38px;
    margin-top: 20px;
  }
}

/***************************************************************

                  BD MINI PANIER 
                  
****************************************************************/

:root {
  --mc-background: #ffffff;
  --mc-text-color: #1a1a1a;
  --mc-border-color: #e5e5e5;
  --mc-overlay-background: rgba(0, 0, 0, 0.5);
  --mc-primary-button-bg: #1a1a1a;
  --mc-primary-button-text: #ffffff;
  --mc-secondary-button-bg: transparent;
  --mc-secondary-button-text: #1a1a1a;
  --mc-border-radius: 12px;
  --mc-transition-speed: 0.4s;
}

/* Base et Overlay */
.bd_mini-cart__drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility var(--mc-transition-speed) ease;
}
.bd_mini-cart__drawer[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}
.bd_mini-cart__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mc-overlay-background);
  opacity: 0;
  transition: opacity var(--mc-transition-speed) ease;
}
.bd_mini-cart__drawer[aria-hidden="false"] .bd_mini-cart__overlay {
  opacity: 1;
}

/* Contenu du Panier */
.bd_mini-cart__content {
  position: absolute;
  background-color: var(--mc-background);
  color: var(--mc-text-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  transition: transform var(--mc-transition-speed) cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Positionnement : Tiroir Droite (Défaut pour mobile aussi) */
.bd_mini-cart__drawer[data-position="right"] .bd_mini-cart__content {
  top: 0;
  right: 0;
  width: 100%;
  max-width: 90vw;
  transform: translateX(100%);
  border-top-left-radius: var(--mc-border-radius);
  border-bottom-left-radius: var(--mc-border-radius);
}
@media screen and (min-width: 768px) {
  .bd_mini-cart__drawer[data-position="right"] .bd_mini-cart__content {
    width: var(--drawer-width-desktop, 450px);
    max-width: none;
    border-top-left-radius: var(--mc-border-radius);
    border-bottom-left-radius: var(--mc-border-radius);
  }
}

/* Positionnement : Feuille Bas */
.bd_mini-cart__drawer[data-position="bottom"] .bd_mini-cart__content {
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 90dvh;
  border-top-left-radius: var(--mc-border-radius);
  border-top-right-radius: var(--mc-border-radius);
  transform: translateY(100%);
}

.bd_mini-cart__drawer[aria-hidden="false"] .bd_mini-cart__content {
  transform: translate(0, 0);
}

/* Header */
.bd_mini-cart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--mc-border-color);
  flex-shrink: 0;
}
.bd_mini-cart__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.bd_mini-cart__close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 0;
  transition: transform 0.2s ease;
}
.bd_mini-cart__close-btn:hover {
  transform: scale(1.1);
}
.bd_mini-cart__close-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--mc-text-color);
}


/* Corps du panier (avec les articles) */
.bd_mini-cart__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* onglet récemment visités */
#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_mini-cart__body { 
max-height: 100dvh;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_product_container {
    background: #F8F8F8;
    padding: 5px;
    border-radius: 16px;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_link_a {
flex-direction:row;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_img_container {
    height:200px;
    border-radius: 10px;
    height: 100%;
    aspect-ratio: 1;
    min-width: 40%;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_product_container img {
mix-blend-mode:multiply;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .empty-variants-design-first,
.bd_mini-cart__gift-variant-renderer .empty-variants-design-first {
    min-height: 0;
    margin: 0;
}


#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_product_badge {
    border-radius: 50px;
    background: #333;
    padding: 5px 10px;
    font-size: 12px;
     top: 5px !important;
}
/*
#bd_recent-tab-panel.bd_mini-cart__tab-panel .add-to-wishlist,
#bd_recent-tab-panel.bd_mini-cart__tab-panel button.product-quickview {
position:fixed;
right: 0;
}
#bd_recent-tab-panel.bd_mini-cart__tab-panel .add-to-wishlist {
top:0;
}
#bd_recent-tab-panel.bd_mini-cart__tab-panel button.product-quickview {
    bottom: auto;
    margin: 0;
    top: 105%; 
}
*/

#bd_recent-tab-panel.bd_mini-cart__tab-panel .bd_product_infos_container {
padding-right:10px;
    min-width: 0;
}

#bd_recent-tab-panel.bd_mini-cart__tab-panel .variant-wrapper {
    min-width: 0;
    max-width: 100%;
}

/* Conteneur des articles */
.bd_mini-cart__items-container {
  display: grid;
  gap: 1.5rem;
}

.bd_mini-cart-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Animations d'apparition des éléments */
.bd_mini-cart__drawer[data-animation-style="fade-in"] .bd_mini-cart-item,
.bd_mini-cart__drawer[data-animation-style="fade-in"] .bd_mini-cart__block {
  animation: fadeIn 0.5s ease both;
  animation-delay: var(--animation-delay, 0s);
}

.bd_mini-cart__drawer[data-animation-style="slide-in-bottom"] .bd_mini-cart-item,
.bd_mini-cart__drawer[data-animation-style="slide-in-bottom"] .bd_mini-cart__block {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--animation-delay, 0s);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.bd_mini-cart-item__image-wrapper {
  flex-shrink: 0;
  width: 80px;
  height: 100px;
  border-radius: var(--mc-border-radius);
  overflow: hidden;
}

.bd_mini-cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd_mini-cart-item__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.bd_mini-cart-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.bd_mini-cart-item__title {
  font-weight: 600;
  margin: 0;
  text-decoration: none;
  color: var(--mc-text-color);
  transition: color 0.2s;
  flex-grow: 1;
  font-size:12px;
}
.bd_mini-cart-item__title:hover {
  color: var(--mc-primary-button-bg);
}

.bd_mini-cart-item__properties {
  font-size: 0.8rem;
  color: #666;
  margin: 0.25rem 0;
}

.bd_mini-cart-item__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

.bd_mini-cart-item__price {
  font-weight: 500;
}
.bd_mini-cart-item__price s {
 color: #777;
 margin-left: 0.5rem;
}

/* Sélecteur de quantité */
.bd_quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--mc-border-color);
  border-radius: 99px;
  overflow: hidden;
}

.bd_quantity-selector__button,
.bd_quantity-selector__input {
  background: none;
  border: none;
  text-align: center;
  height: 36px;
  font-size: 1rem;
}

.bd_quantity-selector__button {
  width: 36px;
  cursor: pointer;
  color: var(--mc-text-color);
  transition: background-color 0.2s;
}
.bd_quantity-selector__button:hover {
  background-color: #f5f5f5;
}

.bd_quantity-selector__input {
  width: 40px !important;
  -moz-appearance: textfield;
      min-height: auto;
      border: none !important;
}

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

.bd_mini-cart-item__remove-btn {
  font-size: 0.8rem;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  align-self: flex-start;
  transition: color 0.2s;
}
.bd_mini-cart-item__remove-btn:hover {
  color: var(--mc-primary-button-bg);
}

/* Footer et Blocs */
.bd_mini-cart__footer {
  padding: 1.5rem;
  padding-top:0;
  border-top: 1px solid var(--mc-border-color);
  background: #f9f9f9;
  flex-shrink: 0;
  overflow-y: auto;
  flex-grow:1;
  align-items: flex-end;
  box-shadow: -1px -2px 20px 7px #f8f8f8;
  z-index:2;
}
.bd_mini-cart__blocks-container {
  display: grid;
  gap: 1.25rem;
}

/* Barre de progression */
.bd_mini-cart__progress-bar-wrapper {
  text-align: center;
}
.bd_mini-cart__progress-bar-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.bd_mini-cart__progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--mc-border-color);
  border-radius: 99px;
  overflow: hidden;
}
.bd_mini-cart__progress-bar-filler {
  width: 0%;
  height: 100%;
  background-color: var(--mc-primary-button-bg);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* Sous-total et économies */
.bd_mini-cart__subtotal-wrapper, .bd_mini-cart__savings-wrapper {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
}
.bd_mini-cart__savings-wrapper {
  color: #008000;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Formulaire code promo */
.bd_mini-cart__discount-form {
  display: flex;
}
.bd_mini-cart__discount-form input {
  flex-grow: 1;
  border: 1px solid var(--mc-border-color);
  border-radius: var(--mc-border-radius) 0 0 var(--mc-border-radius);
  padding: 0.75rem;
  border-right: none;
}
.bd_mini-cart__discount-form .bd_button {
  border-radius: 0 var(--mc-border-radius) var(--mc-border-radius) 0 !important;
}
.bd_mini-cart__discount-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.bd_discount-tag {
  background-color: #e0f2e0;
  color: #006400;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Boutons */
.bd_mini-cart__buttons-wrapper {
  display: grid;
  gap: 0.75rem;
}
.bd_button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--mc-primary-button-bg);
  border-radius: 99px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}
.bd_button--primary {
  background-color: var(--mc-primary-button-bg);
  color: var(--mc-primary-button-text);
}
.bd_button--primary:hover {
  background-color: #333;
  border-color: #333;
}
.bd_button--secondary {
  background-color: var(--mc-secondary-button-bg);
  color: var(--mc-secondary-button-text);
}
.bd_button--secondary:hover {
  background-color: #f5f5f5;
}

/* Icônes de paiement */
.bd_mini-cart__payment-icons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bd_payment-icon {
  height: 24px;
}
.bd_payment-icon__svg {
  height: 100%;
  width: auto;
}

/* Texte personnalisé et Upsell */
.bd_mini-cart__custom-text, .bd_mini-cart__shipping-text {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}
.bd_mini-cart__upsell-wrapper {
    background-color: var(--mc-background);
    padding: 1rem;
    border-radius: var(--mc-border-radius);
    border: 1px solid var(--mc-border-color);
}
.bd_mini-cart__upsell-title {
    font-size: 1rem;
    margin: 0 0 1rem;
    font-weight: 600;
}
.bd_mini-cart__upsell-product {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.bd_mini-cart__upsell-image {
    width: 50px;
    height: auto;
    border-radius: calc(var(--mc-border-radius) / 2);
    flex-shrink: 0;
}
.bd_mini-cart__upsell-details {
    flex-grow: 1;
}
.bd_mini-cart__upsell-product-title {
    font-weight: 500;
    color: var(--mc-text-color);
    text-decoration: none;
}
.bd_mini-cart__upsell-product-price {
    font-size: 0.9rem;
    color: #555;
    display: block;
}
.bd_mini-cart__upsell-actions {
  display: flex;
  gap: 0.5rem;
}
.bd_mini-cart__upsell-wrapper .bd_button {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Barre d'annulation */
.bd_mini-cart__undo-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--mc-primary-button-bg);
  color: var(--mc-primary-button-text);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 10;
}
.bd_mini-cart__undo-bar.bd_is-visible {
  transform: translateY(0);
}
.bd_mini-cart__undo-button {
  background: none;
  border: none;
  color: var(--mc-primary-button-text);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Skeleton Loader */
.bd_mini-cart__loader {
  display: grid;
  gap: 1.5rem;
}
.bd_skeleton-item {
  display: flex;
  gap: 1rem;
}
.bd_skeleton-image {
  width: 80px;
  height: 100px;
  background: #f0f0f0;
  border-radius: var(--mc-border-radius);
}
.bd_skeleton-details {
  flex-grow: 1;
}
.bd_skeleton-line {
  height: 12px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 8px;
}
.bd_skeleton-image, .bd_skeleton-line {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Panier vide */
.bd_mini-cart__empty-message {
    text-align: center;
    padding: 2rem 0;
}

/* Utilitaires */
.bd_visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}


/*
====================================================================================
// == Nouveaux Styles (Mise à jour) ==
// Styles pour les nouvelles fonctionnalités ajoutées.
====================================================================================
*/

/* Bouton Wishlist sur l'article */
.bd_mini-cart-item__wishlist {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.bd_mini-cart-item__wishlist svg {
  width: 20px;
  height: 20px;
  fill: #aaa;
  transition: fill 0.2s ease, transform 0.2s ease;
}
.bd_mini-cart-item__wishlist:hover svg {
  fill: var(--mc-text-color);
  transform: scale(1.1);
}

/* Barre de progression pour Cadeau */
.bd_mini-cart__gift-bar-wrapper {
  text-align: center;
}
.bd_mini-cart__gift-bar-wrapper .bd_mini-cart__progress-bar-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.bd_mini-cart__gift-bar-wrapper .bd_mini-cart__progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--mc-border-color);
  border-radius: 99px;
  overflow: hidden;
}
.bd_mini-cart__gift-bar-wrapper .bd_mini-cart__progress-bar-filler {
  width: 0%;
  height: 100%;
  background-color: #008000; /* Vert pour le cadeau */
  border-radius: 99px;
  transition: width 0.5s ease;
}
.bd_button--add-gift {
  display: inline-block;
  background-color: #008000;
  color: white;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin-left: 0.5rem;
  font-weight: 500;
  vertical-align: middle;
}
.bd_mini-cart__gift-bar-wrapper.bd_completed .bd_mini-cart__progress-bar-text {
  color: #008000;
  font-weight: 500;
}

/* Notes de commande */
.bd_mini-cart__notes-wrapper label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.bd_mini-cart__notes-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--mc-border-color);
  border-radius: var(--mc-border-radius);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s;
}
.bd_mini-cart__notes-textarea:focus {
  outline: none;
  border-color: var(--mc-primary-button-bg);
  box-shadow: 0 0 0 1px var(--mc-primary-button-bg);
}
.bd_mini-cart__notes-feedback {
  font-size: 0.8rem;
  color: #008000;
  margin-top: 0.5rem;
}

/* Icônes de Réassurance */
.bd_mini-cart__reassurance-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: center;
  gap: 0.5rem;
}
.bd_mini-cart__reassurance-wrapper p:empty {
  display: none; /* ou autre style */
}
.bd_mini-cart__reassurance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0; /* Permet un redimensionnement égal */
  min-width: 60px; /* Empêche le texte de trop se réduire */
}
.bd_mini-cart__reassurance-icon {
  max-width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}
.bd_mini-cart__reassurance-text {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #555;
  margin: 0;
}

/* Image Promotionnelle */
.bd_mini-cart__promo-image-wrapper a {
  display: block;
  line-height: 0;
}
.bd_mini-cart__promo-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mc-border-radius);
}

/* Séparateur */
.bd_mini-cart__separator {
  border: none;
  height: 1px;
  background-color: currentColor; /* Utilise la couleur définie en inline style */
}

/*
====================================================================================
// == Nouveaux Styles (Mise à jour pour Onglets, Récents & Bottom Sheets) ==
====================================================================================
*/

/* Styles pour les onglets */
.bd_mini-cart__header {
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.bd_mini-cart__tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--mc-border-color);
  padding: 0 1.5rem;
}
.bd_mini-cart__tab-btn {
  flex: 1 1 0;
  padding: 1rem 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.bd_mini-cart__tab-btn:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
.bd_mini-cart__tab-btn.is-active {
  color: var(--mc-text-color);
  font-weight: 600;
}
.bd_mini-cart__tab-btn.is-active:after {
  background-color: var(--mc-text-color);
}
.bd_mini-cart__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background-color: #ccc;
  color: var(--mc-text-color);
  border-radius: 99px;
  min-width: 18px;
  height: 18px;
  margin-left: 0.5rem;
  font-weight: 400;
}
.bd_mini-cart__tab-btn.is-active .bd_mini-cart__tab-count {
  background-color: var(--mc-text-color);
  color: var(--mc-background);
}

.bd_mini-cart__close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}


/* Panneaux d'onglets */
.bd_mini-cart__content {
    overflow: hidden; /* Empêche le double scroll */
}
.bd_mini-cart__tab-panels {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    position: relative; /* Pour les bottom sheets */
}
.bd_mini-cart__tab-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.bd_mini-cart__tab-panel.is-active {
  display: flex;
}
.bd_mini-cart__tab-panel .bd_mini-cart__body {
  height: 100%;
  overflow-y:auto;
}
.bd_mini-cart__tab-panel.bd_is-empty .bd_mini-cart__footer {
    display: none;
}

/* Styles pour les produits récemment vus */
[data-recent-products-container] {
  display: grid;
  gap: 1.5rem;
}
[data-recent-products-body] .bd_mini-cart-item__price {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: var(--mc-text-color);
  font-weight: 500;
}

/* Actions en icônes */
.bd_mini-cart__icon-actions-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-top: 1px solid var(--mc-border-color);
  border-bottom: 1px solid var(--mc-border-color);
}
.bd_mini-cart__icon-action {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    font-size: .8rem;
    color: var(--mc-text-color);
    border-radius: var(--mc-border-radius);
    transition: background-color .2s;
    flex: 1;
    justify-content: center;
}
.bd_mini-cart__icon-action:hover {
  background-color: #f5f5f5;
}
.bd_mini-cart__icon-action svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
}

/* Styles pour les Bottom Sheets */
.bd_mini-cart__bottom-sheets-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.4s ease, visibility 0.4s ease;
}
.bd_mini-cart__bottom-sheets-container.is-open {
  visibility: visible;
  pointer-events: all;
  background-color: var(--mc-overlay-background);
}

.bd_mini-cart__bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--mc-background);
  border-top-left-radius: var(--mc-border-radius);
  border-top-right-radius: var(--mc-border-radius);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  display: flex;
  flex-direction: column;
  max-height: 80%;
}
.bd_mini-cart__bottom-sheet.is-open {
  transform: translateY(0);
}

.bd_mini-cart__bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--mc-border-color);
  flex-shrink: 0;
}
.bd_mini-cart__bottom-sheet-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.bd_mini-cart__bottom-sheet-content {
  padding: 1.5rem;
  overflow-y: auto;
}

/* Styles pour l'estimateur de livraison */
.bd_shipping-estimator__form {
    display: grid;
    gap: 1rem;
}
.bd_shipping-estimator__field {
    display: flex;
    flex-direction: column;
}
.bd_shipping-estimator__field label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.bd_shipping-estimator__field input,
.bd_shipping-estimator__field select {
    padding: 0.75rem;
    border: 1px solid var(--mc-border-color);
    border-radius: var(--mc-border-radius);
    width: 100%;
}
.bd_shipping-estimator__results {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mc-border-color);
}
.bd_shipping-estimator__results ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.bd_shipping-estimator__results li {
    display: flex;
    justify-content: space-between;
}


/* Option Emballage Cadeau */
.bd_mini-cart__gift-wrap-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border: 1px solid var(--mc-border-color);
  border-radius: var(--mc-border-radius);
}
.bd_mini-cart__gift-wrap-wrapper label {
  font-size: 0.9rem;
  cursor: pointer;
  margin:0;
}
.bd_mini-cart__gift-wrap-wrapper label span {
  font-weight: 500;
}

/* Petit ajustement pour le champ de note développé */
.bd_mini-cart__notes-wrapper--expanded {
    padding-top: 1rem;
    border-top: 1px solid var(--mc-border-color);
}

.bd_mini-cart__shipping-text {
  text-align: left;
  padding: 0.5rem 0;
}

/*
====================================================================================
// == Nouveaux Styles (Sélection de cadeaux) ==
====================================================================================
*/
.bd_mini-cart__gift-selection {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mc-border-color);
}
.bd_mini-cart__gift-selection-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-align: center;
}
.bd_mini-cart__gift-options-wrapper {
  display: grid;
  gap: 1rem;
}
.bd_mini-cart__gift-option {
  display: flex;
  gap: 1rem;
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: var(--mc-border-radius);
  border: 1px solid var(--mc-border-color);
}
.bd_mini-cart__gift-option-image {
  flex-shrink: 0;
}
.bd_mini-cart__gift-option-image img {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: calc(var(--mc-border-radius) / 2);
}
.bd_mini-cart__gift-option-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.75rem;
  max-width: 100%;
  min-width: 0;
}
.bd_mini-cart__gift-option-title {
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.bd_mini-cart__gift-variant-form {
  display: grid;
  gap: 0.5rem;
}
.bd_mini-cart__gift-variant-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.bd_mini-cart__gift-variant-selector select {
  flex-grow: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--mc-border-color);
}
.bd_button--add-gift {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  margin-top: auto;
}

/*
====================================================================================
// == Nouveaux Styles (Modale Cadeau & Swatches) ==
====================================================================================
*/

/* Boutons dans la barre de progression cadeau */
.bd_mini-cart__gift-change-btn,
.bd_mini-cart__gift-choose-btn {
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: 500;
  padding: 0 0 0 4px;
  color: #008000;
}

/* Modale de sélection de cadeau */
.bd_mini-cart__gift-option {
  display: flex;
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: var(--mc-border-radius);
  border: 1px solid var(--mc-border-color);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.bd_mini-cart__gift-option.is-selected {
  border-color: #008000;
  box-shadow: 0 0 0 2px #008000;
}

/* ... (conservez les styles existants pour .bd_mini-cart__gift-option-image, etc.) ... */

/* Sélecteurs de variantes visuels (Swatches) */
.bd_variant-swatches-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.bd_variant-swatches-container fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bd_variant-swatches-container legend {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  padding: 0;
}
.bd_variant-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bd_variant-swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bd_variant-swatch label {
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--mc-border-color);
  transition: border-color 0.2s ease;
}
.bd_variant-swatch label:hover {
  border-color: var(--mc-text-color);
}
.bd_variant-swatch input:checked + label {
  border-color: #008000;
  box-shadow: 0 0 0 1px #008000;
}
.bd_variant-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Boutons de sélection/retrait dans la modale */
.bd_mini-cart__gift-option-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}
.bd_mini-cart__gift-option .bd_button {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  flex-grow: 1;
}
.bd_button--remove-gift {
  background-color: #fcebeb;
  border-color: #e53e3e;
  color: #e53e3e;
}
.bd_button--remove-gift:hover {
  background-color: #e53e3e;
  color: white;
}

/* Style pour le tag de réduction */
.bd_discount-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e0f2e0;
  color: #006400;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem; /* Ajustement du padding */
  border-radius: 99px; /* Pour un look "pilule" */
  font-size: 0.8rem;
  font-weight: 500;
}

/* Bouton de suppression dans le tag */
.bd_discount-tag__remove {
  background: rgba(0,0,0,0.1);
  border: none;
  color: #006400;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.2s;
}
.bd_discount-tag__remove:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

/*
====================================================================================
// == AJOUTS pour Améliorations UX/UI ==
====================================================================================
*/

/* 2A. Spinner pour la mise à jour de la quantité */
.bd_quantity-selector {
  position: relative;
}

.bd_quantity-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd_quantity-spinner::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: var(--mc-text-color);
  animation: spin 0.8s linear infinite;
}

.bd_quantity-selector.is-loading > *:not(.bd_quantity-spinner) {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* 2B. Effet visuel pour la suppression d'un article */
.bd_mini-cart-item.is-removing {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease 0.1s;
  /*
  opacity: ;
  transform: translateX(20px);
  max-height: 0;
  margin-top: -1.5rem;
  */
  opacity: .5 !important;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* 2D. Prix barré et prix unitaire */
.bd_mini-cart-item__price-wrapper {
  text-align: right;
}
.bd_mini-cart-item__price s {
  display: block;
  font-size: 0.8rem;
  color: #777;
  line-height: 1;
}
.bd_mini-cart-item__unit-price {
  font-size: 0.8rem;
  color: #666;
  text-align: right;
  margin-top: -0.5rem;
  margin-bottom: 0.25rem;
}
.bd_mini-cart-item__unit-price.bd_unit-price--discounted {
  color: #008000;
}
.bd_mini-cart-item__unit-price s {
  color: #777;
  margin-left: 0.25rem;
}

/* 2E. Icônes SVG dans les boutons */
.bd_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.bd_button_svg_icon svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.bd_mini-cart-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.bd_mini-cart-item__discount-badge {
  font-size: 11px;
  padding: 2px 6px;
  background-color: #e5f2ff; /* Couleur de fond (bleu clair) */
  color: #0052cc; /* Couleur du texte (bleu foncé) */
  border-radius: 4px;
  font-weight: 500;
}
.bd_mini-cart-item__price-wrapper s {
  color: var(--color-text-subdued, #717171);
  margin-right: 8px;
}
.bd_mini-cart-item__unit-price s {
    color: var(--color-text-subdued, #717171);
    margin-right: 6px;
}

/*
====================================================================================
// == AJOUTS pour Formulaire de Réduction (2G & 2H) ==
====================================================================================
*/

/* 1. Ajustement du formulaire pour gérer le message d'erreur */
.bd_mini-cart__discount-form {
  flex-wrap: wrap; /* Permet au message d'erreur de passer à la ligne */
  row-gap: 0.75rem; /* Espace entre la ligne input/bouton et le message d'erreur */
  align-items: flex-start;
}

/* On s'assure que le bouton et l'input restent sur la même ligne */
.bd_mini-cart__discount-form input[name="discount"] {
  flex-grow: 1;
  min-height: 44px;
  width: auto;
}

.bd_mini-cart__discount-form .bd_button {
    flex-shrink: 0;
    min-height: 44px;
    border-color: #333;
    background: #333;
    color: #FFF;
}


/* 2. Style pour le spinner dans le bouton "Appliquer" (2G) */
.bd_button .bd_button-spinner::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Spinner plus léger pour un fond clair */
  border: 2px solid rgb(255, 255, 255); 
  border-top-color: var(--mc-text-color);
  /* On réutilise l'animation de spin existante */
  animation: spin 0.8s linear infinite; 
}

/* 3. Style pour le message d'erreur du code de réduction (2H) */

.bd_mini-cart__discount-error-message-container {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: #c53030;
    flex: 1 1 100%; 
    
}

.bd_mini-cart__discount-error-message {
  color: #c53030; /* Rouge foncé pour une bonne lisibilité */
  background-color: #fff0f0;
  border: 1px solid #f5c6cb;
  border-radius: var(--mc-border-radius);
  font-size: 0.85rem;
  width: 100%; /* Prend toute la largeur du formulaire */
  padding: 0.5rem 0.75rem;
  margin: 0;
  box-sizing: border-box;
}

/*
====================================================================================
// == Styles pour les améliorations (3A, 3B, 3E, 3F) ==
====================================================================================
*/

/* NOUVEAU 3A : Bouton "Enregistrer" pour la note de commande */
.bd_mini-cart__notes-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  gap: 1rem;
}
.bd_mini-cart__notes-actions .bd_mini-cart__notes-feedback {
  margin: 0; /* Réinitialise la marge pour un meilleur alignement */
  flex-grow: 1; /* Permet au texte de prendre l'espace disponible */
}
.bd_mini-cart__notes-actions .bd_button {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  flex-shrink: 0; /* Empêche le bouton de se réduire */
}
.bd_button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.bd_button .bd_button-spinner {
    display: inline-block;
}
.bd_button .bd_button-spinner::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

/* MODIFIÉ 3B : Affichage détaillé du code promo */
.bd_discount-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Prend toute la largeur pour un meilleur alignement */
  padding-left: 1rem;
  text-align: left;
}
.bd_discount-tag__details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-grow: 1;
}
.bd_discount-tag__title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}
.bd_discount-tag__description {
  font-size: 0.75rem;
  opacity: 0.8;
  line-height: 1.2;
}

/* NOUVEAU 3E : Dimensionnement des icônes SVG de réassurance */
.bd_mini-cart__reassurance-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* NOUVEAU 3F : Bloc "Accepter les CGV" */
.bd_mini-cart__terms-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.75rem;
  background-color: rgba(0,0,0,0.02);
  border-radius: var(--mc-border-radius);
}
.bd_mini-cart__terms-checkbox {
  margin-top: 4px; /* Meilleur alignement vertical avec la première ligne de texte */
  flex-shrink: 0;
  height: 1.1em;
  width: 1.1em;
  min-height:auto;
}
.bd_mini-cart__terms-label, .bd_mini-cart__terms-label p {
  margin: 0;
}
.bd_mini-cart__terms-label a {
  text-decoration: underline;
  color: var(--mc-text-color);
  background: none; /* Annule les styles potentiels du thème */
  border: none;
}
.bd_mini-cart__terms-label a:hover {
  text-decoration-thickness: 2px;
}
.bd_button.bd_button--disabled {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}
.bd_button.bd_button--disabled:hover {
  background-color: #cccccc;
  border-color: #cccccc;
}

/* NOUVEAU 3F : Modale générique pour les pages (CGV, etc.) */
.bd_mini-cart__generic-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bd_mini-cart__generic-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fond légèrement plus sombre */
}
.bd_mini-cart__generic-modal-content {
  position: relative;
  background-color: var(--mc-background);
  border-radius: var(--mc-border-radius);
  width: 100%;
  max-width: 650px;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.bd_mini-cart__generic-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--mc-border-color);
  flex-shrink: 0;
}
.bd_mini-cart__generic-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.bd_mini-cart__generic-modal-body {
  padding: 1rem 1.5rem;
  overflow-y: auto;
}
.bd_mini-cart__generic-modal-body .bd_mini-cart__loader {
  padding: 2rem 0;
}

/*
====================================================================================
// == MODIFICATION pour Amélioration UI Réduction (3B) ==
====================================================================================
*/

.bd_discount-tag {
  background-color: #eaf7ee; /* Vert plus subtil */
  color: #0b572e;
  border: 1px solid #c7e6d2;
}

.bd_discount-tag__remove {
  background: rgba(11, 87, 46, 0.1);
  color: #0b572e;
}

.bd_discount-tag__details {
  gap: 0.25rem;
}

.bd_discount-tag__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.bd_discount-tag__title {
  font-weight: 700;
  font-size: 0.9rem;
}

.bd_discount-tag__amount {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  margin-left: 1rem;
}

.bd_discount-tag__description {
  font-size: 0.8rem;
  opacity: 0.9;
}

/*
====================================================================================
// == NOUVEAU 3C : Info-bulles pour les icônes de réassurance ==
====================================================================================
*/

/* Conteneur principal de l'icône de réassurance */
.bd_mini-cart__reassurance-item {
  position: relative; /* Ancre pour l'info-bulle */
  outline: none; /* Cache l'outline par défaut au focus */
}

/* Curseur et indicateur si une description existe */
.bd_mini-cart__reassurance-item[tabindex="0"] {
  cursor: help;
}

.bd_mini-cart__reassurance-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Petit indicateur visuel (+) pour montrer qu'il y a plus d'infos */
.reassurance-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 14px;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #a9a9a9;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
    position: absolute;
    right: 0;
    top: 0%;
    align-content: center;
}

.reassurance-indicator-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 14px;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.reassurance-indicator-icon svg {
fill: #FFF;
fill: currentColor;
color: currentColor;
stroke: currentColor;
width:14px;
height:14px;
}

/* Info-bulle (tooltip) */
.reassurance-tooltip {
  position: absolute;
  bottom: calc(100% + 12px); /* 12px au-dessus de l'élément */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background-color: var(--mc-text-color, #1a1a1a);
  color: var(--mc-background, #ffffff);
  padding: 0.75rem 1rem;
  border-radius: var(--mc-border-radius);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  width: 220px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Flèche de l'info-bulle */
.reassurance-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--mc-text-color, #1a1a1a) transparent transparent transparent;
}

/* Affichage au survol (desktop) ou au focus/clic (mobile) */
.bd_mini-cart__reassurance-item:hover .reassurance-tooltip,
.bd_mini-cart__reassurance-item:focus .reassurance-tooltip,
.bd_mini-cart__reassurance-item:focus-within .reassurance-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bd_mini-cart__reassurance-item:hover .reassurance-indicator,
.bd_mini-cart__reassurance-item:focus .reassurance-indicator,
.bd_mini-cart__reassurance-item:focus-within .reassurance-indicator {
  transform: scale(1.1);
  background-color: #cccccc;
}

/*
====================================================================================
// == CORRECTIF 3C : Positionnement des info-bulles de réassurance ==
====================================================================================
*/

/* Aligne l'info-bulle de la PREMIÈRE icône à gauche pour éviter le débordement */
.bd_mini-cart__reassurance-item:first-child .reassurance-tooltip {
  left: 0;
  transform: translateX(0) translateY(5px); /* On enlève le centrage horizontal */
}

.bd_mini-cart__reassurance-item:first-child:hover .reassurance-tooltip,
.bd_mini-cart__reassurance-item:first-child:focus .reassurance-tooltip,
.bd_mini-cart__reassurance-item:first-child:focus-within .reassurance-tooltip {
  transform: translateX(0) translateY(0);
}

/* Repositionne la flèche pour la PREMIÈRE info-bulle */
.bd_mini-cart__reassurance-item:first-child .reassurance-tooltip::after {
  left: 16px; /* Positionne la flèche au centre de l'icône (environ 32px / 2) */
  transform: translateX(0);
}

/* Aligne l'info-bulle de la DERNIÈRE icône à droite pour éviter le débordement */
.bd_mini-cart__reassurance-item:last-child .reassurance-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(5px); /* On enlève le centrage horizontal */
}

.bd_mini-cart__reassurance-item:last-child:hover .reassurance-tooltip,
.bd_mini-cart__reassurance-item:last-child:focus .reassurance-tooltip,
.bd_mini-cart__reassurance-item:last-child:focus-within .reassurance-tooltip {
  transform: translateX(0) translateY(0);
}

/* Repositionne la flèche pour la DERNIÈRE info-bulle */
.bd_mini-cart__reassurance-item:last-child .reassurance-tooltip::after {
  left: auto;
  right: 16px; /* Positionne la flèche au centre de l'icône (environ 32px / 2) */
  transform: translateX(0);
}

#bd_gift-wrap-checkbox,
.bd_mini-cart-drawer input {
min-height:auto;
}
.bd_mini-cart-drawer label {
    margin-bottom:0;
}


/*
====================================================================================
// == AMÉLIORATIONS UI/UX (2I & 2J) ==
====================================================================================
*/

/* 2I.a : Amélioration des styles de prix */
.bd_mini-cart-item__price-wrapper {
  text-align: right;
  line-height: 1.2;
}

.bd_mini-cart-item__price-wrapper .bd_mini-cart-item__price {
  font-size: 1.1rem; /* Prix final plus visible */
  font-weight: 600;
  color: var(--mc-text-color);
}

.bd_mini-cart-item__price-wrapper s {
  font-size: 0.85rem;
  font-weight: 400;
  color: #777;
  margin-right: 0.5rem;
  display: inline-block;
}

/* 2I.b : Amélioration des badges de réduction sur l'article */
.bd_mini-cart-item__badges {
  margin-top: 0.5rem;
}

.bd_mini-cart-item__discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background-color: #ffefef;
  color: #e53e3e;
  border-radius: 99px; /* Forme de pilule */
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Ajout d'une petite icône "tag" au badge */
.bd_mini-cart-item__discount-badge::before {
  content: ' ';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}


/* 2J : Feedback visuel pour le bloc CGV */

/* Style du bloc quand la case n'est pas cochée */
.bd_mini-cart__terms-wrapper.is-unchecked {
  background-color: #fff8e1; /* Fond jaune pâle pour attirer l'attention */
  border: 1px solid #ffecb3;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Animation de "secousse" en cas d'erreur */
.bd_mini-cart__terms-wrapper.has-error {
  animation: shake 0.5s ease-in-out;
  border-color: #e53e3e; /* Bordure rouge en cas d'erreur */
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

  .bd_button[data-checkout-button].bd_button--disabled {
    position: relative;
    cursor: not-allowed;
  }
  .bd_button[data-checkout-button].bd_button--disabled::after {
    content: attr(data-disabled-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
  }
  .bd_button[data-checkout-button].bd_button--disabled:hover::after {
    opacity: 1;
    visibility: visible;
  }

  /* styles blocks dans body */
  .bd_mini-cart__block.bd_mini-cart__block--recommendations_dynamique {
    min-width:0;
  }

  .bd_mini-cart__tab-panels input {
    min-height:auto !important;
  }

  .bd_mini-cart__savings-wrapper--block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 1rem;
}

.bd_mini-cart__savings-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-foreground-75);
}

.bd_mini-cart__savings-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.bd_mini-cart__savings-amount {
  font-weight: 600;
  color: #FFFFFF; /* Couleur du texte */
  background-color: #ef4444; /* Rouge, similaire à l'image */
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.9em;
}

.bd_mini-cart__subtotal-wrapper--original {
  color: var(--color-foreground-75);
  /*
  font-size: 0.9em;
  padding-bottom: 5px;
  */
}

span.bd_mini-cart__savings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

/*
====================================================================================
// == AJOUTS ET MODIFICATIONS POUR LA LIVRAISON ET LES TOTAUX ==
====================================================================================
*/

/* Conteneur pour le bloc sous-total */
.bd_mini-cart__block--subtotal {
  display: flex;
  flex-direction: column;
}

/* Ligne générique (s'applique au sous-total, original, etc.) */
.bd_mini-cart__subtotal-wrapper,
.bd_mini-cart__shipping-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Ligne de livraison */
.bd_mini-cart__shipping-line {
  font-size: 0.95rem;
  color: var(--mc-text-color);
}

.bd_mini-cart__shipping-price .free-shipping-text {
  color: #008000;
  font-weight: 600;
}

.bd_mini-cart__shipping-price s {
  color: #777;
  margin-right: 0.5rem;
}

/* Ligne du total final */
.bd_mini-cart__final-total-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mc-text-color);
  border-top: 1px solid var(--mc-border-color);
  padding-top: 1rem;
}

/* Texte taxes et livraison */
.bd_mini-cart__shipping-text {
    text-align: left;
    padding-top: 0.5rem;
}

/*
====================================================================================
// == STYLES POUR LES NOUVELLES LIGNES DU SOUS-TOTAL ==
====================================================================================
*/

/* Styles pour les badges */
.bd_badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle; /* Meilleur alignement avec le texte */
  border-radius: 99px;
  margin-left: 0.5rem;
}

.bd_badge--promo {
  color: #9f1239; /* Rose-rouge foncé */
  background-color: #ffe4e6; /* Rose très clair */
}

.bd_badge--code {
  color: #1d4ed8; /* Bleu foncé */
  background-color: #dbeafe; /* Bleu très clair */
}

/* Style de base pour les nouvelles lignes */
.bd_mini-cart__subtotal-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  padding: 1px 0;
}

.bd_mini-cart__subtotal-line span:first-child {
  display: flex;
  align-items: center;
  color: #555;
  gap: 0.25rem;
}

/* Montants des réductions */
.bd_mini-cart__subtotal-line--promo-savings .bd_mini-cart__promo-savings-price,
.bd_mini-cart__subtotal-line--code-savings .bd_mini-cart__code-savings-price {
  color: #16a34a; /* Vert pour les économies */
  font-weight: 600;
}

/* Montant de la TVA */
.bd_mini-cart__subtotal-line--tax [data-tax-line-amount] {
  font-weight: 500;
}

/* Titre du code promo */
.bd_mini-cart__subtotal-line--code-savings span:first-child span[data-discount-code-title] {
  font-weight: bold;
  font-style: italic;
  color: #333;
}

/*
====================================================================================
// == NOUVEAU : Styles pour l'accordéon de prix "Reçu de Caisse" ==
====================================================================================
*/

/* Conteneur principal du bloc de prix */
.mc-price-breakdown {
  margin-top: 0.5rem;
}

/* Cache l'accordéon si l'option est désactivée dans le thème */
.mc-price-breakdown:not([data-accordion-enabled="true"]) .mc-price-breakdown__trigger {
  display: none;
}
.mc-price-breakdown:not([data-accordion-enabled="true"]) .mc-price-breakdown__panel {
  display: block;
  grid-template-rows: 1fr; /* S'assure que le contenu est visible si désactivé */
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--mc-border-color);
}


/* Déclencheur (lien "Afficher le détail") */
.mc-price-breakdown__trigger {
  display: inline-flex; /* Pour ne pas prendre toute la largeur */
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.8rem;
  color: #888;
  transition: color 0.2s ease;
  border-bottom: 1px dotted currentColor; /* Souligné pour indiquer l'interactivité */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  font-weight: normal;
}

.mc-price-breakdown__trigger:hover {
  color: var(--mc-text-color);
}

/* Icône chevron */
.mc-price-breakdown__icon {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.mc-price-breakdown__icon svg {
  display: block;
}

/* Rotation de l'icône quand l'accordéon est ouvert */
.mc-price-breakdown.is-open .mc-price-breakdown__icon {
  transform: rotate(-180deg);
}

/* Panneau déroulant */
.mc-price-breakdown__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: hidden;
  max-height: 0;
}

.mc-price-breakdown.is-open .mc-price-breakdown__panel {
  grid-template-rows: 1fr;
  max-height: none;
}

/* Contenu du panneau */
.mc-price-breakdown__panel-content {
  min-height: 0;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--mc-border-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Styles pour le total final mis en avant */
.bd_mini-cart__final-total-wrapper {
  padding: 1rem 0 0.5rem 0;
  font-size: 1.25rem; /* Plus grand */
  font-weight: 700; /* Plus gras */
}

.final-total-label-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
    flex-direction: row;
    gap: 8px;
}

.mc-price-breakdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.mc-price-breakdown__trigger[aria-expanded="true"] .mc-price-breakdown__icon {
  transform: rotate(180deg);
}

/*
===================================================================
STYLES POUR LE BOUTON ET LA MODALE "PRODUITS SIMILAIRES" (Boutique-Design)
Fichier : bd_produits_similaires.css
===================================================================
*/


/* --- 2. Styles de base pour la modale et l'overlay --- */
.bd_similar-products-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001; /* Doit être au-dessus de tout le reste */
    display: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bd_similar-products-modal.bd_is-open {
    display: block;
    opacity: 1;
}

.bd_modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.5);
    cursor: pointer;
}

.bd_modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- 3. Styles par type de modale --- */

/* 3.1 Modale au Centre (Défaut) */
.bd_similar-products-modal[data-layout="center"] .bd_modal-content {
    position: relative;
    margin: 5vh auto;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    border-radius: 12px;
    transform: scale(0.95) translateY(-20px);
}
.bd_similar-products-modal[data-layout="center"].bd_is-open .bd_modal-content {
    transform: scale(1) translateY(0);
}

/* 3.2 Panneau latéral Droit */
.bd_similar-products-modal[data-layout="right"] .bd_modal-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    border-left: 1px solid #e0e0e0;
    transform: translateX(100%);
}
.bd_similar-products-modal[data-layout="right"].bd_is-open .bd_modal-content {
    transform: translateX(0);
}

/* 3.3 Panneau Inférieur (Bottom Sheet) */
.bd_similar-products-modal[data-layout="bottomsheet"] .bd_modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
}
.bd_similar-products-modal[data-layout="bottomsheet"].bd_is-open .bd_modal-content {
    transform: translateY(0);
}


/* --- 4. En-tête de la modale --- */
.bd_modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
    flex-shrink: 0;
    position: relative;
}

.bd_modal-grabber {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background-color: #d1d5db;
    border-radius: 2.5px;
    display: none; /* Affiché via JS */
}

.bd_similar-products-modal[data-layout="bottomsheet"] .bd_modal-grabber {
    display: block;
}
.bd_similar-products-modal[data-layout="bottomsheet"] .bd_modal-title {
    text-align: center;
    width: 100%;
    padding: 16px 0 8px;
}
.bd_similar-products-modal[data-layout="bottomsheet"] .bd_modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.bd_modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.bd_modal-close {
    background: #e5e7eb;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: all 0.2s ease;
}

.bd_modal-close:hover {
    background-color: #d1d5db;
    color: #111827;
    transform: rotate(90deg);
}

.bd_modal-close svg {
    width: 16px;
    height: 16px;
}


/* --- 5. Corps de la modale et Grille de produits --- */
.bd_modal-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

.bd_similar-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

@media (max-width: 480px) {
    .bd_similar-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .bd_modal-body {
        padding: 16px;
    }
}


/* --- 6. Styles pour les Skeletons et Messages --- */
.bd_similar-products-message {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.1rem;
    color: #6b7280;
}

@keyframes bd_shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.bd_skeleton-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd_skeleton-image {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
    background-size: 800px 104px;
    animation: bd_shimmer 1.5s linear infinite;
}

.bd_skeleton-text {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
    background-size: 800px 104px;
    animation: bd_shimmer 1.5s linear infinite;
}

.bd_skeleton-text.bd_short {
    width: 60%;
}

/* CSS pour le produit source dans la modale */
.bd_modal-header {
  /* Assurez-vous que le header peut contenir des éléments flex */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bd_modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px; /* Espace entre l'image source et le titre */
  flex-grow: 1; /* Permet au wrapper de prendre l'espace disponible */
  overflow: hidden; /* Empêche le débordement */
}

.bd_modal-source-product {
  flex-shrink: 0; /* Empêche le conteneur de rétrécir */
}

.bd_source-product-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  max-width: 250px; /* Limite la largeur pour éviter de pousser le titre */
}

.bd_source-product-image {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px; /* Bords arrondis pour l'image */
  flex-shrink: 0;
}

.bd_source-product-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Ajoute "..." si le titre est trop long */
}

.bd_similar-debug-panel { 
  display:none !important;
}

/*****************************************************

                  COLLECTION HEADER V16

*****************************************************/

.collection-header--overlap {
    margin-top: calc(-1 * var(--header-height, 100px));
    margin-bottom: -1px;
  }
  .collection-header { position: relative; display: flex; width: 100%; overflow: hidden; background-color: #1a1a1a; color: var(--ch-color-text); border-radius: var(--ch-border-radius); min-height: var(--ch-height-mobile); margin-bottom:50px; }
  .collection-header.no-bottom-description { border-radius: var(--ch-border-radius); }
  .collection-header.hero--fullscreen { min-height: 100vh; }
  .collection-header.description-layout--side { flex-direction: row; }
  .collection-header__main-content { flex-grow: 1; position: relative; overflow: hidden; border-radius: var(--ch-border-radius); display: flex; flex-direction: column; }
  /***********************************
   * V13 LAYOUT STYLES (MOBILE FIRST) *
   ***********************************/
  .collection-header__media-wrapper { position: absolute; inset: 0; z-index: 1; border-radius: var(--ch-border-radius); }
  .collection-header__content-wrapper { position: relative; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 1.5rem; justify-content: var(--ch-content-valign); text-align: var(--ch-content-text-align); flex-grow: 1; }
  .layout-mobile--overlay .collection-header__content-wrapper,
  .layout-mobile--box .collection-header__content-wrapper,
  .layout-mobile--marquee_text .collection-header__content-wrapper,
  .layout-mobile--background_text .collection-header__content-wrapper,
  .layout-mobile--content_inset .collection-header__content-wrapper,
  .layout-mobile--spotlight_centered .collection-header__content-wrapper,
  .layout-mobile--floating_content_box .collection-header__content-wrapper { align-items: var(--ch-content-halign); }
  .layout-mobile--box .collection-header__content-box,
  .layout-mobile--floating_content_box .collection-header__content-box { background: var(--ch-floating-box-bg, rgba(0,0,0,0.3)); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; border-radius: var(--ch-border-radius); }
  .layout-mobile--floating_content_box .collection-header__content-box { box-shadow: 0 15px 25px rgba(0,0,0,0.2); }
  .layout-mobile--split .collection-header__media-wrapper,
  .layout-mobile--split_tilted .collection-header__media-wrapper,
  .layout-mobile--content_card_overlap .collection-header__media-wrapper,
  .layout-mobile--content_inset .collection-header__media-wrapper,
  .layout-mobile--asymmetric_mosaic .collection-header__media-wrapper,
  .layout-mobile--double_media_focus .collection-header__media-wrapper {
    position: relative;
    width: 100%;
    min-height: var(--ch-height-mobile, 300px);
  }
    .layout-mobile--split .collection-header__content-wrapper,
    .layout-mobile--split_tilted .collection-header__content-wrapper,
    .layout-mobile--content_card_overlap .collection-header__content-wrapper,
    .layout-mobile--content_inset .collection-header__content-wrapper,
    .layout-mobile--asymmetric_mosaic .collection-header__content-wrapper,
    .layout-mobile--double_media_focus .collection-header__content-wrapper {
    height: auto;
    width: 100%;
  }
  .layout-mobile--content_card_overlap .collection-header__content-box {
    background: #1e1e1e; padding: 1.5rem; border-radius: var(--ch-border-radius);
    margin: -40px 1rem 0 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
  .layout-mobile--content_inset .collection-header__content-wrapper {
    background-color: var(--ch-inset-bg);
  }
  .layout-mobile--reveal_up {
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .layout-mobile--reveal_up.is-visible {
    transform: translateY(0);
  }
  .layout-mobile--media_below .collection-header__main-content,
  .layout-mobile--media_overflow .collection-header__main-content { display: flex; flex-direction: column; }
  .layout-mobile--media_below .collection-header__content-wrapper,
  .layout-mobile--media_overflow .collection-header__content-wrapper { flex-grow: 0; height: auto; justify-content: flex-start; }
  .layout-mobile--media_below .collection-header__media-wrapper,
  .layout-mobile--media_overflow .collection-header__media-wrapper { position: relative; flex-grow: 1; min-height: 300px; border-radius: 0; }
  .layout-mobile--media_below .collection-header__overlay,
  .layout-mobile--media_overflow .collection-header__overlay { border-radius: 0; }
  .layout-mobile--media_overflow { overflow: visible; margin-bottom: 100px; }
  .layout-mobile--media_overflow .collection-header__media-wrapper { margin-bottom: -100px; }
  @media(min-width: 750px) {
    .collection-header { min-height: var(--ch-height-desktop); }
    .collection-header__content-wrapper { padding: 2rem; }
    .layout-desktop--overlay .collection-header__main-content,
    .layout-desktop--box .collection-header__main-content,
    .layout-desktop--marquee_text .collection-header__main-content,
    .layout-desktop--background_text .collection-header__main-content,
    .layout-desktop--content_card_overlap .collection-header__main-content,
    .layout-desktop--spotlight_centered .collection-header__main-content,
    .layout-desktop--floating_content_box .collection-header__main-content,
    .layout-desktop--reveal_up .collection-header__main-content { display: block; }
    .layout-desktop--overlay .collection-header__media-wrapper,
    .layout-desktop--box .collection-header__media-wrapper,
    .layout-desktop--marquee_text .collection-header__media-wrapper,
    .layout-desktop--background_text .collection-header__media-wrapper,
    .layout-desktop--content_card_overlap .collection-header__media-wrapper,
    .layout-desktop--content_inset .collection-header__media-wrapper,
    .layout-desktop--spotlight_centered .collection-header__media-wrapper,
    .layout-desktop--floating_content_box .collection-header__media-wrapper,
    .layout-desktop--reveal_up .collection-header__media-wrapper { position: absolute; }
    .layout-desktop--overlay .collection-header__content-wrapper,
    .layout-desktop--box .collection-header__content-wrapper,
    .layout-desktop--marquee_text .collection-header__content-wrapper,
    .layout-desktop--background_text .collection-header__content-wrapper,
    .layout-desktop--spotlight_centered .collection-header__content-wrapper,
    .layout-desktop--floating_content_box .collection-header__content-wrapper,
    .layout-desktop--reveal_up .collection-header__content-wrapper { height: 100%; width: 100%; align-items: var(--ch-content-halign); }
    .layout-desktop--box .collection-header__content-box,
    .layout-desktop--floating_content_box .collection-header__content-box { padding: 2.5rem; }
    .layout-desktop--split .collection-header__main-content,
    .layout-desktop--split_tilted .collection-header__main-content { flex-direction: row; }
    .split--reversed-desktop.layout-desktop--split .collection-header__main-content,
    .split--reversed-desktop.layout-desktop--split_tilted .collection-header__main-content { flex-direction: row-reverse; }
    .layout-desktop--split .collection-header__media-wrapper,
    .layout-desktop--split_tilted .collection-header__media-wrapper { position: relative; width: var(--ch-split-media-width, 50%); min-height: initial; flex-shrink: 0; }
    .layout-desktop--split .collection-header__content-wrapper,
    .layout-desktop--split_tilted .collection-header__content-wrapper { width: auto; flex-grow: 1; align-items: var(--ch-content-halign); }
    .layout-desktop--split_tilted .collection-header__media-wrapper { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.4s ease; }
    .layout-desktop--split_tilted:not(.split--reversed-desktop) .collection-header__media-wrapper { clip-path: polygon(0 0, 100% 0, calc(100% - (0.01745 * var(--ch-tilt-angle, -5deg) * 100%)) 100%, 0 100%); }
    .split--reversed-desktop.layout-desktop--split_tilted .collection-header__media-wrapper { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + (0.01745 * var(--ch-tilt-angle, -5deg) * 100%)) 100%); }
    .layout-desktop--media_below .collection-header__main-content,
    .layout-desktop--media_overflow .collection-header__main-content { display: flex; flex-direction: column; }
    .layout-desktop--media_below .collection-header__content-wrapper,
    .layout-desktop--media_overflow .collection-header__content-wrapper { flex-grow: 0; height: auto; padding: 4rem 2rem; align-items: var(--ch-content-halign); }
    .layout-desktop--media_below .collection-header__media-wrapper,
    .layout-desktop--media_overflow .collection-header__media-wrapper { position: relative; flex-grow: 1; border-radius: var(--ch-border-radius); }
    .layout-desktop--media_overflow { overflow: visible; padding-bottom: 150px; margin-bottom: 0; }
    .layout-desktop--media_overflow .collection-header__main-content { overflow: visible; }
    .layout-desktop--media_overflow .collection-header__media-wrapper { margin-bottom: -150px; }
      .layout-desktop--content_card_overlap .collection-header__content-wrapper {
        justify-content: var(--ch-content-valign);
        align-items: var(--ch-content-halign);
        padding-left: 5%; padding-right: 5%;
      }
    .layout-desktop--content_card_overlap .collection-header__content-box {
        background: rgba(var(--ch-color-button-bg-rgb, 255,255,255), 0.1);
        backdrop-filter: blur(15px); border: 1px solid rgba(var(--ch-color-button-bg-rgb, 255,255,255), 0.2);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2); padding: 2.5rem; border-radius: var(--ch-border-radius); max-width: 500px;
      }
    .layout-desktop--content_inset .collection-header__main-content { flex-direction: row; }
    .split--reversed-desktop.layout-desktop--content_inset .collection-header__main-content { flex-direction: row-reverse; }
    .layout-desktop--content_inset .collection-header__content-wrapper {
      position: relative;
      background: var(--ch-inset-bg);
      width: var(--ch-inset-width, 40%);
      height: 100%;
      flex-shrink: 0;
    }
    .layout-desktop--content_inset .collection-header__media-wrapper {
        position: relative;
        width: auto;
        flex-grow: 1;
      }
    .layout-desktop--spotlight_centered .collection-header__content-wrapper { justify-content: center; }
    .layout-desktop--spotlight_centered .collection-header__content-box { max-width: var(--ch-spotlight-width, 50%); }
    .layout-desktop--floating_content_box .collection-header__content-wrapper {
      justify-content: center;
      align-items: flex-start;
      padding-left: 8%;
    }
    .layout-desktop--floating_content_box .collection-header__content-box {
      max-width: 450px;
      position: relative;
      transform: translateY(-20px);
    }
    .layout-desktop--asymmetric_mosaic .collection-header__main-content {
      flex-direction: row;
      align-items: center;
    }
    .layout-desktop--asymmetric_mosaic .collection-header__media-wrapper,
    .layout-desktop--asymmetric_mosaic .collection-header__content-wrapper {
      position: relative;
      width: 50%;
      height: 80%;
    }
    .layout-desktop--asymmetric_mosaic .collection-header__content-wrapper {
      background-color: var(--ch-mosaic-bg, #000);
      transform: translateX(-10%);
      z-index: 4;
      border-radius: var(--ch-border-radius);
    }
    .split--reversed-desktop.layout-desktop--asymmetric_mosaic .collection-header__main-content {
      flex-direction: row-reverse;
    }
    .split--reversed-desktop.layout-desktop--asymmetric_mosaic .collection-header__content-wrapper {
      transform: translateX(10%);
    }
    .layout-desktop--double_media_focus .collection-header__main-content {
      flex-direction: column;
    }
    .layout-desktop--double_media_focus .collection-header__content-wrapper {
      flex-grow: 0;
      align-items: center;
    }
    .layout-desktop--double_media_focus .collection-header__media-wrapper {
      position: relative;
      display: flex;
      gap: 1rem;
      flex-grow: 1;
    }
    .layout-desktop--double_media_focus .collection-header__media-item,
    .layout-desktop--double_media_focus .collection-header__media-wrapper--secondary {
      position: relative;
      flex: 1 1 50%;
      height: 100%;
    }
    .layout-desktop--double_media_focus .collection-header__media-wrapper--secondary img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--ch-border-radius);
    }
  }
  .marquee-text-container { position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; padding-block: 1rem; overflow: hidden; pointer-events: none; }
  .marquee-text-content { display: flex; flex-shrink: 0; width: fit-content; animation: marquee var(--ch-marquee-speed, 20s) linear infinite; }
  .marquee-text-content span { font-size: clamp(3rem, 10vw, 8rem); font-weight: 800; text-transform: uppercase; line-height: 1; opacity: 0.15; padding-inline: 2rem; -webkit-text-stroke: 1px var(--ch-color-heading); color: transparent; }
  @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
  .background-text-element { position: absolute; z-index: 2; bottom: 0; right: 0; font-size: clamp(8rem, 25vw, 25rem); font-weight: 900; line-height: 0.8; color: var(--ch-color-heading); opacity: var(--ch-background-text-opacity, 0.05); transform: translateX(15%); pointer-events: none; text-transform: uppercase; }
  .collection-header__media-item { width: 100%; height: 100%; overflow: hidden; }
  .media-transform-wrapper {
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    --tilt-rotate-x: 0deg;
    --tilt-rotate-y: 0deg;
    --parallax-translate-y: 0px;
    transform: translateY(var(--parallax-translate-y)) perspective(1200px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y));
    filter: blur(var(--ch-media-blur));
  }
  [data-parallax-enabled="true"] .media-transform-wrapper,
  [data-tilt-enabled="true"] .media-transform-wrapper {
    transform: translateY(var(--parallax-translate-y)) perspective(1200px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) scale(1.3);
  }
  .media-transform-wrapper:has(.collection-header__video-wrapper) {
    transform: translateY(var(--parallax-translate-y)) perspective(1200px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) scale(1.05);
  }

  /**************************
   * V14 HERO SLIDER STYLES *
   **************************/
  .hero-slider-wrapper { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; }
  .hero-slider-container { display: flex; height: 100%; width: 100%; }
  .hero-slider-container[data-effect="slide"] { transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
  .hero-slide { position: relative; width: 100%; height: 100%; flex-shrink: 0; overflow: hidden; }
  .hero-slider-wrapper[data-transition-effect="fade"] .hero-slide {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    inset: 0;
  }
  .hero-slider-wrapper[data-transition-effect="fade"] .hero-slide.is-active { opacity: 1; z-index: 2; }
  .hero-slider__background-media { z-index: 0; }
  .hero-slide .collection-header__main-content { position: relative; z-index: 2; height: 100%; }
  .hero-slide .slide-specific-media { z-index: 1; }
  .hero-slide .collection-header__overlay { z-index: 2; }
  .hero-slide .collection-header__content-wrapper { z-index: 3; }
  .hero-slider-nav { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
  .hero-slider-nav--arrows { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; }
  .hero-slider-arrow { pointer-events: all; cursor: pointer; background: rgba(26,26,26,0.3); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: background-color .3s, transform .3s; }
  .hero-slider-arrow:hover { background-color: rgba(26,26,26,0.6); transform: scale(1.1); }
  .hero-slider-arrow svg { fill: #fff; width: 24px; height: 24px; }
  .hero-slider-nav--dots { display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding-bottom: 1.5rem; }
  .hero-slider-dot { pointer-events: all; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255,255,255,0.5); border: 1px solid transparent; transition: background-color .3s, transform .3s; padding: 0; }
  .hero-slider-dot.is-active { background-color: #fff; transform: scale(1.2); }
  .hero-slider-nav.visibility--desktop_only { display: none; }
  .hero-slider-nav.visibility--never { display: none; }
  @media(min-width: 750px) {
    .hero-slider-nav.visibility--desktop_only { display: flex; }
    .hero-slider-nav.visibility--mobile_only { display: none; }
  }


  .collection-header__slider { position: relative; width: 100%; height: 100%; }
  .slider-item { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; height: 100%; z-index: 1; }
  .slider-item.is-active { opacity: 1; z-index: 2; }
  .slider-item:first-child { position: relative; }
  .collection-header__mobile-fallback-image { display: none; height: 100%; width: 100%; }
  .slider-mobile--collection .collection-header__mobile-fallback-image { display: block; }
  .slider-mobile--collection .collection-header__slider { display: none; }
  @media (min-width: 750px) {
    .slider-mobile--collection .collection-header__mobile-fallback-image { display: none; }
    .slider-mobile--collection .collection-header__slider { display: block; }
  }
  @media (max-width: 749px) {
    .slider-mobile--first .slider-item { opacity: 0 !important; }
    .slider-mobile--first .slider-item:first-child { opacity: 1 !important; }
    .collection-header__slider.is-disabled-on-mobile { opacity: 1; }
  }
  .collection-header__image { object-position: center; object-fit: var(--ch-image-fit-mobile); width:100%; height:100%; aspect-ratio: attr(width) / attr(height); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease; }
  @media(min-width: 750px) { .collection-header__image { object-fit: var(--ch-image-fit-desktop); } }
  .effect-hover--zoom-in .collection-header__media-wrapper:hover .collection-header__image { transform: scale(1.05); }
  .effect-hover--blur-on-load .collection-header__image { filter: blur(5px) grayscale(var(--grayscale, 0)); }
  .effect-hover--blur-on-load .collection-header__media-wrapper:hover .collection-header__image { filter: blur(0) grayscale(var(--grayscale, 0)); }
  .effect-hover--grayscale .collection-header__image { --grayscale: 100%; filter: grayscale(var(--grayscale)); }
  .effect-hover--grayscale .collection-header__media-wrapper:hover .collection-header__image { --grayscale: 0%; }
  .effect--ken-burns .is-active .media-transform-wrapper, .effect--ken-burns .collection-header__media-item:not(.slider-item) .media-transform-wrapper { animation: kenburns 20s ease-in-out infinite alternate; }
  @keyframes kenburns { 0% { transform: scale(1) rotate(0.001deg); } 100% { transform: scale(1.15) rotate(0.001deg); } }
  .collection-header__media--desktop { display: block; height: 100%; }
  .collection-header__media--mobile { display: none; height: 100%;}
  .collection-header__media--desktop.show-on-mobile { display: block; }
  @media (max-width: 749px) {
    .collection-header__media--mobile { display: block; }
    .collection-header__media--desktop:not(.show-on-mobile) { display: none; }
  }
  .collection-header__video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
  .collection-header__video--native, .video-iframe-player { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: contain; }
  .video--fit-cover .collection-header__video--native, .video--fit-cover .video-iframe-player { object-fit: cover; }
  .video--fit-cover .video-iframe-player {
    position: absolute; top: 50%; left: 50%;
    width: 177.77vh; min-width: 100%;
    height: 56.25vw; min-height: 100%;
    transform: translate(-50%, -50%);
  }
  .video-player-container { position: absolute; inset: 0; }
  .video-poster { position: relative; width: 100%; height: 100%; cursor: pointer; transition: opacity 0.4s ease; z-index: 2; }
  .video-poster.is-hidden { opacity: 0; pointer-events: none; }
  .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(0,0,0,0.5); border: none; border-radius: 50%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; }
  .video-play-button:hover { background: rgba(0,0,0,0.8); transform: translate(-50%, -50%) scale(1.1); }
  .video-play-button svg { fill: #fff; width: 30px; height: 30px; margin-left: 5px; }
  .video-controls-custom { position: absolute; bottom: 20px; right: 20px; left: 20px; z-index: 10; display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
  .video-controls-custom.is-active { opacity: 1; pointer-events: auto; visibility:visible; }
  .controls-left { display: flex; gap: 10px; }
  .video-control-button { background: rgba(26,26,26,0.5); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; flex-shrink: 0; }
  .video-control-button:hover { background: rgba(26,26,0.8); }
  .video-control-button svg { width: 20px; height: 20px; fill: white; }
  .video-control-button .icon-play, .video-control-button .icon-mute, .video-control-button.is-paused .icon-pause, .video-control-button:not(.is-paused) .icon-play, .video-control-button.is-muted .icon-unmute, .video-control-button:not(.is-muted) .icon-mute { display: none; }
  .video-control-button.is-paused .icon-play, .video-control-button:not(.is-paused) .icon-pause, .video-control-button.is-muted .icon-mute, .video-control-button:not(.is-muted) .icon-unmute { display: block; }
  .video-progress-bar { flex-grow: 1; background-color: rgba(255, 255, 255, 0.2); height: 4px; border-radius: 2px; margin: 0 10px; min-width: 100px; }
  .video-progress-bar > div { background-color: #fff; width: 0; height: 100%; border-radius: 2px; }
  .video-transcript-link { color: #fff; text-decoration: underline; font-size: 14px; white-space: nowrap; }
  .collection-header__overlay { position: absolute; inset: 0; z-index: 2; background: var(--ch-overlay-bg); opacity: var(--ch-overlay-opacity); pointer-events: none; border-radius: var(--ch-border-radius); }
  .collection-header__content-box { max-width: 650px; width: 100%; }
  .collection-header__content-grid { display: grid; gap: 1.5rem; }
  [data-content-animation="fade-up"] [data-animate-text] { opacity: 0; transform: translateY(25px); }
  [data-content-animation="fade"] [data-animate-text] { opacity: 0; }
  [data-content-animation="slide-in-left"] [data-animate-text] { opacity: 0; transform: translateX(-40px); }
  [data-animate-text] { transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
  [data-animate-text].is-visible { opacity: 1; transform: translate(0, 0); }
  [data-animate-text]:nth-child(2) { transition-delay: calc(var(--animation-stagger-delay) * 1.5); }
  [data-animate-text]:nth-child(3) { transition-delay: calc(var(--animation-stagger-delay) * 3); }
  .collection-header__title { font-size: clamp(2.5rem, 6vw, 5rem); color: var(--ch-color-heading); margin: 0; line-height: 1.1; font-weight: 700; }
  .text--gradient { background: linear-gradient(90deg, var(--gradient-start, #ff8a00), var(--gradient-end, #e52e71)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
  .collection-header__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; max-width: 55ch; color: var(--ch-color-text); opacity: 0.9; }
  .layout-desktop--overlay .collection-header__subtitle,
  .layout-desktop--box .collection-header__subtitle { margin-inline: auto; }
  .layout-desktop--split .collection-header__subtitle,
  .layout-desktop--media_below .collection-header__subtitle,
  .layout-desktop--split_tilted .collection-header__subtitle { margin-inline: 0; }
  .button { background-color: var(--ch-color-button-bg); color: var(--ch-color-button-text); padding: 0.8em 1.8em; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: inline-block; font-weight: 500; }
  .button:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.15); transform: translateY(-3px); }
  .magnetic-button { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /**************************
   * V16 BLOCK STYLES       *
   **************************/
  /* --- Subtitle Block --- */
  .collection-header__dynamic-subtitle.rte { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.5; }
  .collection-header__dynamic-subtitle p { margin: 0; }
  
  /* --- Buttons Block --- */
  .buttons-block-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; }
  .buttons-block-wrapper.align--left { justify-content: flex-start; }
  .buttons-block-wrapper.align--center { justify-content: center; }
  .buttons-block-wrapper.align--right { justify-content: flex-end; }
  .buttons-block-wrapper.layout-desktop--stack { flex-direction: column; }
  .ch-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
  .ch-button--small { padding: 0.5em 1.2em; font-size: 0.9rem; border-radius: 25px; }
  .ch-button--medium { padding: 0.8em 1.8em; font-size: 1rem; border-radius: 30px; }
  .ch-button--large { padding: 1em 2.2em; font-size: 1.1rem; border-radius: 35px; }
  .ch-button--primary { background-color: var(--ch-color-accent); color: var(--ch-color-button-text); }
  .ch-button--primary:hover { background-color: var(--ch-color-heading); color: var(--ch-color-button-bg); }
  .ch-button--secondary { border-color: var(--ch-color-accent); color: var(--ch-color-accent); background-color: transparent; }
  .ch-button--secondary:hover { background-color: var(--ch-color-accent); color: var(--ch-color-button-text); }
  .ch-button--tertiary { background-color: transparent; color: var(--ch-color-text); text-decoration: underline; padding: 0.5em; }
  .ch-button--tertiary:hover { color: var(--ch-color-accent); }
  .ch-button__icon svg { width: 1.2em; height: 1.2em; fill: currentColor; }

  /* --- Featured Product Block --- */
  .ch-featured-product { display: flex; flex-direction: column; gap: 1rem; border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; border-radius: var(--ch-border-radius); background: rgba(var(--ch-color-button-bg-rgb), 0.05); text-align: left; }
  .ch-featured-product__image-wrapper { text-align: center; margin-bottom: 1rem; }
  .ch-featured-product__image { max-width: var(--fp-image-size, 100px); height: auto; border-radius: 8px; }
  .ch-featured-product__details { flex-grow: 1; }
  .ch-featured-product__vendor { font-size: 0.8rem; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.25rem; }
  .ch-featured-product__title a { text-decoration: none; color: var(--ch-color-heading); }
  .ch-featured-product__title a:hover { color: var(--ch-color-accent); }
  .ch-featured-product__price { margin: 0.5rem 0 1rem; }
  .price { display: flex; align-items: center; gap: 10px; }
  .price__sale { color: var(--ch-color-accent); }
  .price__regular { opacity: 0.8; }
  .ch-featured-product__badge { background-color: var(--ch-color-accent); color: var(--ch-color-button-text); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; margin-right: 0.5rem; }
  .ch-featured-product__form { display: flex; gap: 0.5rem; align-items: center; }
  .ch-featured-product__quantity { max-width: 60px; padding: 0.5em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--ch-color-text); }
  @media(min-width: 750px) { .ch-featured-product { flex-direction: row; } }

  /* --- Featured Collections Block --- */
  .ch-featured-collections { width: 100%; }
  .ch-featured-collections__heading { margin-top: 0; margin-bottom: 1.5rem; }
  .ch-featured-collections__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--cols-mobile, 1), 1fr); }
  .ch-collection-card { position: relative; display: block; overflow: hidden; border-radius: var(--ch-border-radius); text-decoration: none; }
  .ch-collection-card__image-wrapper { position: relative; padding-top: 125%; background-color: #333; }
  .ch-collection-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .ch-collection-card:hover .ch-collection-card__image { transform: scale(1.05); }
  .ch-collection-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%); }
  .ch-collection-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; color: #fff; z-index: 2; }
  .ch-collection-card.style--below .ch-collection-card__info { position: static; padding: 1rem 0; color: var(--ch-color-text); }
  .ch-collection-card.style--below .ch-collection-card__overlay { display: none; }
  .ch-collection-card.style--below .ch-collection-card__image-wrapper { padding-top: 100%; }
  .ch-collection-card__title { margin: 0 0 0.25rem; font-size: 1.1rem; }
  .ch-collection-card__count { font-size: 0.9rem; opacity: 0.8; }
  @media(min-width: 750px) { .ch-featured-collections__grid { grid-template-columns: repeat(var(--cols-desktop, 3), 1fr); } }

  /* --- Responsive Button Layouts --- */
  @media (max-width: 749px) {
    .buttons-block-wrapper.layout-mobile--stack { flex-direction: column; }
    .buttons-block-wrapper.mobile-full-width .ch-button { width: 100%; }
  }


  .collection-header__shape-divider { position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 4; transform: rotate(180deg); }
  .collection-header__shape-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: var(--ch-shape-height); }
  .collection-header__shape-divider .shape-fill { fill: var(--ch-shape-color); }
  [data-animated-shape="true"] .shape-fill { animation: wave-animation 15s linear infinite alternate; }
  @keyframes wave-animation { 0% { transform: translateX(-50px); } 100% { transform: translateX(50px); } }
  .after-hero-wrapper {
    position: relative;
    z-index: 5;
  }
  .after-hero-wrapper--overlap {
    margin-top: calc(-1 * var(--ah-overlap, 80px));
  }
  .after-hero-wrapper .collection-description-area {
    position: relative;
    z-index: 1;
    background: transparent;
    color: var(--ah-text-color, #FFFFFF);
    padding: var(--ah-padding-v, 50px) var(--ah-padding-h, 50px);
    border-radius: var(--ah-border-radius, 24px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, box-shadow;
    margin: 4rem 2rem;
  }
  .after-hero-wrapper .collection-description-area::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--ah-bg-gradient, var(--ah-bg-color, #1a1a1a));
    opacity: var(--ah-bg-opacity, 1);
    transition: opacity 0.3s ease;
  }
  .after-hero-wrapper--overlap .collection-description-area {
    margin-top: 0;
  }
  .after-hero-wrapper[data-hover-effect="true"]:hover .collection-description-area {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.08);
  }
  .after-hero-wrapper .bd_read_more_button {
    color: var(--ah-text-color, #FFFFFF);
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  .after-hero-wrapper .bd_read_more_button:hover {
    opacity: 1;
  }
  .after-hero__shape-divider { position: absolute; top: auto;bottom:0;transform: rotate(180deg); left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: -1;}
  .after-hero__shape-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: var(--ch-shape-height); }
  .after-hero__shape-divider .shape-fill { fill: var(--ch-shape-color); }
  .collection-description-area-wrapper { flex-shrink: 0; width: 100%; position: relative; z-index: 0; }
  .description-layout--side .collection-description-area-wrapper { width: var(--ch-description-width); }
  .description-layout--side .collection-description-area { background: #f2f2f2; color: #1a1a1a; padding: 40px 20px; }
  .description-layout--side .bd_read_more_button { color: #1a1a1a; }
  .collection-description-wrapper { max-width: 800px; margin: auto; position: relative;}
  .collection-description-contain { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: var(--bd-max-lines, 5); }
  .collection-description-contain.is-expanded { -webkit-line-clamp: unset; }
  .bd_read_more_button { margin-top: 1rem; cursor: pointer; background: none; border: none; text-decoration: underline; padding: 5px; }
  .scroll-down-arrow { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; width: 44px; height: 44px; background: rgba(26,26,26,0.3); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .scroll-down-arrow svg { fill: #fff; animation: bounce 2s infinite; }
  @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }
  .scroll-down-arrow.visibility--desktop_only { display: none; }
  .scroll-down-arrow.visibility--none { display: none; }
  @media(min-width: 750px) {
    .scroll-down-arrow.visibility--desktop_only { display: flex; }
    .scroll-down-arrow.visibility--mobile_only { display: none; }
  }
  @media (max-width: 989px) {
    .collection-header.description-layout--side { flex-direction: column; }
    .description-layout--side .collection-description-area-wrapper { width: 100%; }
  }
  @media (max-width: 749px) {
    .after-hero-wrapper .collection-description-area { margin: 2rem 1rem; }
    .collection-description-contain { -webkit-line-clamp: var(--bd-max-lines-mobile, 4); }
  }
  @media screen and (max-width:1023px) {
    .collection-header--overlap {
      padding-top: calc(var(--topheader-height) * 1.5) !important;
      margin-top: calc(-1 * var(--topheader-height)) !important;
    }
  }

/* *************************************** FIN COLLECTION HEADER V16 ************************************************************/


/******************************************************
                 effets iamges
                 
********************************************************/
/* === 1. Ken Burns (zoom + panning) === */
    .effect-kenburns {
      transform: scale(1.1) translate(-5%, -5%);
      animation: kenburns 10s ease-in-out infinite alternate;
    }
    @keyframes kenburns {
      to { transform: scale(1.2) translate(0, 0); }
    }

    /* === 2. Flottement léger (float) === */
    .effect-float {
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* === 3. Inclinaison constante (tilt) === */
    .effect-tilt {
      perspective: 1000px;
      animation: tilt 8s ease-in-out infinite alternate;
    }
    @keyframes tilt {
      0% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
      25% { transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.02); }
      50% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
      75% { transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) scale(1.02); }
      100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
    }

    /* === 4. Pulse constant === */
    .effect-pulse {
      animation: pulse 3s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    /* === 5. Parallaxe légère sur scroll === */
    .effect-parallax img {
      transform: translateY(0) scale(1.1);
      animation: parallax 12s ease-in-out infinite alternate;
    }
    @keyframes parallax {
      0% { transform: translateY(0) scale(1.1); }
      100% { transform: translateY(-20px) scale(1.1); }
    }

   /* === 6. Vibrance (hue-rotate) === */
    .effect-hue {
      filter: hue-rotate(0deg);
      animation: hueShift 15s linear infinite;
    }
    @keyframes hueShift {
      0% { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }

    /* === 7. Oscillation de rotation (rotate) === */
    .effect-rotate {
      animation: rotateImg 20s linear infinite;
    }
    @keyframes rotateImg {
      from { transform: rotate(0deg) scale(1); }
      to { transform: rotate(360deg) scale(1.05); }
    }

    /* === 8. Tremblement léger (shake) === */
    .effect-shake {
      animation: shake 2s ease-in-out infinite;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70% { transform: translateX(-3px); }
      20%, 40%, 60%, 80% { transform: translateX(3px); }
    }