/**
 * Single product page — hero, nutrition/composition columns, enquiry panel, related grid.
 *
 * Mobile-first (code-standards.md): base rules stack everything in DOM order; the design's
 * two-column splits and the 4-column related grid come back at --bp-md (responsive.md mode 3 —
 * the mockup ships its own layout only through inline JS, not CSS @media, so mobile is derived
 * against the shared breakpoint rather than the JS's one-off 620/860/1080 numbers).
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------- hero */

.single-product__hero {
	position: relative;
	overflow: hidden;
	background: var( --surface-sand );
}

.single-product__hero-glow {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient( 760px 500px at 30% 10%, var( --c-honey3-a40 ), transparent 62% ),
		radial-gradient( 520px 380px at 104% 100%, var( --c-honey3-a28 ), transparent 60% );
	pointer-events: none;
}

.single-product__confetti {
	position: absolute;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.single-product__confetti--1 {
	top: 20%;
	left: 4%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( 35deg );
}

.single-product__confetti--2 {
	top: 78%;
	left: 9%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -20deg );
}

.single-product__confetti--3 {
	top: 26%;
	right: 6%;
	background: var( --c-green-500 );
	opacity: .55;
	transform: rotate( 70deg );
}

.single-product__confetti--4 {
	top: 70%;
	right: 12%;
	background: var( --c-cocoa-700 );
	opacity: .25;
	transform: rotate( -45deg );
}

.single-product__hero-inner {
	position: relative;
	padding-top: var( --space-26 );
}

.single-product__top-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-16 );
	margin-bottom: var( --space-26 );
}

.single-product__nav {
	display: flex;
	align-items: center;
	gap: var( --space-8 );
}

.single-product__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var( --space-56 );
	padding-bottom: var( --space-64 );
}

@media ( min-width: 768px ) {

	.single-product__grid {
		grid-template-columns: .95fr 1.05fr;
	}
}

/* ---------------------------------------------------------------- gallery */

.single-product__media {
	position: relative;
	display: flex;
	justify-content: center;
}

.single-product__media .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	max-width: 460px;
	overflow: hidden;
	background: var( --surface-raised );
	border-radius: var( --radius-28 );
	box-shadow: var( --shadow-float );
}

.single-product__media .woocommerce-product-gallery__wrapper,
.single-product__media img {
	width: 100%;
	height: auto;
}

/* WC's zoom plugin clones an oversized <img class="zoomImg"> into the image
   wrapper; without its own clip it escapes the gallery and scrolls the page. */
.single-product__media .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
}

.single-product__media img.zoomImg {
	max-width: none;
}

.single-product__media .flex-control-thumbs {
	display: flex;
	gap: var( --space-8 );
	margin-top: var( --space-12 );
}

.single-product__media .flex-control-thumbs li {
	width: var( --space-56 );
}

.single-product__zoom-hint {
	position: absolute;
	bottom: var( --space-16 );
	left: 50%;
	transform: translateX( -50% );
	padding: var( --space-8 ) var( --space-16 );
	border-radius: var( --radius-pill );
	background: var( --c-paper-a94 );
	box-shadow: var( --shadow-card-alt );
	color: var( --color-heading );
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-caps );
	white-space: nowrap;
}

/* ---------------------------------------------------------------- summary */

.single-product__summary {
	max-width: 600px;
}

.single-product__badge {
	display: inline-block;
	margin-bottom: var( --space-16 );
	padding: var( --space-6 ) var( --space-14 );
	border-radius: var( --radius-pill );
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft-2 );
	color: var( --c-cocoa-900 );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

.single-product__summary .product_title {
	font-size: var( --fs-d2 );
}

.single-product__summary .woocommerce-product-details__short-description {
	max-width: 520px;
	margin-top: var( --space-16 );
	font-size: var( --fs-20 );
}

.single-product__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-top: var( --space-28 );
}

.single-product__fact {
	display: flex;
	align-items: center;
	gap: var( --space-12 );
	padding: var( --space-14 ) var( --space-20 );
	border: 1px solid var( --c-cocoa-a07 );
	border-radius: var( --radius-18 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card-alt );
}

.single-product__fact-value {
	font-family: var( --font-display );
	font-size: var( --fs-24 );
	font-weight: var( --fw-medium );
	line-height: 1;
	color: var( --color-heading );
}

.single-product__fact-label {
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label-sm );
	text-transform: uppercase;
	color: var( --color-muted );
}

.single-product__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-top: var( --space-28 );
}

.single-product__tagline {
	display: flex;
	align-items: center;
	gap: var( --space-9 );
	margin-top: var( --space-22 );
	font-size: var( --fs-14 );
	font-weight: var( --fw-bold );
	color: var( --color-muted );
}

.single-product__tagline-dot {
	flex: none;
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --c-green-500 );
}

/* ---------------------------------------------------------------- scallop divider */

.single-product__scallop {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: var( --space-34 );
	background-image: radial-gradient( circle at 0 0, transparent var( --space-18 ), var( --surface-page ) calc( var( --space-18 ) + 1px ) );
	background-repeat: repeat-x;
	background-size: 60px var( --space-34 );
}

/* ---------------------------------------------------------------- nutrition / composition */

.single-product__info-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var( --space-56 );
}

@media ( min-width: 768px ) {

	.single-product__info-grid {
		grid-template-columns: 1fr 1.15fr;
	}
}

.single-product__nutrition h2,
.single-product__composition h2 {
	margin-bottom: var( --space-22 );
	font-size: var( --fs-28 );
	font-weight: var( --fw-580 );
}

/* Grid children default to min-width:auto, so the nowrap table below would set
   the column's width and push the page sideways on a phone. */
.single-product__nutrition,
.single-product__composition {
	min-width: 0;
}

.single-product__table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	box-shadow: var( --shadow-card );
	background: var( --surface-raised );
}

.single-product__nutrition-table {
	min-width: 100%;
	border-collapse: collapse;
}

.single-product__nutrition-table th,
.single-product__nutrition-table td {
	padding: var( --space-15 ) var( --space-24 );
	font-size: var( --fs-15-5 );
	font-weight: var( --fw-regular );
	text-align: left;
	white-space: nowrap;
}

.single-product__nutrition-table td {
	width: 100%;
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	text-align: right;
}

.single-product__nutrition-row + .single-product__nutrition-row {
	border-top: 1px solid var( --color-border );
}

.single-product__nutrition-row--energy th,
.single-product__nutrition-row--energy td {
	padding: var( --space-16 ) var( --space-24 );
	background: var( --surface-cream );
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.single-product__composition-text {
	font-size: var( --fs-16 );
	line-height: var( --lh-copy );
}

.single-product__allergen {
	display: flex;
	align-items: flex-start;
	gap: var( --space-14 );
	margin-top: var( --space-22 );
	padding: var( --space-18 ) var( --space-22 );
	border-radius: var( --radius-18 );
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft );
	color: var( --color-accent-deep );
}

.single-product__allergen svg {
	flex: none;
	margin-top: var( --space-2 );
}

.single-product__allergen p {
	margin: 0;
	font-size: var( --fs-15-5 );
	font-weight: var( --fw-bold );
	color: var( --color-heading );
}

.single-product__meta-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-22 );
	margin-top: var( --space-30 );
}

@media ( min-width: 768px ) {

	.single-product__meta-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.single-product__meta-item h4 {
	margin-bottom: var( --space-8 );
	font-family: var( --font-body );
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --color-muted );
}

.single-product__meta-item p {
	margin: 0;
	font-size: var( --fs-15-5 );
	font-weight: var( --fw-medium );
	color: var( --color-heading );
}

/* ---------------------------------------------------------------- enquiry panel */

.single-product__enquiry-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-56 );
	align-items: start;
	padding: var( --space-40 ) var( --space-24 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-sand );
}

@media ( min-width: 768px ) {

	.single-product__enquiry-panel {
		grid-template-columns: .8fr 1.2fr;
		padding: var( --space-48 ) var( --space-54 );
	}
}

.single-product__enquiry-heading {
	margin-top: var( --space-12 );
	font-size: var( --fs-d6 );
	font-weight: 580;
	line-height: 1.14;
}

.single-product__enquiry-intro p {
	max-width: 380px;
	margin-top: var( --space-16 );
}

.single-product__enquiry-contact {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
	margin-top: var( --space-24 );
	font-size: var( --fs-15 );
	font-weight: var( --fw-bold );
	color: var( --color-heading );
}

.single-product__enquiry-contact a {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	transition: color var( --transition-fast );
}

.single-product__enquiry-contact a:hover {
	color: var( --c-cocoa-900 );
}

.single-product__enquiry-contact svg {
	flex: none;
	color: var( --color-accent-deep );
}

/* ---------------------------------------------------------------- related products */

.single-product__related-intro {
	max-width: 760px;
	margin-bottom: var( --space-44 );
}

.single-product__related-heading {
	margin-top: var( --space-12 );
	font-size: var( --fs-d5 );
	font-weight: 580;
	line-height: 1.12;
}

.single-product__related-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --space-26 );
}

@media ( min-width: 768px ) {

	.single-product__related-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}