/*
 * PDP discovery-rail card + Reviews presentation — PDP-VISUAL-SYSTEM-LOCK.md
 * Section P/N in the S9C global system (GLOBAL-COMMERCE-POLISH-LOCK.md §37
 * rail, §22 COMPACT card variant, §9/§25 Lifted Can). Values measured from
 * the promoted final lab design-lab/final/global-polish/ (`.pp-card--related`,
 * `.pp-related-grid`).
 *
 * PDP.2B: the WooCommerce "You may also like" section is replaced by the
 * explainable discovery rail of the full-width zone (template-parts/pdp/
 * wide.php, 4-up on desktop — pdp-lower.css), which keeps THIS card grammar
 * and rail. The card SHELL, packshot, brand/title/meta type and price come
 * from the shared grammar in product-card.css — this file adds only the
 * compact density and the responsive rail.
 */

/* ---------- Reviews (PDP lock Section N; PDP.2B / E-12: only once a genuine review exists) ---------- */
.pp-reviews-title {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: var(--pp-text-sub-title);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--pp-ink);
	margin: 0 0 14px;
}
.pp-reviews-section { margin-top: var(--pp-section-gap-s); }
.pp-review-note { margin: 0; font: 400 var(--pp-text-label)/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }

/* ---------- Related grid → rail (lock §37) ----------
   Desktop grid (the PDP.2B discovery rail sets 4-up). 600–1024 becomes compact
   FIXED 260px cards with horizontal snap so 2.5–3 are visible — never one
   ~800px card. ≤599 is an intentional compact rail: one dominant card at 72%
   plus a visible next-card peek (the same rail principle as the homepage lock). */
.pp-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.pp-related-grid > * { min-width: 0; }

@media (max-width: 1024px) {
	.pp-related-grid {
		display: flex;
		gap: var(--pp-space-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.pp-related-grid::-webkit-scrollbar { display: none; }
	.pp-related-grid > .pp-card { flex: none; width: 260px; scroll-snap-align: start; }
}
@media (max-width: 599px) {
	.pp-related-grid > .pp-card { width: 72%; }
}

/* ---------- COMPACT related card (lock §22, PDP lock P) ----------
   packshot → brand → title → facts → price. No tier selector, no Quick Add,
   never the full Homepage/PLP card density. */
.pp-card--related {
	padding: var(--pp-card-pad-compact);
	border-radius: var(--pp-radius-md);
	text-decoration: none;
	transition: border-color var(--pp-motion-micro) var(--pp-ease-out), transform var(--pp-motion-component) var(--pp-ease-out);
}
/* UI.1 C2 (Human Lock §9): a related card is ONE link (unlike the multi-target
   product card, which never lifts), so on hover-capable input it lifts ~1px
   with its existing Navy 50% keyline + Lifted Can (product-card.css). From
   1025px only: below that the related row is a horizontal scroller with no
   top padding, which would clip the lifted top edge. */
@media (hover: hover) and (min-width: 1025px) { .pp-card--related:hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } }
.pp-card--related .pp-card-media { margin-bottom: var(--pp-space-2); }
.pp-card--related .pp-card-title { font-size: 13px; margin: 3px 0 2px; }
.pp-card--related .pp-price-primary { font-size: 14px; margin-top: 6px; }

/* ---------- Write-a-review disclosure (PDP lock Section N) ----------
   Architecture untouched (WooCommerce remains the review engine): only
   spacing and the shared field/button foundation, so the form reads as part
   of the PDP rather than a separate visual system. PDP.2B: the dashed
   zero-review box is retired with the empty section (E-12). */
.pp-review-write { margin-top: 10px; }
.pp-review-write summary {
	cursor: pointer;
	list-style: none;
	color: var(--pp-navy);
	font-weight: 600;
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pp-hit-min);
}
.pp-review-write summary::-webkit-details-marker { display: none; }
.pp-review-write summary:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); border-radius: var(--pp-radius-sm); }

.pp-review-write-body { margin-top: 14px; text-align: start; }
.pp-review-write-body .pp-review-field { margin-bottom: var(--pp-space-3); }
.pp-review-write-body label { display: block; font: 600 var(--pp-text-meta)/1.3 var(--pp-font-body); color: var(--pp-ink); margin-bottom: 4px; }
.pp-review-write-body .comment-notes,
.pp-review-write-body .logged-in-as { font: 400 11.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); margin-bottom: var(--pp-space-3); }
.pp-review-write-body textarea.pp-input { resize: vertical; }
.pp-review-write-body .form-submit { margin: 0; }