/**
 * ESS Theme — Super Speedy Search + Filters integration overrides.
 *
 * Adapts SSS/SSF plugin styles to the ESS design system:
 * - Colors: accent #E8792B, primary #1E3A5F
 * - Font: DM Sans (inherited from body)
 * - Border-radius: ESS tokens
 * - Shadows: ESS tokens
 *
 * @package eshoppingsalerno
 */

/* ==========================================================================
   0. SSS-AS-PILL — Riveste lo shortcode [superspeedysearch] come .ess-search.
   ========================================================================== *

   Strategia: il template-parts/header/search-form.php emette
   <div class="ess-search ess-search--sss"> e poi do_shortcode([superspeedysearch]).
   SSS rende form + dropdown con la sua DOM (.super-speedy-search-form,
   .ssswrapper, .ssstext, .sss_search_button, .sssresults). Le regole sotto
   trasformano quella DOM in un pill identico a .ess-search/__input/__btn,
   senza toccare il JS del plugin.
   ========================================================================== */

/* IMPORTANTE: reset del wrapper esterno .ess-search quando contiene SSS.
   Senza questo reset, le regole di .ess-search (height:44px, overflow:hidden,
   border, border-radius) si applicano al wrapper esterno e:
     1. Nascondono il dropdown .sssresults che appare sotto la pill (overflow:hidden)
     2. Schiacciano il contenuto a 44px di altezza
     3. Applicano un doppio border (uno al wrapper, uno alla pill interna .ssswrapper)
   La pill vera viene creata da .ssswrapper interno (vedi regole sotto). */
.ess-search.ess-search--sss {
	display: block;
	height: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.ess-search.ess-search--sss:focus-within {
	box-shadow: none;
}

/* Reset wrapper interno SSS — togli ogni styling che il plugin pone sul container.
   Tutte le regole sotto sono prefissate con .super-speedy-search-form per battere
   in specificita' i selettori dello stylesheet del plugin (super-speedy-search.css). */
.ess-search--sss .super-speedy-search-form {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Form: stessa pill di .ess-search */
.ess-search--sss .super-speedy-search-form .super-speedy-searchform {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

/* ssswrapper diventa la pill moderna minimal — stile Algolia/Stripe.
   Border tenue, icona search a sinistra (via background-image SVG sull'input wrapper),
   button icon-only a destra. Squadrato per coerenza editorial col resto del tema. */
.ess-search--sss .super-speedy-search-form .ssswrapper {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 48px;
	background: #ffffff;
	border: 1px solid var(--ess-line, #e5e1d6);
	border-radius: 0;
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color var(--ess-transition-fast), box-shadow var(--ess-transition-fast);
}
.ess-search--sss .super-speedy-search-form .ssswrapper:hover {
	border-color: var(--ess-ink, #161512);
}
.ess-search--sss .super-speedy-search-form .ssswrapper:focus-within {
	border-color: var(--ess-ink, #161512);
	box-shadow: 0 0 0 2px var(--ess-terra, #c5552d);
}

/* sssinputwrapper occupa lo spazio dell'input — batte
   .super-speedy-search-form .ssswrapper .sssinputwrapper (flex:1) del plugin.
   Aggiunge icona search SVG a sinistra via background-image (no markup change). */
.ess-search--sss .super-speedy-search-form .ssswrapper .sssinputwrapper {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	position: relative;
	padding: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23161512' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 20px 20px;
}

/* sssbuttonwrapper occupa il bottone — specificita' alzata per battere
   .super-speedy-search-form .ssswrapper .sssbuttonwrapper (height:35px) del plugin */
.ess-search--sss .super-speedy-search-form .ssswrapper .sssbuttonwrapper {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	height: auto;
}

/* Input: padding-left 48px per fare spazio all'icona search SVG nel wrapper.
   Batte `.super-speedy-search-form input[type="text"]` del plugin. */
.ess-search--sss .super-speedy-search-form input[type="text"].ssstext {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 16px 0 48px;
	font-family: var(--ess-font-body);
	font-size: 14px;
	color: var(--ess-ink);
	background: transparent;
	border: 0;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	letter-spacing: 0.01em;
}
.ess-search--sss .super-speedy-search-form input[type="text"].ssstext::placeholder {
	color: var(--ess-muted-aa);
	opacity: 1;
}
.ess-search--sss .super-speedy-search-form input[type="text"].ssstext::-webkit-search-cancel-button {
	display: none;
}

/* Reset clear button (lo nascondiamo: non serve, l'input gestisce gia' il clear).
   Specificita' alzata per battere .super-speedy-search-form .ssswrapper .sssresetwrapper del plugin. */
.ess-search--sss .super-speedy-search-form .ssswrapper .sssresetwrapper {
	display: none;
}

/* Button submit: icon-only ink-bg square 48x48 — design moderno minimal.
   Mostra l'icona SSS default (<i class="wpi-sss-icon-search">) renderizzata bianca.
   Specificita' alzata (.super-speedy-search-form prefisso) per battere
   `.super-speedy-search-form button[type="submit"]` del plugin. */
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button {
	flex: 0 0 auto;
	min-width: 48px;
	width: 48px;
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--ess-ink, #161512);
	color: #ffffff;
	font-size: 18px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ess-transition-fast);
	box-shadow: none;
}
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button:hover,
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button:focus-visible {
	background: var(--ess-sea, #0e4d64);
}
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button:focus-visible {
	outline: 2px solid var(--ess-terra, #c5552d);
	outline-offset: -3px;
}
/* Icona SSS default visibile bianca dentro il bottone */
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button i,
.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button svg {
	display: inline-block;
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
}

/* Hide modal close button (presente solo in modalita' modal/popover, non inline) */
.ess-search--sss .sss_maybe_close_button {
	display: none !important;
}

/* Dropdown results: posiziona sotto la pill, design Algolia-like */
.ess-search--sss .sssresults.sssajax {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	width: auto;
	min-width: 100%;
	z-index: 80;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid var(--ess-line, #e5e1d6);
	border-radius: 0;
	box-shadow: 0 16px 48px rgba(22, 21, 18, 0.16);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}

/* Layout 2-col del dropdown: suggestions a sinistra, products a destra */
.ess-search--sss .sssresults.sssajax .sss_scroll_container {
	display: flex;
	gap: 0;
}
.ess-search--sss .sssresults.sssajax .sss_suggestions_container {
	flex: 0 0 220px;
	background: var(--ess-surface, #f5f1e8);
	border-right: 1px solid var(--ess-line, #e5e1d6);
}
.ess-search--sss .sssresults.sssajax .sss_items_container {
	flex: 1 1 auto;
	background: #ffffff;
	min-width: 0;
}
@media (max-width: 767px) {
	.ess-search--sss .sssresults.sssajax .sss_scroll_container {
		flex-direction: column;
	}
	.ess-search--sss .sssresults.sssajax .sss_suggestions_container {
		flex: 1 1 auto;
		border-right: 0;
		border-bottom: 1px solid var(--ess-line, #e5e1d6);
	}
}

/* Header sezioni "Search Suggestions" / nome categoria */
.ess-search--sss .sssresults.sssajax .sss_list_header {
	font-family: var(--ess-font-mono, monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ess-muted-aa, #5a5550);
	padding: 14px 16px 8px;
	border-bottom: 0;
	background: transparent;
}

/* Suggestion items (parole chiave a sinistra) */
.ess-search--sss .sssresults.sssajax .sss_suggestions_container ul.sss-suggestions li,
.ess-search--sss .sssresults.sssajax .sss_suggestions_container ul.sss-taxonomies li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 0;
}
.ess-search--sss .sssresults.sssajax .sss_suggestions_container ul.sss-suggestions a,
.ess-search--sss .sssresults.sssajax .sss_suggestions_container ul.sss-taxonomies a {
	display: block;
	padding: 9px 16px;
	font-size: 13px;
	color: var(--ess-ink, #161512);
	text-decoration: none;
	transition: background var(--ess-transition-fast);
}
.ess-search--sss .sssresults.sssajax .sss_suggestions_container a:hover,
.ess-search--sss .sssresults.sssajax .sss_suggestions_container a:focus {
	background: #ffffff;
	color: var(--ess-terra, #c5552d);
}

/* Highlight match (strong tag emesso da SSS) */
.ess-search--sss .sssresults.sssajax strong {
	color: var(--ess-terra, #c5552d);
	font-weight: 600;
}

/* Product items (cards a destra) */
.ess-search--sss .sssresults.sssajax ul.sss_items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ess-search--sss .sssresults.sssajax ul.sss_items li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--ess-line, #e5e1d6);
}
.ess-search--sss .sssresults.sssajax ul.sss_items li:last-child {
	border-bottom: 0;
}
.ess-search--sss .sssresults.sssajax ul.sss_items li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: var(--ess-ink, #161512);
	text-decoration: none;
	transition: background var(--ess-transition-fast);
}
.ess-search--sss .sssresults.sssajax ul.sss_items li a:hover,
.ess-search--sss .sssresults.sssajax ul.sss_items li a:focus {
	background: var(--ess-surface, #f5f1e8);
}

/* Thumbnail prodotto */
.ess-search--sss .sssresults.sssajax ul.sss_items li img {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 0;
	background: var(--ess-surface, #f5f1e8);
	display: block;
}

/* Body content (titolo + prezzo) */
.ess-search--sss .sssresults.sssajax ul.sss_items .sss_content {
	flex: 1 1 auto;
	min-width: 0;
}
.ess-search--sss .sssresults.sssajax ul.sss_items .sss-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--ess-ink, #161512);
	line-height: 1.3;
	margin: 0;
	display: block;
}
.ess-search--sss .sssresults.sssajax ul.sss_items .sss_price,
.ess-search--sss .sssresults.sssajax ul.sss_items .sss-excerpt {
	font-family: var(--ess-font-mono, monospace);
	font-size: 11px;
	color: var(--ess-muted-aa, #5a5550);
	margin: 2px 0 0;
	letter-spacing: 0.3px;
}
.ess-search--sss .sssresults.sssajax ul.sss_items .ess-price-on-request {
	color: var(--ess-terra, #c5552d);
	font-weight: 500;
}

/* "See all" / pagination footer */
.ess-search--sss .sssresults.sssajax .sss_see_all {
	border-top: 1px solid var(--ess-line, #e5e1d6);
	background: var(--ess-surface, #f5f1e8);
}
.ess-search--sss .sssresults.sssajax .sss_see_all a {
	display: block;
	padding: 12px 16px;
	font-family: var(--ess-font-mono, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ess-ink, #161512);
	text-decoration: none;
	text-align: center;
	transition: background var(--ess-transition-fast), color var(--ess-transition-fast);
}
.ess-search--sss .sssresults.sssajax .sss_see_all a:hover,
.ess-search--sss .sssresults.sssajax .sss_see_all a:focus {
	background: var(--ess-ink, #161512);
	color: #ffffff;
}

/* Hide SSS "powered by" branding */
.ess-search--sss .sssresults.sssajax .sss_poweredby,
.ess-search--sss .sss_poweredby {
	display: none !important;
}

/* Mobile: stessa pill 48px + font 16px no-zoom iOS, button square 48px */
@media (max-width: 767px) {
	.ess-search--sss .super-speedy-search-form .ssswrapper {
		height: 48px;
	}
	.ess-search--sss .super-speedy-search-form input[type="text"].ssstext {
		font-size: 16px;
		padding: 0 12px 0 44px;
	}
	.ess-search--sss .super-speedy-search-form .ssswrapper .sssinputwrapper {
		background-position: 14px center;
	}
	.ess-search--sss .super-speedy-search-form button[type="submit"].sss_search_button {
		min-width: 48px;
		width: 48px;
	}
}

/* ==========================================================================
   SUPER SPEEDY SEARCH — Dropdown & Results (replica prototipo §search suggestions)
   ========================================================================== */

/* Force body font on all SSS elements */
.super-speedy-search-form,
.sssresults,
.sss_suggestions_container,
.sss_items_container {
	font-family: var(--ess-font-body) !important;
}

/* ---- Results dropdown panel ---- */
.ess-header__search .sssresults.sssajax,
.ess-header__mobile-search .sssresults.sssajax {
	margin-top: 4px;
	border-radius: 0;  /* squadrato editoriale, no rounded corners come pill */
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);  /* prototipo value */
	border: 1px solid var(--ess-line);
	background: #ffffff;
	overflow: hidden;
}

/* ---- Suggestions column ---- */
.sss_suggestions_container ul.sss-suggestions {
	background: #ffffff;
}

.sss_suggestions_container ul.sss-taxonomies {
	background: var(--ess-surface);
}

.sss_suggestions_container a:hover,
.sss_suggestions_container a:focus {
	background: var(--ess-surface);
	color: var(--ess-ink);
}

/* Suggestion item: padding 10×14, font 13, border-bottom hairline (prototype) */
.sss_suggestions_container li {
	border-bottom: 1px solid var(--ess-line);
}
.sss_suggestions_container li:last-child {
	border-bottom: 0;
}
.sss_suggestions_container a {
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--ess-ink);
	text-decoration: none;
}

/* Highlight matched text */
.sssresults strong,
.sss-suggestion strong,
.sss-taxonomy strong {
	color: var(--ess-terra);
	font-weight: 600;
}

/* ---- Section headers ---- */
.sss_list_header {
	font-size: var(--ess-text-sm, 0.875rem);
	font-weight: var(--ess-weight-semibold, 600);
	color: var(--ess-color-heading, #1E2B3A);
	border-bottom: 1px solid var(--ess-color-border, #E2E6EA);
	padding: var(--ess-space-3, 0.75rem) var(--ess-space-4, 1rem) var(--ess-space-2, 0.5rem);
}

/* ---- "See All" link ---- */
.sss_see_all a,
.bottom_see_all_wrapper a {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-medium, 500);
	font-size: var(--ess-text-sm, 0.875rem);
	text-decoration: none;
	transition: color var(--ess-transition-fast, 150ms);
}

.sss_see_all a:hover,
.bottom_see_all_wrapper a:hover {
	color: var(--ess-color-accent-hover, #C86620);
}

/* ---- Product cards in dropdown ---- */
.sss-grid-item,
.sss-list-item {
	border-radius: var(--ess-radius-md, 0.5rem);
	transition: background var(--ess-transition-fast, 150ms);
}

.sss-grid-item:hover,
.sss-list-item:hover {
	background: var(--ess-color-neutral-50, #F8F9FA);
}

.sss-grid-item a,
.sss-list-item a {
	text-decoration: none;
	color: var(--ess-color-body-text, #3A4A5C);
}

/* Product title */
.sss-title {
	color: var(--ess-color-heading, #1E2B3A);
	font-weight: var(--ess-weight-medium, 500);
}

/* Price */
.sss_price,
.sss_price .woocommerce-Price-amount {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Sale badge */
.sssresults .onsale,
.sssresults .sss_flash .onsale {
	background: var(--ess-color-accent, #E8792B);
	color: var(--ess-color-white, #fff);
	border-radius: var(--ess-radius-sm, 0.25rem);
	font-size: var(--ess-text-xs, 0.75rem);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Product images */
.sssresults .wp-post-image {
	border-radius: var(--ess-radius-md, 0.5rem);
}

/* ---- Overlay ---- */
.sss-overlay {
	background: rgba(30, 58, 95, 0.4);
}

/* ---- Powered by (hide) ---- */
.sss_poweredby {
	display: none !important;
}

/* ---- Keyboard focus ---- */
.sss-focusable:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}


/* ==========================================================================
   2. SUPER SPEEDY FILTERS — Widgets & Controls
   ========================================================================== */

/* Force DM Sans */
.fwwfilter,
.fwwcontainer,
.ssf.dialog-container {
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
}

/* ---- Popout/Popover buttons ---- */
.fwwpopout,
.fwwpopover {
	border-color: var(--ess-color-border, #E2E6EA);
	border-radius: var(--ess-radius-md, 0.5rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
	color: var(--ess-color-body-text, #3A4A5C);
	transition: border-color var(--ess-transition-fast, 150ms), box-shadow var(--ess-transition-fast, 150ms);
}

.fwwpopout:hover,
.fwwpopover:hover {
	border-color: var(--ess-color-primary, #1E3A5F);
}

.fwwpopout:focus-visible,
.fwwpopover:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}

/* ---- Popout panel ---- */
.fwwcontainer.open .popout-container {
	border-radius: var(--ess-radius-lg, 0.875rem);
	box-shadow: var(--ess-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
	border: 1px solid var(--ess-color-border, #E2E6EA);
}

/* ---- Dialog/Popover modal ---- */
.ssf .dialog-content {
	border-radius: var(--ess-radius-lg, 0.875rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
}

.ssf .dialog-overlay {
	background: rgba(30, 58, 95, 0.4);
}

.ssf-close-popover {
	color: var(--ess-color-neutral-500, #5A6B7D);
	font-size: 1.5rem;
	transition: color var(--ess-transition-fast, 150ms);
}

.ssf-close-popover:hover {
	color: var(--ess-color-accent, #E8792B);
}

/* ---- Category/Attribute list items ---- */
.fwwfilter .product-categories.awdff li a {
	color: var(--ess-color-body-text, #3A4A5C);
	font-size: var(--ess-text-sm, 0.875rem);
	transition: color var(--ess-transition-fast, 150ms);
}

.fwwfilter .product-categories.awdff li a:hover {
	color: var(--ess-color-primary, #1E3A5F);
}

.fwwfilter .product-categories.awdff li.selected > a {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Counts */
.fwwfilter .count,
.fwwfilter .categorycount {
	color: var(--ess-color-text-sec, #5A6B7D);
	font-size: var(--ess-text-xs, 0.75rem);
}

/* ---- Checkbox/Radio custom icons ---- */
.fwwfilter ul.checkboxlist li a:before,
.fwwfilter ul.radio li a:before {
	color: var(--ess-color-neutral-400, #8A97A5);
}

.fwwfilter ul.checkboxlist li.selected a:before,
.fwwfilter ul.radio li.selected a:before {
	color: var(--ess-color-accent, #E8792B);
}

/* ---- Color swatches ---- */
.fwwfilter .colour-style {
	border: 2px solid var(--ess-color-border, #E2E6EA);
	transition: border-color var(--ess-transition-fast, 150ms);
}

.fwwfilter li.selected .colour-style {
	border-color: var(--ess-color-accent, #E8792B);
	box-shadow: 0 0 0 2px var(--ess-color-accent, #E8792B);
}

/* ---- Inline search within filters ---- */
.fww-inline-search {
	border-color: var(--ess-color-border, #E2E6EA);
	border-radius: var(--ess-radius-md, 0.5rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
}

.fww-inline-search:focus {
	border-color: var(--ess-color-primary, #1E3A5F);
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
	outline: none;
}

/* ---- Toggle switches ---- */
.fww-toggle-switch-text {
	font-size: var(--ess-text-sm, 0.875rem);
	color: var(--ess-color-body-text, #3A4A5C);
}

/* ---- Apply button ---- */
.apply-filter-button {
	background: var(--ess-color-accent, #E8792B);
	color: var(--ess-color-white, #fff);
	border: none;
	border-radius: var(--ess-radius-md, 0.5rem);
	padding: var(--ess-space-2, 0.5rem) var(--ess-space-4, 1rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
	font-weight: var(--ess-weight-semibold, 600);
	cursor: pointer;
	min-height: 44px;
	transition: background var(--ess-transition-fast, 150ms);
}

.apply-filter-button:hover {
	background: var(--ess-color-accent-hover, #C86620);
}

.apply-filter-button:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}

/* ---- Price slider (noUiSlider) override ---- */
.fwwfilter .noUi-connect {
	background: var(--ess-color-accent, #E8792B);
}

.fwwfilter .noUi-handle {
	border-color: var(--ess-color-accent, #E8792B);
	box-shadow: 0 0 0 3px rgba(232, 121, 43, 0.2);
}

/* ---- Loading spinner ---- */
.wpi-fww-spinner-circle-clipper .wpi-fww-spinner-circle {
	border-color: var(--ess-color-accent, #E8792B);
}

/* ---- Widget titles in sidebar ---- */
.fwwfilter .widget-title,
.fwwfilter .widgettitle {
	font-size: var(--ess-text-base, 1rem);
	font-weight: var(--ess-weight-semibold, 600);
	color: var(--ess-color-heading, #1E2B3A);
	margin-bottom: var(--ess-space-3, 0.75rem);
}


/* ==========================================================================
   3. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
	/* Full-width search results on mobile */
	.sssresults.sssajax {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		border-radius: 0 0 var(--ess-radius-lg, 0.875rem) var(--ess-radius-lg, 0.875rem);
	}

	/* Stack suggestions and products vertically on mobile */
	.sss_scroll_container {
		flex-direction: column;
	}

	.sss_suggestions_container,
	.sss_items_container {
		width: 100% !important;
	}

	/* SSF dialog full-width on mobile */
	.ssf .dialog-content {
		width: 100%;
		max-width: 100%;
		border-radius: var(--ess-radius-lg, 0.875rem) var(--ess-radius-lg, 0.875rem) 0 0;
		max-height: 85vh;
	}
}