#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 Only */
@media screen and (max-width: 45rem){

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

.check_out_position ol li:first-of-type{
border-radius:.25rem .25rem 0 0;
}

.check_out_position ol li:last-of-type{
border-radius:0 0 .25rem .25rem;
}

.check_out_position ol li:only-of-type{
border-radius:var(--brd-radius-25);
}

.check_out_position ol li{
float:left;
width:100%;
text-align:left;
margin:.15em 0;
padding:0;
list-style:none;
vertical-align:baseline;
background:var(--bgr-gray-200);
border:var(--brd-gray-200) 1px solid;
}

.check_out_position ol li.on{
font-weight:bold;
background:var(--bgr-gray-300);
border:var(--brd-gray-300) 1px solid;
}

.check_out_position ol li p{
display:block;
width:100%;
margin:0;
padding:.25rem;
}

}

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

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

.check_out_position ol li:first-of-type{
border-radius:.25rem 0 0 .25rem;
}

.check_out_position ol li:last-of-type{
border-radius:0 .25rem .25rem 0;
}

.check_out_position ol li:only-of-type{
border-radius:var(--brd-radius-25);
}

.check_out_position ol li{
float:left;
width:100%;
margin:.45em 0 0 0;
padding:0;
list-style:none;
vertical-align:baseline;
background:var(--bgr-gray-200);
border:var(--brd-gray-200) 1px solid;
}

.check_out_position ol li.on{
font-weight:bold;
background:var(--bgr-gray-300);
border:var(--brd-gray-300) 1px solid;
}

.check_out_position ol li p{
display:block;
width:100%;
margin:.25rem 0 0 .25rem;
padding:.25rem;
vertical-align:baseline;
}


}


: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:var(--brd-radius-25);
}

.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:var(--brd-radius-25);

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