/**
 * PDP v2 — .gpdp-* scoped styles
 *
 * All rules are scoped to .gpdp-* class prefixes (or anchored to #gpdp-*
 * for singleton elements). This file NEVER touches classes owned by Divi,
 * WooCommerce, or existing Gerbs CSS — those are untouched in v2.
 *
 * Token source: gerbs-tokens.css (enqueued site-wide via functions.php).
 * Load order: gerbs-tokens → gerbs-pdp (declared via wp_enqueue_style deps).
 *
 * Breakpoints: 1024 / 768 / 480 — matches SAS page and DESIGN.md spec.
 *
 * Interaction states on ATC button and chips use data-state= attributes
 * so PHP, JS, and CSS all speak the same language. See §4 of the plan.
 */

/* ==========================================================================
   1. Hero layout — 2-column above fold
   ========================================================================== */

.gpdp-hero {
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: var(--space-8);
	align-items: start;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-8) var(--container-pad) 0;
}

/* Buy box is sticky on desktop (≥1024px) */
.gpdp-buy-box {
	position: sticky;
	top: var(--space-6);
	align-self: start;
}

/* ==========================================================================
   2. Gallery
   ========================================================================== */

.gpdp-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.gpdp-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--gerbs-fog);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.gpdp-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Broken-image fallback — shown when main image fails to load */
.gpdp-gallery__main-img[data-broken="true"] {
	opacity: 0;
}

.gpdp-gallery__fallback {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--gerbs-fog);
}

.gpdp-gallery__main-img[data-broken="true"] ~ .gpdp-gallery__fallback {
	display: flex;
}

/* Thumbnail strip */
.gpdp-gallery__thumbs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gpdp-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.gpdp-gallery__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: var(--gerbs-fog);
	transition: border-color 0.15s ease;
}

.gpdp-gallery__thumb:hover,
.gpdp-gallery__thumb:focus-visible {
	border-color: var(--gerbs-ink-50);
}

.gpdp-gallery__thumb:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gpdp-gallery__thumb[aria-current="true"],
.gpdp-gallery__thumb--active {
	border-color: var(--gerbs-blue);
}

.gpdp-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Dot indicators (≤480px, when thumbs are hidden) */
.gpdp-gallery__dots {
	display: none;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
}

.gpdp-gallery__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gerbs-ink-20);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gpdp-gallery__dot[aria-current="true"],
.gpdp-gallery__dot--active {
	background: var(--gerbs-blue);
}

/* ==========================================================================
   3. Buy box — 9-element vertical stack
   ========================================================================== */

.gpdp-buy-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* 3.1 Product title */
.gpdp-title {
	font-family: var(--ff-display);
	font-size: var(--fs-32);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--gerbs-ink);
	margin: 0;
}

/* 3.2 Star rating */
.gpdp-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.gpdp-rating__stars {
	display: flex;
	gap: 2px;
}

.gpdp-rating__star {
	width: 16px;
	height: 16px;
	color: var(--gerbs-gold);
	fill: currentColor;
}

.gpdp-rating__link {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	color: var(--gerbs-ink-70);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s ease;
}

.gpdp-rating__link:hover {
	text-decoration-color: var(--gerbs-ink-70);
}

/* 3.3 Price */
.gpdp-price-row {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.gpdp-price {
	font-family: var(--ff-display);
	font-size: var(--fs-32);
	font-weight: var(--fw-bold);
	color: var(--gerbs-ink);
	line-height: 1;
}

.gpdp-price-per-unit {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	color: var(--gerbs-ink-70);
}

/* 3.4 Allergen pill */
.gpdp-allergen-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	background: var(--gerbs-yellow);
	color: var(--gerbs-ink);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-family: var(--ff-body);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease;
}

.gpdp-allergen-pill:hover {
	background: var(--gerbs-gold);
	color: var(--gerbs-ink);
	text-decoration: none;
}

.gpdp-allergen-pill:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gpdp-allergen-pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* 3.5 Stock status */
.gpdp-stock {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
}

.gpdp-stock--in {
	color: var(--gerbs-success);
}

.gpdp-stock--low {
	color: var(--gerbs-warn);
}

.gpdp-stock--out {
	color: var(--gerbs-error);
}

/* ==========================================================================
   4. Variant chips
   ========================================================================== */

.gpdp-variants {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.gpdp-variant-group {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gpdp-variant-group legend,
.gpdp-variant-label {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	color: var(--gerbs-ink);
	margin: 0 0 var(--space-2);
	display: block;
}

.gpdp-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.gpdp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-md);
	border: 2px solid var(--gerbs-ink-20);
	background: #fff;
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: var(--gerbs-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	user-select: none;
	position: relative;
}

.gpdp-chip:hover:not(.gpdp-chip--unavailable) {
	border-color: var(--gerbs-blue);
	background: var(--gerbs-blue-tint);
}

.gpdp-chip:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gpdp-chip[aria-checked="true"],
.gpdp-chip--selected {
	border-color: var(--gerbs-blue);
	background: var(--gerbs-blue-tint);
	color: var(--gerbs-blue);
	font-weight: var(--fw-semibold);
}

/* Selected dot indicator */
.gpdp-chip[aria-checked="true"]::after,
.gpdp-chip--selected::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gerbs-blue);
}

/* Unavailable / out-of-stock chip */
.gpdp-chip--unavailable {
	opacity: 0.6;
	cursor: pointer;
	color: var(--gerbs-ink-50);
	/* Strike-through via linear-gradient (crosses from top-left to bottom-right) */
	background-image: linear-gradient(
		to bottom right,
		transparent calc(50% - 0.5px),
		var(--gerbs-ink-20) calc(50% - 0.5px),
		var(--gerbs-ink-20) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

.gpdp-chip--unavailable:hover {
	border-color: var(--gerbs-ink-20);
	background-color: transparent;
}

/* OOS inline note — shown by pdp.js when a sold-out chip is clicked */
.gpdp-oos-note {
	margin: var(--space-2) 0 0;
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	color: var(--gerbs-warn);
}
.gpdp-oos-note[hidden] {
	display: none;
}

/* Mirror select — visually hidden, accessible to WC variation logic */
.gpdp-mirror-select,
select.gpdp-mirror-select {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Hide the ENTIRE native WC variation table + "Clear" link on v2 buy boxes.
   The chip chooser is the canonical UI; the native dropdown ("Choose an
   option") and reset link are redundant. Hiding only the <select>
   (.gpdp-mirror-select) left the surrounding table chrome visible, which
   surfaced after full render as a stray "Choose an option / Clear" block.
   Moved off-screen (not display:none) so WC variations.js + wcsatt still
   read/write the select. */
.gpdp-buy-box .variations,
.gpdp-buy-box .reset_variations {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   5. Subscribe & Save row
   ========================================================================== */

.gpdp-subscribe-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--gerbs-ink-20);
	background: var(--gerbs-fog);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.gpdp-subscribe-row:has(.gpdp-subscribe-toggle:checked) {
	border-color: var(--gerbs-blue);
	background: var(--gerbs-blue-tint);
}

.gpdp-subscribe-toggle {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--gerbs-blue);
	cursor: pointer;
	margin-top: 2px;
}

.gpdp-subscribe-label {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	cursor: pointer;
}

.gpdp-subscribe-label strong {
	display: block;
	font-weight: var(--fw-semibold);
	color: var(--gerbs-ink);
}

.gpdp-subscribe-label span {
	font-size: var(--fs-12);
	color: var(--gerbs-ink-70);
}

/* ==========================================================================
   6. Quantity stepper + ATC row
   ========================================================================== */

.gpdp-atc-row {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
}

/* Quantity stepper */
.gpdp-qty-stepper {
	display: flex;
	align-items: center;
	border: 2px solid var(--gerbs-ink-20);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}

.gpdp-qty-stepper--error {
	border-color: var(--gerbs-error);
}

.gpdp-qty-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--gerbs-ink);
	font-size: var(--fs-18);
	transition: background 0.15s ease, color 0.15s ease;
	user-select: none;
}

.gpdp-qty-btn:hover:not(:disabled) {
	background: var(--gerbs-fog);
}

.gpdp-qty-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gpdp-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.gpdp-qty-input {
	width: 40px;
	height: 44px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--gerbs-ink-20);
	border-right: 1px solid var(--gerbs-ink-20);
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	font-weight: var(--fw-medium);
	color: var(--gerbs-ink);
	background: transparent;
	/* Hide spinner arrows */
	-moz-appearance: textfield;
}

.gpdp-qty-input::-webkit-inner-spin-button,
.gpdp-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gpdp-qty-input:focus {
	outline: none;
}

.gpdp-qty-error {
	font-size: var(--fs-12);
	color: var(--gerbs-error);
	margin-top: var(--space-1);
	display: none;
}

.gpdp-qty-stepper--error + .gpdp-qty-error {
	display: block;
}

/* ATC button */
.gpdp-atc-btn {
	flex: 1;
	min-height: 44px;
	border-radius: var(--radius-atc);
	border: none;
	background: var(--gerbs-blue);
	color: #fff;
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	transition: background 0.15s ease, opacity 0.15s ease;
	position: relative;
	overflow: hidden;
	padding: 0 var(--space-6);
}

.gpdp-atc-btn:hover:not([data-state="loading"]):not([data-state="disabled"]) {
	background: var(--gerbs-blue-hover);
}

.gpdp-atc-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ATC button states */
.gpdp-atc-btn[data-state="loading"] {
	opacity: 0.8;
	cursor: not-allowed;
	pointer-events: none;
}

.gpdp-atc-btn[data-state="success"] {
	background: var(--gerbs-success);
}

.gpdp-atc-btn[data-state="error"] {
	background: var(--gerbs-error);
}

.gpdp-atc-btn[data-state="disabled"] {
	background: var(--gerbs-ink-50);
	cursor: not-allowed;
	pointer-events: none;
}

/* Spinner shown during loading state */
.gpdp-atc-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gpdp-spin 0.6s linear infinite;
	flex-shrink: 0;
}

.gpdp-atc-btn[data-state="loading"] .gpdp-atc-spinner {
	display: block;
}

@keyframes gpdp-spin {
	to { transform: rotate(360deg); }
}

/* Aria-live SR announcement region */
.gpdp-sr-announce {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   7. Trust signals row
   ========================================================================== */

/* Single footer line (trust-row.php renders one <p>, not a 4-up strip). The
   prior grid:repeat(4,1fr) jammed the line into the first quarter-column; this
   lets it span the full buy-box width. */
.gpdp-trust-row {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	line-height: var(--lh-snug);
	color: var(--gerbs-ink-70);
	margin: 0;
}

/* ==========================================================================
   8. Long description / content sections
   ========================================================================== */

.gpdp-long-desc {
	max-width: 760px;
	margin: var(--space-12) auto 0;
	padding: 0 var(--container-pad);
}

.gpdp-long-desc h2 {
	font-family: var(--ff-body);
	font-size: var(--fs-32);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--gerbs-ink);
	margin: var(--space-20) 0 var(--space-4);
}

.gpdp-long-desc h2:first-child,
.gpdp-long-desc > *:first-child h2 {
	margin-top: 0;
}

.gpdp-long-desc h3 {
	font-family: var(--ff-body);
	font-size: var(--fs-24);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--gerbs-ink);
	margin: var(--space-8) 0 var(--space-3);
}

.gpdp-long-desc h3 + p {
	margin-top: 0;
}

.gpdp-long-desc p {
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: var(--gerbs-ink);
	margin: 0 0 var(--space-4);
}

.gpdp-long-desc ul,
.gpdp-long-desc ol {
	padding-left: var(--space-6);
	margin: 0 0 var(--space-4);
}

.gpdp-long-desc li {
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: var(--gerbs-ink);
	margin-bottom: var(--space-1);
}

/* Opening prose section (no header) */
.gpdp-opening-prose {
	font-family: var(--ff-body);
	font-size: var(--fs-18);
	line-height: var(--lh-loose);
	color: var(--gerbs-ink);
}

/* ==========================================================================
   9. Allergen declaration block (Section 2)
   ========================================================================== */

/* Light, calm treatment — replaces the heavy solid-blue slab. Neutral fog
   surface + hairline, ink text, and a small blue check before the heading to
   echo the buy-box allergen pill without shouting. */
.gpdp-allergen-block {
	background: var(--gerbs-fog);
	color: var(--gerbs-ink);
	border: 1px solid var(--gerbs-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0;
}

.gpdp-allergen-block h3 {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--ff-body);
	font-size: var(--fs-18);
	font-weight: var(--fw-semibold);
	color: var(--gerbs-ink);
	margin: 0 0 var(--space-2);
}

/* Small check glyph before the heading (CSS-only, no markup change). */
.gpdp-allergen-block h3::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5l3 3 6-6' stroke='%233C70F6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Needs #main-content to beat Divi's `body #main-content p` specificity. */
#main-content .gpdp-allergen-block p {
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	line-height: var(--lh-normal);
	color: var(--gerbs-ink-70);
	margin: 0;
}

.gpdp-allergen-block p + p {
	margin-top: var(--space-2);
}

/* ==========================================================================
   10. FAQ — details/summary accordion
   ========================================================================== */

.gpdp-long-desc details {
	border-bottom: 1px solid var(--gerbs-hairline);
	padding: var(--space-4) 0;
}

.gpdp-long-desc details:first-of-type {
	border-top: 1px solid var(--gerbs-hairline);
}

.gpdp-long-desc summary {
	font-family: var(--ff-body);
	font-size: var(--fs-16);
	font-weight: var(--fw-semibold);
	color: var(--gerbs-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	user-select: none;
}

.gpdp-long-desc summary::-webkit-details-marker {
	display: none;
}

/* Chevron icon via CSS */
.gpdp-long-desc summary::after {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235c5c5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}

.gpdp-long-desc details[open] summary::after {
	transform: rotate(180deg);
}

.gpdp-long-desc details:focus-within summary {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gpdp-long-desc details > *:not(summary) {
	padding-top: var(--space-3);
}

/* ==========================================================================
   10b. Section accordion — folds long-desc reference sections (accordion.php)
   ========================================================================== */
/* Reuses the details/summary styling above (chevron, hairline, focus ring).
   These rules only make a section fold read as a top-level section rather than
   a FAQ question: a larger summary title, slightly more breathing room, and a
   reset of the moved h2/h3's own heading margins (which would otherwise inherit
   the big .gpdp-long-desc h2/h3 spacing inside the flex summary). */

.gpdp-long-desc .gpdp-section {
	padding: var(--space-5) 0;
}

.gpdp-long-desc .gpdp-section > summary {
	font-size: var(--fs-20);
}

/* Normalise the moved heading: same size whether the section was authored as an
   h2 (What Are…, Key Health Benefits, How to Use…) or an h3 (Nutrition Facts,
   Flavor, Ingredients, Storage) so the accordion reads as one consistent list. */
.gpdp-long-desc .gpdp-section > summary > h2,
.gpdp-long-desc .gpdp-section > summary > h3 {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-20);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: normal;
	color: var(--gerbs-ink);
}

/* First fold sits directly under the description intro — give it air above. */
.gpdp-long-desc .gpdp-section:first-of-type {
	margin-top: var(--space-8);
}

/* When the allergen block is folded into a section, flatten its card styling
   (the fold already provides the container) so it isn't a card inside a panel. */
.gpdp-long-desc .gpdp-section > .gpdp-allergen-block {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   11. Footer family-owned line
   ========================================================================== */

.gpdp-family-line {
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	color: var(--gerbs-ink-70);
	text-align: center;
	padding: var(--space-8) var(--container-pad);
	max-width: var(--container-max);
	margin: 0 auto;
}

/* ==========================================================================
   12. Responsive — 768–1023px
   ========================================================================== */

@media (max-width: 1023px) {
	.gpdp-hero {
		grid-template-columns: 1fr 380px;
		gap: var(--space-6);
	}

	.gpdp-buy-box {
		padding: var(--space-4);
	}

	.gpdp-title {
		font-size: var(--fs-24);
	}

	.gpdp-price {
		font-size: var(--fs-24);
	}
}

/* ==========================================================================
   13. Responsive — <768px (single column, sticky-atc takes over)
   ========================================================================== */

@media (max-width: 767px) {
	.gpdp-hero {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		padding-top: var(--space-4);
	}

	.gpdp-gallery {
		/* Gallery first, buy box below (DOM order handles this) */
	}

	.gpdp-gallery__main {
		aspect-ratio: 5 / 6;
	}

	.gpdp-buy-box {
		position: static; /* Not sticky below 768 — sticky-atc.js takes over */
		box-shadow: none;
		border-radius: 0;
		padding: var(--space-4) var(--container-pad);
	}

	.gpdp-long-desc {
		padding: 0 var(--container-pad);
		margin-top: var(--space-8);
	}

	.gpdp-allergen-block {
		padding: var(--space-4) var(--space-5);
	}
}

/* ==========================================================================
   14. Responsive — <480px
   ========================================================================== */

@media (max-width: 479px) {
	.gpdp-gallery__thumbs {
		display: none; /* Replaced by dot indicators */
	}

	.gpdp-gallery__dots {
		display: flex;
	}

	.gpdp-title {
		font-size: var(--fs-20);
	}

	.gpdp-price {
		font-size: var(--fs-20);
	}

	.gpdp-buy-box {
		gap: var(--space-3);
	}

	.gpdp-chip {
		font-size: 13px;
		min-height: 44px;
		padding: 0 var(--space-3);
	}

	.gpdp-atc-btn {
		font-size: var(--fs-14);
	}
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gpdp-atc-spinner {
		animation: none;
		opacity: 0.7;
	}

	.gpdp-gallery__main-img,
	.gpdp-allergen-pill,
	.gpdp-chip,
	.gpdp-atc-btn,
	.gpdp-subscribe-row,
	.gpdp-gallery__thumb,
	.gpdp-qty-btn {
		transition: none;
	}

	.gpdp-long-desc summary::after {
		transition: none;
	}
}