/* ==========================================================================
   PolarLabs — Home vNext (route-scoped)
   Loaded ONLY on the static front page (see inc/enqueue.php). Tokens come from
   main.css :root. Adopts the approved Affiliate-page art direction: one unified
   weight-800 heading ramp, TWO dark moments (navy hero + navy newsletter),
   editorial hairline rows over boxed tiles, a single swipeable category-card
   RAIL (same interaction as Featured), and a masked technical texture on the
   closing band. All new classes are .plh-* so shared/global CSS is untouched.
   ========================================================================== */

/* Unified section head: one weight-800 ramp + electric-rule eyebrow in the
   accessible --pl-link (~5:1 on white; fixes the sub-AA --pl-blue eyebrow). */
.plh-head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.plh-eyebrow { display: inline-flex; align-items: center; gap: 11px; color: var(--pl-link);
	font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.plh-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--pl-blue); }
.plh-eyebrow--icy { color: var(--pl-icy-200); }
.plh-eyebrow--icy::before { background: var(--pl-electric); }
.plh-title { font-family: var(--pl-font-heading); font-weight: 800; letter-spacing: -.025em;
	color: var(--pl-navy); line-height: 1.05; margin: 14px 0 0; font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem); }
.plh-intro { color: var(--pl-muted); font-size: 1.06rem; line-height: 1.6; margin: 14px 0 0; max-width: 56ch; }
.plh-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* HERO (refined) — full-width, BACKGROUND-LED. Owner direction: the staging
   composition (eyebrow + large left copy + strong scrim + substantial Shop/COA) with
   an owner-supplied atmospheric artwork art-directed into the navy identity (dimmed +
   tinted, brightest interest on the right, clean editorial reading zone on the left).
   Content-driven height (no forced svh, no empty tail). Two principal actions only —
   no Contact link, no card. Copy is real text; the artwork reinforces, never leads. */
.plh-hero .pl-hero__content { max-width: 840px; }
/* Text is WHITE / near-white on the brighter artwork (owner direction), with a soft
   blue text-shadow for legibility over the lighter areas. Accent stays LIGHT. */
.plh-hero .pl-hero__title { color: #fff; font-weight: 800; font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem);
	letter-spacing: -.035em; line-height: 1.0; margin: 18px 0 0; text-shadow: 0 1px 22px rgba(4,14,44,.42); }
.plh-hero__accent { color: #80CFFF; } /* brighter icy/electric accent (owner range #7CC9FF–#84D6FF) */
.plh-hero .pl-hero__subtitle { color: #EAF3FF; font-size: clamp(1.1rem, 1rem + .55vw, 1.32rem);
	max-width: 44ch; margin: 20px 0 0; text-shadow: 0 1px 16px rgba(4,14,44,.34); }
.plh-hero .plh-eyebrow--icy { color: #EAF3FF; }
.plh-hero__ruo { display: block; margin-top: 22px; font-size: .72rem; letter-spacing: .02em; opacity: .82;
	color: #EAF3FF; font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace; }

/* Content-driven height (responsive vertical padding) + a single left content column;
   the artwork fills the right. No forced min-height, so the mobile Hero finishes
   shortly after the micro-line and Featured Products follows closely. */
.plh-hero--wave { background: var(--pl-navy-900); padding-block: clamp(52px, 8vh, 128px); }
.plh-hero--wave .plh-hero__inner { grid-template-columns: minmax(0, 760px); align-items: center; min-height: 0; }

/* Mobile height (owner refinement) — content-driven + compact. No viewport-height
   behavior: fixed, tighter padding and inter-element spacing so the Hero ends shortly
   after the micro-line and Featured Products enters sooner. Desktop spacing unchanged. */
@media (max-width: 600px) {
	.plh-hero--wave { padding-block: 44px 36px; }
	.plh-hero--wave .plh-hero__inner { padding-block: 0; } /* drop the base inner padding — section padding is the only vertical spacing */
	.plh-hero--wave .pl-hero__title { margin-top: 14px; }
	.plh-hero--wave .pl-hero__subtitle { margin-top: 16px; }
	.plh-hero--wave .plh-hero__cta { margin-top: 28px; }
	.plh-hero--wave .plh-hero__ruo { margin-top: 18px; }
}

/* BACKGROUND ARTWORK — owner-selected brighter DNA / light-ribbon atmosphere (helix +
   luminous ribbons, glow top-left, on a lively royal blue). FULL-BLEED at every
   breakpoint. Kept BRIGHT (only lightly dimmed) so the hero reads light, not dark;
   readability comes from a gentle blue-deepen scrim over the copy rather than dimming
   the whole image. Native-resolution + lightly sharpened (crisp, no banding). White
   copy leads; interest stays right. Layers: artwork (z-3) -> scrim (z-2) -> grain. */
.plh-hero__art { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.plh-hero__art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 58% 46%;
	filter: brightness(.82) saturate(.96) contrast(1.0); }
/* SCRIM — refined, editorial, "invisible". A smooth many-stop deep-royal-blue gradient
   strongest behind the headline + CTA, fading naturally toward the center (no hard
   edge, still visibly blue). A faint full-cover navy veil tames the artwork bloom
   ~10–15% evenly (less "stock biotech", more refracted glass). Artwork stays visible
   beneath; the reader only notices the copy is exceptionally legible. */
.plh-hero--wave .pl-hero__scrim { z-index: -2; background:
	linear-gradient(100deg, rgba(6,19,56,.84) 0%, rgba(6,20,60,.72) 24%, rgba(7,22,66,.5) 42%, rgba(8,26,74,.26) 60%, rgba(8,28,80,.08) 76%, transparent 90%),
	radial-gradient(135% 115% at 6% 34%, rgba(5,15,46,.5), transparent 62%),
	linear-gradient(0deg, rgba(6,18,50,.14), rgba(6,18,50,.14)),
	linear-gradient(180deg, transparent 64%, rgba(5,15,46,.3) 100%); }
.plh-hero__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }

/* Mobile: FULL-BLEED artwork (per the owner's reference) — the image spans the whole
   hero. A left+top readability scrim keeps the headline zone dark while the molecular
   glow and light curves show on the right and lower area. No corner-confinement. */
@media (max-width: 900px) {
	.plh-hero__art img { object-position: 66% 44%; filter: brightness(.78) saturate(.93); }
	.plh-hero--wave .pl-hero__scrim { background:
		linear-gradient(180deg, rgba(6,20,58,.86) 0%, rgba(7,22,64,.56) 32%, rgba(8,26,74,.26) 60%, rgba(6,20,58,.4) 100%),
		linear-gradient(90deg, rgba(6,20,58,.52) 0%, rgba(6,20,58,.18) 52%, transparent 100%),
		linear-gradient(0deg, rgba(6,18,50,.12), rgba(6,18,50,.12)); }
}

/* PHONE-ONLY (owner refinement, 320/390/430): push the DNA to the right edge and crop
   the top-left glow out; dim the artwork a further ~10%; extend the smooth blue scrim
   across the whole headline + CTA region so no bright strand crosses the copy or the
   buttons. Still royal blue (not near-black) and the lower area stays lighter so the
   DNA is appreciated AFTER the content. Placed after the ≤900 block so it wins here. */
@media (max-width: 600px) {
	.plh-hero__art img { object-position: 84% 44%; filter: brightness(.68) saturate(.92); }
	.plh-hero--wave .pl-hero__scrim { background:
		linear-gradient(180deg, rgba(7,22,64,.9) 0%, rgba(8,24,70,.7) 36%, rgba(9,28,80,.36) 64%, rgba(8,26,74,.28) 100%),
		linear-gradient(90deg, rgba(7,22,64,.62) 0%, rgba(7,22,64,.3) 56%, rgba(7,22,64,.08) 100%),
		linear-gradient(0deg, rgba(6,18,50,.1), rgba(6,18,50,.1)); }
	/* micro-line: a hair larger + higher contrast + looser leading — comfortably
	   readable, still quiet (not prominent legal copy). */
	.plh-hero--wave .plh-hero__ruo { font-size: .76rem; line-height: 1.5; opacity: .94; }
}

/* CTAs — strong ASYMMETRIC row: Shop dominant (wider + filled + glow), COA
   substantial (equal height, real ghost). Stacks only at very narrow widths. */
.plh-hero__cta { display: flex; align-items: stretch; gap: 14px; margin-top: 32px; max-width: 32rem; }
.plh-hero__cta .pl-btn { min-height: 56px; min-width: 0; font-weight: 700; }
/* Shop — dominant, Stripe-grade: filled Polar-blue + a hairline inner highlight, a
   soft dark lift (separates it from the blue artwork) and a restrained blue ambient
   glow. Not glossy, not neon. */
.plh-hero__cta .pl-btn--primary { flex: 1.5 1 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -8px rgba(4,14,44,.55), 0 16px 34px -12px rgba(40,120,245,.42); }
.plh-hero__cta .pl-btn--primary:hover { transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px -8px rgba(4,14,44,.6), 0 22px 46px -12px rgba(40,120,245,.5); }
/* COA — same height, dark translucent-blue glass backing + a slightly brighter icy
   border (~1.5px) so it separates cleanly from the brighter artwork without competing
   with Shop. */
.plh-hero__cta .pl-btn--ghost-light { flex: 1 1 0; --btn-bg: rgba(6,18,52,.56); --btn-bd: rgba(150,200,255,.72);
	border-width: 1.5px; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px -10px rgba(4,14,44,.5); }
.plh-hero__cta .pl-btn--ghost-light:hover { --btn-bd: var(--pl-electric); --btn-bg: rgba(75,150,255,.18); transform: translateY(-2px); }
.plh-hero__cta .pl-btn:active { transform: translateY(0) scale(.985); }
.plh-hero__cta .pl-btn:focus-visible { box-shadow: var(--pl-ring); outline: none; }
@media (max-width: 360px) { .plh-hero__cta { flex-wrap: wrap; } .plh-hero__cta .pl-btn { flex: 1 1 100%; } }

/* MOTION — one-time copy reveal only. No base opacity override, so content is
   visible if animations don't run; reduced-motion shows it instantly. */
@keyframes plh-hero-rise { from { opacity: 0; transform: translateY(14px); } }
.plh-hero--wave .plh-hero__reveal { animation: plh-hero-rise .55s var(--pl-ease) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .plh-hero--wave .plh-hero__reveal { animation: none; } }

/* ==========================================================================
   H2.2 — FEATURED PRODUCTS  (isolated slice — additive .plh-featured namespace).
   The section immediately after the H2.1 Hero. A cool Frost band; the shared M3.1
   .pl-scard (rendered via the 'shop' variant in featured.php) in a 4-up grid that
   reflows to 2-up on tablet and a two-column 2×2 grid (four products) on phones — no
   rail, no horizontal scroll. Nothing here touches the H2.1 Hero block above, the
   shared .pl-scard / .pl-productgrid (woocommerce.css), or the older downstream
   sections below. No carousel controls, no JavaScript.
   ========================================================================== */
.plh-featured { background: var(--pl-surface-2); padding-block: clamp(32px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.plh-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px;
	flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.plh-featured__title { font-family: var(--pl-font-heading); font-weight: 800; letter-spacing: -.025em; color: var(--pl-navy);
	line-height: 1.04; margin: 12px 0 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.plh-featured__more { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
	color: var(--pl-link); font-weight: 700; font-size: .95rem; }
.plh-featured__more span { border-bottom: 1px solid transparent; padding-bottom: 1px; }
.plh-featured__more:hover { color: var(--pl-blue-600); }
.plh-featured__more:hover span { border-bottom-color: currentColor; }
.plh-featured__more .pl-icon { transition: transform var(--pl-dur) var(--pl-ease); }
.plh-featured__more:hover .pl-icon { transform: translateX(3px); }
.plh-featured__more:focus-visible { outline: none; box-shadow: var(--pl-ring); border-radius: var(--pl-radius-sm); }

/* Grid — 4-up (>=1024) then 2-up (<=1023). minmax(0,1fr) keeps image-bearing tracks
   from overflowing; the shared .pl-scard fills each cell (no card change). */
.plh-featured__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px);
	grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plh-featured__item { min-width: 0; }
@media (max-width: 1023px) { .plh-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Phones (<=600px) — TWO-COLUMN 2×2 grid (owner revision; replaces the earlier peek
   rail). All four Featured products are visible for side-by-side comparison: NO rail,
   no horizontal scroll, no snap, no peek, no arrows/dots/autoplay. A true CSS grid with
   tighter, controlled row/column gaps for narrow widths; the shared M3.1 .pl-scard fills
   each cell unchanged. The page never scrolls sideways (no overflow introduced). */
@media (max-width: 600px) {
	.plh-featured__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.plh-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}

/* CATEGORIES (H2.4) — "Browse by research category": a native CSS horizontal RAIL
   (no JS, no arrows, no dots, no autoplay). Mobile/tablet = swipe (native momentum +
   restrained proximity snap, gutter-aligned bleed, hidden scrollbar); from >=1000px
   the three cards fill one balanced row with no scrolling. One coherent card family;
   category-specific icons + tonal fields (Tissue icy · Metabolic frost · Dermal/
   Cellular royal). Real product_cat terms only; fail-closed in PHP. */
.plh-cats { background: var(--pl-surface); }
.plh-cats .plh-head { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* The rail. Native inline scroll with proximity snap; the visual scrollbar is hidden
   but touch + keyboard scrolling stay native. A gutter-width negative margin lets the
   next-card peek bleed toward the screen edge, while padding-inline + scroll-padding
   keep the first/last cards aligned to the content gutter. touch-action keeps vertical
   page panning available; overscroll-behavior stops the scroll chaining to the page;
   padding-block reserves room so the focus ring is never clipped by overflow.
   --cat-icon is the responsive base the per-variant icon sizing scales from. */
.plh-catgrid { --cat-icon: clamp(64px, 9vw, 78px);
	list-style: none; margin: 0 calc(-1 * var(--pl-gutter)); padding: 10px var(--pl-gutter);
	display: flex; gap: var(--pl-space-16); overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: inline proximity; scroll-padding-inline: var(--pl-gutter);
	overscroll-behavior-inline: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; }
.plh-catgrid::-webkit-scrollbar { display: none; }
/* Mobile: one confident card + ~20% peek of the next (measured across 320-599). */
.plh-catcard { flex: 0 0 auto; width: max(14rem, calc(82vw - 32px)); scroll-snap-align: start; display: flex; }
/* Tablet: ~2 full cards + a peek of the third, one row. */
@media (min-width: 600px) { .plh-catcard { width: clamp(15rem, calc(44vw - 18px), 20rem); } }
/* Desktop: a count-adaptive static row (no scroll/bleed/snap). flex + centring gives
   3 balanced, 2 a centred pair, and 1 a single capped card. */
@media (min-width: 1000px) {
	.plh-catgrid { flex-wrap: wrap; justify-content: center; gap: clamp(18px, 1.8vw, 26px);
		overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; scroll-padding-inline: 0; }
	.plh-catcard { flex: 1 1 0; min-width: 0; max-width: 23rem; scroll-snap-align: none; }
}

/* Card — compact: a short tonal media band (~44% of height) + a tight body. */
.plh-catcard__link { display: flex; flex-direction: column; width: 100%; overflow: hidden;
	background: var(--pl-surface); border: 1px solid var(--pl-line-strong); border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm); color: var(--pl-navy);
	transition: transform 200ms var(--pl-ease), box-shadow 200ms var(--pl-ease), border-color 200ms var(--pl-ease); }
.plh-catcard__link:focus-visible { outline: none; box-shadow: var(--pl-ring); }
/* Media band — an authored tonal field with subtle geometry BEHIND the icon; fixed
   height so an icon can never shift the rail. */
.plh-catcard__media { position: relative; height: clamp(112px, 14vw, 132px); display: flex; align-items: center; justify-content: center;
	overflow: hidden; border-bottom: 1px solid var(--pl-line); }
.plh-catcard__icon { position: relative; z-index: 1; display: inline-flex;
	width: calc(var(--cat-icon) * var(--pl-icon-scale, 1)); height: calc(var(--cat-icon) * var(--pl-icon-scale, 1));
	transition: transform 200ms var(--pl-ease); }
.plh-catcard__icon svg { width: 100%; height: 100%; }
/* Optical-mass normalisation (consistent perceived mass, NOT identical bounding boxes):
   Tissue the lightest silhouette, Metabolic the chunkiest, Dermal the widest. */
.plh-catcard--tissue { --pl-icon-scale: 1.10; }
.plh-catcard--metabolic { --pl-icon-scale: .93; }
.plh-catcard--dermal-cellular { --pl-icon-scale: .98; }
/* A. Tissue — icy field + faint layered-strata sheets behind the deep-blue icon. */
.plh-catcard--tissue .plh-catcard__media { background:
	repeating-linear-gradient(122deg, transparent 0 17px, rgba(11, 29, 53, .05) 17px 18px),
	linear-gradient(158deg, var(--pl-icy) 0%, #fff 100%); }
.plh-catcard--tissue .plh-catcard__icon { color: var(--pl-blue-600); }
/* B. Metabolic — frost field + a restrained coordinate grid behind the blue icon. */
.plh-catcard--metabolic .plh-catcard__media { background-color: var(--pl-surface-2);
	background-image: linear-gradient(rgba(40, 120, 245, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 120, 245, .07) 1px, transparent 1px);
	background-size: 21px 21px; background-position: center; }
.plh-catcard--metabolic .plh-catcard__icon { color: var(--pl-blue); }
/* C. Dermal/Cellular — royal field + faint surface/cellular arcs + one electric top
   edge; icy-white icon. The strongest focal card, kept from overpowering the others. */
.plh-catcard--dermal-cellular .plh-catcard__media { background:
	radial-gradient(150% 80% at 50% 128%, transparent 47%, rgba(210, 230, 255, .16) 48%, transparent 51%),
	radial-gradient(120% 66% at 50% 128%, transparent 60%, rgba(210, 230, 255, .12) 61%, transparent 64%),
	linear-gradient(150deg, var(--pl-blue) 0%, var(--pl-blue-600) 100%); border-bottom-color: transparent; }
.plh-catcard--dermal-cellular .plh-catcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 2px 0 rgba(150, 205, 255, .75); background: radial-gradient(120% 90% at 84% -8%, rgba(150, 205, 255, .24), transparent 58%); }
.plh-catcard--dermal-cellular .plh-catcard__icon { color: #fff; }
.plh-catcard--research .plh-catcard__media { background: linear-gradient(158deg, var(--pl-surface-2) 0%, #fff 100%); }
.plh-catcard--research .plh-catcard__icon { color: var(--pl-blue-600); }

/* Body — Manrope name, quiet Inter count, Polar-blue action pinned to the bottom so
   the action row aligns across cards of different name lengths (equal-height look). */
.plh-catcard__body { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px 16px; flex: 1 1 auto; }
.plh-catcard__name { font-family: var(--pl-font-heading); font-weight: 700; font-size: 1.06rem; letter-spacing: -.005em;
	color: var(--pl-navy); line-height: 1.22; overflow-wrap: break-word; }
.plh-catcard__count { font-size: .8rem; font-weight: 600; color: var(--pl-muted); margin-top: 1px; }
.plh-catcard__go { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--pl-line);
	display: inline-flex; align-items: center; gap: 7px; color: var(--pl-link); font-weight: 600; font-size: .88rem; }
.plh-catcard__go .pl-icon { transition: transform 180ms var(--pl-ease); }
/* Pointer-only hover — never fires during touch scrolling. */
@media (hover: hover) and (pointer: fine) {
	.plh-catcard__link:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); border-color: var(--pl-blue); }
	.plh-catcard__link:hover .plh-catcard__icon { transform: scale(1.02); }
	.plh-catcard__link:hover .plh-catcard__go { color: var(--pl-blue-600); }
	.plh-catcard__link:hover .plh-catcard__go .pl-icon { transform: translateX(3px); }
}
/* Tactile press (subtle; must not fight a horizontal drag). */
.plh-catcard__link:active { transform: translateY(-1px); transition-duration: 120ms; }
/* Reduced motion -> static card feedback; native scrolling + snap alignment stay. */
@media (prefers-reduced-motion: reduce) {
	.plh-catcard__link, .plh-catcard__icon, .plh-catcard__go .pl-icon { transition: none; }
	.plh-catcard__link:active, .plh-catcard__link:hover { transform: none; }
	.plh-catcard__link:hover .plh-catcard__icon { transform: none; }
	.plh-catcard__link:hover .plh-catcard__go .pl-icon { transform: none; }
}

/* BEFORE YOU ORDER — light, plain two-column hairline points (no box, no
   ordinals). The icy panel treatment is reserved for genuine compliance. */
.plh-quality { background: var(--pl-surface); }
.plh-qbody { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px);
	align-items: start; border-top: 1px solid var(--pl-line); padding-top: clamp(22px, 3vw, 34px); }
.plh-qbody__lead p { color: var(--pl-navy); font-size: 1.12rem; line-height: 1.65; margin: 0; max-width: 44ch; }
.plh-qpoints { list-style: none; margin: 0; padding: 0; display: grid; }
.plh-qpoint { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-top: 1px solid var(--pl-line);
	color: var(--pl-navy); font-weight: 600; font-size: 1.02rem; }
.plh-qpoint:first-child { border-top: 0; }
.plh-qpoint::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 2px; background: var(--pl-blue); }

/* WHY — editorial statement rows, no boxed list, no icon chips. */
.plh-why__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px);
	align-items: baseline; padding: clamp(22px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--pl-line); }
.plh-why__row:first-child { border-top: 1px solid var(--pl-line); }
.plh-why__t { font-family: var(--pl-font-heading); font-weight: 800; color: var(--pl-navy); letter-spacing: -.015em;
	line-height: 1.15; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.plh-why__d { color: var(--pl-muted); font-size: 1.03rem; line-height: 1.6; }
.plh-why__d a { color: var(--pl-link); font-weight: 600; }

/* AFFILIATE CTA — frost surface, one primary apply route, plain hairline list. */
.plh-aff { background: var(--pl-surface-2); }
.plh-aff__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.plh-aff__body { color: var(--pl-muted); font-size: 1.06rem; line-height: 1.62; max-width: 56ch; margin: 14px 0 0; }
.plh-aff__cta { display: flex; align-items: center; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.plh-aff__learn { display: inline-flex; align-items: center; gap: 7px; color: var(--pl-link); font-weight: 600; min-height: 44px; }
.plh-aff__learn span { border-bottom: 1px solid var(--pl-line-strong); padding-bottom: 2px; }
.plh-afflist { list-style: none; margin: 0; padding: 0; display: grid; }
.plh-afflist li { padding: 14px 0; border-top: 1px solid var(--pl-line); color: var(--pl-navy); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.plh-afflist li:first-child { border-top: 0; }

/* NEWSLETTER — the SINGLE closing dark band gains a masked hairline-grid texture
   (purposeful, fades out — not a particle field). Reuses shipped .pl-newsletter. */
.plh-news { position: relative; isolation: isolate; }
.plh-news::after { content: ""; position: absolute; inset: 0; z-index: var(--pl-z-below); pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 60%);
	mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 60%); }

/* No-JS FAQ fallback: the accordion panels are hidden and toggled by theme.js.
   inc/enqueue.php swaps <html class="no-js"> to "js" at wp_head priority 0, but
   only when scripting runs — so `.no-js` persists exactly when JS is off, which
   is when this rule must reveal every answer so no content is lost (JS collapses
   them on init and drives the disclosure). */
.no-js .pl-accordion__panel[hidden] { display: block; }
.no-js .pl-accordion__chevron { display: none; }
/* With JS off the carousel arrows are inert (native overflow scroll still works,
   and every card is a focusable link) — hide the dead controls on the homepage. */
.no-js .pl-carousel__nav { display: none; }

/* Mobile recomposition */
@media (max-width: 900px) {
	.plh-qbody { grid-template-columns: 1fr; gap: 22px; }
	.plh-why__row { grid-template-columns: 1fr; gap: 8px; }
	.plh-aff__grid { grid-template-columns: 1fr; gap: 28px; }
	.plh-headrow { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
	.plh-hero__cta { gap: 12px; }
}

/* --------------------------------------------------------------------------
   Bug-fix pass (fix/site-bugfix-redesign-v1) — Featured Products overflow.
   The rail track (.pl-carousel__track) clips horizontally via its own
   overflow-x:auto, but its wrapper was overflow:visible, so the intrinsic card
   row escaped into .pl-container and widened the page (verified live: 390px ->
   body.scrollWidth 687, section.pl-featured the sole source). Clip the wrapper;
   overflow-clip-margin keeps the desktop nav arrows (left/right:-18px) visible;
   the inner track keeps overflow-x:auto so swipe is unaffected. Route-scoped.
   -------------------------------------------------------------------------- */
.pl-featured__carousel { overflow-x: clip; overflow-clip-margin: 24px; }

/* ==========================================================================
   H2.3 — DOCUMENTATION NAVIGATION BAND  (isolated slice — additive .plh-navrail
   namespace). [Owner IA decision 2026-07-27: Documentation-ONLY; the former Shop
   row moved to a future pre-footer Shop rail, recorded in documentation.php — not
   rendered here.] One compact full-width dark royal-navy band after Featured
   Products with a single Documentation destination — a refined wayfinding moment,
   not a feature section / dashboard / Hero / certificate display / card grid.
   A dimensional royal-navy surface, a whisper right-edge electric light field, a
   crisp top highlight, one premium icon tile, Manrope copy, and a compact filled
   royal-blue action carry it; the whole row is the link (large target) and the
   arrow is decorative. No record count, no lookup, no fabricated data, no JS.
   Nothing here touches the H2.1 Hero or H2.2 Featured blocks above.
   ========================================================================== */
.plh-navrail { position: relative; isolation: isolate;
	background: linear-gradient(104deg, var(--pl-navy) 0%, var(--pl-navy-800) 44%, var(--pl-navy-700) 100%);
	border-block: 1px solid rgba(120, 160, 220, .18); }
/* Whisper ambient light — a low-contrast electric field toward the right edge that
   drifts very slowly (decorative; the rail is complete when it is disabled). Above
   the navy base, below the content; never at full intensity behind the copy. */
.plh-navrail__ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(58% 118% at 82% 26%, rgba(75, 150, 255, .18), transparent 62%);
	animation: plh-navrail-drift 14s ease-in-out infinite alternate; will-change: opacity, transform; }
@keyframes plh-navrail-drift { from { opacity: .62; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(-3.2%, 1.5%, 0); } }
/* Subtle inset top highlight — the "lit" top edge of a premium navy surface. */
.plh-navrail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3;
	background: linear-gradient(90deg, transparent, rgba(150, 200, 255, .3) 24%, rgba(150, 200, 255, .3) 72%, transparent); }
.plh-navrail .pl-container { position: relative; z-index: 1; padding-block: clamp(10px, 1.2vw, 14px); }
/* Semantic section label, visually hidden so it does not compete with the compact rail. */
.plh-navrail__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.plh-navrail__list { list-style: none; margin: 0 auto; padding: 0; max-width: 840px; }
/* Documentation-only (owner IA decision) — a single row, so no inter-row divider.
   Whole row is the anchor (large target). No per-row card — the hover surface is a
   transient tonal lift; the negative inline margin lets it breathe past the content. */
.plh-navrail__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
	gap: clamp(14px, 1.8vw, 26px); padding: clamp(22px, 2vw, 24px) 18px; margin-inline: -18px;
	border-radius: var(--pl-radius); color: var(--pl-icy); transition: background var(--pl-dur) var(--pl-ease); }
.plh-navrail__row:hover { background: rgba(120, 165, 255, .06); }
.plh-navrail__row:focus-visible { outline: none; box-shadow: var(--pl-ring); }
/* Icon tile — dimensional PolarLabs blue token; Documentation (primary) brighter /
   electric, Shop (secondary) quieter navy-glass. */
.plh-navrail__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.plh-navrail__icon svg { width: 24px; height: 24px; }
.plh-navrail__ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plh-navrail__ico-front { fill: rgba(75, 150, 255, .22); }
.plh-navrail__ico-back { opacity: .5; }
.plh-navrail__icon--docs { color: #fff; border: 1px solid rgba(90, 160, 255, .55);
	background: linear-gradient(158deg, rgba(75, 150, 255, .3), rgba(40, 120, 245, .12)); }
.plh-navrail__row:hover .plh-navrail__icon--docs { border-color: rgba(120, 180, 255, .8); }
.plh-navrail__text { min-width: 0; }
.plh-navrail__copy { display: block; font-family: var(--pl-font-heading); font-weight: 700; letter-spacing: -.012em;
	line-height: 1.22; color: #fff; font-size: clamp(1.14rem, 1rem + .55vw, 1.42rem); }
.plh-navrail__meta { display: block; margin-top: 6px; font-size: .82rem; font-weight: 500; line-height: 1.45;
	color: var(--pl-icy-200); max-width: 52ch; }
/* Action controls — styled spans inside the row anchor (not nested interactives).
   Documentation = filled royal-blue + luminous; Shop = quieter outlined. */
.plh-navrail__cta { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; border-radius: 11px; font-weight: 700; font-size: .95rem; white-space: nowrap;
	transition: background var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); }
.plh-navrail__cta .pl-icon { transition: transform var(--pl-dur) var(--pl-ease); }
.plh-navrail__row:hover .plh-navrail__cta .pl-icon,
.plh-navrail__row:focus-visible .plh-navrail__cta .pl-icon { transform: translateX(3px); }
.plh-navrail__cta--primary { color: #fff; border: 1px solid rgba(120, 180, 255, .6);
	background: linear-gradient(180deg, var(--pl-blue) 0%, var(--pl-blue-600) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 18px -8px rgba(40, 120, 245, .7); }
.plh-navrail__row:hover .plh-navrail__cta--primary { background: linear-gradient(180deg, var(--pl-electric) 0%, var(--pl-blue) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 24px -8px rgba(40, 120, 245, .8); }
.plh-navrail__cta--primary .pl-icon { color: #fff; }
.plh-navrail__row:active .plh-navrail__cta { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
	.plh-navrail__ambient { animation: none; }
	.plh-navrail__row, .plh-navrail__cta, .plh-navrail__cta .pl-icon { transition: none; }
	.plh-navrail__row:hover .plh-navrail__cta .pl-icon,
	.plh-navrail__row:focus-visible .plh-navrail__cta .pl-icon { transform: none; }
}
/* Mobile (<=600): [icon][copy] on the first line, then [meta], then [action] —
   all indented under the copy column. Icon + copy stay full-size; action width-fit. */
@media (max-width: 600px) {
	.plh-navrail__row { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0;
		padding-block: clamp(15px, 4vw, 19px); align-items: start; }
	.plh-navrail__icon { grid-column: 1; grid-row: 1; width: 38px; height: 38px; border-radius: 11px; }
	.plh-navrail__icon svg { width: 21px; height: 21px; }
	.plh-navrail__text { grid-column: 2; grid-row: 1; }
	.plh-navrail__cta { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 11px; }
	.plh-navrail__copy { font-size: clamp(1.12rem, 1rem + 1.2vw, 1.3rem); }
}

/* ==========================================================================
   H2.5 — COMPACT CATALOG BANNER (pre-footer)  (isolated slice — additive
   .plh-catban namespace; replaces the former .plh-shopx card hub). [Owner IA
   decision 2026-07-27: the four navigation cards duplicated H2.4 Research
   Categories and were removed — H2.4 owns category navigation.] The final catalog
   invitation, after FAQ and BEFORE the newsletter/footer: one compact royal-blue
   editorial band — copy left, a single canonical "Browse Catalog" CTA right, a
   restrained abstract field behind. Navigation only, no cards, no grid. Lighter/
   bluer than the H2.3 Documentation band; contrasts the light FAQ above and the
   dark newsletter below. Nothing here touches the H2.1-H2.4 blocks.
   ========================================================================== */
.plh-catban { position: relative; isolation: isolate; overflow: hidden;
	padding-block: clamp(30px, 3.4vw, 46px);
	background: linear-gradient(110deg, #10346b 0%, #16478f 52%, #1d57ab 100%);
	border-block: 1px solid rgba(150, 190, 255, .2); }
/* Decorative abstract field: a restrained coordinate grid + a controlled electric
   light field on the right, masked so it stays secondary and never behind the copy. */
.plh-catban__field { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(46% 130% at 87% 26%, rgba(96, 165, 255, .34), transparent 62%),
		linear-gradient(rgba(150, 190, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(150, 190, 255, .07) 1px, transparent 1px);
	background-size: auto, 40px 40px, 40px 40px;
	-webkit-mask-image: radial-gradient(115% 130% at 90% 18%, #000 0%, transparent 68%);
	mask-image: radial-gradient(115% 130% at 90% 18%, #000 0%, transparent 68%);
	animation: plh-catban-drift 16s ease-in-out infinite alternate; will-change: opacity; }
@keyframes plh-catban-drift { from { opacity: .82; } to { opacity: 1; } }
/* Subtle top inset highlight. */
.plh-catban::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
	background: linear-gradient(90deg, transparent, rgba(160, 205, 255, .3) 22%, rgba(160, 205, 255, .3) 78%, transparent); }
.plh-catban__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); align-items: center; }
.plh-catban__copy { min-width: 0; max-width: 42rem; }
.plh-catban__title { font-family: var(--pl-font-heading); font-weight: 800; letter-spacing: -.028em; color: #fff;
	line-height: 1.05; margin: 12px 0 0; font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.6rem); }
.plh-catban__sub { color: var(--pl-icy-200); font-size: 1.06rem; line-height: 1.55; margin: 12px 0 0; max-width: 46ch; }
/* CTA — WHITE button (navy text) for strong separation from the royal-blue band;
   crisp edge, controlled shadow, animated arrow, >=48px. */
.plh-catban__cta { flex: none; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 52px; padding: 0 26px; border-radius: var(--pl-radius); background: #fff; color: var(--pl-navy);
	font-weight: 700; font-size: 1rem; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 10px 26px -10px rgba(2, 11, 22, .55);
	transition: transform var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); }
.plh-catban__cta:hover { background: var(--pl-icy); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(2, 11, 22, .62); }
.plh-catban__cta:active { transform: translateY(0); }
.plh-catban__cta:focus-visible { outline: none; box-shadow: var(--pl-ring); }
.plh-catban__cta .pl-icon { color: var(--pl-blue); transition: transform var(--pl-dur) var(--pl-ease); }
.plh-catban__cta:hover .pl-icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.plh-catban__field { animation: none; }
	.plh-catban__cta, .plh-catban__cta .pl-icon { transition: none; }
	.plh-catban__cta:hover { transform: none; }
	.plh-catban__cta:hover .pl-icon { transform: none; }
}
/* >=760: copy left, CTA right — one confident editorial line. A touch more vertical
   breathing room (the row is short) so the band lands in the compact target range. */
@media (min-width: 760px) {
	.plh-catban { padding-block: clamp(48px, 4vw, 58px); }
	.plh-catban__inner { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 64px); }
	.plh-catban__cta { justify-self: end; }
}