/*
 * PriMa Care - Pagine
 * Stile della pagina Phytabinoid™ e dei widget "Pagina: ...".
 * Le classi pc-ph-* sono assegnate in Elementor (Avanzate > Classi CSS) o stampate
 * dai widget. Misure e colori vengono dal design su Claude Design.
 *
 * Punti di rottura di Elementor: mobile fino a 767 px, tablet da 768 a 1024 px,
 * desktop da 1025 px. Il design copre mobile (390) e desktop (1440): il tablet
 * è una variante coerente, con margini laterali di 32 px.
 * Testata fissa del sito: 84 px su desktop, 72 px su tablet, 64 px su mobile.
 */

/* Font: Inter, lo stesso del resto del sito (pesi 400 e 700: 300 e 500 si vedono 400, 600 si vede 700). */

.pc-ph {
	--ph-ink: #1D1B18;
	--ph-sec: #57514A;
	--ph-testo: #3D3832;
	--ph-bordo: #CFC5B4;
	--ph-linea: #ECE5D9;
	--ph-beige: #F5F0E8;
	--ph-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ph-testata: calc(64px + var(--wp-admin--admin-bar--height, 0px));
	font-family: "Inter", system-ui, sans-serif;
	color: var(--ph-ink);
	-webkit-font-smoothing: antialiased;
}

/* Elementor assegna ai widget il font globale del kit: qui eredita quello della pagina. */
.pc-ph.pc-ph :is(.elementor-heading-title, .elementor-widget-text-editor) {
	font-family: inherit;
	color: inherit;
}

.pc-ph a {
	color: inherit;
	text-decoration: none;
}

.pc-ph :is(a, button):focus-visible {
	outline: 2px solid var(--ph-ink);
	outline-offset: 3px;
}

/* Spazi: il design li decide con gap, non con i margini dei widget di Elementor. */
.pc-ph .elementor-widget:not(:last-child) {
	margin-block-end: 0;
	margin-bottom: 0;
}

.pc-ph .elementor-widget-wrap {
	padding: 0;
}

.pc-ph :is(.elementor-widget-text-editor, .elementor-widget-heading) :is(p, h1, h2, h3) {
	margin: 0;
}

/* Segnaposto dei widget nell'editor: compare solo quando il widget è vuoto. */
.pc-ph-segnaposto {
	padding: 10px 14px;
	border: 1px dashed #B8B0A4;
	border-radius: 8px;
	color: #57514A;
	font-size: 13px;
	line-height: 1.4;
}

/* Colonne: la larghezza la decide la griglia della sezione, non la percentuale di Elementor. */
.elementor-section.pc-ph-hero > .elementor-container > .elementor-column.elementor-top-column,
.elementor-section.pc-ph-corpo > .elementor-container > .elementor-column.elementor-top-column {
	width: auto;
	max-width: none;
	min-width: 0;
}

.pc-ph-hero > .elementor-container,
.pc-ph-corpo > .elementor-container,
.pc-ph-vetrina > .elementor-container {
	width: 100%;
}

/* ---------- Numeri, titoli, testi ---------- */

.pc-ph-num,
.pc-ph-num .elementor-heading-title {
	font-family: var(--ph-mono);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.32;
	color: var(--ph-sec);
}

.pc-ph-h2 .elementor-heading-title {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
}

.pc-ph-p,
.pc-ph-p p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ph-testo);
}

.pc-ph-p.pc-ph-intro,
.pc-ph-p.pc-ph-intro p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ph-sec);
}

/* Rimandi alle fonti nel testo: [n] discreto, sottolineato al passaggio. */
.pc-ph a.pc-ph-rif {
	padding: 0 1px;
	font-size: .75em;
	line-height: 0;
	vertical-align: super;
	color: var(--ph-sec);
	text-decoration: none;
	position: relative;
}

/* Area di tocco di almeno 24 px senza spostare il testo. */
.pc-ph a.pc-ph-rif::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 24px);
	height: 24px;
	transform: translate(-50%, -50%);
}

.pc-ph a.pc-ph-rif:hover,
.pc-ph a.pc-ph-rif:focus-visible {
	color: var(--ph-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- In sintesi ---------- */

.pc-ph-sintesi {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border-radius: 20px;
	background: var(--ph-beige);
}

.pc-ph-sintesi__titolo {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pc-ph-sintesi__righe {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.pc-ph-sintesi__righe > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-top: 1px solid var(--ph-bordo);
}

.pc-ph-sintesi__righe dt {
	font-size: 14px;
	color: var(--ph-sec);
}

.pc-ph-sintesi__righe dt::after {
	content: ":";
}

.pc-ph-sintesi__righe dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ph-ink);
}

/* ---------- Hero ---------- */

.elementor-section.pc-ph-hero {
	padding: 32px 20px 28px;
	background-color: var(--ph-beige);
}

.pc-ph-hero > .elementor-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pc-ph-hero__testo > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pc-ph-eyebrow .elementor-heading-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: normal;
	text-transform: uppercase;
}

.pc-ph-h1 .elementor-heading-title {
	font-size: 40px;
	line-height: 1.05;
	font-weight: 300;
	letter-spacing: -.02em;
}

.pc-ph-lead,
.pc-ph-lead p {
	font-size: 17px;
	line-height: 1.5;
	text-wrap: pretty;
}

.pc-ph-hero__img {
	margin-top: 6px;
}

.pc-ph-hero__img img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: right center;
	border-radius: 20px;
}

/* ---------- Corpo: indice e parti ---------- */

.elementor-section.pc-ph-corpo {
	padding: 28px 20px 0;
}

.pc-ph-corpo > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 48px;
}

.pc-ph-corpo__testo > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 760px;
}

.pc-ph-sez {
	width: 100%;
}

.pc-ph-sez .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pc-ph-sez .elementor-widget-wrap > .elementor-element {
	width: 100%;
}

.pc-ph-sez--ricerca .elementor-widget-wrap,
.pc-ph-sez--fonti .elementor-widget-wrap {
	gap: 14px;
}

.elementor-section.pc-ph-sez {
	scroll-margin-top: var(--ph-testata);
}

/* ---------- Indice ---------- */

.pc-ph-indice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid var(--ph-bordo);
	border-radius: 20px;
}

.pc-ph-indice__titolo {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pc-ph-indice a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	min-height: 36px;
	font-size: 15px;
}

.pc-ph-indice a:hover {
	color: #6B5A3A;
}

.pc-ph-indice__n {
	font-family: var(--ph-mono);
	font-size: 12px;
	color: var(--ph-sec);
}

/* ---------- Recettori ---------- */

.pc-ph-recettori {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pc-ph-recettore {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--ph-beige);
}

.pc-ph-recettore strong {
	font-size: 18px;
	font-weight: 600;
}

.pc-ph-recettore span {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ph-testo);
}

/* ---------- Studi ---------- */

.pc-ph-studi {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pc-ph-studio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--ph-bordo);
	border-radius: 20px;
}

.pc-ph-studio__tag {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pc-ph-studio__chi {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

.pc-ph-studio__righe {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.pc-ph-studio__righe > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0;
	border-top: 1px solid var(--ph-linea);
}

.pc-ph-studio__righe dt {
	color: var(--ph-sec);
}

.pc-ph-studio__righe dd {
	margin: 0;
}

.pc-ph-studio__doi {
	display: flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--ph-mono);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pc-ph a.pc-ph-studio__doi {
	text-decoration: underline;
}

/* ---------- Limiti, glossario, fonti ---------- */

.pc-ph-limiti {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-ph-limiti li {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--ph-linea);
	font-size: 16px;
	line-height: 1.45;
}

.pc-ph-glossario {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.pc-ph-glossario > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-top: 1px solid var(--ph-linea);
}

.pc-ph-glossario dt {
	font-size: 16px;
	font-weight: 600;
}

.pc-ph-glossario dt::after {
	content: ":";
}

.pc-ph-glossario dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ph-testo);
}

.pc-ph-fonti {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ph-testo);
}

.pc-ph-fonti li {
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
	scroll-margin-top: calc(var(--ph-testata) + 16px);
}

.pc-ph-fonti li:target {
	background: var(--ph-beige);
	box-shadow: 0 0 0 6px var(--ph-beige);
}

.pc-ph-fonti a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Prodotti con Phytabinoid™ ---------- */

.elementor-section.pc-ph-vetrina {
	margin-top: 64px;
	padding: 40px 20px;
	background-color: var(--ph-beige);
	scroll-margin-top: var(--ph-testata);
}

.pc-ph-prodotti {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pc-ph-prodotti__testa {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pc-ph-prodotti__testa h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
}

.pc-ph-prodotti__intro {
	margin: 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ph-testo);
}

.pc-ph-prodotti__tutti {
	order: 3;
	display: flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pc-ph a.pc-ph-prodotti__tutti {
	text-decoration: underline;
}

/* Card affiancate e centrate: su mobile due colonne uguali, da 768 px card di larghezza fissa. */
.pc-ph-prodotti__elenco {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 24px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-ph-prodotti__elenco li {
	flex: 0 0 calc(50% - 7px);
	min-width: 0;
	margin: 0;
}

.pc-ph-prodotto {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

/* Cerchio con il colore del prodotto, dietro al PNG trasparente: nessuna fusione. */
.pc-ph-prodotto__foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	max-width: 100%;
}

.pc-ph-prodotto__foto::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pc-tinta, #E6DAC2) 45%, #fff);
}

.pc-ph-prodotto__foto img {
	position: relative;
	width: auto;
	height: auto;
	max-width: 86%;
	max-height: 92%;
	mix-blend-mode: normal;
}

.pc-ph-prodotto__testo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.pc-ph-prodotto__testo strong {
	font-size: 17px;
	font-weight: 600;
}

.pc-ph-prodotto__testo span {
	font-size: 15px;
	color: var(--ph-testo);
}

/* ---------- Tablet e desktop: parti ---------- */

@media (min-width: 768px) {
	.pc-ph {
		--ph-testata: calc(72px + var(--wp-admin--admin-bar--height, 0px));
	}

	.pc-ph-h2 .elementor-heading-title {
		font-size: 30px;
		line-height: 1.15;
		font-weight: 300;
		letter-spacing: -.01em;
	}

	.pc-ph-p,
	.pc-ph-p p {
		font-size: 18px;
		line-height: 1.65;
	}

	.pc-ph-p.pc-ph-intro,
	.pc-ph-p.pc-ph-intro p {
		font-size: 17px;
		line-height: 1.55;
	}

	.pc-ph-sez .elementor-widget-wrap {
		gap: 16px;
	}

	.pc-ph-sintesi {
		gap: 10px;
		padding: 24px 28px;
	}

	.pc-ph-sintesi__righe > div {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 16px;
		padding: 12px 0;
	}

	.pc-ph-sintesi__righe dd {
		font-size: 17px;
	}

	.pc-ph-sez--ricerca .elementor-widget-wrap {
		gap: 20px;
	}

	/* Fonti: filetto scuro sopra, titolo in neretto (600 si vede 700). */
	.elementor-section.pc-ph-sez--fonti {
		padding-top: 28px;
		border-top: 1px solid var(--ph-ink);
	}

	.pc-ph-sez--fonti .elementor-widget-wrap {
		gap: 14px;
	}

	.pc-ph-sez--fonti .pc-ph-h2 .elementor-heading-title {
		font-size: 24px;
		line-height: normal;
		font-weight: 600;
		letter-spacing: 0;
	}

	.pc-ph-recettori {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.pc-ph-recettore {
		gap: 6px;
		padding: 24px;
		border-radius: 22px;
	}

	.pc-ph-recettore strong {
		font-size: 22px;
	}

	.pc-ph-recettore span {
		font-size: 16px;
	}

	.pc-ph-studi {
		gap: 20px;
	}

	.pc-ph-studio {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 28px;
		row-gap: 0;
		padding: 28px 32px;
		border-radius: 24px;
	}

	.pc-ph-studio__tag {
		grid-column: 1;
		grid-row: 1;
	}

	.pc-ph-studio__chi {
		grid-column: 1;
		grid-row: 2;
		margin-top: 10px;
		font-size: 20px;
	}

	.pc-ph-studio__doi {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		display: block;
		min-height: 0;
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.5;
		word-break: break-all;
	}

	.pc-ph-studio__righe {
		grid-column: 2;
		grid-row: 1 / span 4;
		font-size: 16px;
	}

	.pc-ph-studio__righe > div {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 16px;
		padding: 10px 0;
	}

	.pc-ph-limiti li {
		padding: 14px 0;
		font-size: 18px;
	}

	.pc-ph-glossario > div {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
		padding: 14px 0;
	}

	.pc-ph-glossario dt,
	.pc-ph-glossario dd {
		font-size: 17px;
	}

	.pc-ph-fonti {
		padding-left: 22px;
		font-size: 15px;
		line-height: 1.55;
	}
}

/* ---------- Tablet (768-1024 px): variante senza mockup ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-section.pc-ph-hero {
		padding: 48px 32px;
	}

	.pc-ph-hero > .elementor-container {
		gap: 32px;
	}

	.pc-ph-hero__testo > .elementor-widget-wrap {
		gap: 20px;
	}

	.pc-ph-eyebrow .elementor-heading-title {
		font-size: 14px;
		letter-spacing: .08em;
	}

	.pc-ph-h1 .elementor-heading-title {
		font-size: 56px;
		line-height: 1;
		letter-spacing: -.025em;
	}

	.pc-ph-lead,
	.pc-ph-lead p {
		max-width: 500px;
		font-size: 20px;
	}

	.pc-ph-hero__img {
		margin-top: 0;
	}

	.pc-ph-hero__img img {
		border-radius: 28px;
	}

	.elementor-section.pc-ph-corpo {
		padding: 48px 32px 0;
	}

	.pc-ph-corpo__testo > .elementor-widget-wrap {
		gap: 64px;
	}

	/* Indice sopra il contenuto, su due colonne. */
	.pc-ph-indice {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		padding: 20px 24px;
	}

	.pc-ph-indice__titolo {
		grid-column: 1 / -1;
	}

	.elementor-section.pc-ph-vetrina {
		margin-top: 96px;
		padding: 64px 32px;
	}
}

/* ---------- Desktop (da 1025 px) ---------- */

@media (min-width: 1025px) {
	.pc-ph {
		--ph-testata: calc(84px + var(--wp-admin--admin-bar--height, 0px));
	}

	.elementor-section.pc-ph-hero {
		padding: 0 40px;
	}

	.pc-ph-hero > .elementor-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 64px;
		align-items: center;
		min-height: 520px;
	}

	.pc-ph-hero__testo > .elementor-widget-wrap {
		gap: 22px;
		padding: 64px 0;
	}

	.pc-ph-eyebrow .elementor-heading-title {
		font-size: 14px;
		letter-spacing: .08em;
	}

	/* 72 px a 1200 px e oltre: sotto, il titolo si riduce per restare nella colonna. */
	.pc-ph-h1 .elementor-heading-title {
		font-size: clamp(56px, 6vw, 72px);
		line-height: 1;
		letter-spacing: -.025em;
	}

	.pc-ph-lead,
	.pc-ph-lead p {
		max-width: 500px;
		font-size: 20px;
	}

	.pc-ph-hero__img {
		margin-top: 0;
	}

	.pc-ph-hero__img img {
		border-radius: 28px;
	}

	.elementor-section.pc-ph-corpo {
		padding: 88px 40px 0;
	}

	.pc-ph-corpo > .elementor-container {
		grid-template-columns: 260px minmax(0, 1fr);
		column-gap: 96px;
	}

	.pc-ph-corpo__testo > .elementor-widget-wrap {
		gap: 80px;
	}

	/* L'indice resta visibile durante lo scorrimento, sotto la testata fissa e la barra di WordPress, più 24 px. */
	.pc-ph-indice-w {
		position: sticky;
		top: calc(var(--ph-testata) + 24px);
	}

	.pc-ph-indice {
		gap: 2px;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	.pc-ph-indice__titolo {
		margin-bottom: 10px;
	}

	.pc-ph-indice a {
		grid-template-columns: 30px minmax(0, 1fr);
		min-height: 40px;
		border-top: 1px solid var(--ph-linea);
		font-size: 16px;
	}

	.pc-ph-h2 .elementor-heading-title {
		font-size: 34px;
	}

	.elementor-section.pc-ph-vetrina {
		margin-top: 120px;
		padding: 80px 40px;
	}

	.pc-ph-prodotti__testa h2 {
		font-size: 32px;
	}
}

/* ---------- Prodotti: griglia (da 768 px) ---------- */

@media (min-width: 768px) {
	/* Titolo a sinistra, link al negozio a destra; sotto la griglia dei prodotti. */
	.pc-ph-prodotti {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 40px 24px;
		align-items: end;
	}

	.pc-ph-prodotti__testa {
		grid-column: 1;
		grid-row: 1;
	}

	.pc-ph-prodotti__testa h2 {
		line-height: normal;
		font-weight: 300;
		letter-spacing: -.01em;
	}

	.pc-ph-prodotti__tutti {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		height: 48px;
		min-height: 0;
		padding: 0 26px;
		border: 1px solid var(--ph-ink);
		border-radius: 999px;
		font-weight: 600;
		text-decoration: none;
	}

	.pc-ph a.pc-ph-prodotti__tutti {
		text-decoration: none;
	}

	.pc-ph-prodotti__elenco {
		grid-column: 1 / -1;
		grid-row: 2;
		gap: 32px;
	}

	.pc-ph-prodotti__elenco li {
		flex: 0 1 300px;
	}

	.pc-ph-prodotto__foto {
		width: 200px;
		height: 200px;
	}

	.pc-ph-prodotto__foto::before {
		inset: 12px;
	}

	.pc-ph-prodotto__foto img {
		max-width: 82%;
		max-height: 96%;
	}

	.pc-ph-prodotto__testo {
		gap: 10px;
	}

	.pc-ph-prodotto__testo strong {
		margin-top: 6px;
		font-size: 19px;
	}

	.pc-ph-prodotto__testo span {
		font-size: 16px;
	}
}

/* Tablet: il titolo del blocco è più piccolo. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pc-ph-prodotti__testa h2 {
		font-size: 28px;
	}
}

/* Da 1025 a 1200 px il contenuto è più stretto: lo spazio fra indice e testo si riduce. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.pc-ph-corpo > .elementor-container {
		column-gap: 56px;
	}
}

/* Senza prodotti il widget non stampa nulla: la fascia non lascia un vuoto. */
.elementor-section.pc-ph-vetrina:not(:has(.elementor-widget)) {
	display: none;
}