/**
 * Single product — "Provenance" product detail page (PDP) design.
 *
 * Loaded only on product pages (see frogmouth_enqueue_assets()).
 * Like the front page, the PDP is full-bleed: header.php / footer.php suppress
 * the standard .site-header / .site-container chrome on product pages via
 * frogmouth_uses_custom_chrome(), so these sections own the viewport width.
 *
 * TAILWIND MIGRATION (epic 01, Phase 2): the component presentation now lives in
 * Tailwind utilities on the markup (woocommerce/single-product.php). What remains
 * here is the irreducible CSS that can't move to utilities:
 *   - the .fp-pdp token scope + box-sizing reset + ::selection;
 *   - .fp-pdp__features / .fp-pdp__feature (the ✓ ::before pseudo-element);
 *   - .fp-pdp__about-body * (wpautop()/wp_kses_post() content — generated HTML
 *     can't carry utility classes; conventions rule #2), incl. the embedded table;
 *   - the .fp-pdp__faq-a <p> margin flatten (dynamic answer content, same reason).
 *
 * @package Frogmouth_2026
 */

/* ---------- Tokens ---------- */
.fp-pdp {
	--fp-cream: #f1ebdb;
	--fp-cream-card: #f7f1e3;
	--fp-cream-img: #e8e0cd;
	--fp-ink: #1c2419;
	--fp-footer: #141a10;
	--fp-amber: #d99a2b;
	--fp-gold: #e7c98a;
	--fp-muted: #cfc8b3;
	--fp-muted-warm: #e7e0cd;
	--fp-green-text: #4d5a40;
	--fp-green-soft: #5a6650;
	--fp-olive: #7a6a2e;
	--fp-line: rgba(28, 36, 25, 0.14);
	--fp-line-strong: rgba(28, 36, 25, 0.18);

	background: var(--fp-cream);
	color: var(--fp-ink);
	font-family: 'Newsreader', serif;
}

.fp-pdp *,
.fp-pdp *::before,
.fp-pdp *::after {
	box-sizing: border-box;
}

.fp-pdp ::selection {
	background: var(--fp-amber);
	color: var(--fp-ink);
}

/* ---------- Header ----------
   The PDP header (ship bar + nav) now renders through the shared partial
   template-parts/site-header.php; its nav CSS lives in style.css
   (.fp-site-header__menu), loaded globally. */

/* ---------- Buy box: feature list (non-honey, from ✓ short-desc lines) --------
   Kept as scoped CSS for the ✓ ::before pseudo-element (rule type can't migrate
   to utilities). */
.fp-pdp__features {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fp-pdp__feature {
	position: relative;
	padding-left: 26px;
	font-family: 'Newsreader', serif;
	font-size: 17px;
	line-height: 1.45;
	color: var(--fp-green-text);
}

.fp-pdp__feature::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--fp-olive);
}

/* ---------- About (non-honey editorial description) --------------------------
   The body below holds wpautop()/wp_kses_post() output — generated HTML that
   can't carry utility classes (conventions rule #2) — so its descendant rules
   stay as scoped CSS. The .fp-pdp__about wrapper + its section-head are migrated
   to utilities in the template. */
.fp-pdp__about-body {
	max-width: 760px;
	margin: 0 auto;
}

.fp-pdp__about-body > *:first-child {
	margin-top: 0;
}

.fp-pdp__about-body > *:last-child {
	margin-bottom: 0;
}

/* The opening paragraph reads as a centered lead, matching the comp. */
.fp-pdp__about-body > p:first-of-type {
	font-size: 20px;
	line-height: 1.7;
	color: #33402b;
	text-align: center;
	text-wrap: pretty;
	margin: 0 0 44px;
}

.fp-pdp__about-body h2 {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 48px 0 18px;
}

.fp-pdp__about-body h3 {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.18;
	margin: 40px 0 14px;
	padding-top: 26px;
	border-top: 1px solid var(--fp-line);
}

.fp-pdp__about-body p {
	font-family: 'Newsreader', serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--fp-ink);
	margin: 0 0 18px;
	text-wrap: pretty;
}

.fp-pdp__about-body a {
	color: var(--fp-olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fp-pdp__about-body a:hover,
.fp-pdp__about-body a:focus {
	color: var(--fp-amber);
}

.fp-pdp__about-body strong {
	font-weight: 500;
}

.fp-pdp__about-body ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.fp-pdp__about-body ul li {
	position: relative;
	padding-left: 26px;
	font-family: 'Newsreader', serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--fp-green-text);
	margin-bottom: 10px;
}

.fp-pdp__about-body ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fp-amber);
}

.fp-pdp__about-body ul li a {
	color: var(--fp-olive);
}

/* ---------- Description-embedded table ----------------------------------------
   Some product descriptions (AI-authored / imported) carry their own <table>,
   with hardcoded inline styles. Brand-match it to the "From the Apiary" article
   component (.fp-compare table). Any inline FAQ <details> is extracted out of the
   description at render time (see frogmouth_extract_description_faq) and rendered
   through the shared .fp-pdp__faq section, so no <details> rules live here. */

/* Table → clean branded grid: dark header, gold underline, striped rows. */
.fp-pdp__about-body table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fp-line-strong);
	margin: 8px 0 32px;
	font-family: 'Newsreader', serif;
}

.fp-pdp__about-body thead th {
	background: var(--fp-ink) !important;
	color: var(--fp-muted-warm) !important;
	border-bottom: 2px solid var(--fp-amber) !important;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 18px;
	text-align: left;
}

.fp-pdp__about-body tbody td {
	padding: 13px 18px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--fp-body-ink, #2a3322);
	border-bottom: 1px solid var(--fp-line);
}

.fp-pdp__about-body tbody tr:nth-child(even) td {
	background: var(--fp-cream-card);
}

.fp-pdp__about-body tbody td:first-child {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fp-ink);
}

/* ---------- FAQ answer content (dynamic) ------------------------------------
   The .fp-pdp__faq container/items/question/answer presentation is on Tailwind
   utilities (epic 01, see woocommerce/single-product.php). Extracted (description-
   sourced) answers may wrap their text in a <p> from wp_kses_post; flatten its
   margins so it reads identically to the honey FAQ's plain-text answers. Generated
   content can't carry utility classes, so these stay as scoped CSS. Descendant
   selector (not >) because the answer text sits inside the animated wrappers. */
.fp-pdp__faq-a p {
	margin: 0;
}

.fp-pdp__faq-a p + p {
	margin-top: 12px;
}