/* -----------------------------------------------------------------------------
 * PeptPro Preview3 — Round 6: R2 (PDP order) and R3/R6 (three-slot gallery with
 * branded pending placeholders). Loaded on is_product() only, after
 * round5-pdp.css, so it wins on cascade order and never needs !important.
 *
 * House rules this file keeps:
 *   - dark only; no prefers-color-scheme branch anywhere in this theme;
 *   - one type family (Inter Tight) and the existing tokens/radii/spacing;
 *   - one accent hue; --ok/--warn stay reserved for stock and operational state;
 *   - motion is transform/opacity only, 150-260ms, with a reduce branch;
 *   - no gradient text, no glassmorphism, no coloured side-stripes, no emoji.
 * -------------------------------------------------------------------------- */

/* ============================================ R3 + R6 · pending gallery slot ==
 *
 * WHAT THIS HAS TO SURVIVE
 * A visitor must not be able to mistake this for a photograph, at any size, on
 * any route, at a glance or on close inspection. Three independent signals do
 * that, so no single one has to carry it:
 *
 *   1. GROUND. A real slide sits on the stage's own raised, faintly lit plate
 *      (.pd-gal .big in style.css: a radial accent wash over --surface-raised).
 *      A pending slot paints its own flat --void panel on top of that. It is
 *      the darkest rectangle on the page and it is bounded by a hairline, so it
 *      reads as an empty frame rather than as a dark picture. It also fixes the
 *      worst-case backing for the label below: --muted on --void measures
 *      9.2:1, and no gradient can move it.
 *   2. ARTWORK. Registration brackets and edge ticks in flat 1-1.4px strokes,
 *      with the brand mark concentric inside them. Nothing here has a shadow, a
 *      gradient fill or a light source, which is precisely what a photograph of
 *      a vial does have.
 *   3. WORDS. One label, in the site's own .mono-label type, saying the
 *      photograph is pending, next to the hollow .ring this site uses for every
 *      pending state. The block's accessible name says the same thing at more
 *      length, so the fact is available whether you can see it or not.
 * ========================================================================== */

.p3-gal-ph {
	/* A single tinted ink for all the drawn geometry. It stays inside the one
	   accent hue the palette allows — a --line-strong structural grey pulled a
	   little toward the brand — so the frame belongs to this site without
	   introducing a second colour. Decorative strokes only; nothing here is
	   text and nothing here carries information the label does not repeat. */
	--r6-ph-ink: color-mix(in srgb, var(--accent) 22%, var(--line-strong));

	width: 100%;
	height: 100%;
	display: grid;
	/* The label takes exactly what it needs and the artwork takes the rest.
	   minmax(0, 1fr) is what lets the SVG shrink inside a short 4/3 phone frame
	   instead of pushing the label out of the stage's hidden overflow. The
	   label is the FIRST row: the stage pins its own counter chip to the
	   bottom-left corner, and a bottom-aligned caption measured within a few
	   pixels of it at 375px. */
	grid-template-rows: auto minmax(0, 1fr);
	justify-items: center;
	gap: var(--s3);
	padding: clamp(12px, 4%, 24px);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--void);
	color: var(--r6-ph-ink);
}

.p3-gal-ph-plate {
	display: block;
	width: 100%;
	min-height: 0;
}

/* The SVG carries a viewBox and the default preserveAspectRatio, so it
   letterboxes itself: the brackets, the ticks and the brand mark stay square
   and concentric whatever shape the frame is. That is why there is no second
   rule anywhere positioning the mark. */
.p3-ph-art {
	display: block;
	width: 100%;
	height: 100%;
}

.p3-gal-ph-label {
	display: flex;
	align-items: center;
	gap: var(--s2);
	max-width: 100%;
	/* No font-size of its own: .mono-label already sets the theme's 12px/700
	   uppercase label step, and the site's smallest legible size is not a
	   number worth reinventing here. --muted on the --void plate measures
	   9.2:1, so this line is legible whatever the stage gradient does. */
	color: var(--muted);
	text-align: center;
	text-wrap: balance;
}

/* The stage's own slide padding is right for a photograph that must not touch
   the frame. The placeholder IS a frame, so it takes the full slide and draws
   its own inset. */
.pd-gal .big.p3-gal-stage .p3-gal-slide.is-pending { padding: var(--s3); }

/* --- the pending thumbnail ------------------------------------------------
 * It must not read as one more photograph in the strip. A real thumbnail is a
 * solid-bordered tile containing a contained image; this is a dashed-keyline
 * tile containing the pending ring and the slot number, on the same obsidian
 * ground the large placeholder uses. Three differences, all visible at 64px. */
.p3-gal-thumb.is-pending {
	border-style: dashed;
	border-color: var(--line-strong);
	background: var(--void);
}

.p3-gal-ph-tile {
	--r6-ph-ink: color-mix(in srgb, var(--accent) 22%, var(--line-strong));

	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	padding: var(--s2);
	/* --quiet on --void measures 6.0:1 — comfortably over the 4.5 floor for a
	   12px label, and one step quieter than the large placeholder's --muted so
	   the strip stays subordinate to the picture above it. */
	color: var(--quiet);
}

/* Same letterboxing trick as the stage: one viewBox'd SVG, so the miniature
   frame stays square and centred inside a tile of any width. */
.p3-ph-tile-art {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	color: var(--r6-ph-ink);
}

.p3-gal-ph-tile-body {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--s1);
}

.p3-gal-ph-tile-n {
	font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

/* Hover is a border change, never an opacity fade: an opacity-only hover state
   is not a state change a low-vision user can see. */
.p3-gal-thumb.is-pending:hover { border-color: var(--accent); }

/* The active pending tile inherits the accent border, the inset ring and the
   accent bar from round4-media.css. Only the ink brightens, so "selected"
   looks the same whether the slot holds a photograph or not. */
.p3-gal-thumb.is-pending.is-active .p3-gal-ph-tile { color: var(--muted); }

/* --- narrow widths ------------------------------------------------------- */
/* At 375-430px the stage is a 4/3 frame roughly 250px tall. The label keeps its
   size (it is already at the theme's smallest legible step) and the artwork
   simply gets less room, which the letterboxing handles on its own. Only the
   inset tightens, so the drawing does not crowd the stage's own border. */
@media (max-width: 560px) {
	.p3-gal-ph { gap: var(--s2); }
	.pd-gal .big.p3-gal-stage .p3-gal-slide.is-pending { padding: var(--s2); }
}

/* =========================================================== R2 · the band ==
 * 681-900px was a FOURTH reordering mechanism, and the one the lane brief did
 * not name. style.css:673 carries
 *
 *     @media (max-width: 900px) { .pd { grid-template-areas: "info" "gallery" } }
 *
 * so between the phone breakpoint and the desktop two-column layout the page
 * painted the buy panel first and the gallery second — measured at 768px, not
 * assumed: pd-info at y=66, pd-gal at y=433, both at x=26. Fixing the DOM and
 * deleting the mobile `order:` rules would have left exactly one band still
 * disagreeing with the document, which is the defect R2 exists to remove.
 *
 * style.css belongs to the lead and is not edited here. This sheet loads after
 * it and only on a product page, and `.product-wrap .pd` outscores the bare
 * `.pd` it corrects, so one line in the same breakpoint restores the spec order
 * without touching a shared stylesheet. It is deliberately the same
 * named-areas mechanism rather than an `order:` property: this file must not
 * reintroduce the thing it just removed.
 * ========================================================================= */
@media (max-width: 900px) {
	.product-wrap .pd { grid-template-areas: "gallery" "info"; }
}

/* ============================================================ R2 · rhythm ==
 * woocommerce/single-product.php moved the Product description above the free
 * pen offer, so .pd-desc-sections now lands directly after the trust band.
 * Both carried their own outer spacing for the neighbours they used to have
 * (--s8 below the band, --s7 above the description), which stacked into ~112px
 * of empty page. One of the two is dropped; nothing else about either block
 * changes, and neither rule is touched in its own stylesheet.
 * ========================================================================= */
.pdp-trust + .pd-desc-sections { margin-top: 0; }

/* --- motion -------------------------------------------------------------- */
/* This file animates nothing on load, on scroll or on a schedule. The single
   transition it inherits is the thumbnail border-colour hover from
   round4-media.css, which that file already switches off under reduced motion.
   The rule below is a guard, not a new behaviour: if a future edit adds a
   transition to a placeholder, it starts out already honouring the preference. */
@media (prefers-reduced-motion: reduce) {
	.p3-gal-ph,
	.p3-gal-ph-tile,
	.p3-gal-thumb.is-pending { transition: none; }
}