/*
 * My Candy Shop B2B — product_list.css responsive, v2.2
 * A utiliser en remplacement de themes/my-americanbox/css/product_list.css.
 * Conserve les classes et les comportements du product-list.tpl d'origine.
 * Specificite renforcee pour rester prioritaire sur mcs-refonte.css et
 * mcs-site-responsive.css, meme si ces feuilles sont chargees apres.
 */
:root {
  --mcs-pink: #E2007A;
  --mcs-blue: #29ABE2;
  --mcs-text: #4b5563;
  --mcs-dark: #1f2937;
  --mcs-border: #eef0f4;
  --mcs-bg: #ffffff;
  --mcs-shadow: 0 8px 22px rgba(31,41,55,.08);
  --mcs-radius: 14px;
}

/* Grille : 3 colonnes sur grand ecran, sans largeur fixe de 1001px. */
ul#product_list {
  list-style: none;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 24px;
  padding: 0;
}
body #page ul#product_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 24px;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/* Cartes : restitution du look d'origine (blanc, arrondi, survol rose/bleu). */
body #page ul#product_list > li {
  display: flex;
  flex-direction: column;
  float: none;
  flex: none;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 410px;
  height: auto;
  margin: 0;
  padding: 12px 12px 14px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--mcs-bg);
  border: 1px solid var(--mcs-border);
  border-radius: var(--mcs-radius);
  box-shadow: 0 2px 10px rgba(31,41,55,.035);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body #page ul#product_list > li:hover {
  transform: translateY(-6px);
  border-color: rgba(226,0,122,.35);
  box-shadow: 0 14px 34px rgba(31,41,55,.12), 0 5px 14px rgba(226,0,122,.18);
}
body #page ul#product_list > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mcs-pink), var(--mcs-blue));
  transform: translateX(-50%);
  transition: width .32s ease;
  pointer-events: none;
}
body #page ul#product_list > li:hover::after { width: 100%; }

/* Titre de fiche, liens et zone principale. */
body #page ul#product_list > li h3 {
  clear: both;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  margin: 5px 0 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
  text-align: center;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
body #page ul#product_list > li a {
  color: var(--mcs-pink);
  text-decoration: none;
}
body #page ul#product_list > li h3 a { color: var(--mcs-pink); }
body #page ul#product_list > li .center_block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  float: none;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
}
body #page ul#product_list > li .product_img_link {
  display: block;
  float: none;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}
body #page ul#product_list > li .product_img_link img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 188px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
  transition: transform .35s ease;
}
body #page ul#product_list > li:hover .product_img_link img {
  transform: scale(1.08);
}
body #page ul#product_list > li p.product_desc {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 50px;
  margin: 10px 0 6px;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  color: gray;
  box-sizing: border-box;
}
body #page ul#product_list > li p.product_desc a { color: gray; }

/* Prix / disponibilite : ne pas laisser les anciens floats et largeurs fixes
   (140px / 250px) faire sortir le contenu des cartes. */
body #page ul#product_list > li .content_price {
  display: block;
  float: none;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 60px;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1.4;
  text-align: left;
  box-sizing: border-box;
}
body #page ul#product_list > li .price {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 8px 0;
  padding: 0;
  color: var(--mcs-pink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: break-word;
}
body #page ul#product_list > li p.available,
body #page ul#product_list > li .available {
  max-width: 100%;
  color: var(--mcs-blue);
  font-size: 12px;
  line-height: 1.5;
  margin: 7px 0;
  padding-bottom: 0;
}
body #page ul#product_list > li span.availability { display: none; }

/* Quantite et bouton d'achat PrestaShop : memes classes pour garder l'AJAX. */
body #page ul#product_list > li .quantity {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 10px auto 4px;
  padding: 0;
  overflow: visible;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
}
body #page ul#product_list > li .quantity input {
  width: 48px;
  max-width: 100%;
  box-sizing: border-box;
}
body #page ul#product_list > li a.ajax_add_to_cart_button {
  display: block;
  float: none;
  flex: 0 0 auto;
  position: relative;
  left: auto;
  top: auto;
  width: 60px;
  max-width: 100%;
  height: 60px;
  min-height: 60px;
  margin: 12px auto 4px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  background: var(--mcs-pink);
  box-shadow: 0 4px 12px rgba(226,0,122,.30);
  color: #fff;
  font-size: 0;
  line-height: normal;
  text-align: center;
  text-indent: -9999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
body #page ul#product_list > li a.ajax_add_to_cart_button::before {
  content: "+";
  display: block;
  position: absolute;
  top: 3px;
  left: 50%;
  width: 100%;
  color: #fff;
  font-size: 39px;
  font-weight: 300;
  line-height: 39px;
  text-indent: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
body #page ul#product_list > li a.ajax_add_to_cart_button::after {
  content: "ACHETER";
  display: block;
  position: absolute;
  bottom: 7px;
  left: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
  text-indent: 0;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
body #page ul#product_list > li a.ajax_add_to_cart_button:hover,
body #page ul#product_list > li a.ajax_add_to_cart_button:focus-visible {
  background: var(--mcs-blue);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(41,171,226,.35);
  color: #fff;
}
/* Produits non commandables : ne pas afficher un faux bouton ACHETER. */
body #page ul#product_list > li a.ajax_add_to_cart_button:not([rel]) {
  width: auto;
  max-width: 170px;
  height: auto;
  min-height: 42px;
  padding: 12px 9px;
  font-size: 11px;
  text-indent: 0;
  white-space: normal;
}
body #page ul#product_list > li a.ajax_add_to_cart_button:not([rel])::before,
body #page ul#product_list > li a.ajax_add_to_cart_button:not([rel])::after {
  display: none;
}

/* Comparateur : la largeur 200px de l'ancien CSS etait trop large sur mobile. */
body #page ul#product_list > li .left_block {
  display: block;
  float: none;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 4px 0 0;
  padding-top: 4px;
  box-sizing: border-box;
}
body #page ul#product_list > li p.compare {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
body #page ul#product_list > li .left_block .compare label,
body #page ul#product_list > li p.compare input {
  float: none;
  position: static;
  left: auto;
  margin: 0;
}
body #page ul#product_list > li .right_block { display: none; }
body #page ul#product_list > li .discount,
body #page ul#product_list > li .on_sale,
body #page ul#product_list > li .online_only {
  display: block;
  font-weight: 700;
  color: #990000;
  text-transform: uppercase;
}
body #page ul#product_list > li .discount {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1px 5px;
  background: #9B0000;
  color: #fff;
  font-size: 10px;
}
body #page ul#product_list > li .online_only { margin: 0 0 10px; }
body #page ul#product_list > li .lnk_view {
  display: block;
  margin-top: 15px;
  padding: 0 10px;
  border: 0;
  color: #0088CC;
  font-weight: 700;
  background: url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
}
body #page ul#product_list > li .lnk_view:hover { text-decoration: underline; }

/* Macarons existants conserves : badge reduction, promo/anti-gaspi, nouveau. */
body #page ul#product_list > li span.macaron {
  display: block;
  position: absolute;
  z-index: 2;
  top: 5%;
  left: 5%;
  width: 42px;
  height: 30px;
  padding: 13px 0 0 5px;
  background: url(../img/badge-2.png) no-repeat;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}
body #page ul#product_list > li span.dluo {
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -10px;
  width: 110%;
  padding: 2px 4px;
  background-color: var(--mcs-pink);
  opacity: .5;
  color: #fff;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
body #page ul#product_list > li span.new {
  display: block;
  position: absolute;
  z-index: 2;
  top: 15px;
  left: -30px;
  width: 101px;
  padding: 1px 2px;
  background: #fff;
  color: var(--mcs-pink);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
}

/* Widgets stickers existants. */
#sticker {
  width: 100%;
  margin: 0 auto;
  padding-top: 4px;
  font-size: 20px;
  text-align: center;
  animation: type 3s steps(60, end);
}
#sticker img { padding-right: 4px; }
#sticker .exclu-small {
  float: left;
  width: 50%;
  color: var(--mcs-pink);
  animation: bounceIn 1.5s both 1s;
  animation-delay: 2s;
}
#sticker .best-small {
  float: right;
  width: 50%;
  color: var(--mcs-blue);
  animation: bounceIn 1.5s both 1s;
  animation-delay: 4s;
}
@-webkit-keyframes bounceIn {
  0% {-webkit-transform: scale(.1); opacity: 0}
  60% {-webkit-transform: scale(1.2); opacity: 1}
  100% {-webkit-transform: scale(1)}
}
@keyframes bounceIn {
  0% {transform: scale(.1); opacity: 0}
  60% {transform: scale(1.2); opacity: 1}
  100% {transform: scale(1)}
}

/* Points de rupture bases sur l'espace disponible dans le catalogue.
   Le theme masque la colonne gauche sous 900px. */
@media (max-width: 1150px) {
  body #page ul#product_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 620px) {
  body #page ul#product_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body #page ul#product_list > li {
    min-height: 0;
    padding: 13px;
  }
  body #page ul#product_list > li h3 {
    font-size: 14px;
    min-height: 0;
  }
  body #page ul#product_list > li .product_img_link img { max-height: 200px; }
  body #page ul#product_list > li p.product_desc { height: auto; max-height: 50px; }
}
@media (hover: none) {
  body #page ul#product_list > li:hover { transform: none; }
  body #page ul#product_list > li:hover .product_img_link img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body #page ul#product_list > li,
  body #page ul#product_list > li::after,
  body #page ul#product_list > li .product_img_link img,
  body #page ul#product_list > li a.ajax_add_to_cart_button,
  #sticker .exclu-small,
  #sticker .best-small { transition: none; animation: none; }
}

/* Correction ponctuelle d'un conflit existant entre mcs-refonte.css et
   mcs-site-responsive.css : entre 781 et 900px l'ancienne grille catalogue
   conservait sa sidebar en flex et reduisait #center_column a 0px. */
@media (min-width: 781px) and (max-width: 900px) {
  body#category #page #columns,
  body#search #page #columns,
  body#new-products #page #columns,
  body#prices-drop #page #columns,
  body#best-sales #page #columns {
    display: block;
  }
  body#category #page #center_column,
  body#search #page #center_column,
  body#new-products #page #center_column,
  body#prices-drop #page #center_column,
  body#best-sales #page #center_column {
    display: block;
    float: none;
    clear: both;
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  body#category #page #left_column,
  body#search #page #left_column,
  body#new-products #page #left_column,
  body#prices-drop #page #left_column,
  body#best-sales #page #left_column {
    float: none;
    clear: both;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }
}


/* ================= PRODUCT LIST MCS V2.2 =================
   La zone achat est maintenant une vraie grille HTML dans product-list.tpl.
   Ce bloc surcharge les regles historiques sans toucher au panier AJAX. */
body #page ul#product_list > li {
  min-height: 490px;
  padding: 14px 14px 16px;
}

/* Drapeau fournisseur degage du titre, sans toucher a ses images. */
body #page ul#product_list > li h3 {
  position: relative;
  min-height: 46px;
  margin: 0 0 8px;
  padding: 0 30px 0 12px;
  line-height: 1.4;
  text-align: center;
}
body #page ul#product_list > li h3 a {
  display: block;
  color: var(--mcs-pink);
  overflow-wrap: anywhere;
}
body #page ul#product_list > li h3 #flag {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  z-index: 3;
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
}
body #page ul#product_list > li h3 #flag img {
  display: block;
  max-width: 100%;
  max-height: 26px;
  object-fit: contain;
}

body #page ul#product_list > li a.product_img_link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 204px;
  height: 204px;
  padding: 4px 0;
  margin: 0;
  flex: 0 0 auto;
}
body #page ul#product_list > li a.product_img_link img {
  max-width: 95%;
  max-height: 196px;
  object-fit: contain;
}
body #page ul#product_list > li p.product_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  flex: 0 0 auto;
  min-height: 52px;
  height: 52px;
  max-height: 52px;
  margin: 8px 0 10px;
  padding: 0;
  overflow: hidden;
  line-height: 17px;
  font-size: 12px;
  text-align: left;
}
body #page ul#product_list > li p.product_desc a {
  color: #626b76;
  overflow-wrap: anywhere;
}

/* Prix + disponibilite a gauche ; quantite + bouton a droite. */
body #page ul#product_list > li .mcs-product-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: end;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid #f2f3f7;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
body #page ul#product_list > li .mcs-price-stock {
  min-width: 0;
  width: 100%;
}
body #page ul#product_list > li .mcs-price-stock .content_price {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  float: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-align: left;
}
body #page ul#product_list > li .mcs-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  margin: 0 0 7px;
  min-width: 0;
}
body #page ul#product_list > li .mcs-price-line .price {
  display: inline;
  float: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--mcs-pink);
  font-size: 19px;
  line-height: 1.2;
  white-space: nowrap;
}
body #page ul#product_list > li .mcs-unit-price {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #7a808a;
}
body #page ul#product_list > li .mcs-sugar-tax {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
}
body #page ul#product_list > li .mcs-stock-info {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
}
body #page ul#product_list > li .mcs-stock-count {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 2px;
  color: #078fc9;
  font-size: 12px;
  text-align: left;
}
body #page ul#product_list > li .mcs-stock-count img,
body #page ul#product_list > li #availability_date img {
  width: auto;
  height: 15px;
  max-width: 17px;
  vertical-align: -3px;
  margin-right: 3px;
}
body #page ul#product_list > li .mcs-dluo,
body #page ul#product_list > li .mcs-dluo strong {
  display: block;
  font-weight: 700 !important;
  color: #334155;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body #page ul#product_list > li .mcs-buy-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 88px;
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
}
body #page ul#product_list > li .mcs-buy-actions .quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  float: none;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 3px;
  overflow: visible;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
}
body #page ul#product_list > li .mcs-buy-actions .quantity label {
  display: block;
  font-size: 11px;
  color: #4b5563;
  margin: 0;
}
body #page ul#product_list > li .mcs-buy-actions .quantity input {
  display: block;
  width: 52px;
  height: 25px;
  padding: 2px 3px;
  margin: 0 auto;
  border: 1px solid #d4dae4;
  border-radius: 5px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
body #page ul#product_list > li .mcs-buy-actions .quantity small {
  display: block;
  line-height: 1.2;
  font-size: 10px;
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button {
  display: block;
  position: relative;
  float: none;
  clear: none;
  left: auto;
  top: auto;
  width: 64px;
  height: 64px;
  min-height: 64px;
  max-width: 64px;
  margin: 0 auto;
  padding: 0;
  border-radius: 11px;
  background: var(--mcs-pink);
  box-shadow: 0 5px 13px rgba(226,0,122,.25);
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button::before {
  content: "+";
  position: absolute;
  display: block;
  top: -3px;
  left: 50%;
  width: 100%;
  font-size: 55px;
  font-weight: 300;
  line-height: 55px;
  text-align: center;
  text-indent: 0;
  transform: translateX(-50%);
  color: #fff;
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button::after {
  content: "ACHETER";
  bottom: 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .4px;
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button:hover,
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button:focus-visible {
  background: var(--mcs-blue);
  box-shadow: 0 6px 18px rgba(41,171,226,.3);
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button:not([rel]) {
  width: 88px;
  max-width: 88px;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 9px 5px;
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
  text-indent: 0;
  overflow-wrap: normal;
  word-break: normal;
  letter-spacing: 0;
  text-align: center;
  background: #a03446;
}
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button:not([rel])::before,
body #page ul#product_list > li .mcs-buy-actions a.ajax_add_to_cart_button:not([rel])::after {
  display: none;
}
@media (max-width: 1150px) {
  body #page ul#product_list > li .mcs-product-bottom { gap: 10px; }
}
@media (max-width: 620px) {
  body #page ul#product_list > li { min-height: 0; }
  body #page ul#product_list > li a.product_img_link { min-height: 190px; height: 190px; }
  body #page ul#product_list > li a.product_img_link img { max-height: 182px; }
  body #page ul#product_list > li p.product_desc { min-height: 48px; height: auto; max-height: 52px; }
  body #page ul#product_list > li .mcs-product-bottom { margin-top: 8px; }
}
@media (max-width: 350px) {
  body #page ul#product_list > li .mcs-product-bottom { grid-template-columns: minmax(0,1fr) 78px; gap: 7px; }
  body #page ul#product_list > li .mcs-buy-actions { width: 78px; }
}
/* My Candy Shop — correction macaron promotion, v2.3
   A ajouter EN FIN de themes/my-americanbox/css/product_list.css.
   L'image badge-2.png mesure 42 x 42 px : l'ancien CSS ne lui donnait
   que 30 px de hauteur, d'ou sa partie inferieure coupee. */
body #page ul#product_list > li a.product_img_link span.macaron {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  left: auto;                 /* Evite le chevauchement du ruban NOUVEAU */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;               /* Affiche l'integralite du macaron */
  min-width: 56px;
  min-height: 56px;
  padding: 0 4px;
  margin: 0;
  background: url('../img/badge-2.png') center / 100% 100% no-repeat;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.1px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(75,0,42,.30);
  border: 0;
  transform: none;
  pointer-events: none;
}

@media (max-width: 620px) {
  body #page ul#product_list > li a.product_img_link span.macaron {
    top: 8px;
    right: 8px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 11px;
  }
}