/*
 * Tabs (Tabs.jsx dell'oracolo). Uso reale: le tab "Descrizione"/"Informazioni
 * aggiuntive" del blocco woocommerce/product-details renderizzano ancora il
 * markup classico di WooCommerce (<ul class="tabs wc-tabs"> con <li><a>),
 * non un componente a blocchi — verificato sul markup live, non assunto. Qui
 * si stila quel markup nativo per farlo combaciare con l'oracolo, non lo si
 * ricostruisce. Lo stato attivo è la classe "active" che il JS classico di
 * WooCommerce (single-product.js) mette sul <li> — stessa cosa, sorgente
 * diversa (JS jQuery invece di stato React).
 *
 * Prefisso ".woocommerce div.product" ripetuto in ogni regola: la CSS
 * classica di WooCommerce (woocommerce.css) stila le stesse tab con
 * ".woocommerce div.product .woocommerce-tabs ul.tabs li a" — specificità
 * (0,4,4). Senza lo stesso prefisso le nostre regole (0,3,2) perdono contro
 * quella, indipendentemente dall'ordine di caricamento — verificato: senza
 * prefisso colore/padding/peso restavano quelli di WooCommerce.
 */

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: var(--wp--custom--border-width--hair) solid var(--wp--custom--border-subtle);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li {
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--fw--semibold);
	color: var(--wp--custom--text-muted);
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 3px;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	transition: background var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

@media (hover: hover) {
	.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li:not(.active) a:hover {
		color: var(--wp--custom--text-body);
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: var(--wp--custom--text-strong);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a::after {
	background: var(--wp--preset--gradient--flash);
}