/* -----------------------------------------------------------------------------
 * PeptPro Preview3 — Round 5: R3, R4 — product gallery controls and the PDP trust statements. Loaded on is_product() only.
 *
 * Created empty by the Foundation pass so the enqueue in functions.php resolves
 * to a real file (and to a real filemtime) before the lane that owns this file
 * writes into it. Round 5 CSS is kept out of style.css on purpose: style.css is
 * shared and 51KB, and a per-requirement file keeps a Round 5 rollback to one
 * `rm` plus one enqueue line.
 *
 * House rules for whoever fills this in:
 *   - reuse the existing tokens and radii (--accent, --accent-bright, --r-md,
 *     --r-pill, --s1..--s7); do not invent a new radius or a second accent;
 *   - this theme is DARK ONLY. It ships <meta name="color-scheme" content="dark">
 *     and carries no OS colour-preference media query anywhere. Do not add one:
 *     a partial light branch would activate on a light-preferring OS and break
 *     the design, because the meta tag does not stop such a query from matching;
 *   - motion is transform/opacity only, 150-260ms, and always inside a
 *     `@media (prefers-reduced-motion: no-preference)` guard or paired with a
 *     reduce branch;
 *   - these rules load after style.css and every Round 2-4 sheet, so they win on
 *     order alone. Do not reach for !important.
 * -------------------------------------------------------------------------- */

/* ============================================================ R3 · gallery ==
 * Round 4 already shipped the strip, the arrows, the counter, the thumbnails,
 * the lightbox and the reduced-motion branch (assets/css/round4-media.css).
 * This section changes only what R3 and the Round 5 accessibility gate ask for,
 * and nothing else: it is a narrowing pass, not a restyle.
 * ========================================================================= */

/* Touch targets. Round 4 sized the arrows at 44px, which is the old iOS
 * minimum; the Round 5 gate is 48px for a primary control at 375px, and these
 * are THE control for a manually-advanced gallery. 48px still leaves 247px of
 * picture between the two arrows on a 375px viewport, so nothing is crowded. */
.pd-gal .p3-gal-arrow { width: 48px; height: 48px; }
.pd-gal .p3-gal-zoom { width: 48px; height: 48px; }

/* The disabled end-stop must still be legible, not a ghost. Round 4's .3 alpha
 * on a near-black plate falls below a readable contrast for the chevron; .48
 * keeps it clearly "present but not available" while staying obviously distinct
 * from the live arrow beside it. */
.pd-gal .p3-gal-arrow[disabled] { opacity: .48; }

/* R3 designs for THREE pictures. Round 4's thumbnails are locked to a 25% flex
 * basis for every count, which is right for four and wrong for three: three
 * quarter-width tiles leave a quarter-width hole that reads as a missing fourth
 * photograph — actively misleading on a catalogue whose media is incomplete.
 * A quantity query gives exactly-three its own full-width 3-up rhythm; two and
 * four keep Round 4's rhythm untouched.
 *
 * ROUND 6: this rule was written for a case the catalogue could not yet reach.
 * It is now the case EVERY product hits, because the R3/R6 slot map gives any
 * product with a photograph exactly three positions (see
 * inc/round6-placeholder.php). The rule is unchanged — it was already correct —
 * but it is no longer a contingency, so the hole it prevents is no longer
 * hypothetical either. */
.p3-gal-thumbs > li:first-child:nth-last-child(3),
.p3-gal-thumbs > li:first-child:nth-last-child(3) ~ li {
	flex: 1 1 calc(33.333% - var(--s2) * 0.667);
}

/* The single-slot record. In Round 5 this was the only case this catalogue
 * could show; in Round 6 it is unreachable, because a product with any
 * photograph now gets at least PEPTPRO_GALLERY_SLOTS (3) positions and a
 * product with none gets the empty state instead.
 *
 * The rule is KEPT, and so are the PHP and JS branches that go with it. It is
 * the correct rendering if the slot floor is ever lowered back to 1, and
 * deleting it would delete the only styling for a genuinely single-position
 * gallery — a rollback path, not dead weight. The reasoning still holds: when
 * one picture is the entire gallery, the 16px inset that keeps neighbouring
 * slides apart during a swipe has no neighbours to separate, so it buys nothing
 * and costs picture. 12px is the theme's next step down (--s3). */
.pd-gal .big.p3-gal-stage.is-single .p3-gal-slide { padding: var(--s3); }

/* Focus. style.css rings a:focus-visible/button:focus-visible globally, but the
 * arrows and the zoom sit ON the picture, where the default ring can vanish
 * against a bright vial. An accent ring plus an offset dark halo is legible on
 * any photograph. */
.pd-gal .p3-gal-arrow:focus-visible,
.pd-gal .p3-gal-zoom:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--void);
}

/* ANTI-SLOP N4 — the scroll track is a THIRD gallery control and was the only
 * one still painting the UA default ring (1px auto rgb(153,200,255)). A
 * scrollable overflow container is keyboard-focusable in Chromium and Firefox,
 * so a keyboard user reaching the pictures gets a ring in a colour that appears
 * nowhere else on this site, one step after the arrow beside it drew turquoise.
 * Same treatment as its siblings, with one deliberate difference: the ring is
 * INSET rather than offset outward. The track fills the stage edge to edge, so
 * an outward ring would be clipped by the stage's own overflow and only three
 * of its four sides would draw. The 4px halo is dropped for the same reason —
 * it belongs to a small control floating on a photograph, not to the frame. */
.pd-gal .p3-gal-track:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: -2px;
}

/* ================================================== R4 · trust statements ==
 * "Place these below the main product/shipping information using one coherent
 * family of luxury scientific pictograms. The final research warning has no
 * pictogram."
 * ========================================================================= */

.pdp-trust {
	--r5-ico-plate: color-mix(in srgb, var(--accent) 9%, transparent);
	--r5-ico-ring: color-mix(in srgb, var(--accent) 30%, var(--line));
	--r5-ico-ink: var(--accent-bright);
	margin-bottom: var(--s8);
	padding-top: var(--s6);
	border-top: 1px solid var(--line);
}

.pdp-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Wider than the old var(--s5) because the cards' own 24px of padding used
	   to do half of the separating. This is R7's column gap, not a new number,
	   so the two trust rows now breathe identically. */
	gap: clamp(28px, 3vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ANTI-SLOP B2 — no card. These three statements used to sit on a filled,
 * bordered, radiused plate while the evidence line that qualifies them sat
 * outside on the page ground: the claims were the only things on this page
 * dressed as a contained, finished object, and R4 was the only one of the
 * site's three trust rows to use cards at all (R6 and R7 are bare columns).
 * Removing the container costs nothing — the grid gap already separates the
 * three — and buys one trust grammar across the whole site, with unverified
 * assurances no longer styled to look like verified data. */
.pdp-trust-item {
	display: grid;
	grid-template-columns: auto;
	align-content: start;
	gap: var(--s3);
}

.pdp-trust-item .r5-ico { display: block; width: 48px; height: 48px; }

.pdp-trust-title {
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.pdp-trust-body {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ANTI-SLOP B2 — the evidence line. It used to be 13px of --quiet trailing
 * BELOW the three statements: the smallest, faintest thing in the band, under
 * the largest and whitest. The claims are unverified and the line is the
 * verified fact, so that hierarchy was exactly inverted. It now LEADS the band
 * and carries the claim titles' own type — same colour (--text), same 17px,
 * same 600 — so a reader meets this record's real evidence state before it is
 * told anything. The only concession to its length is line-height 1.5 and a
 * measure: it is a sentence where a title is a phrase.
 *
 * The hairline beneath it is the divider the dropped cards used to imply; it
 * keeps the statement of fact and the three assurances from reading as one
 * paragraph. It still reuses the .dot/.ring status marks the buy panel uses, so
 * the two report states read identically wherever they appear on the page. */
.pdp-trust-source {
	display: flex;
	align-items: baseline;
	gap: var(--s3);
	/* A measure, not the full 1192px of a 1440 viewport: this is a sentence, and
	   the theme already caps running prose at 66ch (.body-copy in style.css). */
	max-width: 62ch;
	margin: 0 0 var(--s6);
	padding-bottom: var(--s5);
	border-bottom: 1px solid var(--line);
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -.01em;
	/* Progressive: browsers that support it balance the last line so the
	   trailing link is not left as a one-word orphan. Everywhere else this is
	   simply ignored. */
	text-wrap: pretty;
}
.pdp-trust-source .dot,
.pdp-trust-source .ring { position: relative; top: -2px; flex: 0 0 auto; }
/* No colour override for the attached-report state: good news and bad news
   about the same record must be announced at the same rank, or the styling is
   editorialising about the evidence. */
.pdp-trust-source-link {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
	transition: text-decoration-color 160ms var(--ease);
}
.pdp-trust-source-link:hover { text-decoration-color: var(--accent); }

/* The research warning. It must NOT look like a fourth badge, so it inverts
 * every decision the three items above make: no pictogram (spec), no plate, no
 * fill, no radius on three sides, full width, and the page text colour instead
 * of the cards' muted body colour. The only ornament is a 2px accent keyline
 * down the leading edge, which is the theme's existing way of marking a
 * condition rather than an offer. Colour stays inside the obsidian +
 * single-turquoise system on purpose: DESIGN.md reserves the amber status hue
 * for stock and verification chips, so a warning yellow here would break the
 * palette contract — the distinction is carried by structure and weight. */
.pdp-trust-warning {
	margin: var(--s5) 0 0;
	padding: var(--s4) var(--s5);
	border-left: 2px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: color-mix(in srgb, var(--accent) 5%, var(--surface));
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .01em;
}

/* --- narrow widths ------------------------------------------------------- */
/* A deliberate mobile composition, not three squeezed columns: each statement
 * becomes a row with the pictogram in its own leading track, which keeps the
 * titles on one line at 375px and shortens the vertical run of the block. */
@media (max-width: 860px) {
	/* With the cards gone (B2) the separator becomes a hairline per row and the
	   gap becomes padding — the same stacked rhythm .trust-final-item uses on
	   the homepage at 680, so one column of statements looks like a PeptPro
	   composition on both surfaces rather than like a collapsed grid. */
	.pdp-trust-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pdp-trust-item {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--s4);
		row-gap: var(--s1);
		align-items: start;
		padding-block: var(--s4);
		border-top: 1px solid var(--line);
	}
	.pdp-trust-item:first-child { border-top: 0; padding-top: 0; }
	.pdp-trust-item .r5-ico { grid-row: span 2; width: 42px; height: 42px; }
	.pdp-trust-title { align-self: center; font-size: 16px; }
	.pdp-trust-body { font-size: 13.5px; }
	/* Tracks the titles down, so the admission and the claims stay the same
	   size at every width rather than only on desktop. */
	.pdp-trust-source { margin-bottom: var(--s5); padding-bottom: var(--s5); font-size: 16px; }
}

@media (max-width: 560px) {
	.pdp-trust { padding-top: var(--s5); }
	.pdp-trust-warning { padding: var(--s4); font-size: 13.5px; }
}

/* --- motion -------------------------------------------------------------- */
/* Nothing in this file animates on load, on scroll or on a timer. The single
 * transition above is a hover-only underline colour, well inside the 150-260ms
 * band, and it is switched off for anyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
	.pdp-trust-source-link { transition: none; }
}