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

:root{
--product-main-height:10.25rem;
}

}

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

:root{
--product-main-height:10.25rem;
}

}

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

:root{
--product-main-height:10.25rem;
}

}


.quickview{
margin:auto;
width:auto;
height:auto;
border:none !important;
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0,0,0,.25);
padding:0;
max-width:34rem;
min-height:30rem;
max-height:33rem;
border-radius:.25rem;
}

.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:blur(5px);
backdrop-filter:blur(5px);
}

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


.products .product{
scroll-snap-align:start;
}

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

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

.product{
float:left;
width:100%;
margin:0 .5rem .75rem .5rem;
padding:0;
scroll-margin-top:5.5rem;
}

}

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

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

.product{
float:left;
width:calc(50% - 1rem);
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{
display:flex;
justify-content:center;
align-items:start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0 1rem;
}

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

}



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

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

.product{
float:left;
width:calc(25% - .5rem);
max-width:25rem;
margin:.25rem;
padding:0;
scroll-margin-top:11.25rem;
}

}

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

& > *{
pointer-events: none;
}

}



.bookmark .product.detail{
float:left;
width:calc(25% - .5rem);
max-width:25rem;
margin:.25rem;
padding:0;
}

.product.detail{
float:left;
width:calc(100% - .5rem);
max-width:calc(100% - .5rem);
max-height:calc(100% - .5rem);
}

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

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

.product .card header{
float:left;
display:flex;
justify-content:space-between;
align-items:center;
height:2.25rem;
padding:0 .25rem;
width:100%;
}

.product .card header p,
.product.detail .card header p{
float:left;
width:auto;
margin:0;
padding:0;
text-align:left;
}

.product .card header .item_number{
float:left;
width:auto;
height:2rem;
margin:0 .25rem 0 0 !important;
padding:.25rem 0;
display:flex;
justify-content:center;
align-items:center;

& p{
float:left;
width:100%;
font-size:var(--fs-xs);
color:var(--clr-primary-300);
}

}


.product .card header .icon_wrapper{
float:left;
width:auto;
}

.product .card header .icon{
float:left;
width:2rem;
height:2rem;
border-radius:.25rem;
margin:0 0 0 .25rem;
padding:.15rem;
background:var(--bgr-gray-300);
}

.product .card header .icon:first-of-type{
margin:0;
padding:.15rem;
}

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

.product .card header .icon{
width:1.85rem;
height:1.85rem;
background:none;
margin:0;
padding:0;
}

.product .card header .icon:first-of-type{
margin:0;
padding:0;
}

}


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

.product.detail .card main{
height:var(--product-main-height);
}

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

.product .card main{
height:auto;
}

.product.detail .card main{
height:var(--product-main-height);
}

}

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

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

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

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

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

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


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

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

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

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

}

.product .card main .content{
float:left;
width:100%;
text-align:left;
margin:0;
padding:0;

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

}

.product .card footer{
float:left;
width:100%;
border-radius:.25rem;
margin:0;
padding:.5rem;
background:var(--bgr-gray-300);
display:flex;
justify-content:end;
align-items:start;
flex-direction:column;
height:auto;
min-height:11rem;
position:relative;
}

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

.product .card footer{
display:none;
}

.product.detail footer{
display:block;
}

}


.product .card footer .box:first-child{
float:left;
width:100%;
margin:0 .25rem 0 0;
padding:0;
}

.product .card footer .box:last-child{
float:left;
width:100%;
margin:0 0 0 .25rem;
padding:0;
}

.product .card footer p{
float:left;
width:100%;
margin:0;
padding:0;
text-align:center;
}

.product .item_number{
float:left;
width:100%;

& p{
font-size:var(--fs-xs);
}

}

.product .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,
.btn_quickview{
float:left;
border:none;
border-radius:.25rem;
width:100%;
height:2.5rem;
margin:0;
padding:.5rem;
font-weight:bold;
font-size:var(--fs-p);
color:var(--clr-primary-300);
background:var(--bgr-accent-300);
cursor:pointer;
}

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

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

.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{
float:left;
width:100%;
display:flex;
justify-content:space-between;
align-items:end;
position:relative;
}

.product_order .box{
clear:both;
float:left;
width:100%;
}


.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:.25rem;
}

.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:.25rem;
}

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

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


.status_wrapper{
position:absolute;
top:-2.5rem;
left:-.65rem;
z-index:20;
}

/* Status > Global */
.status_wrapper .status{
width:3.85rem;
height:3.85rem;
}

.status_wrapper .status{
z-index:2;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
transform:rotate(-15deg);
}

.status_wrapper .status p{
font-family:var(--primary-font-family);
color:var(--clr-primary-100);
font-size:var(--fs-m);
font-weight:bold;
text-transform:uppercase;
line-height:1rem;
margin:0;
padding:0;
}

/* Status > Top */
.status_wrapper .status.top{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-400);
}

/* Status > Hot */
.status_wrapper .status.hot{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-400);
}

/* Status > New */
.status_wrapper .status.new{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-500);
}

/* Status > Sale */
.status_wrapper .status.sale{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-400);
}

/* Status > Remainder */
.status_wrapper .status.remainder{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-400);
}

/* Status > Soldout */
.status_wrapper .status.soldout{
border:var(--bgr-gray-100) 3px solid;
background:var(--bgr-accent-300);
}