/*
 * Single product page — Beauty 09.
 *
 * Loaded by includes/product-page.php on single product pages only, after the
 * theme stylesheet. Everything here is presentation: the markup comes from
 * WooCommerce's block template, the prices from b2b-pricing.php, the related
 * rows from the same helpers as the shop lists.
 *
 * Colour tokens come from theme.json (accent #E00058, accent-soft #FDEDF3,
 * neutral #F6F6F6, slate #506870); the fallbacks keep this file readable on
 * its own and safe if a token is ever renamed.
 */

/* --- Back to the list ----------------------------------------------------- */
/* The obvious control on a phone: the breadcrumb below it is a thin grey line
   nobody taps with a thumb. */
.b09-product-back {
	margin: 1.25rem 0 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.3;
}
.b09-product-back a {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--accent, #e00058);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.b09-product-back a:hover,
.b09-product-back a:focus {
	text-decoration: underline;
}

/* The breadcrumb keeps the whole path, quietly, and never pushes the page
   sideways on a 375px screen. */
.single-product .wc-block-breadcrumbs {
	margin-top: 0.25rem;
	overflow-wrap: anywhere;
}

/* --- Product photo (placeholder while the catalogue has no photos) -------- */
.single-product .woocommerce-product-gallery img,
.single-product img.b09-placeholder {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}
/* No photo yet: the branded square says "foto in arrivo" without taking over
   the whole screen before the customer reaches the name and the price. */
.single-product .woocommerce-product-gallery--without-images {
	max-width: 20rem;
	margin-inline: auto;
}

/* --- Title ---------------------------------------------------------------- */
/* Real names are long uppercase strings ("CERA LIPO PERFETTA NATURALE 400ML -
   HOLYD."): they must wrap, never overflow. */
.single-product h1.wp-block-post-title {
	margin: 0.75rem 0 0.5rem;
	font-size: clamp(1.375rem, 3.4vw + 0.85rem, 2rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* --- Code and category (product meta) ------------------------------------ */
/* WooCommerce lays these out with `is-nowrap`: at 375px a long category name
   would push the page sideways. */
.single-product .wp-block-woocommerce-product-meta .wp-block-group {
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: baseline;
}
.single-product .wp-block-woocommerce-product-sku,
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms {
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}
.single-product .wp-block-woocommerce-product-sku .wp-block-post-terms__prefix,
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms__prefix {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate, #506870);
}
/* Same pink code as in the lists: the customer recognises the product by it. */
.single-product .wp-block-woocommerce-product-sku .sku {
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--accent, #e00058);
}
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms a {
	color: var(--wp--preset--color--slate, #506870);
	text-decoration: none;
}
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* --- Prices --------------------------------------------------------------- */
/* Approved customers get two lines from b2b-pricing.php inside .b09-price-dual
   (label, <br>, label): turned into the two-row box of the mock-up without
   touching that logic — each inner span becomes a flex row, the <br> goes. */
.single-product .b09-price-dual {
	display: block;
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: 16px;
	background: var(--wp--preset--color--neutral, #f6f6f6);
	font-size: 0.9375rem;
	line-height: 1.35;
}
.single-product .b09-price-dual br {
	display: none;
}
.single-product .b09-price-base,
.single-product .b09-price-deferred {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	color: var(--wp--preset--color--slate, #506870);
}
.single-product .b09-price-base + .b09-price-deferred {
	border-top: 1px solid rgba(80, 104, 112, 0.14);
}
.single-product .b09-price-dual .woocommerce-Price-amount {
	flex: none;
	color: var(--wp--preset--color--contrast, #1c1c1c);
	font-size: 1.125rem;
	font-weight: 700;
	white-space: nowrap;
}
.single-product .b09-price-loyal-note {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--slate, #506870);
}
/* Single price (no deferred tier) and "price on request": same quiet scale as
   the box above, not the large block font size. */
.single-product .wp-block-woocommerce-product-price {
	font-size: 1.125rem;
}
.single-product .b09-price-on-request {
	font-weight: 600;
	color: var(--wp--preset--color--slate, #506870);
}
.single-product .b09-price-on-request-link {
	color: var(--wp--preset--color--accent, #e00058);
	font-weight: 600;
}

/* Guests and customers waiting for approval: a real button, not a long
   underlined link lost in a large font size. */
.single-product .b09-price-hidden {
	display: inline-block;
	max-width: 100%;
	margin: 0.75rem 0 0;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #e00058);
	color: var(--wp--preset--color--base, #fff);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
.single-product .b09-price-hidden:hover,
.single-product .b09-price-hidden:focus {
	color: var(--wp--preset--color--base, #fff);
	opacity: 0.9;
}

/* --- Quantity + add to cart ---------------------------------------------- */
/* Comfortable thumb targets at 375px: the field keeps its width, the button
   takes the rest of the row. */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
}
.single-product form.cart .quantity {
	flex: none;
	margin: 0;
}
.single-product form.cart .quantity input.qty {
	width: 5rem;
	height: 52px;
	padding: 0 0.5rem;
	border: 1px solid #e3e3e3;
	border-radius: 999px;
	font-size: 1rem;
	text-align: center;
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 52px;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
}

/* --- Related products, as rows ------------------------------------------- */
/* The rows themselves are styled by the theme (.b09-plist / .b09-row): this is
   only the section around them. */
.b09-related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #ececec;
}
.b09-related-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.25rem;
	line-height: 1.25;
}
.b09-related .b09-plist-wrap {
	margin: 0;
}

/* --- Nothing sticks out sideways on a phone ------------------------------ */
@media (max-width: 781px) {
	.single-product .wp-block-columns {
		gap: 0.5rem;
	}
	.b09-related {
		margin-top: 2.25rem;
		padding-top: 1.5rem;
	}
}