/* Drawer container */
.search-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 600px;
    max-width: 85%;
    height: 97vh;
    background: #fff;
    box-shadow: -2px 0 15px rgba(0,0,0,0.15);
    z-index: 1002;
    transition: right 0.35s ease;
    display: flex;
	justify-items:center;
  	padding:20px;
}
.search-drawer.active {
    right: 10px;	
		top:10px;
			
}
/* Submit button */
.search-drawer button[type="submit"] {
    display: none; 
}

.search-overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1001;
    display: none;
}
.search-overlay-bg.active {
    display: block;
}
#search-drawer, .search-drawer.active{
	display:flex;
	gap:20px;

}
#search-drawer .search-drawer-content{
	width:100%;
}
.drawer-search-fieldwrap #drawer-search-input,.drawer-search-fieldwrap #drawer-search-input:focus {
	width:80%;
	border:none;
	outline:none;
 border-bottom:1px solid;
	border-radius:0px;
	font-size:13px;
}
.drawer-search-fieldwrap #drawer-search-input::placeholder{
	font-family: var(--main-font, 'trio');
	text-transform:uppercase;
}
.close-button-wrap .search-close{
	border:none;
	font-size:10px;
	padding:4px;
	position:absolute;
	top:10;
	right:15px;
font-weight:500;
font-family:var(--main-font);
color:#313131;
background:none;
}

/* === Scrollbar Styling (WebKit browsers: Chrome, Safari, Edge) === */

.drawer-search-suggestions::-webkit-scrollbar {
  width: 8px; /* scrollbar width */
}


.drawer-search-suggestionst::-webkit-scrollbar-track {
  background: #f1f1f1;  /* track color */
  border-radius: 10px;
}

.drawer-search-suggestions::-webkit-scrollbar-thumb {
  background-color: #852A2A; 
  border-radius: 10px;
}

.drawer-search-suggestionst::-webkit-scrollbar-thumb:hover,
.drawer-search-suggestionst::-webkit-scrollbar-thumb:hover {
  background-color: #A29C8E;
}

/* === Firefox Support === */
.drawer-search-suggestions {
  scrollbar-width: thin;              
  scrollbar-color: #A29C8E #f1f1f1;   
}

/* Suggestions box */

.drawer-search-suggestions {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.suggestion-list {
    margin: 0;
    padding: 0;
}

/* Item */
.suggestion-item {
    display: flEx;
    align-items: center;
    padding: 19px 20px;
   
    cursor: pointer;
    transition: background .12s ease;
}
.suggestion-item .suggestion-link { 
	display:flex;
	width:100%; 
	text-decoration:none;
	font-family: var(--main-font, 'trio');
	text-transform:uppercase;
	font-size:10px!important;
	color:#313131; 
	align-items:center; 
}

.suggestion-item:hover,
.suggestion-item.focused {
    background: #fafafa;
}

/* Thumb */
.suggestion-thumb {
    width: 80px;
    height: 80px;
    margin-right: 12px;
    overflow: hidden;
}
.suggestion-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Meta */
.suggestion-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.suggestion-title {
    font-size: 11px;
    margin-bottom: 6px;
	font-family: var(--main-font, 'trio');
	font-weight:500;
}
.suggestion-price {
    font-size: 12px;
    color: #313131;
	font-family:"Montserrat",sans-serif;
	font-weight:500;
}

/* small states */
.suggestion-loading,
.suggestion-empty,
.suggestion-error {
    padding: 12px;
    color: #666;
}


/* Show all results button */
.suggestion-show-all {
    padding: 12px 6px 10px;
    text-align: center;
}
.suggestion-show-all a {
    display: inline-block;
    padding: 14px;
    font-family: var(--main-font, 'trio');
	font-size:10px;
	text-transform:uppercase;
    border: 1px solid #c6c2c0;
    text-decoration: none;
    color: #111;
    font-weight: 600;
    background: #fff;
    transition: background .12s ease, border-color .12s ease;
}
.suggestion-show-all a:hover {
    background: #313131;
    border-color: #ddd;
	color:#c6c5c0;
}

/* Prevent background scroll when drawer open */
html.drawer-open,
body.drawer-open {
  height: 100%;
  overflow: hidden;
}