/* Header search. A pill field with live suggestions; full width on mobile. */

.mb-search{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.mb-search-form{position:relative;display:flex;align-items:center;width:100%;
background:#fff;border:1.5px solid var(--mb-terracotta);border-radius:999px;
transition:border-color .18s ease,box-shadow .18s ease}
.mb-search-form:focus-within{border-color:var(--mb-cocoa);
box-shadow:0 0 0 3px rgba(154,104,89,.14)}

.mb-search-form input.mb-search-input,
.mb-search-form input[type=search].mb-search-input{
flex:1 1 auto;min-width:0;width:100%;
border:0!important;outline:none;background:transparent!important;
box-shadow:none!important;-webkit-appearance:none;appearance:none;
padding:0 6px 0 18px;margin:0;height:40px;line-height:40px;
font-size:14.5px;font-family:inherit;font-weight:400;
color:var(--mb-ink);border-radius:999px}
.mb-search-input::placeholder{color:var(--mb-muted);opacity:1}
.mb-search-form input.mb-search-input:focus,
.mb-search-form input[type=search].mb-search-input:focus{
outline:none!important;box-shadow:none!important;border:0!important;
background:transparent!important;color:var(--mb-ink)}
.mb-search-input::-webkit-search-cancel-button{-webkit-appearance:none}

.mb-search-submit{flex:0 0 auto;width:38px;height:38px;margin-right:2px;padding:0;
border:0;border-radius:50%;background:var(--mb-cocoa);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background-color .2s ease}
.mb-search-submit svg{width:17px;height:17px;display:block;
stroke:#f4ebe0!important;fill:none!important;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Named for every state so the theme's button rules cannot repaint it. */
.mb-search-submit:hover,.mb-search-submit:active{background:var(--mb-cocoa-deep)}
.mb-search-submit:focus:not(:focus-visible){background:var(--mb-cocoa)}
body.mb-kb .mb-search-submit:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(154,104,89,.45)}

.mb-search-form.is-loading .mb-search-submit{opacity:.6}

/* suggestions */
.mb-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1300;
background:#fff;border:1px solid var(--mb-line);border-radius:12px;
box-shadow:0 12px 30px -10px rgba(71,35,30,.22);overflow:hidden;
max-height:min(420px,70vh);overflow-y:auto}
.mb-search-results[hidden]{display:none}
.mb-search-list{list-style:none;margin:0;padding:6px}
.mb-search-list li{margin:0}
.mb-search-list a{display:flex;align-items:center;gap:11px;padding:8px 10px;
border-radius:9px;text-decoration:none;transition:background-color .15s ease}
.mb-search-list a:hover,.mb-search-list a:focus{background:var(--mb-cream-hi)}
.mb-search-thumb{flex:0 0 auto;width:46px;height:46px;line-height:0;
border-radius:8px;overflow:hidden;border:1px solid var(--mb-line);background:#fff}
.mb-search-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mb-search-text{flex:1 1 auto;min-width:0}
.mb-search-name{display:block;font-size:13.8px;line-height:1.4;color:var(--mb-ink);
font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-search-price{display:block;margin-top:2px;font-size:13px;font-weight:600;
color:var(--mb-terracotta-ink)}
.mb-search-price del{color:var(--mb-muted);font-weight:400;margin-right:5px}
.mb-search-empty{margin:0;padding:18px 16px;text-align:center;
font-size:14px;color:var(--mb-muted)}
.mb-search-more{display:block;margin:8px 6px 6px;padding:12px 16px;text-align:center;
font-size:14px;font-weight:600;color:#f4ebe0;text-decoration:none;
background:var(--mb-cocoa);border-radius:10px;
box-shadow:0 3px 8px rgba(59,46,42,.18);
transition:background-color .2s ease,transform .15s ease}
.mb-search-more:hover,.mb-search-more:focus{background:var(--mb-cocoa-deep,#47231e);color:#f4ebe0;transform:translateY(-1px)}

/* desktop placement: the field fills the space between menu and icons */
@media (min-width:1024px){
	.mb-search.is-mobile{display:none}

	/* Kadence lays the row out as 1fr auto 1fr, so the middle column is only as
	   wide as its content. Reversing that gives the field the free space while
	   the logo, menu and icons stay their natural size. */
	#masthead .site-main-header-inner-wrap.site-header-row-center-column{
	grid-template-columns:minmax(0,1fr) auto auto}
	#masthead .site-header-main-section-left{width:100%;min-width:0}
	/* The empty left-centre slot would otherwise eat the free space. */
	#masthead .site-header-main-section-left > .site-header-section-left-center{flex:0 0 auto}
	#masthead .site-header-main-section-left > .site-header-item{margin-right:0}
	#masthead .site-header-main-section-center{flex:0 0 auto}
	.mb-search.is-desktop{flex:0 0 340px;width:340px;max-width:340px;margin:0}

	#masthead .site-header-main-section-center{min-width:0;justify-content:flex-end}
	.mb-search.is-desktop .mb-search-form{max-width:340px;width:100%}

	/* Menu moves in beside the logo and reads a step smaller. */
		/* The menu shares the left column with the logo. Auto margins centre it in
	   whatever space is left between the logo and the search field, so adding or
	   removing an item keeps it centred with no numbers to update. */
	#masthead .site-header-main-section-left > .site-header-item-main-navigation{
	margin-left:auto!important;margin-right:auto!important}
	/* The empty centre slot sits after the menu and would pull it left. */
	#masthead .site-header-main-section-left > .site-header-main-section-left-center:empty{display:none}
	#masthead .header-navigation .header-menu-container > ul > li > a{
	font-size:16.5px;font-weight:600;white-space:nowrap}
	#masthead .site-header-main-section-left{gap:0}
	#masthead .header-navigation .header-menu-container > ul > li > a{padding-left:14px;padding-right:14px}
	#masthead .site-header-main-section-left{min-width:0;flex-wrap:nowrap}
	#masthead .header-navigation .header-menu-container > ul{flex-wrap:nowrap}
	#masthead .header-navigation .header-menu-container > ul > li > a{white-space:nowrap}
}

@media (max-width:1023px){
	.mb-search.is-desktop{display:none}
	.mb-search.is-mobile{width:100%;flex:1 1 100%;padding-top:5px;padding-bottom:5px}
	/* The row's own gutters leave the field narrower than the cards below it. */
	#mobile-header .site-bottom-header-wrap .site-container{padding-left:15px;padding-right:15px}
	#mobile-header .site-bottom-header-inner-wrap{padding-left:0;padding-right:0}
	.mb-search-input{height:40px;font-size:14px;padding-left:16px}
	.mb-search-submit{width:34px;height:34px}
	.mb-search-results{max-height:min(60vh,380px)}
}