/** Shopify CDN: Minification failed

Line 188:12 Expected identifier but found whitespace
Line 188:14 Unexpected "{"
Line 188:23 Expected ":"
Line 188:47 Expected ":"
Line 259:2 Unexpected "{"
Line 259:3 Expected identifier but found "%"
Line 260:21 Unexpected "{"
Line 260:24 Expected ":"
Line 260:28 Unexpected "{"
Line 261:14 Expected identifier but found whitespace
... and 39 more hidden warnings

**/
/*────────────────────────────────────────
  1) Layout principal
─────────────────────────────────────────*/
.media-product-inline {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  padding: 0; 
}

.media-product-inline.media-reverse {
  flex-direction: row-reverse;
}

/* conserve l’empilement mobile */
@media screen and (max-width: 767px) {
  .media-product-inline.media-reverse {
    flex-direction: column;
  }
}

.media-side {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.media-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

/* 2) Fais en sorte que le bloc texte prenne 100% de la colonne */
.mini-product-text-content {
  width: 100%;
  text-align: center;
  padding-bottom: 15px;
}

/* Fond blanc + padding vertical gérés par la section */
.section.multicol-product-media {
  background: #fff !important;
  padding-top: 0px;     
  padding-bottom: 25px;     
}

/* Si le thème applique des wrappers internes, on force aussi le fond blanc */
.section.multicol-product-media .section-stack,
.section.multicol-product-media .container,
.multicol-product-media .media-product-inline {
  background: #fff !important;
}

  /*────────────────────────────────────────
    2) Média (img / video / iframe)
       – même comportement que vos miniatures
  ────────────────────────────────────────*/
  .media-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* images, vidéos natives et embeds */
  .media-container > img,
  .media-container > .video-wrapper {
    flex:           1 1 auto;
    width:          100%;
    height:         100%;      
    object-fit:     cover;     
    display:        block;
  }
  
  .media-container > iframe {
    flex:           1 1 auto;
    width:          100%;
    height:         100%;      
    object-fit:     cover;
  }
  
  /* Neutralisation du 16:9 par défaut de Shopify */
  .video-wrapper {
    position:      relative;
    width:         100%;
    height:        100%;      
    overflow:      hidden;
  }
  
  /* On conserve juste le positionnement absolu interne */
  .video-wrapper video,
  .video-wrapper iframe {
    position: absolute !important;
    top:      0;
    left:     0;
    width:    100% !important;
    height:   100% !important;
    object-fit: cover !important;
  }

  .media-clickable{
  display:block;   
}
.media-clickable:hover{cursor:pointer;}

/*────────────────────────────────────────
  3) Grid produits
─────────────────────────────────────────*/
.product-row-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
  align-items: flex-start;
  gap: 5px;
  width: 100%;
}

.mini-product-card {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important; 
  text-align: left !important;        
}

.mini-thumb img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: contain;
  border: 1px solid #fff;
  display: block;
}

.mini-info {
  margin-top: 6px;
  width: 100%;
  text-align: left;
}

/* titre produit (hérite de custom-text-size-XX posé sur .mini-product-card) */
.mini-title {
  font-size: inherit;
  line-height: 1.3;
  display: -webkit-box;        
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;       
  overflow: hidden;          
  text-overflow: ellipsis;    
  white-space: normal;       
}


/* réduit ou annule l’écart vertical */
.mini-product-heading{
  margin-top: 0;
  margin-bottom: 4px;  
}
.mini-product-subheading{
  margin-top: 0;       
}

/* prix : même taille que le slider "Taille du texte (px)" + aligné à gauche */
.mini-price{
  font-size: {{ section.settings.text_size }}px;
  line-height: 1.3;
  text-align: left !important;
}
.mini-price *{
  font-size: inherit !important;            
}
.mini-price .price-list{
  justify-content: flex-start !important;   
  text-align: left !important;
}

a {
  text-decoration: none;
  color: inherit;
}
.mini-thumb { position: relative; }

.mini-badges-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  
}

.mini-thumb img {
  position: relative;   
  z-index: 1;
}


  /*────────────────────────────────────────
    4) Bouton CTA
  ────────────────────────────────────────*/
  .mini-product-cta {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity .2s ease;
    margin-top: 12px;
  }
  .mini-product-cta:hover {
    opacity: .8;
  }

  /* styles selon type */
  .cta-style-filled {
    background-color: var(--cta-bg-color, #000);
    color: var(--cta-text-color, #fff);
  }
  .cta-style-outlined {
    background-color: transparent;
    border-color: var(--cta-bg-color, #000);
    color: var(--cta-text-color, #000);
  }
  .cta-style-text {
    background-color: transparent;
    border: none;
    padding: 0;
    text-decoration: underline;
  }

  /*────────────────────────────────────────
    5) Typographie dynamique
  ────────────────────────────────────────*/
  /* mini-texte (prix/titre produit) */
  {% for i in (6..24) %}
  .custom-text-size-{{ i }} {
    font-size: {{ i }}px;
  }
  {% endfor %}

  /* H1 / H2 du bloc */
  {% for i in (12..48) %}
  .heading-size-{{ i }} { font-size: {{ i }}px; }
  {% endfor %}
  {% for i in (10..36) %}
  .subheading-size-{{ i }} { font-size: {{ i }}px; }
  {% endfor %}

  /* prix produit (force taille) */
  .mini-price .price-item,
  .mini-price .price-item--regular,
  .mini-price .price-item--sale,
  .mini-price .price-item--compare {
    font-size: {{ section.settings.text_size }}px !important;
    font-weight: 500;
  }

/*────────────────────────────────────────
    6) Responsive breakpoints
─────────────────────────────────────────*/

/* ===== 1. Mobile portrait (≤ 767 px) ===== */
@media screen and (max-width:767px){

  .media-product-inline{
    gap:0;
    flex-direction:column;
  }
  .media-content{ padding:0 10px; }

  .media-side{ max-width:100%; margin-bottom:0; }
  .mini-product-heading{
    padding-top:10px;  
  }

  .mini-title {
    font-size: {{ section.settings.text_size_mobile }}px !important;
  }

  .media-container,
  .video-wrapper{ width:100%; max-width:100%; }

  .video-wrapper{
    padding-bottom:0!important;
    height:auto!important;
    overflow:visible;
    position:relative!important;
  }
  .video-wrapper video,
  .video-wrapper iframe{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    object-fit:cover!important;
  }

    /* rangée produits */
  .product-row-mini{
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:auto;
    margin-bottom:auto;
  }

  /* 2 produits */
  .product-row-mini.products-2{ gap:20px; justify-content:center; }
  .products-2 .mini-product-card{
    flex:0 0 calc((100% - 1*20px)/2);
  }

  /* 3 produits */
  .product-row-mini.products-3{ gap:12px; }
  .products-3 .mini-product-card{
    flex:0 0 calc((100% - 2*12px)/3);
  }

  /* 4 produits */
  .product-row-mini.products-4{ gap:8px; }
  .products-4 .mini-product-card{
    flex:0 0 calc((100% - 3*8px)/4);
  }
}

/* ===== 2. Tablette (768 – 1024 px) ===== */
@media screen and (min-width:768px) and (max-width:1024px){

  /* — paddings */
  .media-product-inline{ padding:0 10px; }
  .media-side{
    margin-left:-10px;  
    margin-right:-10px; 
  }

  /* — aligne le bloc texte à gauche */
  .media-content{ align-items:flex-start; justify-content:flex-start; }
  .mini-product-text-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  /* — rangée produits : colle au bord gauche */
  .product-row-mini{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .product-row-mini{
    margin-top:auto;     
    margin-bottom:auto;  
  }

  /* 2 produits */
  .product-row-mini.products-2{ gap:25px; }
  .products-2 .mini-product-card{
    flex:0 0 calc((100% - 1*25px)/2);
  }

  /* 3 produits */
  .product-row-mini.products-3{ gap:16px; }
  .products-3 .mini-product-card{
    flex:0 0 calc((100% - 2*16px)/3);
  }

  /* 4 produits */
  .product-row-mini.products-4{ gap:12px; }
  .products-4 .mini-product-card{
    flex:0 0 calc((100% - 3*12px)/4);
  }
}

/* ===== 3. Desktop (≥ 990 px) ===== */
@media screen and (min-width:990px){

  .media-product-inline{ padding:0 10px; }
  .media-side{
    margin-left:-10px;  
    margin-right:-10px; 
  }

  /* — aligne le bloc texte à gauche */
  .media-content{ align-items:flex-start; justify-content:flex-start; }
  .mini-product-text-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .mini-title {
    font-size: {{ section.settings.text_size_desktop }}px !important;
  }

  /* — rangée produits étirée */
  .product-row-mini{
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:auto;
    margin-bottom:auto;
  }

  /* 2 produits */
  .product-row-mini.products-2{ gap:30px; justify-content:center; }
  .products-2 .mini-product-card{
    flex:0 0 calc((100% - 1*30px)/2);
    max-width: 360px;   
  }

  /* 3 produits */
  .product-row-mini.products-3{ gap:20px; }
  .products-3 .mini-product-card{
    flex:0 0 calc((100% - 2*20px)/3);
  }

  /* 4 produits */
  .product-row-mini.products-4{ gap:16px; }
  .products-4 .mini-product-card{
    flex:0 0 calc((100% - 3*16px)/4);
  }
}