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

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


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

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

}



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

#search_icon{
display:none;
}

}



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

#search{
display:none;
}

#search.show{
display:block;
}

}

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

#search{
display:block;
position:relative;
z-index:2000;
}

}


#search .search_bg label{
display:none;
}

#search .search_bg input{
float:left;
background:transparent;
border:0;
color:var(--form-input-clr-primary-300);
padding:.25rem 2.5rem .25rem .5rem;
width:calc(100% - 5rem);
height:2.5rem;
}

#search .search_bg button{
float:left;
background:transparent;
border:0;
border-radius:0;
background:var(--form-btn-bgr-default);
border-left:var(--form-input-brd-primary-300) 1px solid;
color:var(--form-input-clr-primary-300);
margin:0;
padding:0;
width:5rem;
height:2.5rem;
font-size:var(--fs-s);
}

#search .search_bg button:hover{
color:var(--form-input-clr-primary-300);
background:var(--form-btn-bgr-default);
border-left:var(--form-input-brd-primary-300) 1px solid;
}

#search .search_bg{
float:left;
width:100%;
min-width:23rem;
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--form-input-bgr-primary-300) url('/assets/img/icon/search.svg') no-repeat calc(100% - 5rem) 0;
border-radius:.25rem;
}


/* Search > Global */
#top #search .header{
float:left;
width:100%;
height:2.25rem;
margin:0;
padding:0;
position:sticky;
top:0;
left:0;
display:flex;
justify-content:flex-start;
align-items:end;
}

#top #search .header h2{
float:left;
width:auto;
margin:0 0 0 .75rem;
padding:0;
}

#top #search .content{
float:left;
width:100%;
margin:0;
padding:.5rem;
overflow:auto;
scrollbar-width:thin;
scroll-snap-type:y mandatory;
}

#top #search .content ul{
float:left;
width:100%;
margin:0;
padding:0;
}

#top #search .content ul li{
float:left;
width:100%;
}

#top #search .content ul li .btn_last_search{
float:left;
width:100%;
margin:0 0 .5rem 0;
padding:.35rem .5rem;
border:var(--brd-gray-500) 1px solid;
background:var(--bgr-gray-500);
border-radius:.25rem;
}

#top #search .content ul li .btn_last_search:hover{
background:var(--btn-accent-405);
color:var(--clr-accent-405);
}

#top #search .footer{
float:left;
width:100%;
height:2.25rem;
margin:0;
padding:0 .5rem;
position:sticky;
top:0;
bottom:0;
display:flex;
justify-content:flex-end;
align-items:center;
}


#top #search .footer button{
float:right;
height:1.75rem;
}

#top #search .footer p{
float:right;
width:auto;
outline:#ff0080 1px solid;
height:1.75rem;
}


/* Search > Last search */
#top #search #search_last_search{
position:absolute;
top:6rem;
width:23rem;
height:14.5rem;
background:var(--bgr-gray-100);
border-radius:.25rem;
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0,0,0,.25);
z-index:2000;
display:none;
}

#top.true #search #search_last_search{
top:5rem;
}

#top #search #search_last_search .content{
height:10rem;
}



/* Search > Preview */
#top #search #search_preview_search{
position:absolute;
top:6rem;
width:23rem;
height:calc(80vh - 5rem);
max-height:30rem;
background:var(--bgr-gray-100);
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0,0,0,.25);
z-index:2000;
display:none;
}

#top.true #search #search_preview_search{
top:5rem;
}

#search_preview_search .content{
height:calc(80vh - 9.7rem);
max-height:calc(30rem - 5rem);
}

/*
#search_preview_search .header{
float:left;
width:100%;
height:2.35rem;
margin:0;
padding:0;
text-align:center;
position:sticky;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
}

#search_preview_search .header p{
float:left;
width:100%;
margin:0;
padding:0;
}


#search_preview_search .content{
float:left;
width:100%;
height:calc(80vh - 9.7rem);
max-height:calc(30rem - 5rem);
margin:0;
padding:.5rem 0;
overflow:auto;
scrollbar-width:thin;
scroll-snap-type:y mandatory;
}

#search_preview_search .footer{
float:left;
width:100%;
height:2.35rem;
margin:0;
padding:0;
position:sticky;
top:0;
bottom:0;
display:flex;
justify-content:center;
align-items:center;
}

#search_preview_search .footer p{
float:left;
width:100%;
margin:0;
padding:0;
}
*/


#search_preview_search .content .product{
float:left;
width:100%;
margin:0 0 .5rem 0;
padding:.25rem;
scroll-snap-align:start;
scroll-margin-top:0;
}


#search_preview_search .content .product .card{
float:left;
width:100%;
margin:0;
padding:.5rem;
display:flex;
justify-content:space-between;
align-items:start;
flex-direction:column;
}


#search_preview_search .content .product .card header{
all:unset;
float:left;
width:100%;
margin:0;
padding:0;
outline:#ff0080 1px solid;
text-align:left;
}

#search_preview_search .content .product .card header .left{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
outline:#ff0080 1px solid;
}

#search_preview_search .content .product .card header .headline{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
outline:#ff0 1px solid;
}


#search_preview_search .content .product .card main{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
outline:#00ff00 1px solid;
}


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

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

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

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

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

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

#search_preview_search .content .product .card main figure picture{
float:left;
width:100%;
height:12rem;
margin:0;
padding:0;
outline:#ff0000 1px solid !important;
}


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

#search_preview_search .content .product .card main .content p{
float:left;
width:100%;
margin:0;
padding:0 0 .25rem 0;
text-align:left;
}

#search_preview_search .content .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;
}


#search_preview_search .content .product .card footer .box{
float:left;
width:100%;
}

#search_preview_search .content .product .card footer .box:first-child{
margin:0 .25rem 0 0;
padding:0;
}

#search_preview_search .content .product .card footer .box:last-child{
margin:0 0 0 .25rem;
padding:0;
}

#search_preview_search .content .product .card footer .box.one-child{
margin:0;
padding:0;
}

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