/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){
}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){
}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.distributor_content_wrapper:hover .product:not(:hover){
transition:filter 250ms ease-in;
filter: grayscale(1) blur(0px);
}

.distributor_content_wrapper:hover .product.detail{
filter:none
}

}



/* Mobile View only */
@media screen and (max-width: 45rem){

.distributor_content_wrapper{
border-radius:var(--brd-radius-25);
width:calc(100dvw - 1.5rem);
height:36rem;
padding:.25rem;
margin:0 .75rem 0 .75rem;
scroll-snap-type:x mandatory;
gap:.25rem;
/*outline:#00ff00 1px solid;*/
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
justify-content:center;
}

.distributor_content_wrapper .product:not(.detail){
scroll-snap-align:start;
flex: 0 0 auto;
width:calc(50% - .5rem);
min-width:14rem;
max-width:17rem;
padding:0;
/*outline:#ff0080 1px solid;*/
}

.distributor_content_wrapper .product.detail{
margin:0 .5rem .75rem .5rem;
}

}

/* Tablet and above */
@media screen and (min-width: 45rem){

.distributor_content_wrapper{
scroll-snap-type:x mandatory;
align-items:start;
}

.distributor_content_wrapper .product{
scroll-snap-align:center;
height:fit-content;
}

}

/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem), screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.distributor_content_wrapper{
border-radius:var(--brd-radius-25);
border:var(--brd-gray-300) 1px solid;
width:calc(100dvw - 3rem);
height:38rem;
/*outline:#0000ff 1px solid;*/
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
width:calc(25% - .5rem);
min-width:14rem;
max-width:17rem;
margin:.25rem .25rem 0 .25rem;
}

/*
.distributor_content_wrapper:has(> :last-child:nth-child(1)) { # 1 element
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) .product{
width:calc(25% - .5rem);
}
*/

.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { /* 2 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(3)) { /* 3 elements */
justify-content:center;
}

}


/* Mobile View > Tablet > Landscape only */
@media screen and (min-width: 55rem) and (max-width: 79.5rem) and (orientation: landscape){

.distributor_content_wrapper{
border-radius:var(--brd-radius-25);
border:var(--brd-gray-300) 1px solid;
width:calc(100dvw - 3rem);
height:38rem;
/*outline:#00ff00 1px solid;*/
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
width:calc(25% - .5rem);
min-width:14rem;
max-width:17rem;
margin:.25rem .25rem 0 .25rem;
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { /* 2 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(3)) { /* 3 elements */
justify-content:center;
}

/*
.distributor_content_wrapper:has(> :last-child:nth-child(1)) { # 1 element
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) .product:not(.detail){
width:calc(25% - .5rem);
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { # 2 elements
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) .product:not(.detail){
width:calc(25% - .5rem);
}
*/

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

.distributor_content_wrapper{
border-radius:var(--brd-radius-25);
border:var(--brd-gray-300) 1px solid;
width:100%;
height:38rem;
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
width:17rem;
}


.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { /* 2 element */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(3)) { /* 3 elements */
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(4)) { /* 4 elements */
justify-content:center;
}

}

/* Desktop View Plus */
@media screen and (min-width: 89.5rem){

.distributor_content_wrapper:has(> :last-child:nth-child(5)) { /* 5 elements */
justify-content:center;
}

}


.product{
scroll-snap-align:center;
}

/* Global settings */
.distributor_header_wrapper{
float:left;
width:100%;
padding:.25rem .5rem 0 .5rem;
background:var(--bgr-gray-100);
}

.distributor_footer_wrapper{
float:left;
width:100%;
text-align:right;
padding:.25rem .5rem;
background:var(--bgr-gray-100);
}

.distributor_footer_tag_wrapper{
float:left;
width:100%;
text-align:left;
padding:.25rem .5rem;
background:var(--bgr-gray-100);
}

.distributor_content_wrapper{
display:flex;
align-items:center;
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:thin;
background:var(--bgr-gray-200);
}