#basket_icon{
background:url('/assets/img/basket/off.svg') no-repeat center center;
}

#basket_icon .on{
background:url('/assets/img/basket/on.svg') no-repeat center center;
}


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

#basket_icon,
#basket_icon.on{
background-size:90%;
}

}


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

#basket_icon{
float:right;
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
cursor:pointer;
margin:0 .25rem 0 0;
padding:.5rem;
}

#basket_icon p,
#basket_icon p a{
float:left;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
overflow:hidden;
z-index:2;
}

}


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

#basket_icon{
float:right;
display:block;
width:3.75rem;
height:3.75rem;
position:relative;
margin:.75rem .75rem 0 0;
padding:0;
}

#basket_icon p,
#basket_icon p a{
float:left;
width:3.75rem;
height:3.75rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
overflow:hidden;
z-index:2;
}

#basket_icon,
#basket_icon.on{
background-size:90%;
}

}



#basket_icon p span{
display:block;
width:100%;
margin:0 0 0 10em;
padding:0;
}

#basket_icon .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1.5rem;
height:1.5rem;
background:var(--bgr-accent-400);
border:var(--bgr-accent-300) 2px solid;
position:absolute;
top:-.35rem;
right:-.35rem;
border-radius:50%;
z-index:1;
}

#basket_icon .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
font-weight:bold;
text-align:center;
color:var(--clr-primary-300);
}



#basket_icon .info.hide{
display:none;
}


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

.basket{
float:left;
width:100%;
margin:.5rem 0;
padding:0;
}

}
*/

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

.basket{
float:left;
width:100%;
margin:.5rem 0;
padding:0;
}

}
*/

:root{
--basket-header-height:1.75rem;
--basket-price-height:100%;
}


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

.basket{
float:left;
width:100%;
margin:1rem auto;
padding:0;
}

}

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

.basket{
float:left;
width:calc(100% - 2rem);
margin:1rem;
padding:0;
}

}

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

.basket{
float:left;
width:100%;
margin:1rem auto;
padding:0;
}

}



.basket .basket_delete_wrapper{
float:right;
margin:.25rem 0 0 0;
}

.basket .button.icon,
.basket .button.icon:hover{
display:block;
margin:0;
padding:0;
border:none;
}

.basket .btn_basket_item_delete.icon{
width:1.75rem;
height:1.75rem;
background:url('/assets/img/basket/btn/delete/icon/off.svg') no-repeat center center;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/basket/btn/delete/icon/on.svg') no-repeat center center;
}

}



.basket .btn_basket_item_delete.icon span,
.basket .btn_basket_item_delete.icon strong{
display:none;
}


.basket .btn_basket_item_amount.icon{
width:2rem;
height:2rem;
background:url('/assets/img/basket/btn/update/icon/off.svg') no-repeat center center;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/basket/btn/update/icon/on.svg') no-repeat center center;
}

}

.basket .btn_basket_item_amount.icon span,
.basket .btn_basket_item_amount.icon strong{
display:none;
}


.basket_insert_wrapper,
.basket_update_wrapper{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:.25rem 0;
padding:0;
}

.basket_insert,
.basket_update{
width:3rem;
height:3rem;
margin:.25rem 0;
padding:.25rem;
background:var(--bgr-gray-100);
border-radius:50%;
}

.basket_insert .icon,
.basket_update .icon{
width:100%;
height:100%;
background:url('/assets/img/basket/off.svg') no-repeat top left;
animation: tilt-shaking .5s ease-out forwards;
}





/* Header */
.basket .header{
float:left;
width:100%;
min-height:var(--basket-header-height);
margin:0;
padding:0;
background:var(--bgr-gray-100);
}

.basket .header p{
margin:.25rem;
padding:0;
}

.basket .header .left{
float:left;
border:0;
}

.basket .header .right{
float:right;
border:0;
}

.basket .header .amount,
.basket .header .net,
.basket .header .gross,
.basket .header .vat{
border:0;
}

.basket .header .amount{
float:left;
border-left:var(--brd-primary-100) 1px solid;
min-height:var(--basket-header-height);
}

.basket .header .gross{
float:left;
border-left:var(--brd-primary-100) 1px solid;
min-height:var(--basket-header-height);
}

.basket .header .subtotal.gross{
float:left;
border-left:var(--brd-primary-100) 1px solid;
min-height:var(--basket-header-height);
}

.basket .header .vat{
float:left;
border-left:var(--brd-primary-100) 1px solid;
min-height:var(--basket-header-height);
}

/* Small view */
@media screen and (max-width: 45rem){

.basket .header .vat{
display:none;
}

.basket .row .vat{
display:none;
}

.basket .footer .vat{
display:none;
}

}

/* Row */
.basket .row{
clear:both;
float:left;
width:100%;
border-top:var(--brd-primary-100) 1px solid;
position:relative;
margin:0;
padding:.35rem 0 0 0;
border-radius:0;
}

.basket .row:nth-child(even){
background:var(--bgr-gray-200);
}

.basket .row:nth-child(odd){
background:var(--bgr-gray-100);
}

.basket .row p{
float:left;
width:auto;
margin:0;
padding:0;
}

.basket .row.alert{
border:var(--status-alert-border-color) 1px solid;
}

.basket .row .sort_wrapper{
float:left;
width:2.25rem;
height:1.75rem;
}

.basket .row .sort{
display:flex;
justify-content:center;
align-items:center;
min-width:1.5rem;
height:1.5rem;
position:absolute;
top:.5rem;
left:.15rem;
background:var(--bgr-gray-500);
border:var(--brd-primary-50) 1px solid;
border-radius:50%;
z-index:1;
}

.basket .row .sort p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-xs);
text-align:center;
color:var(--clr-primary-300)
}

.basket .row .item_number{
float:left;
width:100%;
text-align:left;

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

}

.basket .row .small{
clear:both;
float:left;
width:auto;
font-size:var(--fs-xs);
}

.basket .row .title{
float:left;
width:100%;
text-align:left;
font-family:var(--primary-font-family);
}

.basket .row .title > *{
margin:0;
padding:0;
}

.basket .row .title .ol{
font-size:var(--fs-s);
margin:0 0 .25rem 0;
}

.basket .row .title .hl{
font-size:var(--fs-m);
}

.basket .row .title .sl{
font-size:var(--fs-s);
margin:.25rem 0 0;
}


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

.basket .header{
display:none;
}

.basket .row .media{
float:left;
width:100%;
margin:.5rem 0;
padding:0;
height:auto;

& img{
display:block;
}

}

.basket .row .title,
.basket .row .content{
clear:both;
float:left;
width:100%;
margin:0 0 .25rem 0;
padding:0;
}

.basket .left_row{
float:left;
width:100%;
margin:0;
padding:0 .25rem;
}

.basket .right_row{
float:left;
width:100%;
margin:0;
padding:0 .25rem;
}

.basket .right_row form{
float:right !important;
width:auto;
margin:0;
padding:0;
}

}

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

.basket .row .media{
float:left;
width:12rem;
margin:1rem .25rem;
padding:0;
height:auto;

& img{
display:block;
}

}

.basket .row .title,
.basket .row .content{
clear:both;
float:left;
width:100%;
margin:0 0 .25rem 0;
padding:0;
}

}


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

.basket .left_row{
float:left;
width:100%;
margin:0;
padding:0 .25rem;
}

.basket .right_row{
float:right;
margin:0;
padding:0;
}

}

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

.basket .left_row{
float:left;
width:100%;
margin:0;
padding:0 .25rem;
}

.basket .right_row{
float:right;
margin:0;
padding:0;
}

}

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

.basket .left_row{
float:left;
width:45% !important;
margin:0;
padding:0 .25rem;
}

.basket .right_row{
float:right;
margin:0;
padding:0;
}

}


.basket .left_row .title{
text-align:left;
}

.basket .left_row .content{
text-align:left;
}


.basket .left_row .content ul.list{
float:left;
width:100%;
padding:0;
margin:.25rem 0;
list-style:none;
}

.basket .left_row .content ul.list li{
margin:.15rem;
padding:0 0 0 1rem;
display:inline-block;
font-size:var(--fs-xs);
}

.basket .left_row .content ul.list li:before{
display:inline-block;
content:'';
height:.5rem;
width:.75rem;
background:url('/img/icon/list.svg') no-repeat top left;
}



.basket .right_row form{
float:left;
margin:.35rem .5rem .5rem 0;
padding:0;
}

.basket .right_row fieldset{
float:left;
margin:0;
padding:0;
border:none;
}

.basket .right_row .box_amount{
float:left;
width:5rem;
margin:0 .75rem 0 0;
padding:0;
}


.basket .right_row .box_amount .amount{
float:left;
width:5rem;
padding:0 .25rem;
}


.basket .item_message{
float:left;
width:100%;
}

.basket .item_message .textarea{
float:left;
width:100%;
height:5rem;
}

.basket .item_message button{
margin:.5rem 0;
padding:.35rem;
font-size:var(--fs-xs);
}


/* Date Input */
.basket .item_datetime{
float:left;
width:100%;
max-width:32rem;
margin:.5rem 0;
padding:.25rem;
background:var(--bgr-gray-100);
border-radius:.25rem;
}

.basket .item_datetime .header{
float:left;
width:100%;
margin:0;
padding:0;
background:none;
display:block;
}

.basket .item_datetime .header p{
float:left;
width:100%;
margin:.25rem 0 0 0;
padding:0;
}

.basket .item_datetime .content{
float:left;
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:flex-end;
align-items:flex-end;
}

.basket .item_datetime .box{
float:left;
width:100%;
margin:0;
padding:.25rem 0;
}

.basket .item_datetime .box:first-of-type{
margin:0 .5rem 0 0;
padding:.25rem 0;
}

.basket .item_datetime .box:last-of-type{
margin:0 0 0 .5rem;
padding:.25rem 0;
}

.basket .item_datetime .box label{
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-xs);
}

.basket .item_datetime .box .select,
.basket .item_datetime .box input{
display:inline-block;
width:100%;
height:2rem;
margin:0;
padding:.25rem;
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--form-input-bgr-primary-300);
color:var(--form-input-clr-primary-300);
font-family:var(--primary-font-family);
font-size:var(--fs-xs);
border-radius:.25rem;

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

.basket .item_datetime .box input[type=date]{
font-family:var(--primary-font-family);
font-size:var(--fs-xs);
}

.basket .item_datetime .footer{
float:left;
width:100%;
margin:0;
padding:0;
}

.basket .item_datetime .footer p{
float:left;
width:100%;
margin:0;
padding:0;
}


.basket .net,
.basket .gross,
.basket .vat{
float:left;
display:flex;
justify-content:flex-end;
align-items:center;
margin:0;
padding:0 .25rem;
min-height:var(--basket-price-height);
}

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

.basket .price{
float:left !important;
width:auto !important;
margin:.45rem 0 0 0 !important;
padding:0 !important;
}

.basket .price .net,
.basket .price .gross,
.basket .price .vat{
float:left;
display:flex;
justify-content:flex-start;
align-items:center;
margin:0 .5rem 0 0;
padding:0;
min-height:var(--basket-price-height);
}

.basket .price .gross:not(.subtotal){
display:none;
}

.basket .price .vat{
display:none;
}

}

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

.basket .price{
float:left !important;
width:auto !important;
margin:.35rem 0 0 0 !important;
padding:0 !important;
}

.basket .net,
.basket .gross,
.basket .vat{
min-width:6.5rem;
}

}

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

.basket .price{
float:right !important;
width:auto !important;
margin:.25rem 0 0 0 !important;
padding:0 !important;
}

.basket .net,
.basket .gross,
.basket .vat{
min-width:7rem;
}

}

.basket .row .amount,
.basket .row .update,
.basket .row .delete,
.basket .row .net,
.basket .row .gross,
.basket .row .vat{
min-height:2rem;
}

/*
.basket .row .subtotal.gross{
border-left:var(--brd-gray-500) 1px solid;
border-right:var(--brd-gray-500) 1px solid;
margin:0 1px 0 0;
}
*/

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

.basket .amount p,
.basket .update p,
.basket .delete p{
font-size:var(--fs-s);
}

.basket .net p,
.basket .gross p,
.basket .vat p{
font-size:var(--fs-s);
}

.basket .footer{
float:left;
width:100%;
padding:.25rem 0;
background:var(--bgr-gray-200);
}


.basket .footer .subtotal,
.basket .footer .discount,
.basket .footer .delivery,
.basket .footer .shipping,
.basket .footer .registration{
clear:both;
float:left;
width:100%;
border-top:var(--brd-primary-100) 1px solid;
}

.basket .footer .subtotal,
.basket .footer .discount,
.basket .footer .delivery,
.basket .footer .shipping,
.basket .footer .registration,
.basket .footer .total.vat,
.basket .footer .total{
display:flex;
justify-content:flex-end;
}


.basket .footer .subtotal .label,
.basket .footer .discount .label,
.basket .footer .delivery .label,
.basket .footer .shipping .label,
.basket .footer .registration .label,
.basket .footer .total.vat .label,
.basket .footer .total .label{
float:left;
width:auto;
padding:0 .25rem;
}

.basket .footer .subtotal .label p,
.basket .footer .discount .label p,
.basket .footer .delivery .label p,
.basket .footer .shipping .label p,
.basket .footer .registration .label p,
.basket .footer .total.vat .label p,
.basket .footer .total .label p{
text-align:right;
font-size:var(--fs-s);
}

.basket .footer .subtotal .value,
.basket .footer .discount .value,
.basket .footer .delivery .value,
.basket .footer .shipping .value,
.basket .footer .registration .value,
.basket .footer .total.vat .value,
.basket .footer .total .value{
border:0;
}

.basket .footer .subtotal .value p,
.basket .footer .discount .value p,
.basket .footer .delivery .value p,
.basket .footer .shipping .value p,
.basket .footer .registration .value p,
.basket .footer .total.vat .value p,
.basket .footer .total .value p{
text-align:right;
font-size:var(--fs-s);
}

/*
.basket .footer .gross{
border-left:2px solid var(--brd-gray-500);
border-right:2px solid var(--brd-gray-500);
}
*/

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

.basket .footer .total.vat{
display:none;
}

}

.basket .footer .total{
clear:both;
float:left;
width:100%;
border-top:var(--brd-primary-100) 1px solid;
}

.basket .footer .total:not(.vat){
border-top:var(--brd-primary-100) 4px double;
}

.basket .footer .total.down,
.basket .footer .total.final{
border-top:0;
}