/**
 * PEPT.MARKET Preview3 — Mobile Quality V2
 * A purpose-built 375–430px composition. Every rule is phone-bounded.
 * Motion lens: Jakub Krehel restraint; slow weight, no bounce.
 */
@media screen and (max-width: 680px) {
	:root {
		--mobile-gutter: clamp(20px, 5.5vw, 24px);
		--mobile-control: 48px;
		--m1: 8px;
		--m2: 16px;
		--m3: 24px;
		--m4: 32px;
		--m5: 48px;
		--m6: 64px;
		--nav-h: 56px;
	}

	html {
		scroll-padding-top: calc(var(--nav-h) + var(--m2));
	}

	html.overlay-open,
	body.overlay-open {
		overflow: hidden;
		overscroll-behavior: none;
	}

	body {
		min-width: 0;
		overflow-x: clip;
		font-size: 16px;
		line-height: 1.6;
	}

	body.compare-active {
		padding-bottom: 96px;
	}

	body.is-compare.compare-active {
		padding-bottom: 0;
	}

	.wrap {
		padding-inline: max(var(--mobile-gutter), env(safe-area-inset-left));
	}

	.sec {
		padding-block: var(--m5);
	}

	h1 {
		font-size: clamp(38px, 10.5vw, 44px);
		line-height: 1;
		text-wrap: balance;
	}

	h2 {
		font-size: clamp(32px, 9vw, 38px);
		line-height: 1.02;
		text-wrap: balance;
	}

	h3,
	.body-copy,
	.route-hero p,
	.pd-desc,
	.pdp-gift p,
	.empty-state p {
		font-size: 16px;
		line-height: 1.6;
	}

	.eyebrow,
	.mono-label,
	.card-top .tag,
	.card-top .stk,
	.cformat,
	.report-state,
	.context-line,
	.ruo,
	.honesty,
	.payline,
	.crumb,
	.group-band,
	.pd-class,
	.pd-stock,
	.report-id,
	.report-status,
	.report-pending {
		font-size: 12px;
		line-height: 1.45;
		letter-spacing: .01em;
	}

	.chip,
	.u-index,
	.closing-kicker,
	.gift-state,
	.report-number,
	.report-product > span,
	.report-product p,
	.faq-item summary span,
	.media-pending,
	.drawer .dh b,
	.woocommerce table.shop_table th {
		font-size: 12px;
	}

	.wishlist-link .n,
	.cart-b .n {
		min-width: 20px;
		height: 20px;
		font-size: 12px;
	}

	.eyebrow {
		margin-bottom: var(--m1);
		letter-spacing: .01em;
	}

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	summary:focus-visible {
		outline-width: 3px;
		outline-offset: 3px;
	}

	.btn,
	a.btn,
	button.btn,
	.btn-sm,
	.addc,
	.saved-shortcut,
	.filt,
	.wishlist-toggle,
	.compare-toggle,
	.peptpro-pen-gift__claim,
	.report-link,
	.report-panel-head > a,
	.woocommerce .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		min-height: var(--mobile-control);
	}

	/* Calm mobile shell ------------------------------------------------ */
	.announce {
		min-height: 28px;
		gap: var(--m1);
		padding: 4px var(--mobile-gutter);
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: .01em;
	}

	.announce .code {
		padding: 1px 6px;
	}

	.site-header {
		background: color-mix(in srgb, var(--page) 94%, transparent);
		backdrop-filter: blur(18px);
	}

	.site-header .wrap {
		min-height: var(--nav-h);
		gap: 0;
		padding-inline: var(--mobile-gutter);
	}

	.site-header .wordmark {
		order: 1;
		min-width: 0;
		min-height: var(--mobile-control);
		gap: var(--m1);
		font-size: 17px;
	}

	.site-header .wordmark .mark {
		width: 28px;
		height: 28px;
	}

	.site-header .wordmark .custom-logo {
		width: auto;
		height: 28px;
		max-width: 104px;
	}

	.icons {
		order: 2;
		margin-left: auto;
		gap: 0;
	}

	.site-header .wishlist-link {
		display: none;
	}

	.nav-toggle {
		order: 3;
		margin-left: 0;
	}

	.nav-toggle,
	.icon-button,
	.wishlist-link {
		width: var(--mobile-control);
		height: var(--mobile-control);
		min-width: var(--mobile-control);
		min-height: var(--mobile-control);
	}

	.nav-toggle,
	#searchOpen {
		display: grid;
	}

	.primary-nav {
		position: absolute;
		inset: 100% 0 auto;
		z-index: 99;
		max-height: calc(100svh - var(--nav-h));
		margin: 0;
		padding: var(--m1) var(--mobile-gutter) max(var(--m3), env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-bottom: 1px solid var(--line);
		background:
			radial-gradient(70% 45% at 100% 0%, rgba(0, 212, 200, .08), transparent 72%),
			color-mix(in srgb, var(--page) 98%, transparent);
		box-shadow: 0 32px 72px rgba(0, 0, 0, .34);
		backdrop-filter: blur(24px);
	}

	.primary-nav .menu {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.primary-nav a {
		min-height: 56px;
		border-bottom: 1px solid var(--line);
		font-size: 17px;
	}

	.mobile-nav-utilities {
		display: grid;
		gap: var(--m1);
		padding-top: var(--m2);
	}

	.mobile-nav-tool {
		width: 100%;
		min-height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--m2);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		color: var(--text);
		font-size: 16px;
		text-align: left;
	}

	button.mobile-nav-tool {
		cursor: pointer;
	}

	.mobile-nav-tool b {
		min-width: 28px;
		color: var(--accent-text);
		font: 700 12px/1 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		text-align: right;
	}

	/* First viewport: live manifest + physical product ----------------- */
	.hero {
		min-height: 700px;
		height: calc(100svh - 84px);
		max-height: 760px;
		align-items: flex-start;
		background: #040608;
	}

	.hero::before {
		background:
			linear-gradient(180deg, rgba(4, 6, 8, .98) 0%, rgba(4, 6, 8, .93) 52%, rgba(4, 6, 8, .58) 73%, rgba(4, 6, 8, .15) 100%),
			radial-gradient(80% 55% at 82% 78%, rgba(0, 212, 200, .12), transparent 70%);
	}

	.hero::after {
		height: 16%;
	}

	.hero .wrap {
		padding-block: var(--m4) 246px;
	}

	.hero-copy {
		width: 100%;
	}

	.hero .eyebrow {
		max-width: 32ch;
		font-size: 12px;
		line-height: 1.45;
	}

	.hero h1 {
		max-width: 100%;
		margin-bottom: var(--m2);
		font-size: clamp(38px, 10.5vw, 43px);
		line-height: .98;
		letter-spacing: -.035em;
	}

	.hero .sub {
		max-width: 38ch;
		margin-bottom: 0;
		font-size: 16px;
		line-height: 1.5;
	}

	.hero-btns {
		display: grid;
		grid-template-columns: 1.08fr .92fr;
		gap: var(--m1);
		margin: var(--m2) 0;
	}

	.hero-btns .btn {
		min-width: 0;
		min-height: var(--mobile-control);
		padding-inline: var(--m1);
		font-size: 14px;
		white-space: nowrap;
	}

	.manifest-rail {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--m1);
		margin: 0 0 var(--m2);
		border: 0;
	}

	.manifest-rail a {
		min-height: 64px;
		display: grid;
		grid-template-columns: 22px minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 2px var(--m1);
		padding: var(--m1);
		border: 1px solid #1a2434;
		border-radius: var(--r-md);
		background: rgba(10, 15, 28, .72);
		font-size: 12px;
		letter-spacing: .01em;
	}

	.manifest-rail .mi {
		grid-row: 1 / 3;
		align-self: center;
	}

	.manifest-rail .mc {
		align-self: end;
	}

	.manifest-rail .mn {
		display: block;
		color: #a7b0bc;
		font-size: 12px;
	}

	.manifest-rail .mp {
		display: none;
	}

	.trust-strip {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px var(--m1);
		font-size: 12px;
		line-height: 1.35;
		letter-spacing: .01em;
		text-transform: none;
	}

	.trust-strip > span:last-child {
		grid-column: 1 / -1;
	}

	.molecular-field {
		inset: 50% 0 0;
	}

	.molecular-canvas,
	.molecular-poster {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.hero-vial-family {
		right: 0;
		bottom: 0;
		width: 100%;
		height: 232px;
		overflow: hidden;
		opacity: 1;
		animation: mobile-shelf-reveal 900ms var(--ease) both;
	}

	.hero-vial-family::before {
		content: "";
		position: absolute;
		z-index: 0;
		left: var(--mobile-gutter);
		right: var(--mobile-gutter);
		bottom: 10px;
		height: 42px;
		border-top: 1px solid rgba(76, 236, 227, .34);
		background: linear-gradient(180deg, rgba(15, 35, 48, .26), transparent 72%);
		transform: perspective(180px) rotateX(62deg);
		transform-origin: top;
	}

	.hero-vial {
		aspect-ratio: 1;
		height: auto;
		overflow: hidden;
		border: 1px solid rgba(219, 238, 246, .42);
		border-radius: 10px 10px 4px 4px;
		background: #eaf0f2;
		box-shadow: 0 26px 46px rgba(0, 0, 0, .56), 0 0 0 1px rgba(5, 12, 18, .72);
		filter: none;
	}

	.hero-vial img {
		object-fit: cover;
		transform: scale(1.08);
	}

	.hero-vial-1 {
		right: calc(50% - 92px);
		bottom: 12px;
		width: 184px;
		z-index: 3;
	}

	.hero-vial.hero-vial-2 {
		display: block;
		left: -22px;
		bottom: 19px;
		width: 138px;
		opacity: .72;
		transform: rotate(-4deg);
	}

	.hero-vial.hero-vial-3 {
		display: block;
		right: -22px;
		bottom: 19px;
		width: 138px;
		opacity: .68;
		transform: rotate(4deg);
	}

	.hud {
		display: none;
	}

	.motion-toggle {
		right: var(--mobile-gutter);
		bottom: var(--m1);
		max-width: 132px;
		min-height: var(--mobile-control);
		padding: var(--m1);
		font-size: 12px;
		line-height: 1.25;
		letter-spacing: .01em;
	}

	.catalogue-pulse {
		display: none;
	}

	/* Editorial product shelf ----------------------------------------- */
	.sec-head {
		margin-bottom: var(--m3);
	}

	.sec-head.row,
	.shophead {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--m1);
	}

	.sec-head .link {
		min-height: var(--mobile-control);
		display: inline-flex;
		align-items: center;
	}

	.shopgrid,
	.peptpro-shop .shopgrid,
	.product-wrap .related-section .shopgrid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--m2) var(--m1);
	}

	.pp-card,
	.peptpro-shop .pp-card {
		display: flex;
		min-width: 0;
		padding: var(--m2);
		border-radius: var(--r-lg);
		background:
			radial-gradient(150px 110px at 50% 18%, rgba(0, 212, 200, .08), transparent 72%),
			var(--surface);
		box-shadow: inset 0 1px rgba(255, 255, 255, .035);
	}

	.pp-card::after {
		content: "";
		position: absolute;
		inset: 8px;
		pointer-events: none;
		border-top: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
		opacity: .46;
	}

	.card-top,
	.peptpro-shop .card-top {
		order: 1;
		min-height: 32px;
		margin: 0 0 var(--m1);
		gap: 4px;
	}

	.card-top .tag {
		padding: 4px 6px;
		font-size: 12px;
		letter-spacing: .01em;
	}

	.card-top .stk {
		gap: 4px;
		font-size: 12px;
		line-height: 1.2;
		letter-spacing: .01em;
		text-align: right;
	}

	.cimg,
	.peptpro-shop .cimg {
		order: 2;
		width: 100%;
		aspect-ratio: 1 / 1;
		margin: 0 0 var(--m2);
		border-radius: var(--r-md);
	}

	.card-title-row,
	.peptpro-shop .card-title-row {
		position: static;
		order: 3;
		display: block;
	}

	.pp-card .cname,
	.peptpro-shop .cname {
		min-height: var(--mobile-control);
		display: flex;
		align-items: flex-start;
		font-size: 16px;
		line-height: 1.25;
	}

	.wishlist-toggle {
		width: var(--mobile-control);
		height: var(--mobile-control);
		min-width: var(--mobile-control);
		min-height: var(--mobile-control);
	}

	.pp-card .wishlist-toggle {
		position: absolute;
		top: 56px;
		right: var(--m2);
		z-index: 3;
		margin: 0;
		border: 1px solid color-mix(in srgb, var(--line-strong) 84%, transparent);
		border-radius: 50%;
		background: color-mix(in srgb, var(--surface) 88%, transparent);
		backdrop-filter: blur(10px);
	}

	.cformat,
	.peptpro-shop .cformat {
		order: 4;
		min-height: 36px;
		margin: 0 0 var(--m1);
		color: var(--muted);
		font-size: 12px;
		line-height: 1.45;
		letter-spacing: .01em;
	}

	.pp-card .report-state,
	.peptpro-shop .report-state {
		order: 5;
		min-height: 40px;
		align-items: flex-start;
		margin: 0 0 var(--m1);
		font-size: 12px;
		line-height: 1.35;
		letter-spacing: .01em;
		text-transform: none;
	}

	.cbot,
	.peptpro-shop .cbot {
		order: 6;
		align-items: stretch;
		flex-direction: column;
		gap: var(--m1);
		margin: auto 0 0;
		padding-top: var(--m1);
	}

	.cprice,
	.cprice .amount,
	.cprice bdi,
	.price-pending {
		font-size: 16px;
		line-height: 1.35;
		letter-spacing: 0;
	}

	.addc,
	.peptpro-shop .addc {
		width: 100%;
		min-width: 0;
		min-height: var(--mobile-control);
		padding: var(--m1);
		font-size: 14px;
	}

	.card-compare-row {
		order: 7;
		margin-top: var(--m1);
	}

	.compare-toggle {
		width: 100%;
		min-height: var(--mobile-control);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--m1);
		padding: var(--m1);
		border: 1px solid var(--line-strong);
		border-radius: var(--r-pill);
		background: transparent;
		color: var(--muted);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.compare-toggle.is-selected {
		border-color: var(--accent);
		background: color-mix(in srgb, var(--accent) 10%, transparent);
		color: var(--accent-text);
	}

	.compare-glyph {
		font: 700 15px/1 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.is-front .catalogue-pulse + .sec .shopgrid .pp-card:nth-child(n + 5),
	.product-wrap .related-section .pp-card:nth-child(n + 3) {
		display: none;
	}

	.is-front .product-family-section {
		display: none;
	}

	/* Home information bands ------------------------------------------ */
	.transparency-grid,
	.offer-grid {
		grid-template-columns: 1fr;
		gap: var(--m4);
	}

	.transparency-copy .body-copy:first-of-type {
		display: none;
	}

	.strapline {
		font-size: 26px;
		line-height: 1.08;
	}

	.evidence-plate,
	.shipping-panel {
		padding: var(--m3);
	}

	.evidence-row {
		grid-template-columns: 24px 1fr;
		gap: var(--m1);
		padding: var(--m2) 0;
	}

	.evidence-row > span,
	.evidence-row em {
		font-size: 12px;
		letter-spacing: .01em;
	}

	.evidence-row em {
		grid-column: 2;
	}

	.peptpro-pen-gift {
		align-items: stretch;
		flex-direction: column;
		gap: var(--m2);
		font-size: 16px;
		line-height: 1.5;
	}

	.peptpro-pen-gift__claim {
		width: 100%;
	}

	.shipping-panel p {
		font-size: 16px;
		line-height: 1.5;
	}

	.closing-band {
		padding-block: var(--m5);
	}

	.closing-actions {
		align-items: stretch;
		flex-direction: column;
		gap: var(--m1);
		margin-top: var(--m3);
	}

	/* Shop: search + filter instrument -------------------------------- */
	.peptpro-shop,
	.product-wrap,
	.route-page {
		padding-bottom: var(--m6);
	}

	.crumb {
		padding-block: var(--m3) var(--m2);
		overflow-wrap: anywhere;
	}

	.shophead {
		margin-bottom: var(--m2);
	}

	.shophead h1 {
		font-size: 42px;
	}

	.saved-shortcut,
	.filterbar {
		display: none;
	}

	.mobile-discovery {
		position: sticky;
		top: var(--nav-h);
		z-index: 20;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--m1);
		margin: 0 calc(var(--mobile-gutter) * -1) var(--m2);
		padding: var(--m2) var(--mobile-gutter);
		border-block: 1px solid var(--line);
		background: color-mix(in srgb, var(--page) 94%, transparent);
		backdrop-filter: blur(20px);
	}

	.mobile-search-field {
		grid-column: 1 / -1;
		min-height: var(--mobile-control);
		display: flex;
		align-items: center;
		gap: var(--m1);
		padding: 0 var(--m2);
		border: 1px solid var(--line-strong);
		border-radius: var(--r-pill);
		background: var(--surface);
		color: var(--muted);
	}

	.mobile-search-field input {
		min-width: 0;
		width: 100%;
		height: var(--mobile-control);
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--text);
		font-size: 16px;
	}

	.mobile-search-field:focus-within {
		border-color: var(--accent-bright);
		outline: 3px solid color-mix(in srgb, var(--accent-bright) 42%, transparent);
		outline-offset: 2px;
	}

	.mobile-filter-trigger,
	.mobile-sort {
		min-width: 0;
		min-height: var(--mobile-control);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--m1);
		padding: 0 var(--m2);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		color: var(--text);
		font-size: 14px;
	}

	.mobile-filter-trigger {
		cursor: pointer;
	}

	.mobile-filter-trigger b {
		min-width: 24px;
		height: 24px;
		display: grid;
		place-items: center;
		border-radius: 50%;
		background: var(--accent-bright);
		color: var(--accent-ink);
		font: 700 12px/1 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.mobile-sort {
		position: relative;
	}

	.mobile-sort > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.mobile-sort select {
		width: 100%;
		height: var(--mobile-control);
		padding: 0 28px 0 0;
		border: 0;
		background: transparent;
		color: var(--text);
		font-size: 14px;
	}

	.mobile-results-line {
		grid-column: 1 / -1;
		margin: 0;
		color: var(--muted);
		font: 400 12px/1.4 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.context-line {
		margin-bottom: var(--m3);
	}

	.group-band {
		gap: var(--m1);
		margin: var(--m4) 0 var(--m2);
	}

	.group-band h2 {
		font-size: 14px;
	}

	.page-ruo {
		margin-top: var(--m4);
		padding-top: var(--m3);
	}

	.mobile-catalogue-empty {
		padding: var(--m5) var(--m3);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		text-align: center;
	}

	.mobile-catalogue-empty p {
		color: var(--muted);
	}

	.filter-sheet {
		position: fixed;
		inset: auto 0 0;
		z-index: 205;
		width: 100%;
		max-height: min(88svh, 760px);
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
		border: 1px solid var(--line-strong);
		border-bottom: 0;
		border-radius: var(--r-xl) var(--r-xl) 0 0;
		background:
			radial-gradient(80% 34% at 84% 0%, rgba(0, 212, 200, .09), transparent 76%),
			var(--surface);
		box-shadow: 0 -28px 80px rgba(0, 0, 0, .48);
		transform: translateY(104%);
		transition: transform 350ms var(--ease);
	}

	.filter-sheet.on {
		transform: translateY(0);
	}

	.filter-sheet-head {
		min-height: 88px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--m2);
		padding: var(--m2) var(--mobile-gutter);
		border-bottom: 1px solid var(--line);
	}

	.filter-sheet-head .eyebrow {
		margin-bottom: 2px;
	}

	.filter-sheet-head h2 {
		margin: 0;
		font-size: 30px;
	}

	.filter-sheet-head button,
	.drawer .x,
	#peptSearch .sx {
		width: var(--mobile-control);
		height: var(--mobile-control);
		min-width: var(--mobile-control);
		border: 0;
		background: transparent;
		color: var(--muted);
		font-size: 28px;
		cursor: pointer;
	}

	.filter-sheet-body {
		flex: 1;
		padding: var(--m2) var(--mobile-gutter) var(--m3);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.filter-sheet fieldset {
		margin: 0;
		padding: var(--m2) 0 var(--m3);
		border: 0;
		border-bottom: 1px solid var(--line);
	}

	.filter-sheet fieldset:last-child {
		border-bottom: 0;
	}

	.filter-sheet legend {
		margin-bottom: var(--m2);
		color: var(--text);
		font-size: 16px;
		font-weight: 600;
	}

	.filter-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--m1);
	}

	.filter-options label {
		min-height: var(--mobile-control);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--m1);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--page);
		color: var(--muted);
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}

	.filter-options input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.filter-options label:has(input:checked) {
		border-color: var(--accent);
		background: color-mix(in srgb, var(--accent) 11%, var(--surface));
		color: var(--accent-text);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
	}

	.filter-options label:has(input:focus-visible) {
		outline: 3px solid color-mix(in srgb, var(--accent-bright) 46%, transparent);
		outline-offset: 2px;
	}

	.filter-sheet-actions {
		display: grid;
		grid-template-columns: .72fr 1.28fr;
		gap: var(--m1);
		padding: var(--m2) var(--mobile-gutter) max(var(--m2), env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: color-mix(in srgb, var(--surface) 96%, transparent);
		backdrop-filter: blur(18px);
	}

	.filter-sheet-actions .btn {
		width: 100%;
		padding-inline: var(--m1);
	}

	/* Image-first PDP -------------------------------------------------- */
	/* ROUND 6 (R2). This block used to re-sequence the PDP with
	   `display: contents` on .pd-info/.pd-gal plus `order:` on their children,
	   so that an info-first document could paint image-first on a phone. That
	   is exactly the disagreement R2 forbids: the reading order the DOM gives
	   assistive technology and the keyboard was not the order on screen.

	   The reordering is DELETED rather than extended. woocommerce/single-product.php
	   now puts .pd-gal (gallery + Lab report status) ahead of .pd-info in the
	   document, so the natural flow of this flex column is already the order
	   the spec asks for — gallery, thumbnails, lab report status, buy panel —
	   with no `order:` property anywhere on this page and nothing flattened out
	   of the accessibility tree. What is left here is spacing and the phone's
	   4/3 picture frame: presentation only.

	   Do not reintroduce `display: contents` here. Beyond the ordering problem,
	   it also removes .pd-gal / .pd-info from the box tree, which takes their
	   section semantics and their aria-label with them. */
	.product-wrap .pd {
		display: flex;
		flex-direction: column;
		gap: var(--m2);
		margin-bottom: var(--m4);
	}

	.pd-gal .big {
		aspect-ratio: 4 / 3;
		border-radius: var(--r-lg);
		background:
			radial-gradient(circle at 50% 24%, rgba(0, 212, 200, .13), transparent 58%),
			var(--surface-raised);
	}

	.buy-panel {
		padding: var(--m3) var(--m2);
		border-radius: var(--r-lg);
	}

	/* .report-panel is a normal child of .pd-gal again, not a flex item of .pd,
	   so it needs its own separation from the thumbnail strip above it; the
	   column gap no longer reaches it. --m2 matches that gap exactly. */
	.report-panel {
		margin-top: var(--m2);
		padding: var(--m2);
	}

	.pdp-kicker-row {
		align-items: flex-start;
	}

	.pdp-tools {
		gap: 4px;
	}

	.compare-pdp {
		width: auto;
		min-width: var(--mobile-control);
		padding-inline: var(--m2);
	}

	.wishlist-pdp {
		position: relative;
		width: var(--mobile-control);
		min-width: var(--mobile-control);
		height: var(--mobile-control);
		margin: 0;
		padding: 0;
	}

	.wishlist-pdp .wishlist-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.buy-panel h1 {
		margin: var(--m2) 0 var(--m1);
		font-size: clamp(38px, 11vw, 46px);
		line-height: .98;
	}

	.pd-class {
		margin-bottom: var(--m2);
	}

	.buy-panel > .report-state {
		min-height: 32px;
		margin-bottom: var(--m1);
	}

	.pd-price {
		margin-block: var(--m2) var(--m1);
	}

	.pd-price .price,
	.pd-price .amount,
	.pd-price bdi {
		font-size: 28px;
	}

	.pd-stock {
		min-height: 32px;
		margin-bottom: var(--m1);
	}

	.selector-instruction {
		margin: var(--m2) 0 var(--m1);
		font-size: 16px;
		line-height: 1.5;
	}

	form.cart,
	.woocommerce-variation-add-to-cart {
		align-items: stretch;
		gap: var(--m1);
	}

	.quantity,
	.quantity input,
	form.cart button[type="submit"],
	.single_add_to_cart_button,
	.variations select,
	.reset_variations,
	.woocommerce input[type="text"],
	.woocommerce input[type="email"],
	.woocommerce input[type="tel"],
	.woocommerce input[type="password"],
	.woocommerce input[type="number"],
	.woocommerce select,
	.select2-container .select2-selection {
		min-height: var(--mobile-control);
	}

	form.cart .quantity {
		flex: 0 0 80px;
	}

	form.cart button[type="submit"],
	.single_add_to_cart_button {
		flex: 1 1 190px;
	}

	.variations tr {
		grid-template-columns: 1fr;
		gap: var(--m1);
	}

	.variations label {
		font-size: 12px;
	}

	.reset_variations {
		min-width: var(--mobile-control);
		align-items: center;
		margin-top: 0;
		font-size: 13px;
	}

	.pdp-secondary-desktop {
		display: none;
	}

	.pdp-mobile-disclosure {
		display: block;
		margin-top: var(--m3);
		border-top: 1px solid var(--line);
	}

	.pdp-mobile-disclosure summary {
		min-height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--m2);
		color: var(--text);
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}

	.pdp-mobile-disclosure summary::-webkit-details-marker {
		display: none;
	}

	.pdp-mobile-disclosure summary span {
		font-size: 22px;
		transition: transform 350ms var(--ease);
	}

	.pdp-mobile-disclosure[open] summary span {
		transform: rotate(45deg);
	}

	.pdp-disclosure-body {
		padding-bottom: var(--m2);
	}

	.pdp-disclosure-body .pd-summary {
		margin-top: 0;
		padding-top: var(--m2);
	}

	.pd-meta > div {
		min-height: 48px;
		align-items: center;
		padding: var(--m1) 0;
		font-size: 13px;
	}

	.pd-meta b {
		font-size: 12px;
	}

	.pdp-shipping p {
		font-size: 16px;
		line-height: 1.5;
	}

	.report-panel-head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--m1);
	}

	.report-panel-head > a {
		min-height: var(--mobile-control);
		display: inline-flex;
		align-items: center;
		font-size: 14px;
	}

	.report-list li {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--m1);
		padding-block: var(--m2);
	}

	.pdp-gift {
		grid-template-columns: 1fr;
		gap: var(--m2);
		margin-bottom: var(--m4);
		padding: var(--m3);
	}

	.pdp-gift h2 {
		font-size: 32px;
	}

	.pd-desc,
	.related-section {
		margin-bottom: var(--m4);
	}

	/* Cart and supporting routes -------------------------------------- */
	.woocommerce-cart #site-content > .wrap,
	.woocommerce-checkout #site-content > .wrap {
		padding-block: var(--m4) var(--m6) !important;
	}

	.woocommerce-cart h1 {
		font-size: 44px;
	}

	.woocommerce-cart .empty-state,
	.woocommerce-cart .cart-empty {
		padding: var(--m3);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
	}

	.woocommerce-cart-form table.shop_table {
		border: 0;
	}

	.woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.woocommerce-cart-form table.shop_table tbody,
	.woocommerce-cart-form table.shop_table tr,
	.woocommerce-cart-form table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form table.shop_table tr.cart_item {
		margin-bottom: var(--m2);
		overflow: hidden;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
	}

	.woocommerce-cart-form table.shop_table tr.cart_item td {
		min-height: var(--mobile-control);
		padding: var(--m2);
		border-bottom: 1px solid var(--line);
	}

	.woocommerce-cart-form table.shop_table tr.cart_item td:last-child {
		border-bottom: 0;
	}

	.woocommerce-cart-form table.shop_table td[data-title] {
		display: grid;
		grid-template-columns: minmax(96px, .8fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--m2);
		text-align: right;
	}

	.woocommerce-cart-form table.shop_table td[data-title]::before {
		float: none;
		color: var(--muted);
		text-align: left;
		font: 700 12px/1.4 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		letter-spacing: .01em;
		text-transform: uppercase;
	}

	.woocommerce-cart-form .product-remove {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.woocommerce-cart-form .product-remove a.remove,
	.woocommerce-mini-cart-item a.remove {
		width: var(--mobile-control);
		height: var(--mobile-control);
		display: grid;
		place-items: center;
	}

	.woocommerce-cart-form td.actions,
	.woocommerce-cart-form .coupon {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--m1);
	}

	.woocommerce-cart-form td.actions .button,
	.woocommerce-cart-form .coupon .button,
	.woocommerce-cart-form .coupon input {
		width: 100%;
	}

	.woocommerce .cart-collaterals,
	.woocommerce .cart-collaterals .cart_totals {
		width: 100%;
		float: none;
	}

	.pay-preview {
		align-items: stretch;
		flex-direction: column;
		padding: var(--m2);
	}

	.route-hero {
		padding: var(--m4) 0 var(--m3);
	}

	.route-hero h1 {
		font-size: clamp(40px, 11vw, 48px);
	}

	.route-hero p {
		font-size: 16px;
	}

	.report-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-bottom: var(--m3);
		padding: var(--m1);
	}

	.report-summary > div {
		min-width: 0;
		padding: var(--m2) var(--m1);
		border-right: 1px solid var(--line);
		border-bottom: 0;
	}

	.report-summary > div:last-child {
		border-right: 0;
	}

	.report-summary span {
		font-size: 26px;
	}

	.report-summary p {
		font-size: 12px;
		line-height: 1.35;
	}

	.report-record {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: var(--m2);
		padding-block: var(--m2);
	}

	.report-action {
		grid-column: 2;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--m1) var(--m2);
	}

	.faq-item summary {
		min-height: 64px;
		grid-template-columns: 28px 1fr 16px;
		gap: var(--m2);
		font-size: 16px;
	}

	.faq-item > p {
		padding: 0 0 var(--m3) 44px;
		font-size: 16px;
	}

	/* Comparison instrument ------------------------------------------- */
	.compare-hero {
		max-width: 100%;
	}

	.compare-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: var(--m2);
		margin-bottom: var(--m3);
		padding-block: var(--m2);
	}

	.compare-toolbar p {
		font-size: 12px;
	}

	.compare-toolbar > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--m1);
	}

	.compare-toolbar .btn {
		width: 100%;
		padding-inline: var(--m1);
		font-size: 14px;
	}

	.compare-empty {
		padding: var(--m5) var(--m3);
	}

	.compare-instrument {
		border-radius: var(--r-lg);
	}

	.compare-product-head {
		padding: var(--m1);
	}

	.compare-product-image {
		aspect-ratio: 1 / 1;
		margin-bottom: var(--m1);
	}

	.compare-product-head h2 {
		min-height: 44px;
		font-size: 14px;
		line-height: 1.25;
	}

	.compare-remove {
		top: 4px;
		right: 4px;
		z-index: 2;
		width: var(--mobile-control);
		height: var(--mobile-control);
		background: color-mix(in srgb, var(--surface) 90%, transparent);
		backdrop-filter: blur(10px);
	}

	.compare-field-label {
		padding: var(--m1) var(--m2);
		font-size: 12px;
		letter-spacing: .01em;
	}

	.compare-value {
		min-height: 64px;
		align-items: flex-start;
		padding: var(--m2) var(--m1);
		font-size: 13px;
		line-height: 1.4;
	}

	/* Overlays and persistent compare tray ----------------------------- */
	.drawer {
		width: min(100%, 430px);
		height: 100svh;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		overscroll-behavior: contain;
	}

	.drawer .dh {
		min-height: 64px;
		padding: var(--m1) var(--m2);
	}

	.drawer .body {
		padding: var(--m2);
		overscroll-behavior: contain;
	}

	.drawer .dfoot {
		max-height: 48svh;
		padding: var(--m2);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.drawer .dfoot > .btn {
		width: 100%;
	}

	.woocommerce-mini-cart-item {
		grid-template-columns: 56px minmax(0, 1fr) var(--mobile-control);
	}

	#peptSearch {
		padding: max(72px, env(safe-area-inset-top)) var(--mobile-gutter) max(var(--m3), env(safe-area-inset-bottom));
		overscroll-behavior: contain;
	}

	#peptSearch .sx {
		top: max(var(--m2), env(safe-area-inset-top));
		right: var(--mobile-gutter);
	}

	#peptSearch form {
		width: 100%;
		flex-direction: column;
	}

	#peptSearch input,
	#peptSearch button[type="submit"] {
		min-height: 56px;
		font-size: 16px;
	}

	#peptSearch button[type="submit"] {
		width: 100%;
	}

	.compare-tray {
		position: fixed;
		z-index: 180;
		left: var(--mobile-gutter);
		right: var(--mobile-gutter);
		bottom: max(var(--m2), env(safe-area-inset-bottom));
		min-height: 72px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: center;
		gap: var(--m1);
		padding: var(--m1);
		border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
		border-radius: var(--r-lg);
		background: color-mix(in srgb, var(--surface) 94%, transparent);
		box-shadow: 0 20px 56px rgba(0, 0, 0, .42);
		backdrop-filter: blur(20px);
		animation: compare-tray-in 350ms var(--ease) both;
	}

	.is-compare .compare-tray {
		display: none !important;
	}

	.overlay-open .compare-tray {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.compare-tray-copy {
		display: contents;
	}

	.compare-tray-copy > .compare-count {
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border-radius: 50%;
		background: var(--accent-bright);
		color: var(--accent-ink);
		font: 700 13px/1 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.compare-tray-copy p {
		min-width: 0;
		margin: 0;
		line-height: 1.2;
	}

	.compare-tray-copy strong,
	.compare-tray-copy small {
		display: block;
	}

	.compare-tray-copy strong {
		font-size: 14px;
	}

	.compare-tray-copy small {
		margin-top: 3px;
		color: var(--muted);
		font-size: 12px;
	}

	.compare-tray-open {
		min-width: 92px;
		padding-inline: var(--m2);
		font-size: 14px;
	}

	.compare-tray-open[aria-disabled="true"] {
		border-color: var(--line);
		background: var(--surface-raised);
		color: var(--muted);
	}

	.compare-tray-clear {
		width: var(--mobile-control);
		height: var(--mobile-control);
		border: 0;
		background: transparent;
		color: var(--muted);
		font-size: 24px;
		cursor: pointer;
	}

	.toast {
		bottom: max(104px, calc(env(safe-area-inset-bottom) + 88px));
	}

	/* Shorter, denser page endings ------------------------------------ */
	.usp .wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		padding-block: var(--m4);
	}

	.usp .u {
		grid-template-columns: 22px minmax(0, 1fr);
		gap: var(--m1);
		padding: var(--m2);
		border-bottom: 1px solid var(--line);
	}

	.usp .u:nth-child(odd) {
		border-right: 1px solid var(--line);
	}

	.usp b {
		font-size: 14px;
	}

	.usp p {
		font-size: 16px;
		line-height: 1.5;
	}

	.site-footer {
		padding-block: var(--m5) max(var(--m3), env(safe-area-inset-bottom));
	}

	.fgrid {
		grid-template-columns: 1fr 1fr;
		gap: var(--m4) var(--m2);
		margin-bottom: var(--m4);
	}

	.fgrid > div:first-child {
		grid-column: 1 / -1;
	}

	.site-footer h4 {
		font-size: 12px;
	}

	.site-footer li {
		margin: 0;
	}

	.site-footer li a {
		min-height: var(--mobile-control);
		display: inline-flex;
		align-items: center;
		font-size: 14px;
	}

	.footer-claim {
		font-size: 16px;
	}

	.ruo-block {
		font-size: 12px;
	}

	.fbot {
		flex-direction: column;
		font-size: 12px;
	}

	@keyframes mobile-shelf-reveal {
		from { opacity: 0; transform: translateY(18px); }
		to { opacity: 1; transform: none; }
	}

	@keyframes compare-tray-in {
		from { opacity: 0; transform: translateY(18px); }
		to { opacity: 1; transform: none; }
	}
}

@media screen and (max-width: 390px) {
	.site-header .wordmark {
		width: var(--mobile-control);
		min-width: var(--mobile-control);
		height: var(--mobile-control);
	}

	.site-header .wordmark > span:not(.node) {
		display: none;
	}

	.hero {
		min-height: 724px;
	}

	.hero .wrap {
		padding-bottom: 238px;
	}

	.compare-tray {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.compare-tray-open {
		min-width: 84px;
	}

	.compare-tray-clear {
		position: absolute;
		top: -20px;
		right: -8px;
		width: var(--mobile-control);
		height: var(--mobile-control);
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--surface);
	}
}

@media screen and (max-width: 680px) and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.hero-vial-family,
	.compare-tray {
		animation: none;
	}

	.filter-sheet {
		transition: none;
	}

	.motion-toggle {
		display: none;
	}
}