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

}



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

:root{
--search-search-top:2.5rem;
--search-search-border-radius:0;
--search-search-width:100%;
--search-search_bg-width:100%;
--search-search-height:80dvw;
--search-search-max-height:45rem;
}


#search{
display:none;
}

#search.show{
display:block;
position:relative;
z-index:2000;
background:var(--bgr-top-300);
}

#search .search_bg{
width:var(--search-search_bg-width);
}

}

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

:root{
--search-search-top:2.95rem;
--search-search-border-radius:.25rem;
--search-search-width:30rem;
--search-search_bg-width:30rem;
--search-search-height:80dvw;
--search-search-max-height:45rem;
}

#search{
display:block;
position:relative;
z-index:2000;
width:100%;
height:100%;
}

#search_form{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}

#search .search_bg{
width:var(--search-search_bg-width);
box-shadow:var(--box-shadow-darker);
}

}


#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.btn_search{
float:left;
background:transparent;
border:0;
border-radius:0;
background:var(--form-btn-bgr-default);
border-left:var(--brd-primary-50) 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.btn_search:hover{
color:var(--form-input-clr-primary-300);
background:var(--form-btn-bgr-default);
border-left:var(--brd-primary-50) 1px solid;
}

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

#search.true .search_bg{
position:fixed;
left:50%;
transform:translate(-50%, 0);
}

/* 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:before{
display:none;
}

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

#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:.25rem;
display:flex;
justify-content:flex-end;
align-items:center;
}

#top #search .footer button{
float:right;
/*outline:#80ff00 1px solid;*/
}

#top #search .footer p{
float:right;
width:auto;
margin:0 0 .15rem 0;
padding:.25rem;
/*outline:#ff0080 1px solid;*/
}

#top #search .footer p a:after{
content: '';
margin:0 0 0 .25rem;
padding:0 1rem 0 0;
background:url('/assets/img/icon/arrow.svg') no-repeat right center;
background-size:90%;
}


/* Search > Last search */
#top #search #search_last_search{
position:absolute;
top:var(--search-search-top);
width:var(--search-search-width);
height:14.5rem;
background:var(--bgr-gray-100);
border:var(--brd-primary-50) 1px solid;
border-radius:var(--search-search-border-radius);
box-shadow:var(--box-shadow-default);
z-index:2000;
display:none;
}

#top #search #search_last_search{
top:4.55rem;
}

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

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


/* Search > Preview */
#top #search #search_preview_search{
position:absolute;
top:var(--search-search-top);
width:var(--search-search-width);
height:calc(var(--search-search-height) - 5rem);
max-height:var(--search-search-max-height);
background:var(--bgr-gray-100);
border:var(--brd-primary-50) 1px solid;
border-radius:var(--search-search-border-radius);
box-shadow:var(--box-shadow-default);
z-index:2000;
display:none;
}

#top #search #search_preview_search{
top:4.55rem;
}

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


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

#search_preview_search .content{
float:left;
width:var(--search-search-width);
height:calc(var(--search-search-height) - 10rem);
max-height:calc(var(--search-search-max-height) - 8rem);
/*outline:#ff0080 1px solid;*/
}

}

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

#search_preview_search .content{
float:left;
width:var(--search-search-width);
height:calc(var(--search-search-height) - 10rem);
max-height:calc(var(--search-search-max-height) - 8rem);
/*outline:#ff0080 1px solid;*/
}

}

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

#search_preview_search .content{
float:left;
width:var(--search-search-width);
height:calc(var(--search-search-height) - 10rem);
max-height:calc(var(--search-search-max-height) - 8rem);
/*outline:#ff0080 1px solid;*/
}

}

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

#search_preview_search .content{
float:left;
width:var(--search-search-width);
height:calc(var(--search-search-height) - 9.7rem);
max-height:calc(var(--search-search-max-height) - 5rem);
/*outline:#ff0080 1px solid;*/
}

#search_preview_search .product:not(.detail){
float:left;
width:var(--search-search-width);
max-width:100%;
margin:0 0 .5rem 0;
padding:.25rem;
scroll-snap-align:start;
scroll-margin-top:0;
/*outline:#0080ff 1px solid;*/
}

}



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

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

#search_preview_search .product:not(.detail) .card main{
clear:both;
float:left;
width:100%;
min-height:var(--product-main-min-height);
height:var(--product-main-height);
margin:0 !important;
padding:0 !important;
/*outline:#ff0000 1px solid;*/
}

#search_preview_search .product:not(.detail) .card main .content{
margin:0 !important;
padding:0 !important;
min-height:auto;
height:auto;
max-height:max-content;
/*outline:#00ff00 1px solid;*/
}

#search_preview_search .product:not(.detail) .media-wrapper{
width:60%;
margin:0 auto;
/*outline:#00ff00 1px solid;*/
}

#search_preview_search .product:not(.detail) .card footer{
float:left;
width:100%;
}