/* Conteneur principal : entre header et footer, maximum 100vh */

#product-content{
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position:relative;
}

.site-main{height:100%;margin:0px!important;}

/* WOOCOMMERCE */
.site-header{padding-top:0px;display:flex;}
.storefront-primary-navigation{display:none;}

.col-full-content{
    width:80%;
    max-width:80%;
    height: 100%;
    margin:0 auto;
    display:flex;
    align-items: center;
}

.right-sidebar .content-area {
    width: 100%!important;
    height:100%;
    float: none!important;
    margin-left:0!important;
    margin-right: 0!important;
    margin:0 auto!important;
}




.artwork-layout {
    display: flex;
    height: 100%; 
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    box-sizing: border-box;
}

.artwork-media {
  display: flex;
  align-items: center;
  gap: 20px;
  height: calc(100vh - 300px);
  width: 50%;
  box-sizing: border-box;
  flex-direction: column;
}

.artwork-thumbs-wrapper {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-direction: row;
  width: 80%;
  opacity: 0.4;
}

.artwork-thumbs-wrapper:hover{opacity: 1;}

.artwork-thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction:row;
  gap: 30px;
  box-sizing: border-box;
  padding: 10px 0;
  max-height: none;
  max-width: 75%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none; /* Firefox */
}

/* Masquer la scrollbar horizontale (Chrome/Safari/Edge) */
.artwork-thumbs::-webkit-scrollbar {
  display: none;
}

.thumbs-scroll-btn {
  width: 40px;
  height: 30px;
  background-color: #FFF;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  border-radius: 3px;
  background-size:30px 30px;
  background-position:center center;
  background-repeat:no-repeat;
}

.thumbs-scroll-up{background-image:url('../assets/icons/arrow-left.svg');}
.thumbs-scroll-down{background-image:url('../assets/icons/arrow-right.svg');}

.thumbs-scroll-btn:hover {
  background-color:#FFF;
  
}

.thumbs-scroll-btn.is-disabled{
  opacity: 0.6;
  cursor: default;
}



.artwork-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid transparent;
}

.artwork-thumb.active,
.artwork-thumb:hover {
  border-color: #000;
}

.artwork-images {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
}

.artwork-images img {
  max-width: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
}


.artwork-details{
  width:40%;
  height: calc(100vh - 360px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 20px;
}

/* .artwork-meta { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } */

.artwork-meta .artwork-disponibilite{
    display:inline-flex;
    font-size:10px;
    padding:5px 10px;
    text-transform:uppercase;
    font-weight:bold;
}

/* Styles par statut de disponibilité */
.artwork-meta .artwork-disponibilite.disponible {
    color: #155724;
    background: #d4edda;
}

.artwork-meta .artwork-disponibilite.sur-demande{
    color: #004085;
    background: #cce5ff;
}

.artwork-meta .artwork-disponibilite.reserve {
    color: #856404;
    background: #fff3cd;
}

.artwork-meta .artwork-disponibilite.indisponible{
    color: #3c3f41;
    background: #e5e7eb;
}

.artwork-meta .artwork-disponibilite.vendue{
    color: #5c4033;
    background: #f0e6e0;
}

.artwork-meta .artwork-disponibilite.en-pret{
    color: #5a3e7a;
    background: #e2d9f3;
}



.artwork-meta h1{
    margin:20px 0px;
    font-size: 1.5em;
}

.artwork-year-type-dimensions{
  display:flex;
  justify-content: space-between;
  margin-bottom: 50px;
  font-size:14px;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.artwork-year-type-dimensions .artwork-category{
  display:inline-flex;
  text-transform:uppercase;
}

.artwork-year-type-dimensions .more-info-link--inline{
  display:inline-flex;
  align-items:center;
  padding: 6px 34px 6px 0px;
  text-decoration: none;
  color:#000;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing: 0.04em;
  background-image: url("../assets/icons/black-informations-icon.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 22px;
}

.artwork-year-type-dimensions .more-info-link--inline{
  text-decoration: underline;
}




/* Style de la scrollbar pour les navigateurs Webkit (Chrome, Safari, Edge) */
.artwork-description::-webkit-scrollbar {
    width: 6px;
}

.artwork-description::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.artwork-description::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.artwork-description::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Styles du prix et des actions déplacés dans product-price-actions.css */

/* INFORMATIONS PRODUCT =============== */



.single-product div.product{height:100%;}

.single-product div.product .woocommerce-product-gallery{
  width:100%!important;
  height:100%!important;
  margin:0px!important;
}

.woocommerce-product-gallery__wrapper{
  width:100%;
  height:100%;
}

.woocommerce-product-gallery__image{
  width:100%;
  height:100%;
}

.woocommerce-product-gallery__image a{
  display:flex;
  width:100%;
  height:100%;
  justify-content: center;align-items:center;;
}

.woocommerce-product-gallery__image a {
  pointer-events: none;
  cursor: default;
}

/* === NAVIGATION PRODUCTS =============== */

#navigation-products{
  /* display:none; */
  /* background:yellow; */
  width:100%;
  height:140px;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  padding-top:20px;
  pointer-events: none; /* Ignore les clics sur le conteneur */
  z-index: 1; /* Légèrement au-dessus du contenu normal */
}

#navigation-products .prev-product,
#navigation-products .next-product,
#navigation-products a {
  pointer-events: auto; /* Les boutons restent cliquables */
}

.informations-product{
  /* background:yellow; */
  width:100%;
  height:140px;
  display:flex;
  margin:0 auto;
  justify-content: space-between;
  position:absolute;
}

.prev-product,
.next-product{
  width:100px;
  height:140px;
  /* background:pink; */
}

.prev-product figure,
.next-product figure{
  display:flex;
  width:70px;
  height:70px;
}

.prev-product figure img,
.next-product figure img{
  width:100%;
  height:100%;
  object-fit: cover;
}


.prev-product,
.next-product{
  width:70px;
  height:110px;
  background-size:30px 40px;
  background-repeat:no-repeat;
  background-position: center bottom;
}

.prev-product:hover{background-image:url('../assets/icons/arrow-left.svg');}
.next-product:hover{background-image:url('../assets/icons/arrow-right.svg');}


.btn-back{
  color:#000;
  background:#FFF;
  text-transform:uppercase;
  padding: 8px 20px 8px 50px;
  font-weight: bold;
  border-radius: 30px;
  background-size:25px 25px;
  background-repeat:no-repeat;
  background-position: left 15px center;
  background-image:url('../assets/icons/back.svg');
  margin-top: 20px;
}

.btn-back:hover{
  background:#000;
  color:#FFF;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-image: url(../assets/icons/back-white.svg);
}


.single-product div.product form.cart{padding:2em 0 1em!important;}

.single-product div.product .variations_button{padding-top:0px!important;}

.product-variation-options .single_variation_wrap{
  display:flex;
  align-items: center;
  justify-content: flex-end;
  width:50%;
}

.woocommerce-variation-description p{margin:0;color:#000;padding-top: 15px;}
.woocommerce-variation-description p a{color:#000;text-decoration:underline;}

/* FORM ACHAT Variations ---------------------------- */

/* Style du prix déplacé dans product-price-actions.css */


form.variations_form.cart{
  display:flex;
  justify-content: space-between;
}


.single-product div.product table.variations{
  /* background:yellow; */
  width:50%;
  display:flex;
  align-items: center;
}

.single-product div.product table.variations label{
    font-weight: bold;
    font-size: 0.7em;
    text-transform: uppercase;
}

.single-product div.product table.variations select{
    height: 50px;
    padding: 5px;
    border: 2px solid black;
    width: 200px;
    font-weight: bold;
    max-width:80%!important;
}

a.reset_variations, a.reset_variations::before{color:#000;margin-top: 10px;}

.single_variation_wrap{
  /* background:pink; */
  display:flex;
  justify-content: space-between;
}


.woocommerce-variation.single_variation{
   display:block!important;
}

/* Styles des boutons d'action déplacés dans product-price-actions.css */






/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
  /*
    Objectif :
    - Sur responsive, on ne veut plus "forcer" la hauteur viewport.
    - On laisse le contenu déterminer la hauteur.
  */
  #product-content {
      height: auto;
      max-height: none;
      overflow: visible;
  }

  .single-product div.product{margin-top:60px;}

  .artwork-layout{
    flex-direction: column;
  }

  .artwork-media{width:100%;height:auto;flex-direction: column;}

  .artwork-images{height:500px;max-height: 500px;}

  /* Vignettes : le slider est maintenant horizontal par défaut (styles globaux au-dessus) */

  .artwork-details{
    width:100%;
    height: auto;
    max-height: none;
  }


  #navigation-products{top: 25%;z-index:51;}
}


@media (max-width: 1200px){ 


  .artwork-details{margin: 50px 0px 140px;}
  .artwork-meta{text-align:center;}
  .artwork-year-type-dimensions .artwork-category,
  .artwork-year-type-dimensions .more-info-link--inline{justify-content: center;}

  .artwork-year-type-dimensions > :only-child{
    margin-left: auto;
    margin-right: auto;
  }

  
}

@media (max-width: 768px){

  #navigation-products{top: 96%;z-index:51;} 
  .prev-product, .next-product{width:70px;height:70px;} 

  .col-full-content{width:80%;}

  .artwork-thumbs-wrapper{opacity:1;width:100%;gap: 10px;}
  .artwork-layout{padding:0px}
  .artwork-details{padding:0px;margin-top: 30px;}
  .artwork-year-type-dimensions{flex-direction: column;gap: 10px;}
  .artwork-year-type-dimensions .more-info-link--inline{
    background-position: left center;
    padding: 6px 0px 6px 34px;
  }

  .btn-back{margin-top:20px;}

}



@media (max-width: 480px){

  .col-full-content{width:90%;}
  .artwork-meta h1{font-size:1.5em;}

  .artwork-thumbs{width:70%;gap: 20px;}

  .single-product div.product form.cart{flex-direction: column;}
  .product-variation-options .single_variation_wrap{width: 100%;text-align: center;font-size:14px;padding-top:20px;justify-content: center;}
  .single-product div.product table.variations{width:100%;}
  .single-product div.product table.variations label{font-size:0.6em;}
  .single-product div.product table.variations select{font-size:0.8em;}
  .single-product div.product table.variations select{height: 40px;}
  .single-product div.product table.variations select{padding: 5px;}

  .button.contact_button{font-size:16px;}

  .prev-product, .next-product{width:50px;height:50px;}
  .prev-product figure, .next-product figure{width:50px;height:50px;}

  .btn-back{font-size: 12px;background-size: 22px 22px;margin-top:10px;}


}