/* =============================================================================
   GLOBAL
   ============================================================================= */

.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);
}

/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width: 45rem){

.distributor_content_wrapper{
border-radius:var(--brd-radius-25);
width:calc(100dvw - 1.5rem);
height:auto;
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;
}

}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@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
}

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

.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;
}

}

/* Non-standard breakpoints */

/* Tablet and above (min-width: 45rem) */
@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 (min-width: 45rem) and (max-width: 79.5rem), portrait */
@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:auto;
padding:.25rem;
}

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

/*
.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 (min-width: 55rem) and (max-width: 79.5rem) and (orientation: landscape) */
@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:auto;
padding:.25rem;
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
width:calc(25% - .5rem);
min-width:14rem;
max-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(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 Plus (min-width: 89.5rem) */
@media screen and (min-width: 89.5rem){

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

}