/* =============================================================================
   DomShop — Header Menu (Mega Menu Desktop + Drawer Mobile)
   File: assets/css/header-menu.css
   ============================================================================= */

/* ------------------------------------------------------------------
   NAV TRIGGER (LI nel ds-nav)
   ------------------------------------------------------------------ */
.ds-nav__item--mega{
	position:relative;
	list-style:none;
}
.ds-nav__megabtn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:none;
	border:0;
	padding:8px 0;
	font:inherit;
	font-weight:600;
	color:var(--ds-black);
	cursor:pointer;
	letter-spacing:.01em;
}
.ds-nav__megabtn svg{
	transition:transform .2s ease;
}
.ds-nav__item--mega[aria-expanded="true"] .ds-nav__megabtn,
.ds-nav__item--mega.is-open .ds-nav__megabtn{
	color:var(--ds-black);
}
.ds-nav__item--mega.is-open .ds-nav__megabtn svg{
	transform:rotate(180deg);
}

/* ------------------------------------------------------------------
   MEGA MENU PANEL (sibling row del header, full-width)
   ------------------------------------------------------------------ */
.ds-megamenu{
	position:absolute;
	left:0;
	right:0;
	top:100%;
	background:#fff;
	border-bottom:1px solid var(--ds-border);
	box-shadow:0 12px 32px rgba(0,0,0,.08);
	padding:36px 0 32px;
	z-index:50;
	opacity:0;
	transform:translateY(-6px);
	pointer-events:none;
	transition:opacity .18s ease, transform .18s ease;
}
.ds-megamenu[hidden]{display:none}
.ds-megamenu.is-open{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
}

.ds-megamenu__inner{
	max-width: 1280px;
	margin:0 auto;
	padding:0 24px;
}

.ds-megamenu__grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1.3fr;
	gap:48px;
	align-items:start;
}

.ds-megamenu__col-title{
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ds-muted);
	margin:0 0 16px;
	padding-bottom:12px;
	border-bottom:1px solid var(--ds-border);
}

.ds-megamenu__list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.ds-megamenu__list li{margin:0}
.ds-megamenu__list a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:8px 0;
	font-size:15px;
	font-weight:500;
	color:var(--ds-black);
	text-decoration:none;
	transition:transform .15s ease, color .15s ease;
	position:relative;
}
.ds-megamenu__list a::before{
	content:"";
	position:absolute;
	left:-12px;
	top:50%;
	transform:translateY(-50%);
	width:0;
	height:2px;
	background:var(--ds-yellow);
	transition:width .2s ease;
}
.ds-megamenu__list a:hover{
	transform:translateX(6px);
	color:var(--ds-black);
}
.ds-megamenu__list a:hover::before{width:8px}

.ds-megamenu__pill{
	background:var(--ds-yellow);
	color:var(--ds-black);
	font-size:10px;
	font-weight:700;
	padding:2px 8px;
	border-radius:99px;
	letter-spacing:.04em;
}

/* Featured area */
.ds-megamenu__featured{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.ds-megamenu__card,
.ds-megamenu__card:hover,
.ds-megamenu__card:focus,
.ds-megamenu__card:active,
.ds-megamenu__card:visited{
	position:relative;
	overflow:hidden;
	border-radius:14px;
	display:block;
	text-decoration:none;
	color:#fff;
	cursor:pointer;
	background:var(--ds-surface-2);
}
/* Mantiene il testo bianco sul card anche al hover: override su eventuali a:hover globali */
.ds-megamenu__card:hover .ds-megamenu__card-title,
.ds-megamenu__card:hover .ds-megamenu__card-sub,
.ds-megamenu__card:focus .ds-megamenu__card-title,
.ds-megamenu__card:focus .ds-megamenu__card-sub{
	color:#fff !important;
}
.ds-megamenu__card img,
.ds-megamenu__card-fallback{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:transform .4s ease;
}
.ds-megamenu__card-fallback{
	background:linear-gradient(135deg, var(--ds-surface-2), #ddd);
}
.ds-megamenu__card:hover img{
	transform:scale(1.06);
}
.ds-megamenu__card-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75));
	padding:16px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	gap:6px;
}
.ds-megamenu__card-badge{
	position:absolute;
	top:10px;
	left:10px;
	background:var(--ds-yellow);
	color:var(--ds-black);
	font-size:10px;
	font-weight:700;
	padding:4px 8px;
	border-radius:99px;
	letter-spacing:.04em;
	box-shadow:0 4px 10px rgba(0,0,0,.15);
	z-index:2;
}
.ds-megamenu__card-sub{
	font-size:12px;
	opacity:.85;
}
.ds-megamenu__card-title{
	font-size:18px;
	font-weight:700;
	line-height:1.2;
}
.ds-megamenu__card-cta{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--ds-yellow);
	color:var(--ds-black);
	font-size:12px;
	font-weight:700;
	padding:8px 12px;
	border-radius:99px;
	width:fit-content;
	margin-top:8px;
	letter-spacing:.02em;
}

.ds-megamenu__card--big{aspect-ratio:16/9}

.ds-megamenu__small-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}
.ds-megamenu__card--small{aspect-ratio:1/1}
.ds-megamenu__card--small .ds-megamenu__card-title{font-size:13px}
.ds-megamenu__card--small .ds-megamenu__card-sub{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.08em;
}

/* Trust strip */
.ds-megamenu__trust{
	max-width: 1280px;
	margin:32px auto 0;
	padding:20px 24px 0;
	border-top:1px solid var(--ds-border);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
}
.ds-megamenu__trust-item{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	font-weight:600;
	color:var(--ds-muted);
	letter-spacing:.02em;
}
.ds-megamenu__trust-item svg{
	width:16px;
	height:16px;
	stroke:var(--ds-success);
	flex-shrink:0;
}

/* Hide mega on mobile */
@media (max-width: 900px){
	.ds-megamenu{display:none !important}
}


/* ==========================================================================
   DRAWER MOBILE — Body Content
   ========================================================================== */

.ds-mdrawer{
	padding:4px 0 24px;
}

/* User block */
.ds-mdrawer__user{
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px;
	background:var(--ds-surface-2);
	border-radius:14px;
	margin-bottom:20px;
}
.ds-mdrawer__user.is-anon{
	background:var(--ds-black);
	color:#fff;
}
.ds-mdrawer__avatar{
	width:48px;
	height:48px;
	border-radius:50%;
	background:var(--ds-black);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-size:15px;
	flex-shrink:0;
}
.ds-mdrawer__user.is-anon .ds-mdrawer__avatar{
	background:var(--ds-yellow);
	color:var(--ds-black);
}
.ds-mdrawer__user-info{
	flex:1;
	min-width:0;
}
.ds-mdrawer__user-greet{
	display:block;
	font-size:11px;
	font-weight:500;
	letter-spacing:.02em;
	color:var(--ds-muted);
	line-height:1.2;
}
.ds-mdrawer__user.is-anon .ds-mdrawer__user-greet{
	color:rgba(255,255,255,.6);
}
.ds-mdrawer__user-name{
	display:block;
	font-size:15px;
	font-weight:700;
	margin-top:2px;
	line-height:1.2;
}
.ds-mdrawer__user.is-anon .ds-mdrawer__user-name{color:#fff}

.ds-mdrawer__user-cta{
	background:var(--ds-yellow);
	color:var(--ds-black);
	padding:8px 14px;
	border-radius:99px;
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	flex-shrink:0;
	letter-spacing:.02em;
}
.ds-mdrawer__user-cta:hover{
	background:var(--ds-yellow);
	filter:brightness(.95);
}

/* Quick grid */
.ds-mdrawer__quick{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:8px;
	margin-bottom:24px;
}
.ds-mdrawer__quick-item{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:12px 4px;
	background:#fff;
	border:1px solid var(--ds-border);
	border-radius:12px;
	text-decoration:none;
	color:var(--ds-black);
}
.ds-mdrawer__quick-item svg{
	width:20px;
	height:20px;
	stroke:var(--ds-black);
	fill:none;
	stroke-width:1.8;
}
.ds-mdrawer__quick-item span{
	font-size:10px;
	font-weight:600;
	letter-spacing:.02em;
}
.ds-mdrawer__quick-dot{
	position:absolute;
	top:6px;
	right:10px;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--ds-yellow);
}
.ds-mdrawer__quick-badge{
	position:absolute;
	top:4px;
	right:6px;
	min-width: 18px;
	height:18px;
	padding:0 5px;
	background:var(--ds-yellow);
	color:var(--ds-black);
	font-size:10px;
	font-weight:700;
	border-radius:99px;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Section label */
.ds-mdrawer__section-label{
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ds-muted);
	margin:8px 0 12px;
	padding-bottom:8px;
	border-bottom:1px solid var(--ds-border);
}

/* Category cards */
.ds-mdrawer__cats{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.ds-mdrawer__cat{
	display:flex;
	align-items:center;
	gap:14px;
	padding:12px;
	background:#fff;
	border:1px solid var(--ds-border);
	border-radius:14px;
	text-decoration:none;
	color:var(--ds-black);
	transition:background .15s ease, border-color .15s ease;
}
.ds-mdrawer__cat:hover,
.ds-mdrawer__cat:active{
	background:var(--ds-surface-2);
	border-color:#d6d3cd;
}
.ds-mdrawer__cat-thumb{
	width:64px;
	height:64px;
	border-radius:10px;
	overflow:hidden;
	flex-shrink:0;
	background:var(--ds-surface-2);
}
.ds-mdrawer__cat-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.ds-mdrawer__cat-info{
	flex:1;
	min-width:0;
}
.ds-mdrawer__cat-name{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:15px;
	font-weight:700;
	line-height:1.2;
}
.ds-mdrawer__cat-meta{
	font-size:12px;
	color:var(--ds-muted);
	margin-top:3px;
	font-weight:500;
}
.ds-mdrawer__cat-arrow{
	flex-shrink:0;
	color:var(--ds-muted);
}
.ds-mdrawer__cat-arrow svg{
	width:16px;
	height:16px;
	stroke:currentColor;
	fill:none;
	stroke-width:2;
}
.ds-mdrawer__cat-badge{
	font-size:10px;
	font-weight:700;
	padding:2px 7px;
	border-radius:99px;
	letter-spacing:.04em;
}
.ds-mdrawer__cat-badge.is-yellow{background:var(--ds-yellow);color:var(--ds-black)}
.ds-mdrawer__cat-badge.is-green{background:var(--ds-success);color:#fff}
.ds-mdrawer__cat-badge.is-black{background:var(--ds-black);color:#fff}

/* Override drawer body padding for our content */
.ds-drawer__body .ds-mdrawer{
	padding-top:8px;
}

/* Tablet shrink */
@media (max-width: 1100px){
	.ds-megamenu__grid{
		grid-template-columns:1fr 1fr 1fr;
		gap:32px;
	}
	.ds-megamenu__featured{
		grid-column:1 / -1;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.ds-megamenu__card--big{
		flex:1 1 100%;
		aspect-ratio:21/9;
	}
	.ds-megamenu__small-row{
		flex:1 1 100%;
	}
}


/* ==========================================================================
   MINI-CART (drawer override) — qty +/- + bottoni gialli + empty state
   ========================================================================== */

.ds-mini-cart{
	list-style:none;
	margin:0;
	padding:0 22px;
}

/* ============================================================================
   CART DRAWER — Spinner reale durante rimozione (basato su WC 10.7 codice reale)
   WC 10.7 fa $row.block() dove $row = il <li>, iniettando blockUI DENTRO il <li>.
   Selettore hook: li.woocommerce-mini-cart-item:has(.blockUI)
   ============================================================================ */

/* 1. Nascondi il blockUI bianco-traslucido che WC inietta dentro il <li> */
body #ds-cart-drawer li.woocommerce-mini-cart-item .blockUI,
body #ds-cart-drawer li.ds-mini-cart__item .blockUI,
body #ds-cart-drawer .woocommerce-mini-cart-item .blockUI.blockOverlay,
body #ds-cart-drawer .woocommerce-mini-cart-item .blockUI.blockMsg{
	display:none !important;
	opacity:0 !important;
	background:transparent !important;
	visibility:hidden !important;
	pointer-events:none !important;
}

/* 2. L'item che ha blockUI dentro è quello in fase di rimozione → hook visuale */
body #ds-cart-drawer li.woocommerce-mini-cart-item:has(.blockUI),
body #ds-cart-drawer li.ds-mini-cart__item:has(.blockUI){
	position:relative !important;
	pointer-events:none !important;
	min-height:80px;
}

/* 3. Effetto sgranato sui figli (escluso blockUI che è già nascosto) */
body #ds-cart-drawer li.woocommerce-mini-cart-item:has(.blockUI) > *:not(.blockUI),
body #ds-cart-drawer li.ds-mini-cart__item:has(.blockUI) > *:not(.blockUI){
	filter:blur(2px) grayscale(.6) !important;
	opacity:.4 !important;
	transition:filter .2s ease, opacity .2s ease !important;
}

/* 4. Spinner nitido sull'item, opacity:1 esplicita */
body #ds-cart-drawer li.woocommerce-mini-cart-item:has(.blockUI)::after,
body #ds-cart-drawer li.ds-mini-cart__item:has(.blockUI)::after{
	content:"" !important;
	position:absolute !important;
	top:50% !important;
	left:50% !important;
	width:32px !important;
	height:32px !important;
	margin:-16px 0 0 -16px !important;
	border:3px solid rgba(0,0,0,.15) !important;
	border-top-color:var(--ds-black) !important;
	border-radius:50% !important;
	animation:dsSpin .7s linear infinite !important;
	z-index:100 !important;
	pointer-events:none !important;
	opacity:1 !important;
	filter:none !important;
	background:transparent !important;
}

.ds-mini-cart__item{
	position:relative;
	display:grid;
	grid-template-columns:64px 1fr;
	gap:12px;
	padding:14px 0;
	border-bottom:1px solid var(--ds-border);
}
.ds-mini-cart__item:last-child{border-bottom:none}

.ds-mini-cart__remove{
	position:absolute;
	top:14px;
	right:0;
	width:24px;
	height:24px;
	border-radius:50%;
	background:var(--ds-surface-2);
	color:var(--ds-black);
	font-size:14px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	line-height:1;
	transition:background .15s ease;
}
.ds-mini-cart__remove:hover{background:#e6e3dd;color:var(--ds-black)}

.ds-mini-cart__thumb{
	width:64px;
	height:64px;
	border-radius:10px;
	overflow:hidden;
	background:var(--ds-surface-2);
	flex-shrink:0;
}
.ds-mini-cart__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.ds-mini-cart__thumb a{display:block;width:100%;height:100%}

.ds-mini-cart__info{
	min-width:0;
	padding-right:32px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.ds-mini-cart__name{
	font-size:14px;
	font-weight:600;
	line-height:1.3;
	color:var(--ds-black);
}
.ds-mini-cart__name a{
	color:var(--ds-black);
	text-decoration:none;
}
.ds-mini-cart__name a:hover{color:var(--ds-black);text-decoration:underline}

.ds-mini-cart__bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-top:4px;
}

/* qty +/- */
.ds-mini-cart__qty{
	display:inline-flex;
	align-items:center;
	border:1px solid var(--ds-border);
	border-radius:99px;
	overflow:hidden;
	background:#fff;
	height:32px;
}
.ds-mini-cart__qty-btn{
	width:32px;
	height:32px;
	border:0;
	background:transparent;
	font-size:14px;
	font-weight:700;
	color:var(--ds-black);
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	transition:background .12s ease;
	padding:0;
	line-height:1;
}
.ds-mini-cart__qty-btn:hover:not(:disabled){background:var(--ds-surface-2)}
.ds-mini-cart__qty-btn:disabled{opacity:.35;cursor:not-allowed}
.ds-mini-cart__qty-val{
	min-width: 28px;
	text-align:center;
	font-size:13px;
	font-weight:700;
	color:var(--ds-black);
}
.ds-mini-cart__qty.is-loading{opacity:.5;pointer-events:none}

.ds-mini-cart__price{
	font-size:14px;
	font-weight:700;
	color:var(--ds-black);
	white-space:nowrap;
}

/* Hide WC's quantity span fallback (in case theme override doesn't load for whatever reason) */
.ds-mini-cart .quantity{display:none}

/* TOTAL */
.ds-mini-cart__total{
	margin:16px 0 12px !important;
	padding:14px 22px 0;
	border-top:1px solid var(--ds-border);
	font-size:15px;
	font-weight:600;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.ds-mini-cart__total .amount,
.ds-mini-cart__total .woocommerce-Price-amount{
	font-size:18px;
	font-weight:800;
	color:var(--ds-black);
}

/* BUTTONS (WC native, styled) — alta specificità per battere wc-blocks-style.css */
#ds-cart-drawer .ds-mini-cart__buttons,
#ds-cart-drawer .woocommerce-mini-cart__buttons{
	display:flex !important;
	flex-direction:column !important;
	gap:10px !important;
	margin:0 !important;
	padding:0 22px 12px !important;
	box-sizing:border-box;
}
#ds-cart-drawer .ds-mini-cart__buttons .button,
#ds-cart-drawer .woocommerce-mini-cart__buttons .button{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:100% !important;
	min-height:48px !important;
	padding:14px 18px !important;
	border-radius:99px !important;
	font-size:14px !important;
	font-weight:700 !important;
	letter-spacing:.02em !important;
	text-decoration:none !important;
	border:1.5px solid var(--ds-black) !important;
	background:#fff !important;
	color:var(--ds-black) !important;
	box-shadow:none !important;
	transition:background .15s ease, transform .15s ease;
}
#ds-cart-drawer .ds-mini-cart__buttons .button:hover,
#ds-cart-drawer .woocommerce-mini-cart__buttons .button:hover{
	background:var(--ds-surface-2) !important;
	color:var(--ds-black) !important;
}
/* Primary CTA — Pagamento / Checkout */
#ds-cart-drawer .ds-mini-cart__buttons .checkout,
#ds-cart-drawer .ds-mini-cart__buttons .wc-forward.checkout,
#ds-cart-drawer .woocommerce-mini-cart__buttons .checkout{
	background:var(--ds-yellow) !important;
	border-color:var(--ds-yellow) !important;
	color:var(--ds-black) !important;
	box-shadow:0 4px 14px rgba(255,193,7,.3) !important;
}
#ds-cart-drawer .ds-mini-cart__buttons .checkout:hover,
#ds-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover{
	background:var(--ds-yellow-dark) !important;
	border-color:var(--ds-yellow-dark) !important;
	color:var(--ds-black) !important;
	transform:translateY(-1px);
}

/* EMPTY STATE */
.ds-mini-cart__empty{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:48px 24px;
	text-align:center;
}
.ds-mini-cart__empty-icon{
	color:var(--ds-muted);
	opacity:.6;
}
.ds-mini-cart__empty-text{
	margin:0;
	font-size:14px;
	color:var(--ds-muted);
	font-weight:500;
}
.ds-mini-cart__empty-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 24px;
	border-radius:99px;
	background:var(--ds-yellow);
	color:var(--ds-black);
	font-size:13px;
	font-weight:700;
	letter-spacing:.02em;
	text-decoration:none;
	border:1.5px solid var(--ds-yellow);
	margin-top:6px;
	transition:background .15s ease;
}
.ds-mini-cart__empty-cta:hover{background:var(--ds-yellow-dark);color:var(--ds-black)}

/* Drawer body footer padding when contains WC buttons */
#ds-cart-drawer .ds-drawer__body{
	padding-bottom:24px;
}


/* ==========================================================================
   SEARCH DRAWER (full-screen overlay) — input pill + popular + trending
   ========================================================================== */

/* Override del default overlay scuro: lo trasformiamo in pannello bianco full-screen */
#ds-search-drawer.ds-search-overlay{
	position:fixed !important;
	top:0 !important;
	left:0 !important;
	right:0 !important;
	bottom:0 !important;
	width:100% !important;
	height:100vh !important;
	height:100dvh !important; /* dynamic viewport, mobile keyboard-aware */
	max-width:100% !important;
	background:#ffffff !important;
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	display:flex !important;
	flex-direction:column;
	overflow-x:hidden !important; /* mai scroll orizzontale */
	overflow-y:auto !important;
	overscroll-behavior:contain;  /* niente scroll-chaining sulla pagina sotto */
	-webkit-overflow-scrolling:touch;
	z-index:10005 !important;
	transform:translateY(-10px);
	opacity:0;
	visibility:hidden;
	transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility .25s;
	color:var(--ds-black) !important;
	box-sizing:border-box;
}
/* Tutti i discendenti devono rispettare box-sizing per evitare overflow */
#ds-search-drawer.ds-search-overlay *,
#ds-search-drawer.ds-search-overlay *::before,
#ds-search-drawer.ds-search-overlay *::after{
	box-sizing:border-box;
	max-width:100%;
}
/* NOTA: scroll-lock è gestito ESCLUSIVAMENTE da main.js (vedi blocco "SCROLL LOCK")
   con tecnica diversa per iOS vs desktop. NON aggiungere regole CSS qui che impongono
   height:100% su html/body quando .ds-scroll-lock è attiva: causerebbe il bug
   "pagina torna su" perché reset del body content da y=0. */
#ds-search-drawer.ds-search-overlay.is-open{
	transform:translateY(0);
	opacity:1;
	visibility:visible;
}

#ds-search-drawer.ds-search-overlay .ds-drawer__head,
#ds-search-drawer .ds-search-overlay__head{
	display:flex !important;
	align-items:center;
	justify-content:flex-end;
	padding:18px 24px !important;
	border-bottom:none !important;
	background:transparent !important;
	flex-shrink:0;
}
#ds-search-drawer .ds-search-overlay__close{
	background:transparent !important;
	border:0 !important;
	cursor:pointer;
	color:var(--ds-black) !important;
	padding:8px !important;
	width:auto;
	height:auto;
}

#ds-search-drawer .ds-search-overlay__body{
	flex:1 1 auto;
	width:100%;
	max-width: 1100px;
	margin:0 auto;
	padding:0 60px 60px;
	box-sizing:border-box;
	min-width:0;
}

.ds-search{
	display:flex;
	flex-direction:column;
	gap:32px;
}

.ds-search__title{
	font-size:28px;
	font-weight:800;
	letter-spacing:-.02em;
	margin:0 0 16px;
	color:var(--ds-black);
}

.ds-search__inputwrap{
	display:flex;
	align-items:center;
	gap:0;
	background:#fff;
	border:1px solid var(--ds-border);
	border-radius:99px;
	padding:6px;
	box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ds-search__input{
	flex:1 1 auto;
	min-width:0;
	width:100%;
	border:0 !important;
	background:transparent !important;
	padding:14px 24px;
	margin:0;
	font:inherit;
	font-family:inherit;
	font-size:16px !important;
	font-weight:500;
	line-height:1.4;
	color:var(--ds-black) !important;
	-webkit-text-fill-color:var(--ds-black) !important; /* battle WebKit search defaults */
	caret-color:var(--ds-black);
	outline:none !important;
	box-shadow:none !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	text-indent:0 !important;
	opacity:1 !important;
}
.ds-search__input::placeholder{color:var(--ds-muted);opacity:1}
/* WebKit/Chrome: rimuovi clear button nativo del type="search" che a volte interferisce */
.ds-search__input::-webkit-search-cancel-button,
.ds-search__input::-webkit-search-decoration{
	-webkit-appearance:none;
	appearance:none;
}
.ds-search__submit{
	background:var(--ds-black);
	color:#fff;
	border:0;
	padding:14px 32px;
	border-radius:99px;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	letter-spacing:.02em;
	transition:background .15s ease;
}
.ds-search__submit:hover{background:#000}

/* Popular searches */
.ds-search__section-label{
	font-size:18px;
	font-weight:800;
	color:var(--ds-black);
	margin:0 0 14px;
}
.ds-search__section-label--lg{
	font-size:22px;
	border-top:1px solid var(--ds-border);
	padding-top:28px;
	margin-top:8px;
}
.ds-search__pills{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.ds-search__pill{
	background:#fff;
	border:1px solid var(--ds-border);
	border-radius:12px;
	padding:12px 22px;
	font:inherit;
	font-size:14px;
	font-weight:600;
	color:var(--ds-black);
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease;
	letter-spacing:.01em;
}
.ds-search__pill:hover{
	background:var(--ds-surface-2);
	border-color:#d6d3cd;
}

/* Content area: ospita trending O risultati (mai entrambi) */
.ds-search__content{}
.ds-search__panel[hidden]{display:none}

/* Grid 3 colonne con separatori verticali (come reference) */
.ds-search__results-grid,
.ds-search__trending-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px 0;
}
/* separatore verticale tra le colonne 1-2 e 2-3 */
.ds-search__results-grid > *:nth-child(3n+2),
.ds-search__trending-grid > *:nth-child(3n+2),
.ds-search__results-grid > *:nth-child(3n),
.ds-search__trending-grid > *:nth-child(3n){
	border-left:1px solid var(--ds-border);
	padding-left:24px;
}
.ds-search__results-grid > *:nth-child(3n+1),
.ds-search__trending-grid > *:nth-child(3n+1){
	padding-right:24px;
}
.ds-search__results-grid > *:nth-child(3n+2),
.ds-search__trending-grid > *:nth-child(3n+2){
	padding-right:24px;
}

/* Skeleton placeholders mentre carica */
.ds-search__card--skel{cursor:default;pointer-events:none}
.ds-search__card--skel .ds-search__card-thumb{
	background:linear-gradient(90deg, var(--ds-surface-2) 0%, #ecebe6 50%, var(--ds-surface-2) 100%);
	background-size:200% 100%;
	animation:dsSkel 1.2s ease-in-out infinite;
}
.ds-search__card--skel .sk{
	display:inline-block;
	background:linear-gradient(90deg, var(--ds-surface-2) 0%, #ecebe6 50%, var(--ds-surface-2) 100%);
	background-size:200% 100%;
	animation:dsSkel 1.2s ease-in-out infinite;
	border-radius:4px;
	height:10px;
}
.ds-search__card--skel .sk--sm{width:60px}
.ds-search__card--skel .sk--lg{width:80%;height:14px;margin-top:6px}
@keyframes dsSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Card 1:1 reference: thumb left + info column right (meta sopra, title sotto) */
.ds-search__card{
	display:flex;
	gap:16px;
	text-decoration:none;
	color:var(--ds-black);
	align-items:flex-start;
}
.ds-search__card-thumb{
	width:120px;
	height:80px;
	flex-shrink:0;
	border-radius:6px;
	overflow:hidden;
	background:var(--ds-surface-2);
}
.ds-search__card-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.ds-search__card:hover .ds-search__card-thumb img{transform:scale(1.04)}

.ds-search__card-info{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.ds-search__card-meta{
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ds-muted);
	display:flex;
	align-items:center;
	gap:8px;
	line-height:1;
}
.ds-search__card-meta .ds-search__card-price{color:var(--ds-muted)}
.ds-search__card-meta .ds-search__card-price .amount,
.ds-search__card-meta .ds-search__card-price .woocommerce-Price-amount{
	font-size:11px;
	font-weight:700;
}
.ds-search__card-sep{opacity:.7}
.ds-search__card-title{
	font-size:15px;
	font-weight:700;
	line-height:1.35;
	color:var(--ds-black);
}
.ds-search__card:hover .ds-search__card-title{text-decoration:underline}

/* SPINNER inline nell'input mentre fetch in corso */
.ds-search__inputwrap{position:relative}
.ds-search__inputwrap.is-loading::after{
	content:"";
	position:absolute;
	right:120px; /* a sinistra del bottone Cerca */
	top:50%;
	width:18px;
	height:18px;
	margin-top:-9px;
	border:2px solid var(--ds-border);
	border-top-color:var(--ds-black);
	border-radius:50%;
	animation:dsSpin .7s linear infinite;
	pointer-events:none;
}
@keyframes dsSpin{to{transform:rotate(360deg)}}

/* TABLET ≤900 — grid 2 colonne, padding ridotto */
@media (max-width: 900px){
	#ds-search-drawer .ds-search-overlay__body{padding:0 24px 40px !important}
	.ds-search__title{font-size:24px}
	.ds-search__inputwrap{padding:4px}
	.ds-search__input{font-size:15px;padding:12px 18px}
	.ds-search__submit{padding:12px 20px;font-size:13px}
	.ds-search__results-grid,
	.ds-search__trending-grid{
		grid-template-columns:repeat(2, 1fr) !important;
		gap:24px !important;
	}
	/* Disabilita separatori verticali su tablet/mobile (li mettiamo solo desktop) */
	.ds-search__results-grid > *,
	.ds-search__trending-grid > *{
		border-left:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}
	.ds-search__section-label{font-size:16px}
	.ds-search__section-label--lg{font-size:18px;padding-top:24px}
}

/* MOBILE ≤640 — grid 1 colonna, padding ancora più compatto */
@media (max-width: 640px){
	#ds-search-drawer .ds-search-overlay__head{padding:12px 16px !important}
	#ds-search-drawer .ds-search-overlay__body{padding:0 16px 32px !important}
	.ds-search{gap:24px}
	.ds-search__title{font-size:20px;margin-bottom:12px}
	.ds-search__inputwrap{padding:3px}
	.ds-search__input{font-size:15px;padding:10px 14px}
	.ds-search__submit{padding:10px 18px;font-size:13px}
	.ds-search__results-grid,
	.ds-search__trending-grid{
		grid-template-columns:1fr !important;
		gap:18px !important;
	}
	.ds-search__card{gap:12px}
	.ds-search__card-thumb{width:96px;height:64px}
	.ds-search__card-title{font-size:14px}
	.ds-search__pills{gap:8px}
	.ds-search__pill{padding:10px 16px;font-size:13px}
}