/* Artiflor – photos des fiches : actif seulement quand le script a posé ses classes (plus de 3 photos, ordinateur) */
/* les flèches n'existent que sur ordinateur */
#product .af-th-fleche { display: none; }
@media (min-width: 1200px) {
  #product .images-container .product-thumbs.slick-vertical.af-fiche { position: relative; align-self: flex-start; padding: 26px 0 !important; }
  #product .images-container .product-thumbs.slick-vertical.af-fiche .slick-list { height: var(--af-th, 621px) !important; }
  #product .images-container .product-thumbs.slick-vertical.af-fiche .slick-track { height: auto !important; }
  #product .af-th-fleche { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    background: #fff; color: #4c7360; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  #product .af-th-fleche:hover, #product .af-th-fleche:focus-visible { background: #4c7360; color: #fff; }
  #product .af-th-fleche svg { width: 18px; height: 18px; }
  #product .af-th-haut { top: 0; }
  #product .af-th-bas { bottom: 0; }
  /* la grande photo suit la lecture, seulement si elle tient entière à l'écran */
  body.af-colle #product .page-cover-thumbnails { position: sticky !important; top: 100px !important; }
}
/* Packs Advanced Pack : en-tête « Dans cette box », chaque article encadré, coloris (miniatures d'origine) dans un menu déroulant */
#product .af-box-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 10px; }
#product .af-box-tete b { font-family: Amithen, cursive; font-weight: 400; color: #c8586c; font-size: 32px; line-height: 1; }
#product .af-box-tete span { font-size: 12.5px; color: #55595c; }
#product #ap5-product-list .ap5-pack-product { background: linear-gradient(180deg, #fff 0%, #fffaf8 100%); border: 1px solid #f0e2dc; border-radius: 20px;
  padding: 12px 16px; margin: 0 0 12px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); transition: border-color .2s, box-shadow .2s; }
#product #ap5-product-list .ap5-pack-product:hover { box-shadow: 0 6px 18px rgba(200, 88, 108, .12); }
#product #ap5-product-list .ap5-pack-product.af-ouvert { border-color: #c8586c; box-shadow: 0 6px 20px rgba(200, 88, 108, .16); }
#product #ap5-product-list .ap5-pack-product > .row { align-items: center; }
#product #ap5-product-list .ap5-pack-product-image { flex: 0 0 104px; max-width: 104px; padding-right: 0; }
#product #ap5-product-list .ap5-pack-product-image img { width: 88px; height: 88px; object-fit: contain; background: #4c7360; border-radius: 16px; padding: 5px; }
#product #ap5-product-list .ap5-pack-product-content { flex: 1 1 0; max-width: none; height: auto !important; }
/* Advanced Pack fixe une hauteur aux articles sur tablette : l'article doit grandir quand on ouvre les coloris */
#product #ap5-product-list .ap5-pack-product, #product #ap5-product-list .ap5-pack-product > .row, #product #ap5-product-list .ap5-pack-product-image { height: auto !important; }
#product #ap5-product-list .ap5-pack-product-title { font-size: 17px !important; line-height: 1.25; font-weight: 700; margin: 0 0 6px; }
#product #ap5-product-list .ap5-pack-product-title a { color: #232323; }
#product #ap5-product-list .ap5-pack-product-infos { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0 !important; padding: 0 !important; margin: 0 0 4px; }
#product #ap5-product-list .ap5-pack-product-infos > div { float: none !important; margin: 0 !important; border: 0 !important; }
#product #ap5-product-list .ap5-pack-product-quantity { background: #eef4f0; color: #4c7360; border-radius: 999px; padding: 3px 11px !important; font-size: 12.5px; font-weight: 700; }
#product #ap5-product-list .ap5-pack-product-quantity .label { color: #4c7360; font-weight: 400; }
#product #ap5-product-list .ap5-pack-product-price { font-size: 13px; color: #55595c; }
#product #ap5-product-list .ap5-pack-product-price .label { display: none; }
#product #ap5-product-list .ap5-pack-product-price span:last-child { color: #c8586c; font-weight: 700; }
#product #ap5-product-list .af-deroule > .control-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 6px 0 0;
  padding: 4px 12px 4px 4px; border: 1px solid #ead9d2; border-radius: 999px; background: #fff; font-size: 13px; color: #55595c; transition: border-color .2s, background .2s; }
#product #ap5-product-list .af-deroule > .control-label:hover, #product #ap5-product-list .af-deroule > .control-label:focus-visible { border-color: #c8586c; background: #fff5f0; outline: none; }
#product #ap5-product-list .af-coul-mini { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ead9d2; flex: 0 0 26px; }
#product #ap5-product-list .af-deroule > .control-label::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid #4c7360; border-bottom: 2px solid #4c7360;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
#product #ap5-product-list .af-montre > .control-label::after { transform: rotate(-135deg) translate(-2px, -2px); }
#product #ap5-product-list .af-deroule:not(.af-montre) > .attribute_list { display: none !important; }
#product #ap5-product-list .af-deroule.af-montre > .attribute_list { margin-top: 10px; padding: 10px 10px 4px; background: #fff5f0; border-radius: 16px; }
#product #ap5-product-list .af-coul-nom { color: #232323; font-weight: 700; }
@media (max-width: 575px) {
  #product #ap5-product-list .ap5-pack-product-image { flex-basis: 84px; max-width: 84px; }
  #product #ap5-product-list .ap5-pack-product-image img { width: 72px; height: 72px; }
  #product #ap5-product-list .ap5-pack-product-title { font-size: 15px !important; }
}