/**
 * DeskPicko Editorial Engine — Product Commerce Reveal frontend.
 *
 * Namespace: `dp2-product-reveal-`, isolated from every other dp2-
 * module and from generic global selectors (no bare .modal/.button/
 * .card/.close/.product anywhere in this file, per the build spec's
 * own explicit prohibition — every selector here is prefixed).
 *
 * ONE set of markup drives both desktop and mobile: the dialog is a
 * right-side panel above the mobile breakpoint, and a bottom sheet
 * at/below it. Nothing here duplicates fields conditionally in HTML —
 * only CSS decides which visual mode renders.
 *
 * Visual language: white surface, dark ink typography, one restrained
 * blue accent, light gray dividers, a subtle (never heavy) shadow,
 * generous spacing — matching the approved blueprint, kept
 * deliberately calm rather than ecommerce-loud (no gradients, no
 * glassmorphism, no saturated colors, no huge shadows).
 *
 * PHASE UPDATE (v2.5.0) — Product Commerce Engine foundation:
 *   - The inline card is rebuilt: it is no longer one <button>
 *     wrapping the identity fields, and no longer hosts the full
 *     "Where to Buy" section. See .dp2-product-reveal-card-* below
 *     for the new plain-container/compact-retailers/single-trigger
 *     structure (build spec sections 5/6/14-16). The old
 *     .dp2-product-reveal-retailers-section--card modifier is gone —
 *     the card's retailer rows now have their own, much leaner,
 *     dedicated classes (.dp2-product-reveal-card-retailers etc.)
 *     entirely separate from the dialog's full retailer section.
 *   - New: .dp2-product-reveal-gallery-* (build spec section 8) —
 *     reveal-only, primary image + optional thumbnail strip.
 *   - New: the .dp2-product-reveal-section and -checklist class
 *     families, generalized from the old benefits-only
 *     .dp2-product-reveal-meta, -benefits and -benefit classes, so
 *     "Why We Recommend It", "Key Benefits", "Best For" and "Consider
 *     Something Else If" can all share one heading plus
 *     paragraph-or-checklist visual treatment.
 *
 * PHASE UPDATE (v2.5.0, text-visibility hardening) — every text-
 * bearing element inside .dp2-product-reveal now carries its OWN
 * explicit `color` declaration (several — card/reveal product name,
 * card/reveal price value, card/reveal retailer name — previously had
 * none at all and were relying purely on inheriting `color` from the
 * top-level .dp2-product-reveal wrapper). Pure inheritance is beaten
 * by ANY selector that matches the child element directly, at zero
 * specificity cost to the competing rule — exactly the failure mode
 * a surrounding theme's own article/dark-mode typography rules can
 * trigger. Each of those declarations, plus every color this file
 * already set, now also carries `!important`, scoped ONLY to that one
 * named selector — never a blanket `.dp2-product-reveal * { color }`,
 * which would just as easily break button/badge/CTA colors that are
 * deliberately NOT the ink colors (white text on the blue CTAs and
 * badge, for instance). This makes the component's typography fully
 * self-contained regardless of what the surrounding article/theme CSS
 * does, per the component's own design intent: a white editorial
 * surface that must stay readable whether the surrounding site theme
 * is light or dark.
 *
 * PHASE UPDATE (v2.5.1) — BUGFIX, this comment only. The paragraph
 * above describing the new section/checklist classes previously
 * contained the literal two characters "asterisk" then "slash" back
 * to back inside its prose. A CSS comment closes at the very first
 * such sequence it contains, so that one accidental sequence closed
 * THIS docblock dozens of lines early — everything from there through
 * this comment's real closing marker was then parsed as if it were
 * live CSS, which swallowed the .dp2-product-reveal ruleset directly
 * below (the one declaring every --dp2pr-* custom property this whole
 * file, and every inline style attribute in
 * class-dp-ee-product-reveal-frontend.php, depend on) as an invalid
 * rule. That is the actual root cause of this component's reported
 * text-visibility bug: every var(--dp2pr-ink) etc. reference was
 * resolving to nothing, `!important` or not, selector or inline —
 * see deskpicko-editorial-engine.php's 2.5.1 changelog entry for the
 * full explanation. No selector, property, or value below this point
 * was changed; only this comment's wording.
 */

.dp2-product-reveal {
	--dp2pr-ink: #14181c;
	--dp2pr-ink-soft: #5b6470;
	--dp2pr-ink-faint: #8b93a0;
	--dp2pr-blue: #1a56db;
	--dp2pr-blue-soft: #eaf0fd;
	--dp2pr-line: #e5e7eb;
	--dp2pr-surface: #f5f6f8;
	--dp2pr-green: #0f6e56;
	--dp2pr-duration: 200ms;

	display: inline-block;
	max-width: 100%;
	font-family: inherit;
	color: var(--dp2pr-ink);
}

.dp2-product-reveal *,
.dp2-product-reveal *::before,
.dp2-product-reveal *::after {
	box-sizing: border-box;
}

.dp2-product-reveal a:focus-visible,
.dp2-product-reveal button:focus-visible {
	outline: 2px solid var(--dp2pr-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Trigger — plain button variant ("See This Pick")
   --------------------------------------------------------------- */

.dp2-product-reveal-trigger--button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	padding: 0 0.2rem;
	border: none;
	background: none;
	color: var(--dp2pr-blue);
	font: inherit;
	font-weight: 700;
	font-size: 0.95em;
	cursor: pointer;
}

.dp2-product-reveal-trigger--button:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Inline recommendation card (build spec sections 5/6/14-16)
   ---------------------------------------------------------------
   Mobile-first, single column by default. A plain container — never
   a control itself — holding exactly one interactive trigger
   (.dp2-product-reveal-card-trigger, at the bottom) plus a short list
   of independent retailer <a> CTAs. Kept deliberately lean: no
   "Where to Buy" heading, no bordered per-retailer boxes, no
   disclosure box — all of that belongs in the reveal only. */

.dp2-product-reveal-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 620px;
	padding: 1rem;
	border: 1px solid var(--dp2pr-line);
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 24, 28, 0.04);
}

.dp2-product-reveal-card-top {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dp2-product-reveal-card-media {
	position: relative;
	flex: 0 0 auto;
}

.dp2-product-reveal-card-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--dp2pr-blue);
	color: #fff !important;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.dp2-product-reveal-card-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 128px;
	background: var(--dp2pr-surface);
	border-radius: 0.5rem;
	overflow: hidden;
}

.dp2-product-reveal-card-image {
	max-width: 100%;
	max-height: 100%;
	/* Natural product proportions, never cropped/distorted (build
	   spec's product image rule) — contain, not cover. */
	object-fit: contain;
}

.dp2-product-reveal-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.dp2-product-reveal-card-name {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--dp2pr-ink) !important;
	overflow-wrap: break-word;
}

.dp2-product-reveal-card-verdict {
	font-size: 0.85rem;
	color: var(--dp2pr-ink-soft) !important;
	overflow-wrap: break-word;
}

.dp2-product-reveal-card-description {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--dp2pr-ink-soft) !important;
	overflow-wrap: break-word;
}

.dp2-product-reveal-card-price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-top: 0.15rem;
}

.dp2-product-reveal-card-price-label {
	font-size: 0.72rem;
	color: var(--dp2pr-ink-faint) !important;
}

.dp2-product-reveal-card-price-value {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--dp2pr-ink) !important;
}

/* Compact retailer CTAs — deliberately leaner than the dialog's full
   "Where to Buy" list: no border box, no note, tight rhythm. */
.dp2-product-reveal-card-retailers {
	list-style: none;
	margin: 0;
	padding: 0.6rem 0 0;
	border-top: 1px solid var(--dp2pr-line);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dp2-product-reveal-card-retailer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.dp2-product-reveal-card-retailer-info {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex: 1 1 120px;
	min-width: 0;
}

.dp2-product-reveal-card-retailer-name,
.dp2-product-reveal-card-retailer-price {
	overflow-wrap: break-word;
}

.dp2-product-reveal-card-retailer-name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-card-retailer-price {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dp2pr-ink-soft) !important;
}

.dp2-product-reveal-card-retailer-cta {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 40px;
	padding: 0.35rem 0.85rem;
	border-radius: 0.4rem;
	/* v2.11.1: premium dark treatment, per build spec section 5 - not
	   var(--dp2pr-blue), which stays the module's accent for badges,
	   focus rings and the trigger link elsewhere in this file. */
	background: #111827;
	color: #fff !important;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
	text-align: center;
	overflow-wrap: break-word;
}

.dp2-product-reveal-card-retailer-cta:hover {
	background: #1f2937;
}

/* The one real control in the card — a plain text-style trigger, not
   a bordered button, so it reads as an editorial link ("Why We
   Recommend It →") rather than a second, competing CTA next to the
   retailer buttons above it. */
.dp2-product-reveal-card-trigger {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.3rem;
	min-height: 24px;
	padding: 0;
	border: none;
	background: none;
	color: var(--dp2pr-blue) !important;
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}

.dp2-product-reveal-card-trigger:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Backdrop
   --------------------------------------------------------------- */

.dp2-product-reveal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 24, 28, 0.4);
	opacity: 0;
	z-index: 2147483000;
	transition: opacity var(--dp2pr-duration) ease;
}

.dp2-product-reveal-backdrop.is-open {
	opacity: 1;
}

.dp2-product-reveal-backdrop[hidden] {
	display: none;
}

/* Background page scroll lock — applied to <body> by the JS while
   any instance is open. */
body.dp2-product-reveal-scroll-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Dialog — mobile-first base = bottom sheet
   --------------------------------------------------------------- */

.dp2-product-reveal-dialog {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483001;
	max-height: 85vh;
	width: 100%;
	background: #fff;
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 -8px 30px rgba(20, 24, 28, 0.12);
	transform: translateY(100%);
	transition: transform var(--dp2pr-duration) ease;
	overflow: hidden;
}

.dp2-product-reveal-dialog[hidden] {
	display: none;
}

.dp2-product-reveal-dialog.is-open {
	transform: translateY(0);
}

.dp2-product-reveal-dialog-inner {
	position: relative;
	max-height: 85vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.5rem 1.25rem 2rem;
}

.dp2-product-reveal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: var(--dp2pr-surface);
	border-radius: 999px;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dp2pr-ink-soft);
	cursor: pointer;
}

.dp2-product-reveal-close:hover {
	color: var(--dp2pr-ink);
}

/* ---------------------------------------------------------------
   Gallery (build spec section 8) — reveal only.
   --------------------------------------------------------------- */

.dp2-product-reveal-gallery {
	margin: 0 0 1rem;
}

.dp2-product-reveal-gallery-main-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 240px;
	background: var(--dp2pr-surface);
	border-radius: 0.6rem;
	overflow: hidden;
}

.dp2-product-reveal-gallery-main {
	max-width: 92%;
	max-height: 92%;
	/* Never cropped/distorted — build spec's image rule applies
	   identically inside the gallery. A fixed-height wrap above means
	   swapping this img's src on thumbnail click never changes the
	   gallery's own footprint — no layout jump either way. */
	object-fit: contain;
}

.dp2-product-reveal-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.7rem;
}

.dp2-product-reveal-gallery-thumb {
	/* 2.5.2: bumped from 60px (mobile-base) / 68px (641px+, see the
	   matching rule in the tablet/desktop breakpoint below) to 88px /
	   104px — the reported thumbnails were too small to recognize the
	   product at a glance. Sizing only; the tile's own presentation
	   (border, radius, surface, active ring) and behavior are
	   untouched. flex-wrap on the parent already handles any product
	   with more images than fit one row, exactly as it did before this
	   change, so wider galleries still can't overflow.
	   2.5.3: 88px -> 72px (mobile-base) / 104px -> 84px (641px+, see
	   below) — 2.5.2 made the tile itself bigger but the `contain`-fit
	   image inside stayed small relative to it, reading as an
	   undersized picture in an oversized card. Pairing a slightly
	   smaller tile with the img's fit switching to `cover` (below)
	   gets a compact card where the product actually fills it.
	   Padding dropped to 0 for the same reason: cover already fills
	   the tile, so tile-level padding would just reintroduce a visible
	   gap of background color between the image and the border. */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--dp2pr-line);
	border-radius: 0.5rem;
	background: var(--dp2pr-surface);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--dp2pr-duration) ease, box-shadow var(--dp2pr-duration) ease;
}

.dp2-product-reveal-gallery-thumb img {
	width: 100%;
	height: 100%;
	/* 2.5.3: contain -> cover. At the 2.5.2 tile size the whole-image
	   `contain` fit (plus the tile's own padding) left a visible ring
	   of empty background around every thumbnail image. `cover` fills
	   the tile edge-to-edge instead; the aspect ratio is preserved
	   (cover never stretches/distorts), it just crops whatever
	   overflows the square, which is an accepted, intentional trade
	   for a thumbnail. The full, uncropped image is still what's
	   shown when a thumbnail is clicked and it becomes the main
	   image above (.dp2-product-reveal-gallery-main keeps `contain` —
	   untouched by this change). */
	object-fit: cover;
}

.dp2-product-reveal-gallery-thumb.is-active {
	/* A restrained ring, not a heavy border — a 1px border-color
	   change plus a soft outer glow reads as "selected" without the
	   thick, un-editorial look a wide solid border would have. */
	border-color: var(--dp2pr-blue);
	box-shadow: 0 0 0 2px var(--dp2pr-blue-soft);
}

.dp2-product-reveal-badge {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0.5rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--dp2pr-blue-soft);
	color: var(--dp2pr-blue) !important;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.dp2-product-reveal-title {
	margin: 0 0 0.4rem;
	padding-right: 2.5rem;
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-verdict {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	color: var(--dp2pr-ink-soft) !important;
}

.dp2-product-reveal-price {
	margin: 0 0 0.75rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.dp2-product-reveal-price-label {
	font-size: 0.8rem;
	color: var(--dp2pr-ink-faint) !important;
}

.dp2-product-reveal-price-value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-description {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dp2pr-ink-soft) !important;
}

/* ---------------------------------------------------------------
   Editorial decision-support sections (build spec sections 4/10) —
   "Why We Recommend It" / "Key Benefits" / "Best For" / "Consider
   Something Else If". One shared heading + paragraph-or-checklist
   treatment, generalized from what used to be benefits-only markup.
   --------------------------------------------------------------- */

.dp2-product-reveal-section {
	margin: 0 0 1.25rem;
}

.dp2-product-reveal-section-heading {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dp2pr-ink-faint) !important;
}

.dp2-product-reveal-section-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.dp2-product-reveal-checklist-item {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-checklist-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.85em;
	height: 0.85em;
	border-radius: 50%;
	background: var(--dp2pr-green);
}

/* ---------------------------------------------------------------
   Editorial accordion — "Why We Recommend It" / "Best For" /
   "Consider Something Else If" (reveal only, live-polish phase).
   Compact rows, collapsed by default; a plain chevron rotation is
   the only motion (skipped entirely under reduced-motion, same rule
   as the dialog/backdrop transitions below) — deliberately no
   animated height, which keeps the row's semantics simple (the panel
   is just `hidden` or not) and avoids any risk of the "no layout
   jumping" requirement elsewhere in this file being read as
   contradicting an accordion that, by definition, changes the
   panel's height on open.
   --------------------------------------------------------------- */

.dp2-product-reveal-accordion {
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--dp2pr-line);
}

.dp2-product-reveal-accordion-item {
	border-bottom: 1px solid var(--dp2pr-line);
}

.dp2-product-reveal-accordion-heading {
	margin: 0;
}

.dp2-product-reveal-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 44px;
	padding: 0.75rem 0.1rem;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: left;
	color: var(--dp2pr-ink) !important;
	cursor: pointer;
}

.dp2-product-reveal-accordion-chevron {
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--dp2pr-ink-faint);
	border-bottom: 2px solid var(--dp2pr-ink-faint);
	transform: rotate(45deg);
	transition: transform var(--dp2pr-duration) ease;
}

.dp2-product-reveal-accordion-trigger.is-open .dp2-product-reveal-accordion-chevron {
	transform: rotate(-135deg);
}

.dp2-product-reveal-accordion-panel {
	padding: 0 0.1rem 0.9rem;
}

.dp2-product-reveal-accordion-panel[hidden] {
	display: none;
}

.dp2-product-reveal-accordion-panel-inner .dp2-product-reveal-section-text,
.dp2-product-reveal-accordion-panel-inner .dp2-product-reveal-checklist {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dp2-product-reveal-accordion-chevron {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
   Where to Buy / retailer offer rows — dialog only.
   --------------------------------------------------------------- */

.dp2-product-reveal-retailers-section {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dp2pr-line);
}

.dp2-product-reveal-retailers-heading {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dp2pr-ink-faint) !important;
}

.dp2-product-reveal-retailers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.dp2-product-reveal-retailer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--dp2pr-line);
	border-radius: 0.5rem;
}

.dp2-product-reveal-retailer-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1 1 140px;
	min-width: 0;
}

.dp2-product-reveal-retailer-name,
.dp2-product-reveal-retailer-price,
.dp2-product-reveal-retailer-note {
	overflow-wrap: break-word;
}

.dp2-product-reveal-retailer-name {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-retailer-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dp2pr-ink) !important;
}

.dp2-product-reveal-retailer-note {
	font-size: 0.78rem;
	color: var(--dp2pr-ink-faint) !important;
}

.dp2-product-reveal-retailer-cta {
	/* flex-wrap on the row lets this drop to its own full-width line
	   when a long retailer name/note leaves too little room beside it
	   (build spec: "long retailer name/button label must wrap
	   gracefully") — flex-basis:auto keeps it compact and inline
	   whenever there IS room, exactly like the blueprint. */
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 44px;
	padding: 0.4rem 1rem;
	border-radius: 0.4rem;
	/* v2.11.1: premium dark treatment, per build spec section 5 - not
	   var(--dp2pr-blue), which stays the module's accent elsewhere in
	   this file (badges, focus rings, the disclosure icon). */
	background: #111827;
	color: #fff !important;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
	text-align: center;
	overflow-wrap: break-word;
}

.dp2-product-reveal-retailer-cta:hover {
	background: #1f2937;
}

/* Subtle, trustworthy — never a loud banner — informational treatment
   for the affiliate disclosure, per the approved blueprint. Dialog
   only, per build spec sections 6/13. */
.dp2-product-reveal-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0.65rem 0.75rem;
	background: var(--dp2pr-blue-soft);
	border-radius: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--dp2pr-ink-soft) !important;
}

.dp2-product-reveal-disclosure-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: var(--dp2pr-blue);
	color: #fff !important;
	font-size: 0.68rem;
	font-weight: 800;
	font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
}

/* Explicit, not just inherited from .dp2-product-reveal-disclosure —
   a theme selector that happens to target this element directly
   (e.g. a dark-mode "all article text goes light" rule keyed off
   element type) would otherwise still beat an inherited value even
   though the parent already sets one. */
.dp2-product-reveal-disclosure-text {
	flex: 1 1 auto;
	color: var(--dp2pr-ink-soft) !important;
}

/* ---------------------------------------------------------------
   Tablet/desktop — inline card becomes a two-column composition
   (image beside product identity) for its top section; the compact
   retailer rows and the trigger stay full-width below, matching the
   approved blueprint's desktop concept. Below this breakpoint the
   card stays the single-column mobile stack defined above —
   deliberately not "desktop but smaller" (build spec's tablet
   section).
   --------------------------------------------------------------- */

@media (min-width: 641px) {
	.dp2-product-reveal-card-top {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.1rem;
	}

	.dp2-product-reveal-card-image-wrap {
		width: 132px;
		height: 132px;
	}

	.dp2-product-reveal-card-body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.dp2-product-reveal-gallery-main-wrap {
		height: 280px;
	}

	.dp2-product-reveal-gallery-thumb {
		/* 2.5.2: 68px -> 104px, see the base-rule comment above.
		   2.5.3: 104px -> 84px, see the base-rule comment above. */
		width: 84px;
		height: 84px;
	}
}

/* ---------------------------------------------------------------
   Desktop — right-side panel instead of a bottom sheet.
   --------------------------------------------------------------- */

@media (min-width: 641px) {
	.dp2-product-reveal-dialog {
		left: auto;
		top: 0;
		bottom: 0;
		right: 0;
		width: clamp(380px, 32vw, 480px);
		max-height: none;
		height: 100vh;
		border-left: 1px solid var(--dp2pr-line);
		border-radius: 0;
		box-shadow: -8px 0 30px rgba(20, 24, 28, 0.1);
		transform: translateX(100%);
	}

	.dp2-product-reveal-dialog.is-open {
		transform: translateX(0);
	}

	.dp2-product-reveal-dialog-inner {
		max-height: 100vh;
		padding: 2rem 1.75rem 2.5rem;
	}
}

/* ---------------------------------------------------------------
   Reduced motion — transitions removed, not just shortened, so the
   panel/sheet and backdrop appear instantly. !important here is
   deliberate: this must always win regardless of the specificity of
   the rules above, which is exactly what an accessibility override
   is for.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dp2-product-reveal-dialog,
	.dp2-product-reveal-backdrop {
		transition: none !important;
	}
}