/* Isotonik V3 product page - static styles.
 * Extracted from isotonik-pdp-helpers.php on 2026-09-05. This was ~31.8KB of
 * inline <style> on EVERY V3 product page: not browser-cacheable, re-sent on
 * every view, and re-parsed each time. As a file it is cached across the whole
 * V3 catalogue and served by the CDN.
 * Only genuinely static rules live here. The one rule that interpolates the
 * Breakdance template id stays inline in the plugin (see iso_pdp_v3_template_id).
 * DO NOT hand-edit: change the plugin and re-extract, or the two will diverge.
 */
:root { --pdp-section-shadow: 0 0 3px rgba(0,0,0,0.75), 0 17px 24px rgba(0,0,0,0.3); }
		/* Drop the redundant play badge on the gallery THUMBNAILS (keep it on the main image). */
		/* Hero fills at least the viewport so the parallax background section sits below the fold (desktop only; mobile stacks tall already). */
		.pdp-hero { margin-top: var(--hss-3xs); }
		@media (min-width: 992px) { .pdp-hero { min-height: 62vh; } }
		.pdp-overview { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 24px; display: flex; justify-content: center; isolation: isolate; }
	.pdp-overview-bg { position: absolute; left: 0; right: 0; top: -20%; height: 140%; background-image: var(--pdp-ov-bg); background-size: cover; background-position: center; z-index: -1; will-change: transform; }
	.pdp-overview, .pdp-showcase, .pdp-desc--bg { --ov-lo: min(1, var(--iso-ovf,.6)/.6); --ov-hi: max(0, (var(--iso-ovf,.6) - .6)/.4); }
	.pdp-overview-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255, calc(.14*var(--ov-lo) + .86*var(--ov-hi))), rgba(255,255,255, calc(.34*var(--ov-lo) + .66*var(--ov-hi)))); }
		[data-hsx="dark"] .pdp-overview-bg::after { background: linear-gradient(180deg, rgba(0,0,0, calc(.25*var(--ov-lo) + .75*var(--ov-hi))), rgba(0,0,0, calc(.5*var(--ov-lo) + .5*var(--ov-hi)))); }
		/* The showcase section (infographics / audio player) has NO glass content
		   panel of its own - the caption text sits straight on the section
		   background - so give THIS section a STRONGER theme-reactive overlay than
		   overview/description (which have glass panels): a heavier white wash in
		   light mode / heavier black in dark mode, so the caption text has a
		   readable backdrop over any busy product image. */
		.pdp-showcase .pdp-overview-bg::after { background: linear-gradient(180deg, rgba(255,255,255, calc(.5*var(--ov-lo) + .5*var(--ov-hi))), rgba(255,255,255, calc(.66*var(--ov-lo) + .34*var(--ov-hi)))); }
		[data-hsx="dark"] .pdp-showcase .pdp-overview-bg::after { background: linear-gradient(180deg, rgba(0,0,0, calc(.48*var(--ov-lo) + .52*var(--ov-hi))), rgba(0,0,0, calc(.64*var(--ov-lo) + .36*var(--ov-hi)))); }
		/* The 44px cast shadow that used to separate these sections is gone: adjacent
		   sections now differ by one step of the neutral scale, which does the same job
		   without a dark band over a flat ground. */
		.pdp-related { position: relative; padding: clamp(56px, 8vw, 100px) 24px; display: flex; justify-content: center; background: var(--hcl-neutral-2, #f9f9f8); --pdp-rel-cw: calc((100% - 88px) / 4.5); }
		@media (max-width: 1000px) { .pdp-related { --pdp-rel-cw: calc((100% - 66px) / 3.5); } }
		@media (max-width: 680px) { .pdp-related { --pdp-rel-cw: calc((100% - 44px) / 2.5); } }
		.pdp-related-inner { position: relative; width: 100%; max-width: 1318px; }
		.pdp-rel-block { margin-bottom: 48px; }
		.pdp-rel-block:last-child { margin-bottom: 0; }
		.pdp-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--pdp-rel-cw, 238px)); justify-content: start; gap: 22px; }
		.pdp-rel-card { display: flex; flex-direction: column; text-decoration: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--iso-line); background: var(--hcl-neutral-3, rgba(127,127,127,0.08)); transition: transform .2s ease, box-shadow .2s ease; }
		.pdp-rel-card:hover { transform: translateY(-4px); box-shadow: var(--pdp-section-shadow); }
		.pdp-rel-img img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
		.pdp-rel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
		.pdp-rel-title { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--iso-text); }
		.pdp-rel-price { font-size: 14px; color: var(--iso-text-subtle); }
		.pdp-rel-price .amount, .pdp-rel-price ins .amount { color: var(--iso-text); font-weight: 600; }
		.pdp-rel-price del { opacity: 0.6; margin-right: 5px; }
		.pdp-rel-slider { position: relative; }
		.pdp-rel-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 30px 4px 72px; margin: -14px -4px -24px; }
		/* Carousel cards get a slightly softer, shallower hover shadow than the archive
		   grid so it fully fades inside the scroll container's clipped Y axis (a horizontal
		   scroller forces overflow-y to clip) without needing a huge padding gap. */
		.pdp-rel-viewport .iso-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 20px 44px rgba(0,0,0,0.14); }
		.pdp-rel-viewport::-webkit-scrollbar { display: none; }
		.pdp-rel-grid--slider { display: flex; grid-template-columns: none; gap: 22px; }
		.pdp-rel-grid--slider > .iso-card { flex: 0 0 var(--pdp-rel-cw, 238px); height: auto; align-self: stretch; scroll-snap-align: start; }
		.pdp-rel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--iso-brand); background: var(--iso-surface); color: var(--iso-brand); font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,0.14); transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
		.pdp-rel-arrow:hover { background: var(--iso-brand); color: #fff; transform: translateY(-50%) scale(1.08); }
		[data-hsx="dark"] .pdp-rel-arrow { box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
		.pdp-rel-arrow--prev { left: -30px; }
		.pdp-rel-arrow--next { right: -30px; }
		.pdp-rel-arrow[disabled] { opacity: 0; pointer-events: none; }
		@media (max-width: 900px) { .pdp-rel-arrow--prev { left: -18px; } .pdp-rel-arrow--next { right: -18px; } }
		@media (max-width: 720px) { .pdp-rel-arrow { display: none; } }
		/* WPSix gallery lightbox (PhotoSwipe v4): its base CSS is missing here, so the
		   inactive .pswp container renders in-flow (a grey top-bar strip) below the
		   footer. Hide it until PhotoSwipe adds .pswp--open on image click. */
		.pswp:not(.pswp--open) { display: none !important; }
		.pswp { position: fixed; }
		.pdp-rel-progress { position: relative; height: 4px; border-radius: 99px; background: var(--iso-line, rgba(0,0,0,0.12)); margin: 26px auto 0; max-width: 200px; overflow: hidden; }
		[data-hsx="dark"] .pdp-rel-progress { background: rgba(255,255,255,0.16); }
		.pdp-rel-progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 99px; background: var(--iso-brand); will-change: left, width; transition: left .12s ease-out, width .12s ease-out; }
		.pdp-faq { position: relative; padding: clamp(56px, 8vw, 100px) 24px; display: flex; justify-content: center; background: var(--hcl-neutral-2, #f9f9f8); }
		.pdp-faq-inner { position: relative; width: 100%; max-width: 900px; }
		.pdp-details-inner { position: relative; width: 100%; max-width: 1318px; }
		.pdp-details-inner--two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
		.pdp-details-col .pdp-section-title { font-size: clamp(20px, 2.4vw, 28px); }
		@media (max-width: 860px) { .pdp-details-inner--two { grid-template-columns: 1fr; gap: 34px; } }
		.pdp-press-reviews { margin-bottom: 30px; color: var(--iso-text-subtle); line-height: 1.7; }
		.pdp-press-reviews p { margin: 0 0 12px; }
		.pdp-press-reviews a { color: var(--iso-brand); }
		.pdp-acc-list { display: flex; flex-direction: column; gap: 12px; }
		.pdp-acc-item { border: 1px solid var(--iso-line); border-radius: 12px; overflow: hidden; background: var(--hcl-neutral-3, rgba(127,127,127,0.09)); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
		.pdp-acc-item:hover { border-color: var(--iso-brand); background: var(--hcl-neutral-3, rgba(127,127,127,0.09)); box-shadow: 0 6px 18px rgba(0,0,0,0.07); transform: translateY(-1px); }
		[data-hsx="dark"] .pdp-acc-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); }
		.pdp-acc-item:hover .pdp-acc-ico { border-color: var(--iso-brand); }
		.pdp-acc-q { cursor: pointer; padding: 17px 22px; font-weight: 600; font-size: 16px; color: var(--iso-text); display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
		.pdp-acc-q::-webkit-details-marker { display: none; }
		.pdp-acc-ico { width: 9px; height: 9px; border-right: 2px solid var(--iso-brand); border-bottom: 2px solid var(--iso-brand); transform: rotate(45deg); transition: transform .25s ease; flex-shrink: 0; margin-top: -3px; }
		.pdp-acc-item[open] .pdp-acc-q .pdp-acc-ico { transform: rotate(-135deg); margin-top: 3px; }
		.pdp-acc-a { padding: 2px 22px 20px; color: var(--iso-text-subtle); line-height: 1.7; }
		.pdp-acc-a p { margin: 0 0 12px; }
		.pdp-acc-a p:last-child { margin-bottom: 0; }
		/* Changelog version headers (<h3>v1.0.1 - 25 September 2026</h3>) sit
		   inside the accordion body. Without a rule here they inherit the theme's
		   full-size h3 and dwarf the panel; scope them to a compact label so a
		   stack of versions reads as a list. */
		.pdp-acc-a h3 { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; color: var(--iso-text); }
		.pdp-acc-a h3 + p { margin-top: 0; }
		.pdp-acc-a h3:not(:first-child) { margin-top: 18px; }
		.pdp-acc-a a { color: var(--iso-brand); }
		.pdp-showcase { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 24px; display: flex; justify-content: center; isolation: isolate; }
		.pdp-showcase-inner { position: relative; width: 100%; max-width: 1318px; }
		/* Showcase slider sits directly on the parallax bg: transparent viewport, no glassmorphism (rounded image corners kept). */
		.pdp-showcase .pdp-ov-viewport { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; }
		/* Second audio player (audio-only synth packs): hidden until the footer JS relocates it into the showcase slot. */
		#pdp-audio-2 { display: none; }
		.pdp-showcase-audio-slot { width: 100%; max-width: 780px; margin: 0 auto; }
		.pdp-showcase-audio-slot #pdp-audio-2 { display: block; width: 100%; }
		/* .aap-player background is now set natively on the element (design.player.background_color = transparent). */
		.pdp-showcase .aap-btn-play { box-shadow: none !important; transition: transform .15s ease, box-shadow .15s ease; }
		.pdp-showcase .aap-btn-play:hover, .pdp-showcase .aap-btn-play:focus { box-shadow: 0 0 0 5px rgba(247,107,21,0.2) !important; transform: scale(1.04); outline: none; }
		/* ── aap audio-playlist colours (Phox Advanced Audio Player) ─────────────
		   The player relocates into either the hero media column (#pdp-audio, on
		   image products) or the showcase slot (#pdp-audio-2, on audio-only packs),
		   so scope by the two stable wrapper ids rather than a section. The Phox
		   plugin default is dark-only (white-on-black-alpha) and the Breakdance-
		   generated selectors.css washed the ACTIVE row in a muddy peach tan with
		   all-orange text plus a solid orange equaliser block. These rules put the
		   playlist on the V3 neutral scale in BOTH themes and give a clean brand
		   "now playing" row (subtle tint + solid left accent + orange title, with
		   the artist kept neutral so it no longer reads as a wall of orange).
		   !important is required only where it must beat the id-specificity
		   selectors.css rules; the tint alpha is bumped in dark for presence.
		   Additive + backward-safe: single-demo players just inherit the calmer
		   container and are otherwise untouched. */
		#pdp-audio .aap-playlist, #pdp-audio-2 .aap-playlist { background: transparent !important; border: 0 !important; border-radius: 0; }
		#pdp-audio .aap-playlist-header, #pdp-audio-2 .aap-playlist-header { border-bottom: 0 !important; }
		#pdp-audio .aap-playlist-title, #pdp-audio-2 .aap-playlist-title { color: var(--iso-text, #21201c) !important; }
		#pdp-audio .aap-playlist-count, #pdp-audio-2 .aap-playlist-count { color: var(--iso-text-subtle, #63635e) !important; }
		#pdp-audio .aap-playlist-items::-webkit-scrollbar-thumb, #pdp-audio-2 .aap-playlist-items::-webkit-scrollbar-thumb { background: var(--hcl-neutral-6, #dad9d6) !important; }
		#pdp-audio .aap-playlist-item, #pdp-audio-2 .aap-playlist-item { background: transparent !important; color: var(--iso-text-subtle, #63635e) !important; margin: 2px 8px; padding: 9px 12px; border-radius: 8px; }
		#pdp-audio .aap-playlist-item-title, #pdp-audio-2 .aap-playlist-item-title { color: var(--iso-text, #21201c) !important; }
		#pdp-audio .aap-playlist-item-artist, #pdp-audio-2 .aap-playlist-item-artist { color: var(--iso-text-subtle, #63635e) !important; }
		#pdp-audio .aap-playlist-item-num, #pdp-audio-2 .aap-playlist-item-num { color: var(--iso-text-subtle, #63635e) !important; }
		#pdp-audio .aap-playlist-item:hover, #pdp-audio-2 .aap-playlist-item:hover { background: var(--hcl-neutral-4, #e9e8e6) !important; color: var(--iso-text, #21201c) !important; }
		#pdp-audio .aap-playlist-item:hover .aap-playlist-item-title, #pdp-audio-2 .aap-playlist-item:hover .aap-playlist-item-title { color: var(--iso-text, #21201c) !important; }
		/* active "now playing": subtle brand tint + solid left accent + brand title, artist stays neutral */
		#pdp-audio .aap-playlist-item.active, #pdp-audio-2 .aap-playlist-item.active { background: rgba(247,107,21,0.10) !important; color: var(--iso-brand-strong, #ef5f00) !important; box-shadow: none !important; }
		[data-hsx="dark"] #pdp-audio .aap-playlist-item.active, [data-hsx="dark"] #pdp-audio-2 .aap-playlist-item.active { background: rgba(247,107,21,0.16) !important; }
		#pdp-audio .aap-playlist-item.active .aap-playlist-item-title, #pdp-audio-2 .aap-playlist-item.active .aap-playlist-item-title { color: var(--iso-brand-strong, #ef5f00) !important; font-weight: 600; }
		#pdp-audio .aap-playlist-item.active .aap-playlist-item-artist, #pdp-audio-2 .aap-playlist-item.active .aap-playlist-item-artist { color: var(--iso-text-subtle, #63635e) !important; }
		/* the equaliser is 3 animated bars, not a block: kill the solid brand square selectors.css gave the container, keep the bars brand */
		#pdp-audio .aap-playlist-item-playing, #pdp-audio-2 .aap-playlist-item-playing { background: transparent !important; }
		#pdp-audio .aap-playlist-item-playing span, #pdp-audio-2 .aap-playlist-item-playing span { background: var(--iso-brand, #f76b15) !important; }
		.pdp-reviews { position: relative; padding: clamp(56px, 8vw, 100px) 24px; display: flex; justify-content: center; background: var(--hcl-neutral-2, #f9f9f8); scroll-margin-top: 110px; }
		.pdp-reviews-inner { position: relative; width: 100%; max-width: 1318px; }
		/* Perf: skip layout/paint of below-fold sections until scrolled into view (no JS).
		   contain-intrinsic-size reserves an approximate height so the scrollbar doesn't jump.
		   The reviews block (TrustMe) is the heaviest DOM subtree on the page, so this is the
		   biggest single render/TTI win. */
		.pdp-reviews { content-visibility: auto; contain-intrinsic-size: 1px 1200px; }
		.pdp-showcase { content-visibility: auto; contain-intrinsic-size: 1px 720px; }
		.pdp-faq { content-visibility: auto; contain-intrinsic-size: 1px 620px; }
		.pdp-related { content-visibility: auto; contain-intrinsic-size: 1px 700px; }
		.pdp-section-title { margin: 0 0 24px; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.01em; color: var(--iso-text); }

		/* Let review text use the full column width (TrustMe caps it at max-w-2xl / 672px, forcing tall narrow reviews). */
		.pdp-reviews .trustme-review-content { max-width: none !important; width: 100% !important; }

		/* TrustMe dark-mode: map its hardcoded Tailwind "stone" colours onto the Headspin theme scale so reviews are legible on the dark theme. Ported from prod (the V2 template's compiled CSS, post-1029188.css) since those global rules only loaded on the old template. */
		[data-hsx="dark"] .single-product .trustme,
		[data-hsx="dark"] .single-product .trustme *:not([class*="text-"]):not(.trustme-modal):not(.trustme-modal *) { color: var(--hcl-neutral-12); }
		[data-hsx="dark"] .single-product .trustme [class*="text-stone-"]:not(.trustme-modal):not(.trustme-modal *),
		[data-hsx="dark"] .single-product .trustme-summary [class*="text-stone-"],
		[data-hsx="dark"] .single-product .trustme-reviews-count,
		[data-hsx="dark"] .single-product .trustme-bar-ratings [class*="text-stone-"],
		[data-hsx="dark"] .single-product .trustme-bar-ratings .min-w-12,
		/* .trustme-no-reviews falls through BOTH rules above: the first excludes
		   [class*="text-"] to skip Tailwind text-COLOUR utilities, but this element
		   carries text-sm -- a text-SIZE utility -- and it has no text-stone-* class
		   for the second to catch. It was left at rgb(0,0,0) on a #191918 section. */
		[data-hsx="dark"] .single-product .trustme-no-reviews { color: var(--hcl-neutral-12) !important; }
		[data-hsx="dark"] .single-product .trustme svg,
		[data-hsx="dark"] .single-product .trustme svg * { color: inherit !important; }
		[data-hsx="dark"] .single-product .trustme-filter-button,
		[data-hsx="dark"] .single-product .trustme-add-button,
		[data-hsx="dark"] .single-product .trustme-tag { color: var(--hcl-neutral-1) !important; }
		[data-hsx="dark"] .trustme-star { color: orange !important; }

		/* ── pdp-hero-thumb-align: hero gallery + dark-mode contrast ─────────── */
		/* WPSix ships .woo-gallery-thumbs with padding:0 40px, so the thumbnail
		   strip sits 80px narrower than the hero image above it. Drop it so the
		   strip lines up with the hero edge-to-edge. */
		.pdp-hero-media .woo-gallery-thumbs,
		.pdp-hero-media .woo-gallery-thumbs-swiper-container { padding-left: 0 !important; padding-right: 0 !important; }

		/* Each thumbnail sits in a .swiper-slide-inner frame hardcoded to white
		   with a black border - fine on the light theme, a glaring white box on
		   the dark one. Track the theme instead. */
		.pdp-hero-media .swiper-slide-inner {
			background: var(--hcl-neutral-2, #fff) !important;
			border-color: var(--hcl-neutral-6, rgba(0,0,0,.15)) !important;
		}
		[data-hsx="dark"] .pdp-hero-media .swiper-slide-inner {
			background: var(--hcl-neutral-2, #191918) !important;
			border-color: var(--hcl-neutral-6, rgba(255,255,255,.14)) !important;
		}

		/* pdp-hero-thumb-active: Swiper flags the current thumbnail with
		   .swiper-slide-thumb-active but only gives it a black 1px outline -
		   readable on the light theme, invisible on the dark one. Use the brand
		   accent in both so "which one am I looking at" is never in doubt. */
		/* ONLY .swiper-slide-thumb-active: in a thumbs swiper .swiper-slide-active
		   marks the leftmost visible slide, which is usually a different one, so
		   matching both lit two thumbnails at once. */
		/* ── pdp-lightbox-dark: WPSix's lightbox is hardcoded light ─────────── */
		/* Panel, slide, info divider, close button and arrows are all fixed light
		   values, so the whole overlay stays white on the dark theme. */
		[data-hsx="dark"] .woo-lightbox-content,
		[data-hsx="dark"] .woo-lightbox-main-swiper .swiper-slide {
			background-color: var(--hcl-neutral-2, #191918) !important;
			color: var(--hcl-neutral-12, #eeeeec) !important;
		}
		[data-hsx="dark"] .woo-lightbox-content-info { border-left-color: var(--hcl-neutral-6, rgba(255,255,255,.14)) !important; }
		[data-hsx="dark"] .woo-lightbox-content-info,
		[data-hsx="dark"] .woo-lightbox-content-info * { color: var(--hcl-neutral-12, #eeeeec); }
		[data-hsx="dark"] .woo-lightbox-close-button {
			background: var(--hcl-neutral-4, rgba(255,255,255,.09)) !important;
			color: var(--hcl-neutral-12, #eeeeec) !important;
		}
		[data-hsx="dark"] .woo-lightbox-main-swiper .swiper-button-prev,
		[data-hsx="dark"] .woo-lightbox-main-swiper .swiper-button-next,
		[data-hsx="dark"] .woo-lightbox-thumbs-swiper .swiper-button-prev,
		[data-hsx="dark"] .woo-lightbox-thumbs-swiper .swiper-button-next {
			background-color: var(--hcl-neutral-4, rgba(255,255,255,.12)) !important;
			color: var(--hcl-neutral-12, #eeeeec) !important;
		}

		/* The video was cropped top and bottom: the facade is forced to height:100%
		   of a media column shorter than its 16:9 needs, inside an overflow:hidden
		   swiper. Give the panel more of the viewport and let the facade size from
		   its HEIGHT (aspect-ratio derives the width), centred, so it fits whole. */
		/* Height only. Forcing the facade to width:auto collapsed it to zero - with
		   aspect-ratio and no resolved parent height there is nothing to derive a
		   width from, so the video vanished entirely. Leave its box alone. */
		.woo-lightbox-content { height: 92% !important; }

		/* pdp-lightbox-fit: the facade's poster is inline-styled object-fit:cover,
		   so it fills the box and clips the top and bottom of a 16:9 board. In the
		   lightbox we want the whole frame, so letterbox it against the facade's
		   own black instead. Image-level only - no layout change, so it cannot
		   collapse the way a width/height override does. */
		.woo-lightbox-video-container .iso-yt-facade img,
		.woo-lightbox-main-swiper .swiper-slide .iso-yt-facade img {
			object-fit: contain !important;
		}
		/* ...and drop the facade's own aspect-ratio in the lightbox. Its inline
		   style is width:100%;height:100%;aspect-ratio:800/450 - in a column wider
		   than 16:9 the ratio wins, the box computes TALLER than its parent, and
		   overflow:hidden clips the top and bottom. Letting it fill the column
		   exactly (100% x 100%, no ratio) means nothing overflows, and the image
		   above letterboxes inside it. Both dimensions stay explicit, so this
		   cannot collapse the way width:auto did. */
		/* Size the video from its WIDTH, never its height.
		   width:auto + aspect-ratio needs a definite parent height, and nothing in
		   this flex chain provides one - that collapsed the video to zero twice.
		   Here width is definite (100% of a definite-width column), aspect-ratio
		   derives the height from it, and max-width caps it in vh-derived units so
		   the box can never exceed the space available. No parent height needed. */
		.woo-lightbox-video-container {
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			min-height: 0 !important;
		}
		/* Target the Plyr embed wrapper, not just the facade: the facade lives
		   inside #player.plyr__video-embed, so its width:100% was 100% OF THAT
		   wrapper - sizing the facade could never widen anything. Size the
		   wrapper the same width-driven way and let the facade fill it. */
		.woo-lightbox-video-container .plyr__video-embed,
		.woo-lightbox-video-container > div[id^="player"],
		.woo-lightbox-video-container .iso-yt-facade,
		.woo-lightbox-main-swiper .swiper-slide .iso-yt-facade {
			aspect-ratio: 16 / 9 !important;
			width: 100% !important;
			height: auto !important;
			padding-bottom: 0 !important;
			/* Cap by the height actually available, not an arbitrary fraction:
			   the panel is 92vh and the thumbnail strip plus padding takes ~260px,
			   so anything under (92vh - 260px) tall fits without clipping. Below that
			   width:100% wins and the video fills the column. */
			max-width: calc((92vh - 225px) * 16 / 9) !important;
			margin: 0 auto !important;
		}
		/* Box is a true 16:9 and so is the board, so cover crops nothing. */
		.woo-lightbox-video-container .iso-yt-facade img,
		.woo-lightbox-main-swiper .swiper-slide .iso-yt-facade img {
			object-fit: cover !important;
		}

		/* Device media light/dark swap. Both images are in the DOM; only the
		   visible one is shown, so the header toggle switches instantly with no
		   reload and no flash of the wrong artwork. A row with no dark image has no
		   .pdp-ov-light class on its light image, so it simply shows in both themes. */
		.pdp-ov-slide .pdp-ov-dark { display: none; }
		[data-hsx="dark"] .pdp-ov-slide .pdp-ov-light { display: none; }
		[data-hsx="dark"] .pdp-ov-slide .pdp-ov-dark { display: block; }

		/* Thumbnails are navigation, not content: cap them so they stop claiming a
		   third of the panel each. Being 16:9 a narrower thumb is also a shorter one,
		   which is what frees the vertical space the video above then takes (see the
		   190px allowance in its max-width). */
		.pdp-hero-media .woo-lightbox-content .woo-lightbox-static-thumbs .woo-lightbox-static-thumb,
		.woo-lightbox-static-thumbs .woo-lightbox-static-thumb {
			flex: 0 0 auto !important;
			width: 180px !important;
			max-width: 180px !important;
			height: auto !important;
		}
		.pdp-hero-media .woo-lightbox-content .pdp-lb-media .woo-lightbox-static-thumbs {
			justify-content: center !important;
		}

		/* The lightbox marks its selected thumbnail with a hardcoded blue (and a
		   white ring on the swiper variant). Use the brand accent so it matches
		   the gallery strip on the page. */
		/* Literal hex, not the token: the lightbox is portalled and these rules
		   were computing to transparent even though --hcl-brand-9 resolves on the
		   element. Also set border-style/width so the colour has something to
		   paint on regardless of what the plugin's base rule left behind. */
		.pdp-hero-media .woo-lightbox-static-thumb.active,
		.woo-lightbox-static-thumb.active {
			border: 2px solid #f76b15 !important;
			box-shadow: 0 0 0 2px rgba(247,107,21,.45) !important;
			opacity: 1 !important;
		}
		.woo-lightbox-thumbs-swiper .swiper-slide-thumb-active {
			border: 2px solid #f76b15 !important;
			box-shadow: 0 0 0 2px rgba(247,107,21,.45) !important;
		}

		.pdp-hero-media .swiper-slide-thumb-active .swiper-slide-inner {
			border-color: var(--hcl-brand-9, #f76b15) !important;
			box-shadow: 0 0 0 2px var(--hcl-brand-9, #f76b15) !important;
			outline: none !important;
		}

		/* Checkout reassurances read at #7c7b74, which is legible on white but
		   too dim on the dark theme. */
		[data-hsx="dark"] .pdp-reassure-item { color: var(--hcl-neutral-11, #b5b3ad) !important; }

		/* TrustMe's "Write a review" keeps a hardcoded white background, so the
		   light body colour the dark theme gives it lands white-on-white. Make it
		   the outlined pill the dark theme expects. */
		[data-hsx="dark"] .single-product .trustme-add-button {
			background: transparent !important;
			color: var(--hcl-neutral-12, #eeeeec) !important;
			border-color: var(--hcl-neutral-8, rgba(255,255,255,.28)) !important;
		}
		[data-hsx="dark"] .single-product .trustme-add-button:hover {
			background: var(--hcl-neutral-3, rgba(255,255,255,.06)) !important;
		}
		/* The star-rating filter dropdown keeps a hardcoded light panel in dark mode, so its option labels must stay dark (stars keep their own colour by inheritance). */
		[data-hsx="dark"] .single-product .trustme .trustme-dropdown-menu,
		[data-hsx="dark"] .single-product .trustme .trustme-dropdown-menu .trustme-rating-option,
		[data-hsx="dark"] .single-product .trustme .trustme-dropdown-menu .trustme-rating-option [class*="text-stone-"]:not(.trustme-modal),
		[data-hsx="dark"] .single-product .trustme .trustme-dropdown-menu .trustme-rating-option .text-xs:not(.trustme-modal) { color: var(--hcl-neutral-1) !important; }
		[data-hsx="dark"] .single-product .trustme-modal h2 { color: var(--color-stone-800) !important; }
	.pdp-overview-inner { position: relative; width: 100%; max-width: 1318px; }
		.pdp-overview-glass:not(.pdp-overview-glass--split) { max-width: 900px; margin-left: auto; margin-right: auto; }
		.pdp-overview-title { margin: 0 0 18px; color: var(--hcl-neutral-12); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; }
	/* Flat panel, not glass. The section background is a solid colour now, so
	   blur(20px) had nothing to blur -- it was a per-frame GPU pass producing a
	   pixel-identical result -- and --pdp-section-shadow (0 17px 24px rgba(0,0,0,.3))
	   was lifting the panel off a photographic mosaic that is no longer there.
	   Matches .pdp-acc-item (the FAQ rows): neutral-2 fill, 1px line, no shadow.
	   The 22px radius is kept rather than the FAQ's 12px -- these panels are far
	   wider, and 12px on a full-width block reads as square.
	   --glass-line is still set: the aside/divider rules consume it. */
	.pdp-overview-glass { --glass-bg: var(--hcl-neutral-2, #f9f9f8); --glass-bd: var(--iso-line, #e2e1de); --glass-line: rgba(0,0,0,0.1); background-color: var(--glass-bg); border: 1px solid var(--glass-bd); box-shadow: none; border-radius: 22px; padding: clamp(28px, 4vw, 48px); color: var(--hcl-neutral-12); }
	[data-hsx="dark"] .pdp-overview-glass { --glass-bg: var(--hcl-neutral-2, #191918); --glass-bd: var(--iso-line, #31312e); --glass-line: rgba(255,255,255,0.1); }
	.pdp-overview-glass h1, .pdp-overview-glass h2, .pdp-overview-glass h3 { color: var(--hcl-neutral-12); }
	.pdp-overview-glass p { line-height: 1.7; margin: 0 0 15px; color: var(--hcl-neutral-11); max-width: 760px; }
	.pdp-overview-glass strong { color: var(--hcl-neutral-12); }
	.pdp-overview-glass a { color: #f76b15; }
	.pdp-overview-features { margin-top: 8px; }
	.pdp-overview-features ul { list-style: none; margin: 0; padding: 0; }
	.pdp-overview-features li { position: relative; padding-left: 24px; margin-bottom: 7px; line-height: 1.5; }
	.pdp-overview-features li:last-child { margin-bottom: 0; }
	.pdp-overview-features li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--hcl-brand-9, #f76b15); font-weight: 700; }
	.pdp-overview-glass ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
	.pdp-overview-glass li { position: relative; padding-left: 26px; line-height: 1.5; color: var(--hcl-neutral-11); }
	.pdp-overview-glass li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #f76b15; font-weight: 700; }
	/* Infographics device-image slider */
		/* Two-column Overview: story (left) + compatibility spec (right) */
		.pdp-overview-glass--split { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
		.pdp-overview-main { min-width: 0; }
		.pdp-overview-guide { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--glass-line); }
		.pdp-overview-guide p { margin: 0; line-height: 1.9; }
		.pdp-overview-guide a { color: #f76b15; text-decoration: none; background-image: linear-gradient(#f76b15, #f76b15); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; padding-bottom: 2px; transition: background-size 0.3s; }
		.pdp-overview-guide a:hover { background-size: 100% 1px; text-decoration: none; color: #f76b15; }
		.pdp-overview-aside { min-width: 0; }
		.pdp-aside-title { margin: 0 0 4px; color: var(--hcl-neutral-12); font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
		.pdp-overview-main-title { margin: 0 0 20px; color: var(--hcl-neutral-12); font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
		/* Reads as a strap line: a step up from the body copy it introduces, and
		   deliberately not as loud as the hero's product-type line. */
		.pdp-overview-lead { margin: -6px 0 18px; color: var(--hcl-neutral-12); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
		.pdp-overview-aside .pdp-spec { display: block; }
		.pdp-overview-aside .pdp-spec-row { display: grid; grid-template-columns: minmax(88px, 38%) 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--glass-line); align-items: start; }
		.pdp-overview-aside .pdp-spec-row:last-child { border-bottom: 0; }
		.pdp-overview-aside .pdp-spec-k { color: #f76b15; font-weight: 600; font-size: 14px; line-height: 1.35; }
		.pdp-overview-aside .pdp-spec-v { color: var(--hcl-neutral-11); font-size: 14px; line-height: 1.5; }
		.pdp-overview-meta { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--glass-line); display: block; }
		.pdp-meta-row { display: grid; grid-template-columns: minmax(88px, 38%) 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--glass-line); align-items: start; }
		.pdp-meta-row:last-child { border-bottom: 0; }
		.pdp-meta-k { color: #f76b15; font-weight: 600; font-size: 14px; line-height: 1.35; }
		.pdp-meta-v { color: var(--hcl-neutral-11); font-size: 14px; line-height: 1.5; }
		.pdp-overview-meta a { color: var(--hcl-neutral-12, #21201c); text-decoration: none; border-bottom: 0; background-image: linear-gradient(var(--iso-brand,#f76b15), var(--iso-brand,#f76b15)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease, color .2s ease; }
		.pdp-overview-meta a:hover { color: var(--iso-brand, #f76b15); background-size: 100% 1px; }
		@media (max-width: 860px) { .pdp-overview-glass--split { grid-template-columns: 1fr; gap: 30px; } }

		/* Infographics device-image slider */
		.pdp-ov-slider { position: relative; width: 100%; margin-top: 24px; }
		.pdp-ov-viewport { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--pdp-section-shadow); background: rgba(18,18,22,0.5); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
		.pdp-ov-track { display: flex; transition: transform 480ms cubic-bezier(.22,.61,.36,1); }
		.pdp-ov-slide { flex: 0 0 100%; margin: 0; min-width: 0; }
		.pdp-ov-slide img { width: 100%; height: auto; display: block; }
		/* Single-device showcase: never enlarge the art past its own pixels. A narrow
		   device stretched to the full column came out twice its real size and soft
		   (MIDI Bounce, a 500x346 file, rendered ~1020 wide). Art wider than the column
		   still fills it exactly as before, so every wide Max device and Melody Sauce 3
		   (1381 wide) are unchanged; only smaller files stop being upscaled. */
		.pdp-ov-slider--single .pdp-ov-slide img { width: auto; max-width: 100%; margin: 0 auto; }
		.pdp-ov-cap { padding: 12px 18px; color: var(--hcl-neutral-12); font-size: 14px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,0.12); }
		[data-hsx="dark"] .pdp-ov-cap { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
		.pdp-ov-cap-top { border-bottom: 1px solid rgba(127,127,127,0.22); }
		.pdp-ov-cap-bot { border-top: 1px solid rgba(127,127,127,0.22); }
		.pdp-ov-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(18,18,22,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,0.18); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .18s, opacity .18s; }
		.pdp-ov-nav:hover { background: #f76b15; border-color: #f76b15; }
		.pdp-ov-prev { left: 12px; }
		.pdp-ov-next { right: 12px; }
		.pdp-ov-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
		.pdp-ov-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.32); cursor: pointer; padding: 0; transition: background .2s, width .2s, border-radius .2s; }
		.pdp-ov-dot.is-active { background: #f76b15; width: 22px; border-radius: 4px; }
		@media (max-width: 1023px) { .pdp-overview-bg { top: 0; height: 100%; } .pdp-ov-nav { width: 38px; height: 38px; font-size: 22px; } }
		@media (prefers-reduced-motion: reduce) { .pdp-ov-track { transition: none; } }

		/* Elevated sticky Add-to-Basket bar on desktop - matches header depth, dark-mode aware via Headspin neutral vars. Loads after isotonik-sticky-atc.php so it wins the cascade. */
		/* Keep the bar rendered at all times and hide it purely by translating it
		   off-screen, so the reveal actually animates. (The plugin toggles display
		   none<->flex, and you cannot transition out of display:none, so it snapped.)
		   translateY(100% + 46px) also tucks the upward shadow out of view. */
		#iso-sticky-atc { display: flex; transform: translateY(calc(100% + 46px)); pointer-events: none; transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 200ms; }
		#iso-sticky-atc.visible { transform: translateY(0); pointer-events: auto; }
		@media (prefers-reduced-motion: reduce) { #iso-sticky-atc { transition: transform 0ms, background-color 200ms; } }
		/* Theme-aware colours at EVERY width. They used to sit inside the 992px query
		   below, so the mobile bar kept the plugin's hardcoded white in dark mode. */
		#iso-sticky-atc { background: var(--iso-surface); border-top: 1px solid var(--iso-line); box-shadow: 0 0 3px rgba(0,0,0,0.28), 0 -16px 28px rgba(0,0,0,0.12); }
		#iso-sticky-atc .iso-sticky-name { color: var(--hcl-neutral-12, #1a1a2e); }
		#iso-sticky-atc .iso-sticky-price { color: var(--iso-text-subtle); }
		#iso-sticky-atc .iso-sticky-price del { color: var(--iso-text-muted, #999); }
		#iso-sticky-atc .iso-sticky-bundle { color: #f76b15; }
		/* The plugin's #c0392b sale red is ~3.5:1 on the dark surface; this is ~6.8:1. */
		[data-hsx="dark"] #iso-sticky-atc .iso-sticky-price ins { color: #f87171; }
		/* Tap feedback tint (class set by isotonik-sticky-atc.php), mixed over the theme surface. */
		#iso-sticky-atc.iso-sticky-flash { background: var(--iso-surface); background: color-mix(in srgb, #f76b15 12%, var(--iso-surface)); }
		@media (min-width: 992px) {
			#iso-sticky-atc { padding-top: 14px; padding-bottom: 14px; padding-left: max(32px, calc((100% - 1180px) / 2)); padding-right: max(32px, calc((100% - 1180px) / 2)); gap: 20px; }
			#iso-sticky-atc .iso-sticky-name { font-size: 16px; }
			#iso-sticky-atc .iso-sticky-price { font-size: 15px; }
			#iso-sticky-atc .iso-sticky-cta { padding: 14px 30px; font-size: 15px; border-radius: 8px; box-shadow: 0 6px 16px rgba(247,107,21,0.30); }
			#iso-sticky-atc .iso-sticky-cta:hover { box-shadow: 0 8px 20px rgba(247,107,21,0.38); }
		}

		/* --- Mobile hero: collapse to a single column (product info FIRST, video
		   gallery SECOND). These rules previously lived ONLY inside the long-description
		   shortcode's <style> (iso_pdp_description in isotonik-pdp-helpers.php), which
		   returns early for MIDI tools and for any product with no long description --
		   so those products rendered a cramped two-column hero on mobile. Living here
		   in the always-loaded V3 stylesheet, they apply to every V3 PDP. --- */
		@media (max-width: 900px) {
			.pdp-hero { grid-template-columns: 1fr !important; }
			.pdp-hero > .bde-woo-breadcrumb { order: 0; }
			.pdp-hero > .pdp-buybox { order: 1; }
			.pdp-hero > .pdp-hero-media { order: 2; }
			.pdp-hero-media .woo-gallery-thumbs-swiper-container,
			.pdp-hero-media .woo-gallery-thumbs { margin-top: 14px !important; }
			.pdp-hero-media .woo-gallery-thumbs-swiper-container { overflow: visible !important; height: auto !important; }
			.pdp-hero-media .woo-gallery-thumbs-swiper-container .swiper-wrapper { transform: none !important; display: flex !important; flex-wrap: wrap !important; width: auto !important; height: auto !important; gap: 8px; }
			.pdp-hero-media .woo-gallery-thumbs-swiper-container .swiper-slide { position: relative !important; left: auto !important; top: auto !important; width: calc((100% - 16px) / 3) !important; flex: 0 0 calc((100% - 16px) / 3) !important; aspect-ratio: 16 / 9 !important; height: auto !important; margin: 0 !important; border-radius: 8px; overflow: hidden; }
			.pdp-hero-media .woo-gallery-thumbs-swiper-container .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover; }
		}
		@media (min-width: 560px) and (max-width: 900px) {
			.pdp-hero-media .woo-gallery-thumbs-swiper-container .swiper-slide { width: calc((100% - 24px) / 4) !important; flex: 0 0 calc((100% - 24px) / 4) !important; }
		}