/**
 * Bonza, basic product page template: buy box, gallery, sticky buy bar
 * (ClickUp 86eypb6me).
 *
 * Config investigated: Appearance > Customize > WooCommerce > Single Product
 * (gallery style, sticky product info, tabs layout) checked on
 * bonza-retheme.blz.au via `wp theme mod list`. No single/gallery/sticky
 * keys are set; Blocksy is still on stock defaults, so there is no existing
 * Customizer config to reuse or collide with. WooCommerce > Settings >
 * Payments cross-check: staging only exposes a placeholder "cheque" gateway
 * relabelled "Credit/Debit Card (Staging)", which does not represent the
 * live gateway set. The payment-icon row below calls the same
 * bonza_footer_payment_methods() the footer already uses (custom.php,
 * ClickUp 86eypb6aw) rather than a second hardcoded list, so there is one
 * place to fix once that reconciliation task lands.
 *
 * Figma: file cY9QX6IwGVaaGI4r7J2RRF, component set "PDP" (223:35864).
 * Two page-canvas frames both named "BASIC PRODUCT PAGE - D" turned out to
 * be the same component set, one instance per product-type variant
 * (TYPE=SUPERFOODS #14133:153690 on frame 21316:76931, TYPE=BIOTICS
 * #34920:65834 on frame 34926:77030), confirmed via the Figma API:
 * componentId and componentProperties are the same shape, only the parent
 * component differs. Live product data backs this up: bonza-retheme.blz.au
 * has a "Superfoods & Ancient Grains" category (1 product) and a
 * "Bioactive Bites" category (14 products), matching the two variants
 * exactly. This is one template, driven by real product data, with no
 * per-category branching required, the same as any other WooCommerce
 * single-product page.
 *
 * SCOPE: this covers the buy box the task's own estimate breakdown
 * describes (scaffold+gallery, switched states, price/variant binding,
 * sticky bar, WPML/contrast), everything from the breadcrumb down through
 * the "Free VidiVet subscription" band. The same Figma frame also holds a
 * much larger set of long-form marketing sections below that (tabbed
 * "why it's different / how it works / inside the formula / when to
 * expect results / reviews / build your routine / feeding calculator /
 * full FAQ list", 8+ sections with their own imagery and copy). That
 * content runs well past the 7h estimate and this task's Definition of
 * Done, so it is not built here. Flagged explicitly in the ClickUp comment
 * as needing its own scope decision rather than being silently built or
 * silently dropped.
 *
 * Fonts: Nominee (headings/buttons/eyebrow) and Kobe1.1 (body/links) have
 * no @font-face on this site yet (same open item already logged in
 * footer.css/shipping-panel.css). Falls back to the theme's own font vars.
 *
 * Button component (Figma component set "Button" 29049:58925, "Kind=
 * Secondary, Size=Large" variant, used for Add to Cart / FAQ CTA /
 * notify-me / sticky bar): enumerated states are Default (fill #247B4E
 * plus BUTTON SHADOW), Hover (fill #FFC125 yellow, black text), Disabled
 * (fill #247B4E, 0.6 opacity). No Focus/Active/Error/Loading variant
 * exists in Figma for this component; a focus-visible outline is added
 * anyway for the DoD's visible-focus requirement, the same precedent
 * already set in shipping-panel.css for this exact component.
 *
 * WooCommerce default woocommerce_single_product_summary hook order
 * (confirmed against current WooCommerce docs, not assumed): title (5),
 * rating and price (10), short description (20), add to cart (30), meta
 * (40), sharing (50). custom.php only moves price from 10 to 29 so it
 * renders in Figma's order (after the short description and FAQ teaser,
 * right before Add to Cart); every other default stays in place so
 * variations, bundles and the subscriptions plugin keep working exactly
 * as WooCommerce ships them.
 *
 * Contrast (WCAG 2.2 AA, measured):
 * - Body ink #494545 on cream #F8EDE3: about 7.5:1, passes AA/AAA. Same
 *   pair already audited in shipping-panel.css.
 * - White text on #247B4E (button default): about 4.9:1, passes AA normal
 *   text. Same green already used site-wide (footer, shipping panel).
 * - Black text on #FFC125 (button hover): about 13:1, passes AAA. Same
 *   pair already measured in shipping-panel.css.
 * - Selected-thumbnail border #FF6256 on cream is a non-text UI indicator.
 *   Selection state is not conveyed by color alone (JS also sets
 *   aria-current="true" on the active thumbnail button), so this is
 *   flagged for the whole-site WCAG pass (86eypb8gy) alongside the
 *   tab-underline/focus-ring findings already logged there, rather than
 *   treated as a blocker here.
 * - Out-of-stock badge text uses --bpp-red-text (#C6362B), darkened from
 *   the Figma-literal #FF6256 which only measures about 2.9:1 on white.
 *   #C6362B measures about 4.6:1: the same "darken for real text, keep the
 *   Figma value for large/non-text uses" pattern footer.css already uses
 *   for green.
 *
 * @package Blocksy_Child
 * @client  Bonza
 * @date    2026-08-27
 */

/**
 * Custom property scope: WordPress already puts body.single-product on
 * every single-product page (no wrapper div needed for this). The
 * summary column layout below targets WooCommerce's own real markup,
 * div.summary.entry-summary, printed by the default single-product
 * template, not a custom wrapper class.
 */
body.single-product {
	--bpp-cream: var(--bpp-color-cream, #F8EDE3);
	--bpp-ink: var(--bpp-color-ink, #494545);
	--bpp-ink-muted: var(--bpp-color-ink-muted, #746E60);
	--bpp-green: var(--bpp-color-green, #247B4E);
	--bpp-yellow: var(--bpp-color-yellow, #FFC125);
	--bpp-white: var(--bpp-color-white, #FFFFFF);
	--bpp-black: var(--bpp-color-black, #000000);
	--bpp-red-figma: var(--bpp-color-red-figma, #FF6256);
	--bpp-red-text: var(--bpp-color-red-text, #C6362B);
	--bpp-heading-font: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif));
	--bpp-body-font: "Kobe1.1", var(--theme-font-family, sans-serif);
}

.single-product div.summary.entry-summary {
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--bpp-ink);
	font-family: var(--bpp-body-font);
}

.single-product div.product.type-product {
	max-width: 1512px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Breadcrumb (Figma shows "Home › Category", no product-title crumb; the
   last crumb is dropped in custom.php to match). */
.single-product .woocommerce-breadcrumb {
	max-width: 1512px;
	margin: 0 auto;
	padding: 20px 20px 0;
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--bpp-ink-muted);
}

.single-product .woocommerce-breadcrumb a {
	color: var(--bpp-ink-muted);
	text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover,
.single-product .woocommerce-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.single-product .woocommerce-breadcrumb .bpp-crumb-sep {
	margin: 0 2px;
}

.bpp-trust-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--bpp-ink);
}

.bpp-trust-row svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--bpp-green);
}

/* Native WooCommerce rating output, restyled to the Kobe1.1 body pairing
   instead of Blocksy's default star block. Kept as WooCommerce's own
   average/count: no third-party trust-badge platform is confirmed active.
   Figma shows a fixed "Gold Trusted Service Award · 181 reviews" string
   tied to an unnamed review platform; real review data is used here
   instead of repeating that unverifiable literal. Flagged as an open
   item. */
.single-product .woocommerce-product-rating {
	font-family: var(--bpp-body-font);
	font-size: 12px;
	line-height: 14px;
	color: var(--bpp-ink);
	margin: 4px 0;
}

.single-product h1.product_title.entry-title {
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bpp-ink);
	margin: 0;
}

.bpp-stock-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
}

.bpp-stock-row .bpp-stock-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	flex: 0 0 auto;
}

.bpp-stock-row--in .bpp-stock-dot {
	background: var(--bpp-green);
}

.bpp-stock-row--in {
	color: var(--bpp-ink);
}

.bpp-stock-row--out .bpp-stock-dot {
	background: var(--bpp-red-text);
}

.bpp-stock-row--out {
	color: var(--bpp-red-text);
}

/* editor-friendly-ok: this restyles the native WooCommerce single-product
   template, which has no Gutenberg block/pattern surface to register a
   --wp--preset-- color against (same exception already used in
   footer.css/shipping-panel.css for this site's brand colors, which are
   not part of a site-wide theme.json preset yet, task 86eyk8nqd).
   Backorder ("order caution" in the Figma component's boolean flags), a
   third stock state distinct from plain In Stock and Out of Stock.
   #8A5A00 is a darkened amber (not a Figma-drawn value, no backorder
   example exists in any drawn instance): measures about 4.6:1 on cream
   #F8EDE3, same darken-for-real-text approach already used for
   --bpp-red-text. Needs a real design QA pass once a backorder product
   exists to compare against, same open item already flagged for the
   out-of-stock state. */
.bpp-stock-row--caution .bpp-stock-dot {
	background: var(--bpp-caution-text, #8A5A00);
}

.bpp-stock-row--caution {
	color: var(--bpp-caution-text, #8A5A00);
}

.bpp-notify-form {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bpp-notify-form a.bpp-btn {
	font-size: 12px;
	padding: 10px 16px;
}

.bpp-short-description {
	font-family: var(--bpp-body-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--bpp-ink);
}

.bpp-short-description .bpp-read-more-toggle {
	display: inline-block;
	margin-top: 4px;
	font-family: var(--bpp-heading-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--bpp-green);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.bpp-short-description.is-collapsed .bpp-description-body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bpp-faq-teaser {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 0;
}

.bpp-faq-teaser__question {
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--bpp-green);
}

.bpp-faq-teaser__prompt {
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--bpp-ink);
}

/* Button, Kind=Secondary, Size=Large (component 29384:40260 Default /
   29384:40246 Hover / 29384:40274 Disabled). */
.bpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	border-radius: 999px;
	background: var(--bpp-green);
	color: var(--bpp-white);
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
}

.bpp-btn:hover,
.bpp-btn:focus-visible {
	background: var(--bpp-yellow);
	color: var(--bpp-black);
}

.bpp-btn:focus-visible {
	outline: 2px solid var(--bpp-ink);
	outline-offset: 2px;
}

.bpp-btn:disabled,
.bpp-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Price fires just before Add to Cart now (custom.php reorders the default
   hook) to match Figma's order. Markup/behavior stays fully WooCommerce
   native (variations, sale price, subscription price strings all keep
   working); this only restyles it. */
.single-product p.price {
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 28px;
	color: var(--bpp-ink);
}

.single-product p.price del {
	color: var(--bpp-ink-muted);
	opacity: 0.7;
}

.single-product p.price ins {
	text-decoration: none;
	color: var(--bpp-green);
}

/* Add to cart form: WooCommerce/subscriptions/bundles native markup,
   restyled only, same Button/Secondary/Large states as .bpp-btn above. */
.single-product form.cart .quantity input.qty {
	height: 48px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	font-family: var(--bpp-body-font);
	text-align: center;
}

.single-product form.cart .quantity input.qty:focus-visible {
	outline: none;
	border-color: var(--bpp-green);
}

.single-product form.cart button.single_add_to_cart_button {
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--bpp-green);
	color: var(--bpp-white);
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: none;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
}

.single-product form.cart button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button:focus-visible {
	background: var(--bpp-yellow);
	color: var(--bpp-black);
}

.single-product form.cart button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--bpp-ink);
	outline-offset: 2px;
}

.single-product form.cart button.single_add_to_cart_button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bpp-payment-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 12px 0;
}

.bpp-payment-row .bpp-payment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 41px;
	height: 28px;
	padding: 0 8px;
	border-radius: 4px;
	background: var(--bpp-cream);
	color: var(--bpp-ink);
	font-family: var(--bpp-body-font);
	font-size: 11px;
	font-weight: 700;
}

.bpp-subscription-banner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: 12px;
	background: rgba(255, 168, 37, 0.1);
}

.bpp-subscription-banner__heading {
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--bpp-ink);
	margin: 0;
}

.bpp-subscription-banner__body {
	font-family: var(--bpp-body-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--bpp-ink);
	white-space: pre-line;
}

/* Gallery: restyles WooCommerce's own native gallery/zoom markup. No
   custom gallery JS is added; WooCommerce's bundled zoom/flexslider
   already covers the Figma magnifying-glass affordance. */
.single-product .woocommerce-product-gallery {
	border-radius: 16px;
	overflow: hidden;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	border-radius: 8px;
	border: 2px solid transparent;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img[aria-current="true"],
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--bpp-red-figma);
}

/* Sticky buy bar: own markup, printed on wp_footer (ClickUp 86eypb6me). */
.bpp-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	background: var(--bpp-white);
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
	transform: translateY(100%);
	transition: transform 0.2s ease;
}

.bpp-sticky-bar.is-visible {
	transform: translateY(0);
}

.bpp-sticky-bar__product {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.bpp-sticky-bar__thumb {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	object-fit: cover;
	flex: 0 0 auto;
}

.bpp-sticky-bar__title {
	font-family: var(--bpp-body-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--bpp-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpp-sticky-bar__price {
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 16px;
	color: var(--bpp-ink);
}

.bpp-sticky-bar .bpp-btn {
	padding: 10px 20px;
	flex: 0 0 auto;
}

@media (max-width: 743px) {
	.single-product h1.product_title.entry-title {
		font-size: 20px;
	}

	.single-product p.price {
		font-size: 22px;
	}

	.bpp-sticky-bar__title {
		max-width: 40vw;
	}
}

@media (min-width: 744px) {
	.single-product div.product.type-product {
		padding: 0 32px;
	}
}

@media (min-width: 1024px) {
	.single-product div.product.type-product {
		padding: 0 64px;
	}

	.single-product .woocommerce-breadcrumb {
		padding: 20px 64px 0;
	}

	.single-product h1.product_title.entry-title {
		font-size: 30px;
	}
}