/**
 * Layout — guscio della pagina, topbar, header e footer.
 */

/* ---------------------------------------------------------------------------
 * Salta al contenuto
 *
 * Primo elemento focalizzabile del documento: chi naviga da tastiera non deve
 * attraversare topbar e menu a ogni pagina. Fuori schermo finché non prende il
 * focus, e allora ben visibile.
 * ------------------------------------------------------------------------ */

.ad-skip-link {
	background: var(--ad-blue-900);
	border-radius: 0 0 var(--ad-radius-sm) var(--ad-radius-sm);
	color: var(--ad-text-on-dark);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	left: 16px;
	padding: 12px 20px;
	position: absolute;
	top: -100px;
	z-index: 100;
}

.ad-skip-link:focus {
	color: var(--ad-text-on-dark);
	top: 0;
}

/* ---------------------------------------------------------------------------
 * Header appiccicato in alto
 *
 * Il carrello e la ricerca restano a portata mentre si scorre un catalogo
 * lungo. Scorre via solo la topbar, che è informativa. Con la barra di
 * amministrazione di WordPress in cima l'header si ferma sotto di lei,
 * altrimenti ci finirebbe dietro.
 * ------------------------------------------------------------------------ */

.ad-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

body.admin-bar .ad-site-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .ad-site-header { top: 46px; }
}

/* ---------------------------------------------------------------------------
 * Torna su
 *
 * Compare dopo un paio di schermate (vedi assets/js/navigation.js) in basso a
 * destra, dove non copre né le CTA delle card né il footer.
 * ------------------------------------------------------------------------ */

.ad-to-top {
	align-items: center;
	background: var(--ad-surface-raised);
	border: 1px solid var(--ad-border-light);
	border-radius: 50%;
	bottom: 24px;
	color: var(--ad-text-muted);
	display: flex;
	font-size: 16px;
	height: 38px;
	justify-content: center;
	line-height: 1;
	opacity: 0.75;
	position: fixed;
	right: 24px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	width: 38px;
	z-index: 40;
}

.ad-to-top[hidden] { display: none; }

.ad-to-top:hover,
.ad-to-top:focus-visible {
	background: var(--ad-blue-700);
	border-color: var(--ad-blue-700);
	color: var(--ad-text-on-dark);
	opacity: 1;
}

@media (max-width: 640px) {
	.ad-to-top { bottom: 16px; right: 16px; }
}

/* ---------------------------------------------------------------------------
 * Topbar
 * ------------------------------------------------------------------------ */

.ad-topbar {
	background: var(--ad-blue-900);
	color: var(--ad-text-on-dark-4);
	font-size: var(--ad-fs-3xs);
	font-weight: 500;
	line-height: 1;
}

.ad-topbar__inner {
	display: flex;
	gap: var(--ad-gap-md);
	justify-content: space-between;
	padding: 11px var(--ad-gutter);
}

.ad-topbar__right { display: flex; gap: 22px; }
.ad-topbar a { color: inherit; }
.ad-topbar a:hover { color: var(--ad-teal); }

@media (max-width: 782px) {
	.ad-topbar__inner { font-size: var(--ad-fs-4xs); }
	.ad-topbar__right span { display: none; }
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.ad-header {
	align-items: center;
	background: var(--ad-blue-700);
	color: var(--ad-text-on-dark);
	display: flex;
	gap: var(--ad-gap-lg);
	justify-content: space-between;
	min-height: 78px;
	padding: 0 var(--ad-gutter);
}

.ad-header__left,
.ad-header__right {
	align-items: center;
	display: flex;
	gap: 18px;
}

.ad-header__left { gap: 44px; }

.ad-logo {
	color: var(--ad-text-on-dark);
	font-family: var(--ad-font-heading);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

.ad-logo span { color: var(--ad-teal); }
.ad-logo:hover { color: #fff; }
.ad-logo:hover span { color: var(--ad-teal); }

.ad-nav__list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Il bordo c'è già da fermo, trasparente: comparendo solo al passaggio del
   mouse spostava la voce di due pixel. */
.ad-nav__list a {
	border-bottom: 2px solid transparent;
	color: var(--ad-text-on-dark);
	display: block;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-nav);
	line-height: 1;
	padding-bottom: 4px;
	text-transform: uppercase;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ad-nav__list a:hover,
.ad-nav__list .current-menu-item > a {
	border-bottom-color: var(--ad-coral);
	color: #fff;
}

.ad-search input[type="search"] {
	background: var(--ad-blue-400);
	border: 1px solid var(--ad-blue-300);
	border-radius: var(--ad-radius-sm);
	color: #fff;
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-2xs);
	padding: 10px 14px;
	width: 230px;
}

.ad-search input::placeholder { color: var(--ad-text-on-dark-4); }

/* Ricerca live -------------------------------------------------------------
 * La tendina esce dall'header scuro e atterra su fondo chiaro, con la stessa
 * ombra e lo stesso raggio delle card del catalogo: è un pezzo di negozio che
 * scende, non un menu di sistema. */

.ad-search { position: relative; }

.ad-search__panel {
	background: var(--ad-surface-raised);
	border: 1px solid var(--ad-border-light);
	border-radius: var(--ad-radius-ms);
	box-shadow: var(--ad-shadow-card);
	color: var(--ad-text-body);
	margin-top: 8px;
	max-height: 60vh;
	overflow-y: auto;
	padding: 6px;
	position: absolute;
	top: 100%;
	/* Il campo è stretto, la tendina no: cresce verso sinistra perché a destra
	   ha solo il bordo della finestra. */
	right: 0;
	width: 380px;
	z-index: 100;
}

.ad-search__panel[hidden] { display: none; }

.ad-search__result {
	align-items: center;
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text);
	display: flex;
	gap: var(--ad-gap-sm);
	padding: 8px 10px;
}

/* Un solo evidenziato per volta: `is-active` lo mette il JS, e lo segue anche
   il puntatore, così tastiera e mouse non si contraddicono. */
.ad-search__result.is-active {
	background: var(--ad-sand);
	color: var(--ad-text);
}

.ad-search__thumb {
	flex: 0 0 48px;
	height: 48px;
	width: 48px;
}

.ad-search__thumb img {
	border-radius: var(--ad-radius-xs);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* min-width: 0 serve all'ellissi: senza, il flex item non scende sotto la
   larghezza del suo contenuto e il nome lungo sfonda la tendina. */
.ad-search__info {
	flex: 1;
	min-width: 0;
}

.ad-search__brand {
	color: var(--ad-text-muted);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-4xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-caps);
	line-height: 1;
	text-transform: uppercase;
}

.ad-search__name {
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	line-height: var(--ad-lh-snug);
	margin: 3px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ad-search__price {
	font-family: var(--ad-font-mono);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	white-space: nowrap;
}

/* Il prezzo barrato dei saldi arriva da WooCommerce come <del>/<ins>. */
.ad-search__price del {
	color: var(--ad-text-faint);
	font-weight: 500;
	margin-right: 4px;
}

.ad-search__price ins {
	background: none;
	color: var(--ad-coral-alt-1);
	text-decoration: none;
}

.ad-search__all {
	border-top: 1px solid var(--ad-border-lightest);
	color: var(--ad-teal);
	display: block;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-button);
	margin-top: 6px;
	padding: 12px 10px 8px;
	text-transform: uppercase;
}

.ad-search__all.is-active {
	background: var(--ad-sand);
	color: var(--ad-teal-alt-2);
}

.ad-search__empty {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-2xs);
	margin: 0;
	padding: 14px 10px;
}

.ad-header__account {
	color: var(--ad-text-on-dark);
	font-size: var(--ad-fs-2xs);
	font-weight: 500;
	white-space: nowrap;
}

/* Il saluto per nome è bianco pieno: è l'unica voce dell'header che parla
   dell'utente, e nel design si stacca dalle altre. */
.ad-header__account--named { color: #fff; }

/* Preferiti: cuore con contatore, prima del carrello. Vuoto è in outline,
   pieno corallo quando c'è qualcosa dentro (artboard 2A). */
.ad-header__wishlist {
	align-items: center;
	background: var(--ad-blue-400);
	border: 1px solid var(--ad-blue-300);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text-on-dark);
	display: flex;
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	gap: 7px;
	line-height: 1;
	padding: 9px 13px;
}

.ad-header__wishlist:hover {
	border-color: var(--ad-teal);
	color: #fff;
}

.ad-header__wishlist-icon { font-size: 16px; }

.ad-header__wishlist.has-items .ad-header__wishlist-icon { color: var(--ad-coral); }

.ad-header__cart {
	background: var(--ad-coral);
	border-radius: var(--ad-radius-sm);
	color: #fff;
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	line-height: 1;
	padding: 9px 13px;
	white-space: nowrap;
}

.ad-header__cart:hover { background: var(--ad-coral-alt-1); color: #fff; }

.ad-header__toggle {
	background: none;
	border: 0;
	color: var(--ad-text-on-dark);
	cursor: pointer;
	display: none;
	font-size: 20px;
	line-height: 1;
	padding: 6px;
}

/* Portatile ----------------------------------------------------------------
 * L'header per intero vuole 1325px: logo 167, menu 510, campo di ricerca 230,
 * Account, preferiti, carrello e i margini. Sotto quella soglia, e fino al
 * breakpoint tablet qui sotto, non c'era nessun adattamento: la voce "CHI
 * SIAMO" andava a capo a 1320 e a 1230 il carrello usciva dallo schermo.
 *
 * Invece di anticipare l'hamburger — a 1300px ci sta un portatile, e il menu
 * è anche scoperta di catalogo — si toglie il superfluo e il menu resta:
 * i preferiti (già nascosti sotto i 1100) e i 230px del campo di ricerca,
 * ridotto a una lente. Restano ~1060px di ingombro, con margine.
 *
 * La lente non ha JS: il campo resta un campo, compatto, e si allarga da sé
 * quando prende il fuoco, che sia col puntatore o col tabulatore. Crescendo
 * va in `absolute` verso sinistra, così non sposta niente. */
@media (min-width: 1101px) and (max-width: 1340px) {
	.ad-header__wishlist { display: none; }

	.ad-search--inline {
		height: 40px;
		width: 40px;
	}

	.ad-search--inline input[type="search"] {
		/* La lente è di sfondo: il campo non ha figli dove metterla. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238FB4C6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		/* Trasparente da chiuso: senza, il testo già cercato sbucherebbe da
		   sotto la lente nei 40px del riquadro. */
		color: transparent;
		height: 40px;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: width 0.18s ease;
		width: 40px;
	}

	.ad-search--inline input::placeholder { color: transparent; }

	/* `max-width: none` è indispensabile: l'azzeramento in base.css limita i
	   campi al 100% del contenitore, che qui è il form da 40px, e il campo
	   aperto resterebbe larghezza lente. */
	.ad-search--inline:focus-within input[type="search"] {
		background-position: 12px center;
		color: #fff;
		max-width: none;
		padding: 0 14px 0 34px;
		width: 260px;
		z-index: 20;
	}

	.ad-search--inline:focus-within input::placeholder { color: var(--ad-text-on-dark-4); }
}

/* Mobile: il design a 390px mostra hamburger, logo e carrello. */
@media (max-width: 1100px) {
	.ad-nav,
	.ad-header__account { display: none; }
	.ad-header__wishlist { display: none; }

	.ad-header__toggle { display: block; }
	.ad-search input[type="search"] { width: 150px; }
}

@media (max-width: 640px) {
	.ad-header { min-height: 60px; }
	.ad-logo { font-size: 17px; }
	.ad-search--inline { display: none; }
}

/* Banda di ricerca mobile ---------------------------------------------------
 * A 390px il design non nasconde la ricerca dietro un'icona: le dà una fascia
 * propria sotto l'header, sempre aperta. Compare esattamente dove il campo in
 * linea sparisce, così di ricerche visibili ce n'è sempre una sola. */

.ad-searchbar { display: none; }

@media (max-width: 640px) {
	.ad-searchbar {
		background: var(--ad-blue-400);
		display: block;
		padding: 10px var(--ad-gutter-mobile);
	}

	/* Il campo si scurisce rispetto alla fascia che lo contiene: sul desktop
	   il rapporto è rovesciato, perché lì lo sfondo è l'header. */
	.ad-search--bar input[type="search"] {
		background: var(--ad-blue-700);
		padding: 11px 12px;
		width: 100%;
	}

	/* Qui la tendina prende tutta la larghezza: non c'è il bordo della
	   finestra da schivare come nell'header desktop. */
	.ad-search--bar .ad-search__panel {
		left: 0;
		max-height: 70vh;
		right: 0;
		width: auto;
	}
}

.ad-mobile-nav {
	background: var(--ad-blue-600);
	padding: var(--ad-gap-md) var(--ad-gutter);
}

.ad-mobile-nav[hidden] { display: none; }

.ad-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ad-mobile-nav__list a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--ad-text-on-dark);
	display: block;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-xs);
	font-weight: 600;
	padding: 14px 0;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.ad-footer {
	background: var(--ad-blue-900);
	color: var(--ad-text-on-dark-4);
	padding: 56px var(--ad-gutter) 32px;
}

.ad-footer__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

@media (max-width: 1100px) {
	.ad-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.ad-footer__grid { grid-template-columns: 1fr; gap: var(--ad-gap-xl); }
}

.ad-logo--footer { font-size: 20px; }

.ad-footer__brand p {
	font-size: var(--ad-fs-xs);
	line-height: var(--ad-lh-relaxed);
	margin: 14px 0 0;
	max-width: 300px;
}

/* Icone social: quadrati di 42px bordati, come nel footer dell'artboard.
   Gli indirizzi arrivano dal personalizzatore (inc/social.php). */
.ad-social--icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--ad-gap-lg);
}

.ad-social--icons .ad-social__link {
	align-items: center;
	border: 1px solid var(--ad-blue-300);
	border-radius: var(--ad-radius-ms);
	color: var(--ad-text-on-dark-4);
	display: flex;
	height: 42px;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
	width: 42px;
}

.ad-social--icons .ad-social__link:hover {
	border-color: var(--ad-teal);
	color: #fff;
}

.ad-social--icons .ad-social__icon svg {
	display: block;
	fill: currentColor;
	height: 17px;
	width: 17px;
}

.ad-footer__heading {
	color: var(--ad-text-on-dark);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-caps);
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.ad-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ad-footer__list a,
.ad-footer__legal a {
	color: var(--ad-text-on-dark-4);
	font-size: var(--ad-fs-xs);
}

.ad-footer__list a:hover,
.ad-footer__legal a:hover { color: var(--ad-teal); }

.ad-footer__newsletter p {
	font-size: var(--ad-fs-xs);
	line-height: var(--ad-lh-relaxed);
	margin: 0 0 12px;
}

/* Il modulo vero e proprio è un componente: sta in `components.css`, perché lo
   stesso pezzo serve anche alla fascia in fondo al blog. */

.ad-footer__bottom {
	border-top: 1px solid #12405c;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ad-fs-3xs);
	gap: var(--ad-gap-sm);
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 20px;
}

.ad-footer__legal { display: flex; flex-wrap: wrap; gap: var(--ad-gap-sm); }

/* La riga societaria è lunga: prende lo spazio che serve e va a capo. */
.ad-footer__company {
	line-height: var(--ad-lh-body);
	max-width: 900px;
}

/* Recapito diretto, richiesto dalla normativa sul commercio elettronico. */
.ad-footer__contacts {
	display: flex;
	flex-direction: column;
	font-size: var(--ad-fs-xs);
	gap: 4px;
	margin-top: var(--ad-gap-md);
}

.ad-footer__contacts a { color: var(--ad-text-on-dark); }
.ad-footer__contacts a:hover { color: var(--ad-teal); }