/*
Theme Name: Opificio della Badante

Scheda prodotto (single product WooCommerce) — stili per-pagina.
Design: design_handoff_prodotto. Usa i token --odb-* del design system e il
sistema di breakpoint standard (sm 640 · md 900 · lg 1200 · xl 1600).
Nota: tutte le rotture di struttura (2 col → 1 col) sono agganciate al md 900,
lo switch mobile↔desktop del sito, per non introdurre soglie ad hoc.
*/

/*--------------------------------------------------------------
# Breadcrumb
--------------------------------------------------------------*/
.odb-breadcrumb {
	padding-top: clamp(96px, 12vh, 130px); /* compensa la topbar fissa */
	padding-bottom: clamp(16px, 2vh, 24px);
	border-bottom: 1px solid var(--odb-hair-soft);
}
.odb-breadcrumb__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--odb-font-mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
}
.odb-breadcrumb__inner a { transition: color .2s var(--odb-ease); }
.odb-breadcrumb__inner a:hover { color: var(--odb-ink); }
.odb-breadcrumb__sep { opacity: .4; }
.odb-breadcrumb__current { color: var(--odb-ink); }

/*--------------------------------------------------------------
# Hero prodotto
--------------------------------------------------------------*/
.odb-pdp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 36vw, 520px);
	gap: clamp(40px, 6vw, 100px);
	align-items: center;
	padding-block: clamp(48px, 8vh, 96px);
	border-bottom: 1px solid var(--odb-hair);
}

.odb-pdp__info { display: flex; flex-direction: column; }

.odb-pdp__cat {
	font-family: var(--odb-font-mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin: 0 0 14px;
}
.odb-pdp__name {
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: clamp(2.4rem, 6vw, 5rem);
	letter-spacing: -.03em;
	line-height: .94;
	margin: 0 0 clamp(20px, 3vh, 32px);
	text-wrap: balance;
}
.odb-pdp__tagline {
	font-family: var(--odb-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	line-height: 1.3;
	color: var(--odb-ink-soft);
	margin: 0 0 clamp(24px, 4vh, 40px);
	max-width: 38ch;
	text-wrap: pretty;
}

/* Specifiche */
.odb-pdp__specs {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--odb-hair);
	margin-bottom: clamp(28px, 4vh, 44px);
}
.odb-pdp__spec {
	padding: 14px 0;
	padding-right: clamp(24px, 3vw, 48px);
	border-bottom: 1px solid var(--odb-hair-soft);
	flex: 1 1 auto;
}
.odb-pdp__spec-label {
	display: block;
	font-family: var(--odb-font-mono);
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin-bottom: 4px;
}
.odb-pdp__spec-value {
	font-family: var(--odb-font-mono);
	font-size: .88rem;
	font-weight: 500;
	color: var(--odb-ink);
}

/* Prezzo */
.odb-pdp__price {
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	letter-spacing: -.02em;
	margin: 0 0 clamp(20px, 3vh, 32px);
	color: var(--odb-ink);
}
.odb-pdp__price-note {
	display: block;
	font-family: var(--odb-font-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	font-weight: 400;
	color: var(--odb-ink-soft);
	margin-top: 4px;
}

/* Azioni */
.odb-pdp__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.odb-pdp__order {
	font-family: var(--odb-font-mono);
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--odb-bg);
	background: var(--odb-ink);
	border: 1px solid var(--odb-ink);
	padding: 15px 28px;
	cursor: pointer;
	transition: background .25s var(--odb-ease), color .25s var(--odb-ease), border-color .25s var(--odb-ease);
}
.odb-pdp__order:hover { background: var(--odb-wine); border-color: var(--odb-wine); }
.odb-pdp__back {
	font-family: var(--odb-font-mono);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	transition: color .2s var(--odb-ease);
}
.odb-pdp__back:hover { color: var(--odb-ink); }

/* Visuale (blob + bottiglia) */
.odb-pdp__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
}
.odb-pdp__blob {
	position: absolute;
	inset: 5%;
	background-size: cover;
	background-position: center;
	border-radius: 63% 37% 54% 46% / 58% 49% 51% 42%;
	opacity: .8;
}
.odb-pdp__bottle {
	position: relative;
	z-index: 2;
	height: 88%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 32px 48px rgba(26, 23, 18, .24));
}

/* < md 900: una colonna, la visuale sopra */
@media (max-width: 900px) {
	.odb-pdp-hero { grid-template-columns: 1fr; gap: 40px; }
	.odb-pdp__visual { order: -1; }
}

/*--------------------------------------------------------------
# Sezioni di contenuto (comune)
--------------------------------------------------------------*/
.odb-pdp-section {
	padding-block: clamp(64px, 10vh, 120px);
	border-bottom: 1px solid var(--odb-hair);
}
.odb-pdp-section:last-of-type { border-bottom: none; }

.odb-pdp__seclabel {
	font-family: var(--odb-font-mono);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin: 0 0 clamp(24px, 4vh, 40px);
	display: flex;
	align-items: center;
	gap: 14px;
}
.odb-pdp__seclabel::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--odb-hair);
}

/*--------------------------------------------------------------
# Descrizione
--------------------------------------------------------------*/
.odb-pdp-desc {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
@media (max-width: 900px) { .odb-pdp-desc { grid-template-columns: 1fr; } }

.odb-pdp__desc-lede,
.odb-pdp__desc-lede p {
	font-family: var(--odb-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	line-height: 1.18;
	letter-spacing: -.005em;
	text-wrap: pretty;
}
.odb-pdp__desc-lede p { margin: 0 0 .4em; }
.odb-pdp__desc-lede p:last-child { margin-bottom: 0; }
.odb-pdp__desc-lede em { font-style: italic; }

.odb-pdp__desc-side p {
	font-family: var(--odb-font-sans);
	font-size: .96rem;
	line-height: 1.7;
	color: var(--odb-ink-soft);
	margin: 0 0 1.2em;
	max-width: 38ch;
}
.odb-pdp__desc-side p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Botaniche (hairline via gap: robusto a qualsiasi n° colonne)
--------------------------------------------------------------*/
.odb-pdp-bot {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	border-top: 1px solid var(--odb-hair);
	border-left: 1px solid var(--odb-hair);
}
@media (max-width: 640px) {
	.odb-pdp-bot { grid-template-columns: repeat(2, 1fr); }
}
.odb-pdp__bot-item {
	padding: 18px 16px;
	border-right: 1px solid var(--odb-hair);
	border-bottom: 1px solid var(--odb-hair);
}
.odb-pdp__bot-name {
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: .96rem;
	letter-spacing: -.01em;
	margin: 0 0 4px;
}
.odb-pdp__bot-note {
	font-family: var(--odb-font-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin: 0;
}

/*--------------------------------------------------------------
# La storia
--------------------------------------------------------------*/
.odb-pdp-storia {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
@media (max-width: 900px) { .odb-pdp-storia { grid-template-columns: 1fr; } }

.odb-pdp__storia-text p {
	font-family: var(--odb-font-sans);
	font-size: .98rem;
	line-height: 1.72;
	color: var(--odb-ink-soft);
	margin: 0 0 1.3em;
}
.odb-pdp__storia-text p:last-child { margin-bottom: 0; }

.odb-pdp__storia-pull {
	font-family: var(--odb-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	line-height: 1.22;
	letter-spacing: -.005em;
	margin: 0;
	padding-left: clamp(20px, 3vw, 36px);
	border-left: 2px solid var(--odb-ink);
	color: var(--odb-ink);
	text-wrap: pretty;
}

/*--------------------------------------------------------------
# Tabella nutrizionale
--------------------------------------------------------------*/
.odb-pdp-nutr {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--odb-font-mono);
}
.odb-pdp-nutr thead tr {
	background: var(--odb-ink);
	color: var(--odb-bg);
}
.odb-pdp-nutr th {
	padding: 14px 18px;
	text-align: left;
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
}
.odb-pdp-nutr th:not(:first-child) { text-align: right; }
.odb-pdp-nutr td {
	padding: 13px 18px;
	font-size: .82rem;
	color: var(--odb-ink);
	border-bottom: 1px dashed var(--odb-hair);
}
.odb-pdp-nutr td:not(:first-child) { text-align: right; color: var(--odb-ink-soft); }
.odb-pdp-nutr tr:hover td { background: var(--odb-bg-deep); }
.odb-pdp-nutr tr.is-sub td:first-child {
	padding-left: 34px;
	color: var(--odb-ink-soft);
	font-style: italic;
}
.odb-pdp__nutr-note {
	font-family: var(--odb-font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--odb-ink-soft);
	margin: 14px 0 0;
}

/*--------------------------------------------------------------
# FAQ accordion
--------------------------------------------------------------*/
.odb-pdp-faq { list-style: none; margin: 0; padding: 0; }
.odb-pdp__faq-item { border-bottom: 1px solid var(--odb-hair); }
.odb-pdp__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: clamp(18px, 2.4vh, 26px) 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	letter-spacing: -.01em;
	color: var(--odb-ink);
	transition: color .2s var(--odb-ease);
}
.odb-pdp__faq-q:hover { color: var(--odb-wine); }
.odb-pdp__faq-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--odb-font-mono);
	font-size: 1.1rem;
	color: var(--odb-ink-soft);
	transition: transform .35s var(--odb-ease), color .2s var(--odb-ease);
}
.odb-pdp__faq-item.is-open .odb-pdp__faq-icon { transform: rotate(45deg); color: var(--odb-ink); }
.odb-pdp__faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s var(--odb-ease);
}
.odb-pdp__faq-item.is-open .odb-pdp__faq-a { max-height: 600px; }
.odb-pdp__faq-a-inner {
	padding-bottom: clamp(16px, 2.4vh, 24px);
	max-width: 64ch;
}
.odb-pdp__faq-a-inner p {
	font-family: var(--odb-font-sans);
	font-size: .94rem;
	line-height: 1.7;
	color: var(--odb-ink-soft);
	margin: 0 0 1em;
}
.odb-pdp__faq-a-inner p:last-child { margin-bottom: 0; }

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.odb-pdp__faq-a,
	.odb-pdp__faq-icon,
	.odb-pdp__order,
	.odb-pdp__back { transition: none; }
}