/**
 * Componenti — bottoni, badge, card, griglie.
 *
 * Riusati da homepage, shop, scheda prodotto e blog: qui il markup è già
 * centralizzato in inc/template-tags.php, e qui lo è lo stile.
 */

/* ---------------------------------------------------------------------------
 * Griglie e sezioni
 * ------------------------------------------------------------------------ */

.ad-section {
	padding: var(--ad-section-y) var(--ad-gutter);
}

.ad-section--divided {
	border-top: 1px solid var(--ad-border);
	padding-top: 56px;
}

/* Banda sabbia di chiusura pagina (3B: "continua a leggere"). */
.ad-section--sand {
	background: var(--ad-sand);
	padding: 56px var(--ad-gutter) 64px;
}

.ad-section-head {
	align-items: flex-end;
	display: flex;
	gap: var(--ad-gap-lg);
	justify-content: space-between;
	margin-bottom: var(--ad-gap-2xl);
}

.ad-section-title {
	font-size: var(--ad-fs-h2);
	font-weight: 700;
	letter-spacing: var(--ad-ls-heading);
	margin: 12px 0 0;
}

.ad-section-link {
	border-bottom: 1.5px solid var(--ad-coral);
	color: var(--ad-text);
	flex: none;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	padding-bottom: 4px;
	white-space: nowrap;
}

.ad-grid {
	display: grid;
	gap: var(--ad-gap-lg);
}

.ad-grid--6 { grid-template-columns: repeat(6, 1fr); gap: var(--ad-gap-md); }
.ad-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ad-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--ad-gap-xl); }

@media (max-width: 1100px) {
	.ad-grid--6 { grid-template-columns: repeat(3, 1fr); }
	.ad-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ad-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.ad-grid--6 { grid-template-columns: repeat(2, 1fr); }
	.ad-grid--4,
	.ad-grid--3 { grid-template-columns: 1fr; }

	.ad-section-head { align-items: flex-start; flex-direction: column; gap: var(--ad-gap-sm); }
}

/* ---------------------------------------------------------------------------
 * Bottoni
 * ------------------------------------------------------------------------ */

.ad-btn,
.ad-card .button,
.woocommerce .ad-card a.button {
	border: 0;
	border-radius: var(--ad-radius-sm);
	cursor: pointer;
	display: inline-block;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ad-ls-button);
	line-height: 1;
	padding: 15px 26px;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Il corallo è il colore dell'azione: su fondo pieno con testo bianco passa
   il contrasto, come testo su chiaro no. Vale solo per le CTA. */
.ad-btn--cta,
.ad-card .button,
.woocommerce .ad-card a.button {
	background: var(--ad-coral);
	color: #fff;
}

.ad-btn--cta:hover,
.ad-card .button:hover,
.woocommerce .ad-card a.button:hover {
	background: var(--ad-coral-alt-1);
	color: #fff;
}

.ad-btn--solid {
	background: var(--ad-blue-700);
	color: var(--ad-text-on-dark);
}

.ad-btn--outline {
	background: transparent;
	border: 1.5px solid var(--ad-blue-700);
	color: var(--ad-blue-700);
	padding: 13.5px 26px;
}

.ad-btn--outline-light {
	background: transparent;
	border: 1.5px solid rgba(232, 220, 200, 0.5);
	color: var(--ad-text-on-dark);
	padding: 16.5px 30px;
}

.ad-btn--outline-light:hover {
	background: rgba(232, 220, 200, 0.12);
	color: #fff;
}

.ad-btn--ghost {
	background: #fff;
	border: 1px solid var(--ad-border-input);
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-2xs);
	padding: 12px 14px;
}

.ad-btn--lg { font-size: 14px; padding: 18px 34px; }
.ad-btn--block { display: block; width: 100%; }

/* ---------------------------------------------------------------------------
 * Badge e stati
 * ------------------------------------------------------------------------ */

.ad-badge {
	border-radius: var(--ad-radius-pill);
	color: #fff;
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-4xs);
	font-weight: 600;
	left: 12px;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 7px 13px;
	position: absolute;
	text-transform: uppercase;
	top: 12px;
	z-index: 1;
}

/* Nei contesti dove il badge sta nel flusso (articolo in evidenza, card
   offerta) invece che appoggiato sull'immagine. */
.ad-badge--static { position: static; }

.ad-badge--sale { background: var(--ad-coral); }
.ad-badge--new  { background: var(--ad-teal); }
.ad-badge--best { background: var(--ad-blue-700); }

.ad-stock {
	font-size: var(--ad-fs-3xs);
	font-weight: 500;
	line-height: 1;
}

.ad-stock.is-in        { color: var(--ad-in-stock); }
.ad-stock.is-backorder { color: var(--ad-backorder); }
.ad-stock.is-out       { color: var(--ad-text-faint); }

.ad-stars {
	color: var(--ad-coral);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.ad-card {
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-lg);
	box-shadow: var(--ad-shadow-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ad-card__media {
	background: var(--ad-gradient-placeholder);
	display: block;
	position: relative;
}

.ad-card__img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Negli artboard la foto prodotto è una fascia di 240px, non un quadrato: con
   il riquadro quadrato la card diventava alta il doppio del suo contenuto.
   L'immagine ci sta dentro intera ("contain" invece del "cover" del mockup):
   le foto arrivano da fonti diverse e i prodotti più alti che larghi
   verrebbero tagliati a metà. */
.ad-card--product .ad-card__media { background: var(--ad-surface-raised); }

.ad-card--product .ad-card__img {
	aspect-ratio: auto;
	height: 240px;
	object-fit: contain;
	padding: var(--ad-gap-sm);
}

.ad-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ad-gap-xs);
	padding: 18px;
}

.ad-card__brand,
.ad-card__kicker {
	font-size: var(--ad-fs-4xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-badge);
	line-height: 1;
	text-transform: uppercase;
}

.ad-card__brand { color: var(--ad-text-muted); }
.ad-card__kicker { color: var(--ad-teal); }

.ad-card__title {
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-md, 16px);
	font-weight: 600;
	line-height: var(--ad-lh-snug);
	margin: 0;
}

.ad-card__title a { color: var(--ad-text); }
.ad-card__title a:hover { color: var(--ad-teal); }

.ad-card__spec,
.ad-card__excerpt {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-3xs);
	line-height: 1.5;
	margin: 0;
}

.ad-card__excerpt {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-xs);
	line-height: var(--ad-lh-body);
}

.ad-card__meta {
	color: var(--ad-text-faint);
	font-size: var(--ad-fs-3xs);
	line-height: 1.4;
}

.ad-card__price {
	align-items: baseline;
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.ad-card__price .woocommerce-Price-amount,
.ad-card__price ins .woocommerce-Price-amount {
	color: var(--ad-blue-700);
	font-family: var(--ad-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

/* La sbarratura la dichiara lo `span` interno, non il `del`: il decoro si
   posiziona sulle metriche del carattere di chi lo scrive, e il `del` eredita
   i 16px del corpo mentre le cifre ne hanno 11-14 — la riga finiva sul fondo
   delle cifre invece che in mezzo. È già così nella scheda prodotto
   (product.css), qui era rimasta sul contenitore. */
.ad-card__price del {
	opacity: 1;
	text-decoration: none;
}

.ad-card__price del .woocommerce-Price-amount {
	color: var(--ad-text-faint);
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-xs);
	font-weight: 400;
	text-decoration: line-through;
}

.ad-card__price ins { text-decoration: none; }

/* "da" davanti al prezzo dei prodotti con varianti (vedi
   adriatic_dive_card_price_html): accompagna il numero, non gli fa concorrenza. */
.ad-card__price-from {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-3xs);
	font-weight: 500;
}

.ad-card__actions {
	display: flex;
	gap: var(--ad-gap-xs);
	margin-top: 6px;
}

.ad-card__actions .ad-btn--block,
.ad-card__actions .button { flex: 1; }

/* Card categoria: tutta cliccabile, senza CTA. */
.ad-card--category .ad-card__body { gap: 4px; padding: 14px 16px; }
.ad-card--category .ad-card__title { font-size: var(--ad-fs-xs); }
.ad-card--category:hover { box-shadow: var(--ad-shadow-card), 0 0 0 2px var(--ad-teal); }

/* Card articolo: nell'artboard la foto è una fascia di 200px, non un 4/3 che
   allunga la card più del testo che contiene. */
.ad-card--post .ad-card__img {
	aspect-ratio: auto;
	height: 200px;
}

.ad-card--post .ad-card__body { gap: 10px; padding: 24px; }
.ad-card--post .ad-card__title { font-size: 19px; line-height: 1.35; }

/* Recensione */
.ad-review {
	box-shadow: var(--ad-shadow-soft);
	gap: 14px;
	padding: 30px;
}

.ad-review p {
	color: var(--ad-text-body);
	font-size: var(--ad-fs-sm);
	line-height: 1.65;
	margin: 0;
}

.ad-review__who {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-2xs);
	font-weight: 500;
}

/* Accessibilità: testo per soli screen reader. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------------------
 * Intestazione di pagina — condivisa da pagine statiche, blog e articolo
 * ------------------------------------------------------------------------ */

.ad-page { background: var(--ad-surface); }

/* ---------------------------------------------------------------------------
 * Intestazione
 * ------------------------------------------------------------------------ */

.ad-page-head {
	background: var(--ad-sand);
	padding: 44px var(--ad-gutter) 48px;
}

.ad-page-head__title {
	font-size: var(--ad-fs-h1);
	font-weight: 800;
	letter-spacing: var(--ad-ls-hero);
	margin: 14px 0 0;
	max-width: 900px;
}

.ad-page-head__text {
	color: var(--ad-text-lead);
	font-size: var(--ad-fs-sm);
	line-height: var(--ad-lh-body);
	margin: 14px 0 0;
	max-width: 680px;
}

.ad-page-content {
	margin: 0 auto;
	max-width: 780px;
	padding: 0 var(--ad-gutter) var(--ad-section-y);
}

.ad-block-title {
	font-size: var(--ad-fs-h3);
	font-weight: 700;
	margin: 0 0 var(--ad-gap-lg);
}

.ad-block-label {
	color: var(--ad-text-muted);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-4xs);
	font-weight: 700;
	letter-spacing: var(--ad-ls-label);
	line-height: 1;
	margin-bottom: var(--ad-gap-md);
	text-transform: uppercase;
}

.ad-notice {
	background: var(--ad-sand);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text-lead);
	font-size: var(--ad-fs-2xs);
	padding: var(--ad-gap-md);
}

/* ---------------------------------------------------------------------------
 * Pagina senza risultati — 404 e ricerca a vuoto
 *
 * Mai un vicolo cieco: si cerca di nuovo, si torna al catalogo, si chiede a
 * una persona. Stessa logica del carrello vuoto, in versione ridotta.
 * ------------------------------------------------------------------------ */

.ad-empty {
	margin: 0 auto;
	max-width: 640px;
	padding: var(--ad-section-y) var(--ad-gutter);
	text-align: center;
}

.ad-empty__text {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-lead);
	line-height: var(--ad-lh-body);
	margin: 0 0 var(--ad-gap-lg);
}

/* Fuori dall'header il campo torna su fondo chiaro: quello dell'header è
   disegnato per la banda blu (layout.css). */
.ad-empty__search { margin-bottom: var(--ad-gap-lg); }

.ad-empty__search .ad-search input[type="search"] {
	background: #fff;
	border-color: var(--ad-border-input);
	color: var(--ad-text-body);
	font-size: var(--ad-fs-xs);
	padding: 15px 16px;
	width: 100%;
}

.ad-empty__search .ad-search input::placeholder { color: var(--ad-text-faint); }

.ad-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-gap-sm);
	justify-content: center;
}

.ad-empty__note {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-2xs);
	line-height: var(--ad-lh-body);
	margin: var(--ad-gap-lg) 0 0;
}

/* Titolo di gruppo dei risultati: compare solo quando la ricerca torna sia
   prodotti sia articoli. */
.ad-search-results__group {
	font-size: var(--ad-fs-h3);
	font-weight: 700;
	margin: 0 0 var(--ad-gap-lg);
}

.ad-search-results__group + * { margin-bottom: var(--ad-gap-2xl); }

/* ---------------------------------------------------------------------------
 * Schede (tab) di sezione
 * ------------------------------------------------------------------------ */

.ad-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-gap-xs);
}

.ad-tab {
	background: transparent;
	border: 1px solid var(--ad-border-input);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text-muted-2);
	cursor: pointer;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-button);
	line-height: 1;
	padding: 11px 16px;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ad-tab:hover { border-color: var(--ad-blue-700); color: var(--ad-blue-700); }

.ad-tab.is-active {
	background: var(--ad-blue-700);
	border-color: var(--ad-blue-700);
	color: var(--ad-text-on-dark);
}

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

/* ---------------------------------------------------------------------------
 * Preferiti
 * ------------------------------------------------------------------------ */

/* Cuore nelle card e nella scheda prodotto: outline se il prodotto non è
   salvato, corallo pieno su fondo chiaro se lo è (artboard 2A). */
.tinvwl_add_to_wishlist_button {
	align-items: center;
	background: #fff;
	border: 1px solid var(--ad-border-input);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text-muted-2);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	width: 46px;
}

.tinvwl_add_to_wishlist_button:hover {
	border-color: var(--ad-coral);
	color: var(--ad-coral);
}

.tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.tinvwl_add_to_wishlist_button.tinvwl-product-make-remove {
	background: var(--ad-coral-tint);
	border-color: var(--ad-coral);
	color: var(--ad-coral);
}

/* ---------------------------------------------------------------------------
 * Toast
 *
 * Conferma non bloccante in basso a destra: compare, si legge, sparisce da
 * sola dopo quattro secondi.
 * ------------------------------------------------------------------------ */

.ad-toast {
	align-items: center;
	background: var(--ad-blue-700);
	border-radius: var(--ad-radius-ms);
	bottom: 24px;
	box-shadow: 0 10px 26px rgba(6, 41, 60, 0.2);
	color: var(--ad-text-on-dark);
	display: flex;
	gap: 14px;
	font-size: var(--ad-fs-xs);
	line-height: 1.4;
	opacity: 0;
	padding: 16px 20px;
	position: fixed;
	right: 24px;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9999;
}

.ad-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ad-toast__icon {
	color: var(--ad-coral);
	font-size: 17px;
	line-height: 1;
}

.ad-toast__link {
	color: var(--ad-teal);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-4xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ad-toast__link:hover { color: #fff; }

.ad-toast__close {
	background: none;
	border: 0;
	color: var(--ad-text-on-dark-4);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0;
}

.ad-toast__close:hover { color: #fff; }

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

/* ---------------------------------------------------------------------------
 * Newsletter
 *
 * Un modulo solo, di Contact Form 7, in due posti su fondo scuro: il footer di
 * ogni pagina (in colonna) e la fascia in fondo al blog (in riga, con
 * `--inline` in `blog.css`).
 *
 * Ogni selettore passa da `.wpcf7`: in `page.css` c'è la veste chiara dello
 * stesso plugin, quella del modulo contatti, e sulle pagine quel foglio è
 * caricato dopo questo. Senza quel pezzo in più vincerebbe lei, con campi
 * bianchi e testo grigio su fondo blu.
 * ------------------------------------------------------------------------ */

.ad-newsletter .wpcf7 { margin: 0; }

.ad-newsletter .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ad-newsletter .wpcf7 .wpcf7-form-control-wrap { display: block; }

.ad-newsletter .wpcf7 input[type="email"] {
	background: transparent;
	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: 12px;
	width: 100%;
}

.ad-newsletter .wpcf7 input[type="email"]:focus {
	border-color: var(--ad-teal);
	outline: 0;
}

.ad-newsletter .wpcf7 input::placeholder { color: #5b8299; }

/* Consenso: sta sopra il bottone, non sotto, perché è la condizione per
   iscriversi e non una nota a piè di modulo. */
.ad-newsletter .wpcf7 .wpcf7-acceptance { display: block; margin: 0; }
.ad-newsletter .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.ad-newsletter .wpcf7 .wpcf7-acceptance label {
	align-items: flex-start;
	color: var(--ad-text-on-dark-4);
	cursor: pointer;
	display: flex;
	font-size: var(--ad-fs-3xs);
	gap: var(--ad-gap-xs);
	line-height: var(--ad-lh-snug);
}

.ad-newsletter .wpcf7 input[type="checkbox"] {
	accent-color: var(--ad-coral);
	flex: 0 0 auto;
	height: 14px;
	margin-top: 1px;
	width: 14px;
}

.ad-newsletter .wpcf7 .wpcf7-list-item-label a {
	color: var(--ad-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ad-newsletter .wpcf7 .wpcf7-list-item-label a:hover { color: #fff; }

.ad-newsletter .wpcf7 input[type="submit"] {
	font-size: var(--ad-fs-2xs);
	margin: 0;
	padding: 15px;
	width: 100%;
}

/* Esito dell'invio: una riga di testo, non il riquadro con il bordo colorato di
   Contact Form 7, che in un footer sembra un errore di stile. */
.ad-newsletter .wpcf7 form .wpcf7-response-output {
	border: 0;
	color: var(--ad-text-on-dark-3);
	font-size: var(--ad-fs-3xs);
	line-height: var(--ad-lh-snug);
	margin: 0;
	padding: 0;
}

.ad-newsletter .wpcf7 form.invalid .wpcf7-response-output,
.ad-newsletter .wpcf7 form.unaccepted .wpcf7-response-output,
.ad-newsletter .wpcf7 form.failed .wpcf7-response-output { color: var(--ad-coral); }

.ad-newsletter .wpcf7 .wpcf7-not-valid-tip {
	color: var(--ad-coral);
	font-size: var(--ad-fs-3xs);
	margin-top: 4px;
}

/* Ripiego se il modulo non è stato creato (./scripts/contact-form.sh). */
.ad-newsletter__notice {
	color: var(--ad-text-on-dark-4);
	font-size: var(--ad-fs-3xs);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Tendine di paese e provincia (select2)
 *
 * WooCommerce sostituisce queste due tendine con select2, che si porta dietro
 * il suo foglio di stile: pannello grigio con angoli da 4px e riga evidenziata
 * nel blu di wp-admin.
 *
 * Il campo chiuso è vestito in `woo-pages.css` insieme agli altri campi del
 * modulo. Qui c'è il pannello aperto, che select2 appende a `<body>`: fuori da
 * `.woocommerce`, quindi i selettori non possono essere agganciati alla pagina.
 * Per lo stesso motivo stanno in questo foglio, che è caricato sempre.
 * ------------------------------------------------------------------------ */

/* Pannello staccato dal campo, come le altre superfici che galleggiano nel
   design: bordo pieno su tutti i lati (select2 toglie quello attaccato al
   campo), angoli tondi e ombra da card. */
.select2-container--default .select2-dropdown--above,
.select2-container--default .select2-dropdown--below {
	background: var(--ad-surface-raised);
	border: 1px solid var(--ad-border-input);
	border-radius: var(--ad-radius-sm);
	box-shadow: var(--ad-shadow-card);
	color: var(--ad-text-body);
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-xs);
	overflow: hidden;
}

.select2-container--default .select2-dropdown--below { margin-top: 6px; }
.select2-container--default .select2-dropdown--above { margin-top: -6px; }

/* Campo di ricerca dentro il pannello: le province sono 107, si scrive invece
   di scorrere. */
.select2-container--default .select2-search--dropdown { padding: var(--ad-gap-xs); }

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--ad-surface);
	border: 1px solid var(--ad-border-input);
	border-radius: var(--ad-radius-xs);
	color: var(--ad-text-body);
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-xs);
	padding: 9px 11px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--ad-blue-700);
	outline: 0;
}

.select2-container--default .select2-results > .select2-results__options {
	max-height: 280px;
	padding-bottom: 4px;
}

.select2-container--default .select2-results__option {
	line-height: var(--ad-lh-snug);
	padding: 10px 14px;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
	color: var(--ad-text-faint);
}

/* Il valore attuale resta riconoscibile anche mentre si scorre l'elenco. */
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
	background: var(--ad-sand);
	color: var(--ad-blue-700);
	font-weight: 600;
}

/* La riga sotto il puntatore, o sotto le frecce della tastiera: viene dopo
   quella del valore attuale perché all'apertura sono la stessa riga, e a
   comandare deve essere il puntatore. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--ad-blue-700);
	color: var(--ad-text-on-dark);
}

/* Freccia del campo: select2 la disegna come un triangolo pieno, il design usa
   un accento sottile come gli altri select del sito. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--ad-text-muted);
	border-style: solid;
	border-width: 0 1.5px 1.5px 0;
	height: 7px;
	margin: -5px 0 0 -4px;
	transform: rotate(45deg);
	width: 7px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: var(--ad-blue-700);
	border-width: 0 1.5px 1.5px 0;
	margin: -2px 0 0 -4px;
	transform: rotate(-135deg);
	width: 7px;
}

/* ---------------------------------------------------------------------------
 * Store coming soon (templates/coming-soon.html)
 *
 * Sostituisce il blocco predefinito di WooCommerce quando una pagina del
 * negozio è oscurata (Impostazioni → Site visibility). Sta in components.css
 * e non in page.css perché può comparire su qualunque tipo di pagina — shop,
 * categoria, marca, ma anche Occasioni e Marchi, che sono pagine normali, non
 * archivi — quindi deve caricarsi senza condizioni sul tipo di richiesta.
 * ------------------------------------------------------------------------ */

.ad-coming-soon {
	background: var(--ad-surface);
	border-radius: var(--ad-radius-2xl);
	box-shadow: var(--ad-shadow-card);
	margin: var(--ad-gap-2xl) auto;
	max-width: 640px;
	padding: 72px var(--ad-gutter);
	text-align: center;
}

.ad-coming-soon__eyebrow { justify-content: center; }

.ad-coming-soon__title {
	font-size: var(--ad-fs-h2-sm);
	font-weight: 700;
	letter-spacing: var(--ad-ls-heading);
	margin: var(--ad-gap-sm) 0 0;
}

.ad-coming-soon__text {
	color: var(--ad-text-muted);
	margin: var(--ad-gap-sm) auto 0;
	max-width: 46ch;
}

.ad-coming-soon__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: var(--ad-gap-lg);
}

/* WordPress inietta `global-styles-inline-css` dopo i fogli del tema con un
   fondo nero su `.wp-element-button, .wp-block-button__link` (specificità
   0,1,0, uguale a `.ad-btn--cta`): a parità vince chi viene dopo nel
   sorgente, cioè lui. Le due regole sotto alzano la specificità per tornare
   ai colori del bottone del sito. */
.ad-coming-soon__actions .wp-block-button__link.ad-btn--cta {
	background: var(--ad-coral);
	color: #fff;
}

.ad-coming-soon__actions .wp-block-button__link.ad-btn--cta:hover {
	background: var(--ad-coral-alt-1);
}

.ad-coming-soon__actions .wp-block-button__link.ad-btn--outline {
	background: transparent;
	border: 1.5px solid var(--ad-blue-700);
	color: var(--ad-blue-700);
}

.ad-coming-soon__actions .wp-block-button__link.ad-btn--outline:hover {
	background: rgba(11, 61, 92, 0.06);
}

@media (max-width: 640px) {
	.ad-coming-soon {
		margin: var(--ad-gap-lg) var(--ad-gutter-mobile);
		padding: 48px var(--ad-gutter-mobile);
	}

	.ad-coming-soon__actions { flex-direction: column; width: 100%; }
	.ad-coming-soon__actions .ad-btn { width: 100%; }
}