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

:root{
--product-main-height:auto;
--product-main-min-height:auto;
}

.quickview{
margin:auto;
width:98dvw;
height:90dvh;
border:none !important;
box-shadow:var(--box-shadow-default);
padding:0;
border-radius:var(--brd-radius-25);
}

.quickview .content{
float:left;
width:100%;
padding:.5rem 0;
}

}

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

:root{
--product-main-height:auto;
--product-main-min-height:auto;
}

.quickview{
margin:auto;
width:98dvw;
height:98dvh;
border:none !important;
box-shadow:var(--box-shadow-default);
padding:0;
border-radius:var(--brd-radius-25);
}

.quickview .content{
float:left;
width:100%;
padding:.75rem 1rem;
}

}

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

:root{
--product-main-height:auto;
--product-main-min-height:auto;
}

.quickview{
margin:auto;
width:98dvw;
height:98dvh;
border:none !important;
box-shadow:var(--box-shadow-default);
padding:0;
border-radius:var(--brd-radius-25);
}

.quickview .content{
float:left;
width:100%;
padding:.5rem .75rem;
}

}



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

:root{
--product-main-height:auto;
--product-main-min-height:auto;
}

.quickview{
margin:auto;
width:auto;
height:auto;
border:none !important;
box-shadow:var(--box-shadow-default);
padding:0;
max-width:76rem;
min-height:44rem;
max-height:46rem;
border-radius:var(--brd-radius-25);
}

.quickview .content{
float:left;
width:100%;
padding:.5rem .75rem;
}

}


.quickview .header{
float:left;
width:100%;
height:2.35rem;
margin:0;
padding:0;
text-align:center;
position:sticky;
z-index:999;
top:0;
left:0;
background:var(--bgr-gray-100);
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
}


.products .product:not(.detail){
scroll-snap-align:start;
}


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

.products.grid{
display:grid;
grid-template-rows:minmax(0, auto) minmax(0, auto) auto minmax(0, auto) minmax(0, auto);
grid-template-columns:auto;
grid-template-areas:
"filter_search"
"filter_active"
"filter_pager_1"
"products"
"filter_pager_2"
"filter_pager_button";
grid-column-gap:0;
}

.products.grid .products{
grid-area:products;
/*outline:darkorange 1px solid;*/
}

.product:not(.detail){
scroll-margin-top:5.5rem;
}

/*
.products{
display:flex;
justify-content:center;
align-items:start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

.product:not(.detail){
float:left;
width:calc(100% - 1.5rem);
margin:.75rem .75rem .25rem .75rem;
padding:0;
scroll-margin-top:5.5rem;
}

 */

.product:not(.detail) .media-wrapper{
width:75%;
max-width:18rem;
margin:0 auto;
}

}

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

.products.grid{
display:grid;
grid-template-rows:minmax(0, auto) minmax(0, auto) auto minmax(0, auto) minmax(0, auto);
grid-template-columns:auto;
grid-template-areas:
"filter_search"
"filter_active"
"filter_pager_1"
"products"
"filter_pager_2"
"filter_pager_button";
grid-column-gap:0;
}

.products.grid .products{
grid-area:products;
/*outline:blue 1px solid;*/
}

.product:not(.detail){
scroll-margin-top:6.5rem;
}

/*
.products{
display:flex;
justify-content:start;
align-items:start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

.product:not(.detail){
float:left;
width:calc(33.3333% - .5rem);
min-width:14rem;
max-width:20rem;
margin:0 .25rem .5rem .25rem;
padding:0;
scroll-margin-top:6.5rem;
}
*/

}

@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

.products.grid{
display:grid;
grid-template-rows:minmax(0, auto) minmax(0, auto) auto minmax(0, auto) minmax(0, auto);
grid-template-columns:16rem auto;
grid-template-areas:
"filter_search filter_pager_1"
"filter_search filter_active"
"filter_search products"
"filter_search filter_pager_2"
"filter_pager_button filter_pager_button";
grid-column-gap:0;
}

.products.grid .products{
grid-area:products;
/*outline:green 1px solid;*/
}

.product:not(.detail){
scroll-margin-top:6.5rem;
}

/*
.products{
display:flex;
justify-content:start;
align-items:start;
flex-wrap:wrap;
margin:0;
padding:0 .35rem;
}


.product:not(.detail){
float:left;
width:calc(33.3333% - .5rem);
min-width:14rem;
max-width:20rem;
margin:0 .25rem .5rem .25rem;
padding:0;
scroll-margin-top:6.5rem;
}

 */

}


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

.products.grid{
display:grid;
grid-template-columns:16rem auto;
grid-template-rows:minmax(0, auto) minmax(0, auto) auto minmax(0, auto) minmax(0, auto);
grid-template-areas:
"filter_search filter_pager_1"
"filter_search filter_active"
"filter_search products"
"filter_search filter_pager_2"
"filter_pager_button filter_pager_button";
grid-column-gap:0;
}

.products.grid .products{
grid-area:products;
}

.product:not(.detail){
scroll-margin-top:11.25rem;
}

}

.products{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
grid-template-rows:auto;
grid-column-gap:.5rem;
grid-row-gap:.5rem;
align-items:start;
}

.product:not(.detail){
display:block;
min-width:14rem;
max-width:20rem;
margin:0 .25rem .25rem .25rem;
padding:0;
}



.btn_quickview_main{
float:left;
width:100%;
margin:0;
padding:0;

& > *{
pointer-events: none;
}

}


.product:not(.detail) .card{
float:left;
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:space-between;
align-items:start;
flex-direction:column;
border:1px solid var(--brd-primary-50);
border-radius:var(--brd-radius-25);
background:var(--bgr-gray-100);
}

.product:not(.detail).update{
animation:fade-out 500ms ease-out forwards, scale-down 400ms ease-out forwards;
}


.product:not(.detail) .card main{
float:left;
margin:0;
padding:0 .5rem;
width:100%;
min-height:var(--product-main-min-height);
height:var(--product-main-height);
}

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

.product:not(.detail) .card main{
height:auto;
}

}

.product:not(.detail) .card main .headline{
float:left;
width:100%;
text-align:left;
}

.product:not(.detail) .card main .headline h3{
float:left;
width:100%;
margin:.25rem 0;
padding:0;
}

.product:not(.detail) .card main .headline .ol,
.product:not(.detail) .card main .headline .hl,
.product:not(.detail) .card main .headline .sl{
font-family:var(--secondary-font-family);
float:left;
width:100%;
margin:0;
padding:0;
}

.product:not(.detail) .card main .headline .ol{
font-size:var(--fs-h3);
}

.product:not(.detail) .card main .headline .hl{
font-size:var(--fs-h2);
}

.product:not(.detail) .card main .headline .sl{
font-size:var(--fs-s);
}


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

.product:not(.detail) .card main .headline .ol{
font-size:var(--fs-s);
}

.product:not(.detail) .card main .headline .hl{
font-size:var(--fs-m);
}

.product:not(.detail) .card main .headline .sl{
font-size:var(--fs-s);
}

}

.product:not(.detail) .card main .content{
float:left;
width:100%;
text-align:left;
margin:0;
padding:0;
}

.product:not(.detail) .card main .content p{
float:left;
width:100%;
margin:0;
padding:0 0 .25rem 0;
text-align:left;
}


/* Media */
.product:not(.detail) .card .media-wrapper{
position:relative;
background:url('/assets/img/database/media/bg.svg') no-repeat bottom center;
width:100%;
overflow:hidden;
}

.product:not(.detail) .card figure.media.pos_1{
position:absolute;
top:0;
left:-4.25rem;
left:-4.15rem;
z-index:1;
}

.product:not(.detail) .card figure.media.pos_2{
position:absolute;
top:.25rem;
left:-2.25rem;
left:-2.15rem;
z-index:2;
}

.product:not(.detail) .card figure.media.pos_3{
position:relative;
top:.5rem;
left:0;
z-index:3;
}

.product:not(.detail) .card figure.media.pos_4{
position:absolute;
top:.25rem;
left:2.25rem;
left:2.15rem;
z-index:2;
}

.product:not(.detail) .card figure.media.pos_5{
position:absolute;
top:0;
left:4.25rem;
left:4.15rem;
z-index:1;
}

/* Small Background */
.product:not(.detail) .card figure .media_background_1{
background:url('/assets/img/database/media/img/bg_1.svg') no-repeat bottom center;
}

/* Default Background */
.product:not(.detail) .card figure .media_background_2{
background:url('/assets/img/database/media/img/bg_2.svg') no-repeat bottom center;
}

/* Big Background */
.product:not(.detail) .card figure .media_background_3{
background:url('/assets/img/database/media/img/bg_2.svg') no-repeat bottom center;
}

.product:not(.detail) .card figure img{
filter:var(--drop-shadow-default);
}

.product:not(.detail) .card .overview-wrapper{
display:flex;
justify-content:center;
align-content:flex-start;
width:100%;
overflow:hidden;
z-index:20;
margin:-.5rem 0 .5rem 0;
}

.product:not(.detail) .card .overview-wrapper .icon{
float:left;
position:relative;
min-width:2.25rem;
width:100%;
max-width:2.5rem;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin:0 .15rem;
padding:0;
}

.product:not(.detail) .card .overview-wrapper img{
float:left;
width:100%;
height:auto;
margin:0;
padding:0;
}



.product:not(.detail) .card .content ul{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.product:not(.detail) .card .content li{
float:left;
width:100%;
margin:0;
padding:.15rem .15rem 0 .15rem;
border-bottom:var(--brd-gray-400) 1px solid;
font-size:var(--fs-s);
}

.product:not(.detail) .card .content li:before{
display:none;
}

.product:not(.detail) .card .content li .label{
float:left;
width:auto;
}

.product:not(.detail) .card .content li .value{
float:right;
width:auto;
}

.product:not(.detail) .card .content li .value .status{
display:inline-block;
position:relative;
top:2px;
right:4px;
width:.75rem;
height:.75rem;
border-radius:50%;
}

.product:not(.detail) .card .content li .value .status_265{
background:var(--status-succes-background-color);
border:var(--status-succes-border-color) 1px solid;
}

.product:not(.detail) .card .content li .value .status_266{
background:var(--status-pending-background-color);
border:var(--status-pending-border-color) 1px solid;
}

.product:not(.detail) .card .content li .value .status_267{
background:var(--status-alert-background-color);
border:var(--status-alert-border-color) 1px solid;
}





/* Footer */
.product:not(.detail) footer{
float:left;
width:100%;
margin:0;
padding:.5rem .75rem .5rem .75rem;
display:flex;
justify-content:space-between;
align-items:start;
flex-direction:row;
height:auto;
position:relative;
background:none;
}

.product:not(.detail) footer .box{
width:auto;
}

.product:not(.detail) footer .box:first-child{
clear:both;
float:left;
width:auto;
margin:0 .25rem 0 0;
padding:0;
}

.product:not(.detail) footer .box:last-child{
clear:both;
float:right;
width:auto;
margin:0 0 0 .25rem;
padding:0;
}

.product:not(.detail) footer .box.one-child{
float:left;
margin:0;
padding:0;
}

.product:not(.detail) .item_number{
float:left;
width:100%;
}

.product:not(.detail) .item_number p{
font-size:var(--fs-xs);
}



.product:not(.detail) .small{
font-size:var(--fs-xs);
}

.product_price{
float:left;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
}

.product_price_display{
float:left;
width:100%;
margin:0 0 .25rem 0;
padding:0;
text-align:center;
}


.btn_order.text,
.btn_quickview.text{
float:left;
border:none;
border-radius:var(--brd-radius-25);
width:100%;
height:2.5rem;
margin:.5rem 0;
padding:.5rem;
font-weight:bold;
font-size:var(--fs-p);
background:var(--btn-accent-400);
color:var(--clr-accent-400);
cursor:pointer;
}

.btn_order:hover,
.btn_quickview.text:hover{
background:var(--btn-accent-405);
color:var(--clr-accent-405);
}


.btn_detail.icon,
.btn_quickview.icon{
float:left;
display:block;
margin:0;
padding:0;
width:1.75rem;
height:1.75rem;
border:0;
}

.btn_detail.icon,
.btn_detail.icon.update,
.btn_detail.icon.update:hover{
background:url('/assets/img/basket/btn/detail/icon/off.svg') no-repeat center center;
}

.btn_detail.icon:hover{
background:url('/assets/img/basket/btn/detail/icon/hover.svg') no-repeat center center;
}

.btn_detail.icon.on{
background:url('/assets/img/basket/btn/detail/icon/on.svg') no-repeat center center;
}

.btn_quickview.icon,
.btn_quickview.icon.update,
.btn_quickview.icon.update:hover{
background:url('/assets/img/basket/btn/quickbuy/icon/off.svg') no-repeat center center;
}

.btn_quickview.icon:hover{
background:url('/assets/img/basket/btn/quickbuy/icon/hover.svg') no-repeat center center;
}

.btn_quickview.icon.on{
background:url('/assets/img/basket/btn/quickbuy/icon/on.svg') no-repeat center center;
}

.btn_detail.icon span,
.btn_detail.icon strong,
.btn_quickview.icon span,
.btn_quickview.icon strong{
display:none;
}



.product_price_unit{
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.product_price_strike_through{
position: relative;
}

.product_price_strike_through:before{
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
transform:rotate(-5deg);
}

.product_price_net{
margin:0;
padding:0;
font-size:var(--fs-m);
}

.product_price_old_gross{
margin:0;
padding:0;
font-size:var(--fs-s);
}

.product_price_gross{
margin:0;
padding:0;
font-size:var(--fs-m);
}

.product_price_vat{
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.product_price_base{
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.product_price_deposit{
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.product_order:not(.detail){
float:left;
width:100%;
display:flex;
justify-content:space-between;
align-items:end;
position:relative;
}

.product_order:not(.detail) .box{
clear:both;
float:left;
width:100%;
}

.form_product_order{
float:left;
width:100%;
margin:0;
padding:0;
}

.form_product_order label{
float:left;
width:100%;
text-align:center;
pointer-events:none;
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.form_product_order .item_option{
float:left;
width:100%;
text-align:center;
text-align-last:center;
-moz-text-align-last:center;
}

.form_product_order .item_price_option{
float:left;
width:100%;
text-align:center;
text-align-last:center;
-moz-text-align-last:center;
overflow:scroll;
scrollbar-width:thin;
max-height:12rem;
}

.form_product_order .item_price_option_label_wrapper{
float:left;
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.form_product_order .item_price_option_label{
float:left;
width:auto;
text-align:center;
margin:0 0 .25rem 0;
padding:0 .5rem .25rem .5rem;
font-size:var(--fs-xs);
background:var(--bgr-accent-300);
border-radius:var(--brd-radius-25);
}

.form_product_order .item_price_option_label:before{
display:inline-block;
content:'';
height:.95rem;
width:1em;
background:url('/assets/img/database/card/icon/extras.svg') no-repeat bottom left;
}


#order_type.list{
float:left;
width:100%;
margin:0;
padding:.25rem 0;
}

#order_type li{
float:left;
width:calc(100% - .30rem);
margin:.15rem .15rem;
padding:0;
background:var(--bgr-gray-400);
border:var(--brd-gray-400) 1px solid;
border-radius:var(--brd-radius-25);
}

#order_type li.hover,
#order_type li.on{
font-weight:bold;
background:var(--bgr-gray-500);
border:var(--brd-gray-500) 1px solid;
}

#order_type li input{
display:none;
}

#order_type li label{
float:left;
width:100%;
margin:0;
padding:.5rem 0;
text-align:center;
font-size:var(--fs-xs);
pointer-events:auto;
}


.form_product_order .box_amount{
float:left;
width:100%;
text-align:center;
text-align-last:center;
-moz-text-align-last:center;
}

.form_product_order .amount.label{
float:left;
width:100%;
}

.form_product_order .amount_input_wrapper{
float:left;
width:100%;
display:flex;
justify-content:start;
align-items:center;
}

.form_product_order .btn_amount_add,
.form_product_order .btn_amount_sub{
float:left;
width:2rem;
height:2rem;
border-radius:0;
margin:0;
padding:0;
background:var(--bgr-gray-500);
border:var(--brd-primary-50) 1px solid;
}

.form_product_order .btn_amount_sub{
border-top-left-radius:.25rem;
border-bottom-left-radius:.25rem;
}

.form_product_order .btn_amount_add{
border-top-right-radius:.25rem;
border-bottom-right-radius:.25rem;
}

.form_product_order .btn_amount_add p,
.form_product_order .btn_amount_sub p{
float:left;
width:2rem;
height:auto;
margin:0;
padding:0;
pointer-events:none;
}


.form_product_order .amount.input{
float:left;
width:100%;
height:2rem;
border-radius:0;
border:0
}

.form_product_order .amount.unit{
float:left;
width:100%;
display:none;
}

.form_product_order .amount.unit p{
float:left;
width:100%;
margin:0;
padding:0;
}


/* Item */
.feature-main-wrapper{
position:absolute;
top:.5rem;
left:.5rem;
z-index:20;
}

.feature-main-wrapper .icon{
margin:0;
padding:0;
border-radius:50%;
background:var(--bgr-accent-500);
border:var(--brd-accent-500) 1px solid;
}

.product:not(.detail) .feature-main-wrapper .icon{
width:2.5rem;
height:2.5rem;
}

.product.detail .feature-main-wrapper .icon{
width:3.75rem;
height:3.75rem;
}

.feature-wrapper{
position:absolute;
bottom:1.75rem;
left:.5rem;
z-index:2;
}

.product.detail .feature-wrapper{
position:absolute;
bottom:2.95rem;
left:.5rem;
z-index:2;
}

.feature-wrapper .icon{
margin:.5rem 0 0 0;
padding:0;
border-radius:50%;
background:var(--bgr-accent-500);
border:var(--brd-accent-500) 1px solid;
}

.product:not(.detail) .feature-wrapper .icon{
width:2.5rem;
height:2.5rem;
}

.product.detail .feature-wrapper .icon{
width:3.75rem;
height:3.75rem;
}


/* Global */
/* Status */
.status-wrapper{
position:absolute;
bottom:1.25rem;
right:.5rem;
z-index:20;
}

/* Status > Global */
.status-wrapper .status{
width:3.5rem;
height:3.5rem;
}



/* Detail */
/* Status > Detail > Global */
.product.detail .status-wrapper{
position:absolute;
bottom:2.95rem;
right:1.25rem;
z-index:20;
}

.product.detail .status-wrapper .status{
width:4.75rem;
height:4.75rem;
}


.status-wrapper .status{
z-index:2;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}


/* Global */
.status-wrapper .status p{
font-family:var(--secondary-font-family);
color:var(--clr-nav-300);
font-size:var(--fs-m);
font-weight:bold;
text-transform:uppercase;
line-height:1rem;
margin:0;
padding:0;
}

/* Detail */
.product.detail .status-wrapper .status p{
color:var(--clr-primary-100);
font-size:var(--fs-l);
}


/* Global */
/* Status > Top */
.status-wrapper .status.top{
background:var(--bgr-accent-500);
}

/* Status > Hot */
.status-wrapper .status.hot{
background:var(--bgr-accent-500);
}

/* Status > New */
.status-wrapper .status.new{
background:var(--bgr-accent-500);
}

/* Status > Sale */
.status-wrapper .status.sale{
background:var(--bgr-accent-500);
}

/* Status > Remainder */
.status-wrapper .status.remainder{
background:var(--bgr-accent-500);
}

/* Status > Soldout */
.status-wrapper .status.soldout{
background:var(--bgr-accent-500);
}


/* Detail */
/* Status > Top */
.product.detail .status-wrapper .status.top{
background:var(--bgr-gray-600);
}

/* Status > Hot */
.product.detail .status-wrapper .status.hot{
background:var(--bgr-gray-600);
}

/* Status > New */
.product.detail .status-wrapper .status.new{
background:var(--bgr-gray-600);
}

/* Status > Sale */
.product.detail .status-wrapper .status.sale{
background:var(--bgr-gray-600);
}

/* Status > Remainder */
.product.detail .status-wrapper .status.remainder{
background:var(--bgr-gray-600);
}

/* Status > Soldout */
.product.detail .status-wrapper .status.soldout{
background:var(--bgr-gray-600);
}