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

section{
	flex-direction: column;
	gap:var(--spacing-medium);
	position:fixed;
}

::-webkit-scrollbar {
    display:none;
}

/*BLOCS FILTRES ----------------------*/
/*------------------------------------*/

.bloc-filter{
	display:flex;
	gap:2vw;
}

.bloc-filter .filter{
	display:flex;
	gap:0.5vw;
}

.filter a { text-decoration: none; color:var(--color-second)}
.filter a:hover { text-decoration: underline; }

a.key, a.key:hover {
  color:var(--color-main);
  text-decoration: none; 
}

.detail{
	gap:0.5vw;
	margin-left:0.5vw;
}

/*BLOCS PRODUITS ---------------------*/
/*------------------------------------*/

.bloc-produits{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: flex-start;
	gap:var(--spacing-small-w);
}

.bloc-produits a{
	width: calc(100% / 4);
	text-decoration: none;
}

.bloc-produit{
	display:flex;
	flex-direction:column;
	margin-bottom:var(--spacing-medium);
}

.bloc-produit .element:nth-child(1){
	width:100%;
	aspect-ratio: 4 / 5;
}

.bloc-produit .element img{
    width: 100%;
    height: 100%;
	object-fit: cover;
}

.bloc-produit .element:nth-child(2){
	display:flex;
	flex-direction:row;
	margin-top:5px;
}

.bloc-produit .element p{
	margin-right:0.5vw;
}

.bloc-produit .element:nth-child(2) p:nth-child(2){
	color:var(--color-second);
}

.out-of-stock {
  opacity: 0.5;
  cursor: default;
}


/* MOBILE */

@media screen and (max-width: 1250px) {
	.bloc-filter .filter{
		flex-direction:column;
		width:70%;
	}

	.bloc-filter .filter .detail{
		transform: translateX(-2px);
	}
}


@media (min-width: 769px) and (max-width: 1250px) {

	.bloc-produits a{
		width: calc(100% / 3);
	}

}

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

	.bloc-produits a{
		width: calc(100% / 2);
	}

}

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

    .bloc-filter{
		display:flex;
		flex-direction: column;
		gap:0;
	}

	.bloc-produits a{
		width: 100%;
	}

}