/* ==========================================================================
   Product Detail Page — gallery, buy box, highlight tiles, detail tabs.
   ========================================================================== */

/* Storefront content container — wider on PDP.

   MUST be scoped to `#content > .col-full`. `woocommerce-page` is a BODY
   class, and the footer has a `.col-full` of its own, so the unscoped
   version of this rule also captured the footer wrapper — capping it at
   1400px and adding side padding. That is what pushed the copyright bar off
   full width on every shop/product/cart/checkout/account page. Same shape as
   the header-search bug: a body-class selector followed by a generic class
   reaches the header and footer as well as the content. */
.woocommerce-page #content > .col-full {
	max-width: 1400px !important;
	padding-left: var(--space-6) !important;
	padding-right: var(--space-6) !important;
}

.woocommerce div.product { margin-bottom: 0; }

.apex-pdp { padding-block: var(--space-8) var(--space-16); }

/* --------------------------------------------------------------------------
   Top: gallery + buy box
   -------------------------------------------------------------------------- */

.apex-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
	gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
	/* `stretch` (the grid default) rather than `start`: both cards then take the
	   height of the taller one, so the gallery and the buy box read as a matched
	   pair side by side. With `start` the gallery sized to its own content and
	   sat noticeably shorter than the card beside it. */
	align-items: stretch;
}

/* Each column is a flex column so its card can grow to fill the stretched
   row. Neither is sticky any more — equal-height columns have nothing to
   scroll past, and a sticky element that already fills its row never moves. */
.apex-pdp__gallery {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---- Gallery ---- */

.apex-pdp__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.apex-pdp__stage-img {
	flex: 1;
	min-height: 0;
	/* A floor only. The box grows with the row; the photo is `contain`ed inside
	   it, so a tall panel and a wide radiator both sit centred and uncropped. */
	min-height: 420px;
	/* position:relative so .apex-pdp__main-image below can fill this box via
	   `inset: 0` rather than `width/height: 100%` — see the note on that rule
	   for why the switch was necessary. */
	position: relative;
	padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	cursor: zoom-in;
}
.apex-pdp__main-image {
	/* `position: absolute; inset: 0` instead of `width/height: 100%`.
	   On the mobile breakpoint below, this element's height comes from
	   `aspect-ratio` on a flex item (flex:1 inside .apex-pdp__stage) rather
	   than an explicit pixel value — and a child's `height:100%` does not
	   reliably resolve against a height that itself derives from
	   aspect-ratio inside a flex context (verified: the <img> was measuring
	   624px tall inside a 292px-tall box). `overflow:hidden` on .apex-pdp__stage
	   was silently cropping the excess, which only looked acceptable for
	   portrait photos by coincidence and would crop a wide/landscape photo
	   badly. `inset: 0` fills the padding box of a position:relative ancestor
	   directly, which does not depend on that percentage-height resolution at
	   all, so this holds regardless of how the parent's own height was
	   computed. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* `cover`, not `contain`. The stage's own height varies by product (it
	   stretches to match the buy box, and is a fixed aspect-ratio on mobile),
	   so a `contain`ed photo whose own aspect ratio doesn't happen to match
	   that box always left visible letterboxing — worst on the several
	   portrait wall-panel photos, which is what read as "too much empty
	   space around the picture." `cover` fills the frame edge to edge on
	   every product instead, at the cost of cropping some edge content;
	   the zoom viewer (click the image, or "View full size") still shows the
	   complete, uncropped photo for anyone who wants it. */
	object-fit: cover;
	object-position: center;
	transition: transform .35s ease;
}
.apex-pdp__stage:hover .apex-pdp__main-image { transform: scale(1.03); }

/* Zoom affordance — tells people the image opens full size. */
.apex-pdp__zoom {
	position: absolute;
	right: var(--space-4);
	top: var(--space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .92);
	color: var(--color-navy);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.85em;
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(1, 32, 79, .12);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, background-color .15s ease, color .15s ease;
}
.apex-pdp__zoom svg { width: 14px; height: 14px; }
.apex-pdp__stage:hover .apex-pdp__zoom,
.apex-pdp__zoom:focus-visible { opacity: 1; transform: translateY(0); }
.apex-pdp__zoom:hover { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

/* Touch devices have no hover, so the affordance must be permanent there. */
@media (hover: none) {
	.apex-pdp__zoom { opacity: 1; transform: none; }
}

.apex-pdp__flag {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background: var(--color-red);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 0.45em 0.9em;
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 12px rgba(210, 49, 32, .3);
}

.apex-pdp__thumbs {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
	overflow-x: auto;
	padding-bottom: var(--space-1);
	scrollbar-width: thin;
}
.apex-pdp__thumb {
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	padding: 4px;
	background: var(--color-bg-alt);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.apex-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.apex-pdp__thumb:hover { border-color: var(--color-navy-light); transform: translateY(-2px); }
.apex-pdp__thumb.is-active { border-color: var(--color-red); }

/* ---- Buy box ---- */

.apex-pdp__buy {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	box-shadow: var(--shadow-card);
}

.apex-pdp__eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-bottom: var(--space-3);
}
.apex-pdp__eyebrow:hover { color: var(--color-red-dark); text-decoration: underline; }

.apex-pdp__title {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.25;
	margin-bottom: var(--space-3);
}

.apex-pdp__meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
/* Nothing renders into this row on a product with fewer than 10 reviews
   (the SKU that used to sit here has been removed) — collapse it rather
   than showing a bare divider line with padding above and below it. */
.apex-pdp__meta-row:empty { display: none; margin: 0; padding: 0; border: 0; }
.apex-pdp__rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; }
.apex-pdp__rating .woocommerce-product-rating { margin: 0; }

/* Price */
.apex-pdp__price { margin-bottom: var(--space-4); }
.apex-pdp__price .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-navy);
	margin: 0;
}
.apex-pdp__price .price del {
	font-size: 0.5em;
	font-weight: 500;
	color: var(--color-text-muted);
	opacity: 1;
}
.apex-pdp__price .price ins { text-decoration: none; color: var(--color-red); }
.apex-pdp__vat {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

/* Stock */
.apex-pdp__stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: var(--radius-pill);
	padding: 0.45em 1em;
	margin-bottom: var(--space-5);
}
.apex-pdp__stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.apex-pdp__stock.is-in { background: rgba(27, 138, 74, .1); color: var(--color-success); }
.apex-pdp__stock.is-out { background: rgba(210, 49, 32, .1); color: var(--color-red); }

.apex-pdp__blurb {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}
.apex-pdp__blurb p:last-child { margin-bottom: 0; }

/* ---- Add to cart form ---- */

.apex-pdp__cart { margin-bottom: var(--space-6); }

.apex-pdp__cart form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
}
.apex-pdp__cart form.variations_form { display: block; }

/* WooCommerce's own quantity field, restyled as a stepper. The −/+ buttons
   are injected by product-gallery.js so they operate on the real input that
   the form actually submits. */
.apex-pdp__cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	overflow: hidden;
	flex: 0 0 auto;
}
.apex-pdp__cart .quantity .apex-qty-btn {
	width: 42px;
	align-self: stretch;
	border: 0;
	background: var(--color-bg);
	color: var(--color-navy);
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 600;
	transition: background-color .15s ease, color .15s ease;
}
.apex-pdp__cart .quantity .apex-qty-btn:hover { background: var(--color-navy); color: var(--color-white); }
.apex-pdp__cart .quantity .apex-qty-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--color-bg); color: var(--color-text-muted); }
.apex-pdp__cart .quantity input.qty {
	width: 56px;
	min-height: 52px;
	border: 0;
	border-inline: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy);
	-moz-appearance: textfield;
	appearance: textfield;
}
.apex-pdp__cart .quantity input.qty::-webkit-outer-spin-button,
.apex-pdp__cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.apex-pdp__cart .quantity input.qty:focus { outline: none; }
.apex-pdp__cart .quantity label.screen-reader-text { position: absolute !important; }

.apex-pdp__cart button.single_add_to_cart_button,
.apex-pdp__cart .single_add_to_cart_button.button {
	flex: 1 1 200px;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-red);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.9em 1.8em;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 4px 14px rgba(210, 49, 32, .28);
	transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.apex-pdp__cart button.single_add_to_cart_button:hover {
	background: var(--color-red-dark);
	box-shadow: 0 6px 20px rgba(210, 49, 32, .36);
	transform: translateY(-1px);
}
.apex-pdp__cart button.single_add_to_cart_button:disabled { opacity: .5; box-shadow: none; transform: none; }

/* Variation selectors */
.apex-pdp__cart table.variations { width: 100%; margin: 0 0 var(--space-5); border: 0; }
.apex-pdp__cart table.variations tr { display: block; margin-bottom: var(--space-4); }
/* Storefront's own woocommerce.css ships
   ".single-product div.product table.variations td { display: list-item; ... }"
   at (0,3,3) specificity, which beats this rule at (0,2,2) and silently wins —
   the <td> never becomes display:block, so the <select> inside falls back to
   shrink-to-fit sizing instead of the full-width dropdown this theme intends
   (visible as an oddly narrow, text-clipped "Choose an option" box on any
   attribute that isn't swatch-replaced, e.g. Size). !important settles it. */
.apex-pdp__cart table.variations th,
.apex-pdp__cart table.variations td { display: block !important; width: 100% !important; padding: 0; border: 0; text-align: left; }
.apex-pdp__cart table.variations th label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
	display: block;
}
.apex-pdp__cart table.variations select {
	/* Storefront's own ".single-product div.product table.variations select"
	   sets max-width:70% at (0,3,3) specificity, beating this rule and capping
	   the box well short of the full-width dropdown intended here —
	   !important on both properties settles it, same fight as the <td> above. */
	width: 100% !important;
	max-width: none !important;
	appearance: none;
	-webkit-appearance: none;
	background: var(--color-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301204F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1em center;
	background-size: 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.8em 2.6em 0.8em 1em;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-navy);
	min-height: 48px;
	cursor: pointer;
}
.apex-pdp__cart table.variations select:focus { outline: none; border-color: var(--color-navy); }
.apex-pdp__cart .reset_variations {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-top: var(--space-2);
}
.apex-pdp__cart .woocommerce-variation-price { margin-bottom: var(--space-4); }
.apex-pdp__cart .woocommerce-variation-price .price {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--color-navy);
}
.apex-pdp__cart .woocommerce-variation-availability { margin-bottom: var(--space-3); font-size: 0.88rem; }

/* ---- Assurances ---- */

.apex-pdp__assurances {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.apex-pdp__assurance { display: flex; align-items: flex-start; gap: var(--space-3); }
.apex-pdp__assurance .apex-icon { color: var(--color-red); flex-shrink: 0; margin-top: 2px; }
.apex-pdp__assurance .apex-icon svg { width: 20px; height: 20px; }
.apex-pdp__assurance strong { display: block; font-size: 0.88rem; color: var(--color-navy); font-weight: 600; }
.apex-pdp__assurance small { display: block; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }

.apex-pdp__help {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.apex-pdp__help a { color: var(--color-navy); font-weight: 700; }
.apex-pdp__help a:hover { color: var(--color-red); }
.apex-pdp__share {
	margin-left: auto;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.45em 1em;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-navy);
}
.apex-pdp__share:hover { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

/* --------------------------------------------------------------------------
   Highlight tiles
   -------------------------------------------------------------------------- */

.apex-pdp__highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-12);
}
.apex-pdp__highlight {
	background: var(--color-navy);
	background-image: radial-gradient(circle at 100% 0%, var(--color-navy-light), transparent 65%);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.apex-pdp__highlight dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin-bottom: var(--space-2);
}
.apex-pdp__highlight dd {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Detail tabs
   -------------------------------------------------------------------------- */

.apex-pdp__detail {
	margin-top: var(--space-12);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.apex-pdp__tabs {
	display: flex;
	gap: var(--space-1);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-2) var(--space-2) 0;
	overflow-x: auto;
	/* On a narrow phone there isn't room for all three tab labels at once.
	   They scroll horizontally within this strip (not the page), but with
	   nothing to say so a tab could sit half-cut at the edge and read as
	   broken/clipped rather than "swipe for more". The gradient below hints
	   at the cut-off content; scrollbar-gutter keeps that hint from ever
	   fully hiding a label once it's been scrolled almost into view. */
	position: relative;
	-webkit-overflow-scrolling: touch;
}
.apex-pdp__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 0.95em 1.4em;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}
.apex-pdp__tab:hover { color: var(--color-navy); }
.apex-pdp__tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-red); }
.apex-pdp__tab-count {
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--color-border);
	color: var(--color-text-muted);
	border-radius: var(--radius-pill);
	padding: 0.15em 0.55em;
}
.apex-pdp__tab.is-active .apex-pdp__tab-count { background: var(--color-red); color: var(--color-white); }

.apex-pdp__panel { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.apex-pdp__panel[hidden] { display: none; }

.apex-pdp__prose { max-width: 78ch; }
.apex-pdp__prose p,
.apex-pdp__prose li { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.75; }
.apex-pdp__prose h3 {
	font-size: 1.05rem;
	color: var(--color-navy);
	margin: var(--space-6) 0 var(--space-3);
}
.apex-pdp__prose h3:first-child { margin-top: 0; }
.apex-pdp__prose ul { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.apex-pdp__prose ul li { position: relative; padding-left: 1.6em; }
.apex-pdp__prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--color-red);
}
.apex-pdp__prose a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }

/* Spec table — two balanced columns on wide screens so a 16-row table does
   not become a single very long list. */
.apex-pdp__spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.apex-pdp__spec-table th,
.apex-pdp__spec-table td {
	text-align: left;
	padding: 0.85em 1em;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}
.apex-pdp__spec-table th {
	width: 42%;
	font-weight: 600;
	color: var(--color-navy);
}
.apex-pdp__spec-table td { color: var(--color-text-muted); }
.apex-pdp__spec-table tr:nth-child(odd) th,
.apex-pdp__spec-table tr:nth-child(odd) td { background: var(--color-bg); }
.apex-pdp__spec-table tr:last-child th,
.apex-pdp__spec-table tr:last-child td { border-bottom: 0; }

@media (min-width: 900px) {
	.apex-pdp__spec-table { column-count: 2; column-gap: var(--space-8); display: block; }
	.apex-pdp__spec-table tbody { display: block; }
	.apex-pdp__spec-table tr {
		display: flex;
		break-inside: avoid;
		border-bottom: 1px solid var(--color-border);
	}
	.apex-pdp__spec-table th { flex: 0 0 46%; border-bottom: 0; }
	.apex-pdp__spec-table td { flex: 1; border-bottom: 0; }
}

/* Reviews inside the tab */
.apex-pdp__panel #reviews { margin: 0; }
.apex-pdp__panel #reviews h2,
.apex-pdp__panel #reviews h3 { font-size: 1.1rem; margin-bottom: var(--space-4); }
.apex-pdp__panel .woocommerce-noreviews,
.apex-pdp__panel .comment-reply-title { font-size: 0.95rem; }
.apex-pdp__panel #review_form .comment-form { display: flex; flex-direction: column; gap: var(--space-4); }
.apex-pdp__panel #review_form input[type="text"],
.apex-pdp__panel #review_form input[type="email"],
.apex-pdp__panel #review_form textarea {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.75em 1em;
	font-size: 0.95rem;
	background: var(--color-bg-alt);
}
.apex-pdp__panel #review_form .submit {
	background: var(--color-navy);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.8em 1.8em;
	font-weight: 600;
	align-self: flex-start;
}
.apex-pdp__panel #review_form .submit:hover { background: var(--color-navy-dark); }

/* --------------------------------------------------------------------------
   Related / similar products heading
   -------------------------------------------------------------------------- */

.apex-pdp .related.products,
.apex-pdp .up-sells.products {
	margin-top: var(--space-16);
	clear: both;
}
.apex-pdp .related.products > h2,
.apex-pdp .up-sells.products > h2 {
	font-size: 1.25rem;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-6);
	border-bottom: 2px solid var(--color-border);
	text-align: left;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.apex-pdp__top { grid-template-columns: 1fr; }
	.apex-pdp__stage-img { min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
	.apex-pdp { padding-block: var(--space-5) var(--space-12); }
	.apex-pdp__buy { padding: var(--space-5); }
	.apex-pdp__cart form.cart { flex-direction: column; align-items: stretch; }
	.apex-pdp__cart .quantity { align-self: flex-start; }
	/* `flex: 1 1 200px` sizes the MAIN axis. Once the form stacks, the main
	   axis is vertical, so that 200px basis made the Add to cart button 200px
	   TALL instead of 200px wide. Reset the flex sizing and let the button
	   take its natural height. */
	.apex-pdp__cart button.single_add_to_cart_button,
	.apex-pdp__cart .single_add_to_cart_button.button {
		flex: 0 0 auto;
		width: 100%;
	}
	.apex-pdp__thumb { flex-basis: 66px; width: 66px; height: 66px; }
	.apex-pdp__share { margin-left: 0; }
	.apex-pdp__tab { padding: 0.85em 1em; font-size: 0.85rem; }

	/* A right-edge fade hints that the tab strip scrolls sideways when the
	   labels don't all fit — without it a clipped "Reviews" tab reads as a
	   layout bug rather than an invitation to swipe. */
	.apex-pdp__tabs {
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	}
}

/* --------------------------------------------------------------------------
   Full-size image viewer
   --------------------------------------------------------------------------
   z-index must clear 999: Storefront sets `#masthead { position:relative;
   z-index:999 }`, and this lives inside #content, which has no stacking
   context of its own — below 999 the sticky header paints over the viewer. */

/*
 * Near-fullscreen viewer, at the client's request (a Victorian Plumbing
 * screenshot was supplied as the reference): the image fills almost the
 * entire viewport with no surrounding white card, the close button is a
 * plain icon top-right rather than a filled circle, the prev/next arrows sit
 * out at the true screen edges rather than hugging the image, and a dot
 * strip along the bottom replaces the earlier "3 / 6" counter text.
 */
.apex-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
}
.apex-lightbox[hidden] { display: none; }

.apex-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 8, 13, .98);
	animation: apex-lb-fade .18s ease;
}

.apex-lightbox__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
	animation: apex-lb-rise .22s cubic-bezier(.2, .7, .3, 1);
}

.apex-lightbox__figure {
	margin: 0;
	flex: 1;
	min-height: 0;
	width: 100%;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.apex-lightbox__figure img {
	/* Fill the available frame and scale UP small product photos rather than
	   showing them at native size — our gallery images are typically only
	   ~500-800px, and at "never upscale" sizing they floated as a small
	   island in a mostly-empty dark viewport instead of reading as a
	   near-fullscreen viewer. object-fit: contain still preserves the
	   image's own aspect ratio (letterboxed, never cropped or distorted) —
	   only its overall size changes. */
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---- Dot pagination ---- */
.apex-lightbox__dots {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-top: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
}
.apex-lightbox__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	border: 0;
	padding: 0;
	transition: background-color .15s ease, transform .15s ease;
}
.apex-lightbox__dot:hover { background: rgba(255, 255, 255, .6); }
.apex-lightbox__dot.is-active { background: var(--color-white); transform: scale(1.3); }

/* ---- Close / prev / next ----
   Plain icons on the dark backdrop rather than filled white circles — reads
   as chrome floating over the image, not a card sitting on top of it. */
.apex-lightbox__close,
.apex-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .8);
	transition: color .15s ease, transform .12s ease;
}
.apex-lightbox__close:hover,
.apex-lightbox__nav:hover { color: var(--color-white); }

.apex-lightbox__close {
	top: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	right: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	width: 40px;
	height: 40px;
}
.apex-lightbox__close svg { width: 26px; height: 26px; }

.apex-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
}
.apex-lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.apex-lightbox__nav svg { width: 34px; height: 34px; }
.apex-lightbox__nav--prev { left: clamp(0.25rem, -0.5rem + 2vw, 1.5rem); }
.apex-lightbox__nav--next { right: clamp(0.25rem, -0.5rem + 2vw, 1.5rem); }

@keyframes apex-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apex-lb-rise { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.apex-lightbox__backdrop,
	.apex-lightbox__panel { animation: none; }
}

/* On narrow screens the side arrows would otherwise overlap the image —
   move them into the top corners instead, level with the close button, and
   let a swipe (already wired in JS) carry most of the navigation. */
@media (max-width: 640px) {
	.apex-lightbox__panel { padding: 3.25rem 1rem 1.5rem; }
	.apex-lightbox__nav {
		top: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
		transform: none;
		width: 36px;
		height: 36px;
	}
	.apex-lightbox__nav:hover { transform: scale(1.08); }
	.apex-lightbox__nav svg { width: 22px; height: 22px; }
	.apex-lightbox__nav--prev { left: clamp(0.75rem, 0.4rem + 1vw, 1.5rem); }
	.apex-lightbox__nav--next { left: calc(clamp(0.75rem, 0.4rem + 1vw, 1.5rem) + 44px); right: auto; }
}


/* --------------------------------------------------------------------------
   Delivery estimator (buy box)
   -------------------------------------------------------------------------- */

.apex-delivery {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.apex-delivery__toggle {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-navy);
	text-align: left;
}
.apex-delivery__toggle:hover { color: var(--color-red); }
.apex-delivery__toggle .apex-icon { color: var(--color-red); flex-shrink: 0; }
.apex-delivery__toggle .apex-icon svg { width: 20px; height: 20px; }
.apex-delivery__toggle > span { flex: 1; text-align: left; }
.apex-delivery__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: transform .2s ease;
}
.apex-delivery__toggle[aria-expanded="true"] .apex-delivery__chevron { transform: rotate(180deg); }

.apex-delivery__panel { padding-top: var(--space-4); }
.apex-delivery__panel[hidden] { display: none; }

.apex-delivery__row { display: flex; gap: var(--space-2); }
.apex-delivery__input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.65em 0.9em;
	font-size: 0.92rem;
	text-transform: uppercase;
	background: var(--color-bg-alt);
}
.apex-delivery__input:focus {
	outline: none;
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(1, 32, 79, .1);
}
.apex-delivery__go {
	flex-shrink: 0;
	background: var(--color-navy);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.65em 1.3em;
	font-size: 0.88rem;
	font-weight: 600;
}
.apex-delivery__go:hover { background: var(--color-red); }

.apex-delivery__result:empty { display: none; }
.apex-delivery__result {
	margin-top: var(--space-4);
	font-size: 0.88rem;
	border-radius: var(--radius-md);
	padding: var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
}
.apex-delivery__result.is-warn { background: rgba(199, 119, 0, .08); border-color: rgba(199, 119, 0, .3); }
.apex-delivery__result.is-ok { background: rgba(27, 138, 74, .06); border-color: rgba(27, 138, 74, .25); }

.apex-delivery__zone { margin: 0 0 var(--space-3); font-size: 0.82rem; }
.apex-delivery__zone strong { color: var(--color-navy); }

.apex-delivery__options { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.apex-delivery__option {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px dashed var(--color-border);
}
.apex-delivery__option:last-child { border-bottom: 0; padding-bottom: 0; }
/* Shown but greyed: a shopper needs to see that free delivery exists and what
   it takes to reach it, not have the option disappear. */
.apex-delivery__option.is-unavailable { opacity: .6; }
.apex-delivery__option-label { display: flex; flex-direction: column; gap: 2px; color: var(--color-text); font-weight: 600; }
.apex-delivery__option-label small { font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); }
.apex-delivery__option-cost { font-weight: 700; color: var(--color-navy); white-space: nowrap; }

.apex-delivery__foot { margin: var(--space-3) 0 0; font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Sticky purchase bar
   --------------------------------------------------------------------------
   Shown only once the real buy box has scrolled away. z-index clears
   Storefront's #masthead (999) so it is never painted behind the header. */

.apex-pdp__sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 20px rgba(1, 32, 79, .12);
	transform: translateY(110%);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.apex-pdp__sticky.is-visible { transform: translateY(0); }

.apex-pdp__sticky-inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-6);
}

.apex-pdp__sticky-thumb { flex-shrink: 0; width: 46px; height: 46px; }
.apex-pdp__sticky-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.apex-pdp__sticky-title {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--color-navy);
	line-height: 1.35;
	/* One line — this is a shortcut bar, not a second product header. */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apex-pdp__sticky-price {
	flex-shrink: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--color-navy);
	white-space: nowrap;
}
.apex-pdp__sticky-price del { display: none; }
.apex-pdp__sticky-price ins { text-decoration: none; color: var(--color-red); }

.apex-pdp__sticky-btn { flex-shrink: 0; min-height: 46px; }

@media (max-width: 720px) {
	.apex-pdp__sticky-inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
	.apex-pdp__sticky-thumb,
	.apex-pdp__sticky-title { display: none; }
	.apex-pdp__sticky-price { flex: 1; font-size: 1.05rem; }
	.apex-pdp__sticky-btn { flex: 1; }
}

/* The WhatsApp button would sit on top of the bar. */
.apex-pdp-sticky-open .apex-whatsapp-fab { transform: translateY(-72px); }