@import '../components/count.css';
@import '../components/toogle-sibling.css';


/*SECTION PRINCIPALE -----------------*/
/*------------------------------------*/

section{
  flex-direction:row;
  position:fixed;
  gap:1vw;
}


::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
    height:0px;
}

::-webkit-scrollbar-thumb {
    width: 0px;
    background-color: transparent;
    border-radius: 0px;
}

/* COLONNE DE GAUCHE -----------------*/
/*------------------------------------*/

section .left-column {
  display: flex;
  flex-direction: column;
  width:50%;
  height: 100%;
}

section .left-column nav{
  height: 13px;
  padding-bottom: 1vh;
}

section nav a{
  text-decoration: none;
}

section .left-column .bloc{
  display:grid;
  grid-template-columns: 1fr 5fr;
  height:calc(100% - 13px - 1vh);
  gap:1vw;
}

section .left-column .bloc .column-vignettes,
section .left-column .bloc .column-zoom{
  display:flex;
  flex-direction:column;
}

section .left-column .bloc .column-vignettes{
    overflow-y: auto;
}

section .left-column .bloc .column-vignettes nav{
  padding-bottom:var(--spacing-tiny);
  background-color: white;
  position:sticky;
  top:0;
}

section .left-column .bloc .column-vignettes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

section .left-column .bloc .column-vignettes li {
    cursor: pointer;
}

section .left-column .bloc .column-vignettes img {
    width: calc(100% - 10px);
    padding:5px;
}

section .left-column .bloc .column-vignettes img.activezoom,
section .left-column .bloc .column-vignettes img:hover {
    width: 100%;
    padding:0px;
}

section .left-column .bloc .column-zoom{
  justify-content: flex-start;
  align-items: center;
  height:100%;
  max-height:100%;
  width:100%;
  position:relative;

}

section .left-column .bloc .column-zoom img{
  width:100%;
  height:100%;
  position:absolute;
  object-fit: cover;
}

section .left-column .bloc .column-zoom .nav-arrow{
  position:absolute;
  z-index:1000;
  border: 0px solid transparent; 
  outline: none;
}


section .left-column .bloc .column-zoom .nav-arrow:hover {
    color:var(--color-second);
}

.left-arrow {
    top:40px;
}

.right-arrow {
    bottom: 40px;
}

.nav-arrow.left-arrow::before {
  content: "↑";
}
.nav-arrow.right-arrow::before {
  content: "↓";
}

/* COLONNE DE DROITE -----------------*/
/*------------------------------------*/

section .right-column{
  width:50%;
  height: 100%;
  overflow-y:scroll;
  display:flex;
  flex-direction:column;
}

section .right-column .bloc{
  display:flex;
  flex-direction: column;
  gap:calc(var(--spacing-tiny) / 2);
  margin-top:var(--spacing-medium);
  width:65%;
}

section .right-column .bloc:nth-child(1){
  position:sticky;
  top:0;
  background-color: white;
  margin-top:0;
  z-index:1;
}

h2 {
  font-family:var(--font-thin);
}

h2 em, h2.price{
  font-family:var(--font-regular);
  font-style:normal;
}

#size { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.bloc-sizes{
  display:flex;
  gap:var(--spacing-tiny);
  margin-top:var(--spacing-tiny);
}

.bloc-size h2{
  font-family:var(--font-thin);
  cursor:pointer;
}

.bloc-size.current-bloc-size h2{
  font-family:var(--font-regular);
}

.add-to-cart{
  display: flex;
  flex-direction: row !important; 
  width: 100% !important;
}

button{
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background-color:transparent; 
  border: 1px solid var(--color-main); 
  padding:calc(var(--spacing-tiny) / 2);
  font-family:var(--font-regular); 
  font-size: var(--font-size-normal);
  color:var(--color-main);
  cursor: pointer;
  width:fit-content;
  text-transform:uppercase;
}

button:hover{
  color:var(--color-main) !important ;
}

button.button:hover{
  background-color:var(--color-main) !important ;
}

button:hover h2{
  color: white;

}

a.to-checkout{
  text-decoration:none;
  display: flex;
  gap: 3px;
}



/* PRODUIT COMPATIBLE */

.button-produit-compatible{
  border: 0px solid transparent; 
  padding:0;
  text-transform: none;
}

/* MOBILE */


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

  section{
    flex-direction:column;
    position: relative;
    overflow-y: scroll;
  }

  section .left-column {
    width:calc(100vw - 6vh - 2px);
    min-height: 55vh;
    position: relative;
  }

  section .left-column nav{
    height: 13px;
    padding-bottom: 1vh;
  }

  section .left-column .bloc{
    display:flex;
  height:calc(100% - 13px);
  }

  section .left-column .bloc .column-vignettes{
    display: none;
  }

  section .left-column .bloc .column-zoom{
    flex-direction:row;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  section .left-column .bloc .column-zoom img{
    object-fit: contain;
  }

  section .left-column .bloc .column-zoom .nav-arrow{
    position:relative;
    height: 90%;
    width: 40%;
    z-index:1000;
    border: 0px solid transparent; 
    outline: none;
  }

  .left-arrow {
      top: 0px;
      text-align: left;
  }

  .right-arrow {
      bottom: 0px;
      text-align: right;
  }

  .nav-arrow.left-arrow::before {
    content: "←";
  }
  .nav-arrow.right-arrow::before {
    content: "→";
  }

  section .right-column{
    width:calc(100vw - 6vh - 2px);
    height: fit-content;
    overflow-y:visible;
    padding-bottom:var(--spacing-big);
  }

  section .right-column .bloc{
    display:flex;
    flex-direction: column;
    gap:calc(var(--spacing-tiny) / 2);
    margin-top:var(--spacing-medium);
    width:100%;
  }

  .add-to-cart{
    flex-direction: column !important; 
  }




}