/* ==========================================================================
   NUOVA SALTINI — scheda prodotto                               v1.1.1
   Si carica: solo nelle schede prodotto (blocco "Scheda prodotto").
   ========================================================================== */

.ns-site .ns-prodotto .woocommerce-breadcrumb,
.ns-site .ns-prodotto .breadcrumbs { color: var(--ns-muto); font-size: .8rem; text-transform: none; }

.ns-site .ns-prodotto__testa { margin-top: 18px; }

/* La colonna con nome e pulsanti resta in vista mentre si scorre la galleria. */
@media (min-width: 850px) {
	.ns-site .ns-prodotto__info .col-inner {
		position: sticky;
		top: calc(var(--flatsome--header--sticky-height, 80px) + 24px);
	}
}

.ns-site .ns-prodotto__info .product-title {
	margin-bottom: .4em;
	color: var(--kw-titolo-scuro);
	font-size: clamp(1.9rem, 1rem + 2vw, 2.7rem);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.12;
}

.ns-site .ns-prodotto__info .product-short-description { max-width: 52ch; color: var(--kw-testo); font-size: 1.05rem; }
.ns-site .ns-occhiello a { color: inherit; }

/* Tre dati in evidenza: etichetta (modulo Testo) e valore (campo del kit). */
.ns-site .row.ns-chiave { margin: 1.4rem 0 1.6rem; border: 1px solid var(--kw-filetto); border-radius: var(--kw-raggio); }
.ns-site .ns-chiave > .col { padding: 16px 18px; }
.ns-site .ns-chiave > .col + .col { border-left: 1px solid var(--kw-filetto); }
.ns-site .ns-chiave > .col:not(:has(.kw-campo)) { display: none; }
.ns-site .row.ns-chiave:not(:has(.kw-campo)) { display: none; }

.ns-site .ns-chiave__etichetta p { margin: 0; color: var(--ns-muto); font-size: .74rem; }

.ns-site .ns-chiave .kw-campo {
	display: block;
	margin-top: .15rem;
	color: var(--kw-inchiostro);
	font-size: 1.08rem;
	font-weight: 600;
}

.ns-site .ns-prodotto__info .button { margin-bottom: 12px; }

.ns-site .ns-btn-campione[aria-pressed="true"] {
	border-color: var(--kw-primario);
	background-color: var(--ns-tinta);
	color: var(--kw-primario-sc);
}

.ns-site .ns-btn-campione[aria-pressed="true"]::after { content: '✓'; }

/* Punti sotto i pulsanti: un elenco normale nel modulo Testo. */
.ns-site .ns-garanzie ul {
	display: grid;
	gap: .6rem;
	margin: 1.2rem 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--kw-filetto);
	list-style: none;
	font-size: .86rem;
}

.ns-site .ns-garanzie li { display: flex; align-items: center; gap: .7rem; margin: 0; }
.ns-site .ns-garanzie li::before { width: 18px; height: 18px; color: var(--kw-primario); }

/* Linguette. */
.ns-site .ns-prodotto__tab > .nav { gap: 0 1.8rem; margin-bottom: 2rem; border-bottom: 1px solid var(--kw-filetto); }

.ns-site .ns-prodotto__tab > .nav > li > a {
	padding: .9rem 0;
	border-bottom: 2px solid transparent;
	color: var(--ns-muto);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ns-site .ns-prodotto__tab > .nav > li.active > a,
.ns-site .ns-prodotto__tab > .nav > li > a:hover { border-bottom-color: var(--kw-primario); color: var(--kw-inchiostro); }

.ns-site .ns-prodotto__tab > .nav > li > a::before { display: none; }
.ns-site .ns-prodotto__tab .panel { max-width: 920px; }

/* Correlati: il titolo di WooCommerce come i nostri h2. */
.ns-site .ns-prodotto-simili .related > h3,
.ns-site .ns-prodotto-simili .product-section-title {
	margin-bottom: 28px;
	color: var(--kw-titolo-scuro);
	font-size: var(--kw-h2);
	font-weight: 600;
	letter-spacing: -.015em;
	text-transform: none;
}

@media (max-width: 849px) {
	.ns-site .ns-chiave > .col + .col { border-left: 0; border-top: 1px solid var(--kw-filetto); }
}

/* Formato, spessori, dimensioni ------------------------------------------------- */

.ns-site .ns-scheda__etichetta p {
	margin: 0 0 .45rem;
	color: var(--kw-inchiostro);
	font-size: .82rem;
	font-weight: 600;
}

/* Senza formati, sparisce anche l'etichetta. */
.ns-site .ns-scheda__etichetta--formati:not(:has(~ .ns-formati)) { display: none; }

.ns-site .ns-formati {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.2rem;
}

.ns-site .ns-formati__voce {
	margin: 0;
	padding: .55em 1em;
	border: 1px solid var(--kw-filetto);
	border-radius: var(--kw-raggio);
	background: #fff;
	color: var(--kw-inchiostro);
	font-size: .86rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

.ns-site .ns-formati__voce:hover { border-color: var(--kw-primario); }

.ns-site .ns-formati__voce[aria-pressed="true"] {
	border-color: var(--kw-primario);
	background: var(--ns-tinta);
	color: var(--kw-primario-sc);
}

.ns-site .row.ns-misure { margin: 0 0 1.2rem; }
.ns-site .ns-misure > .col { padding: 0 12px 0 0; }
.ns-site .ns-misure > .col:not(:has(.kw-campo)) { display: none; }
.ns-site .row.ns-misure:not(:has(.kw-campo)) { display: none; }

.ns-site .ns-misure .kw-campo {
	display: block;
	padding: .75rem 1rem;
	border: 1px solid var(--kw-filetto);
	border-radius: var(--kw-raggio);
	color: var(--kw-inchiostro);
	font-size: .92rem;
}

/* I due pulsanti affiancati, larghi metà ciascuno. La colonna diventa una
   fila che va a capo: ogni modulo prende tutta la riga, i pulsanti metà.
   Serve così perché WordPress mette il pulsante del campione dentro un suo
   paragrafo, che da solo andrebbe a capo; qui il paragrafo diventa la metà
   della riga e il pulsante lo riempie. */
.ns-site .ns-prodotto__info > .col-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 12px;
}

.ns-site .ns-prodotto__info > .col-inner > * {
	flex: 0 0 100%;
	min-width: 0;
}

.ns-site .ns-prodotto__info > .col-inner > a.button,
.ns-site .ns-prodotto__info > .col-inner > .ns-btn-campione,
.ns-site .ns-prodotto__info > .col-inner > p:has(> .button) {
	flex: 1 1 0;
}

.ns-site .ns-prodotto__info > .col-inner > p:has(> .button) { margin: 0 0 12px; }

.ns-site .ns-prodotto__info .col-inner a.button.kw-btn,
.ns-site .ns-prodotto__info .col-inner .ns-btn-campione {
	width: 100%;
	justify-content: center;
	margin: 0 0 12px;
}

@media (max-width: 549px) {
	.ns-site .ns-prodotto__info > .col-inner > a.button,
	.ns-site .ns-prodotto__info > .col-inner > .ns-btn-campione,
	.ns-site .ns-prodotto__info > .col-inner > p:has(> .button) { flex-basis: 100%; }
}