/* ==========================================================================
   AVALEHE TÕESTUSE PLOKK — „Päris ostjad"  ·  inc/home-proof.php
   ==========================================================================

   Fills the space `.home-cats` leaves behind. Everything here is real data;
   nothing is dressed up to look like more than it is (CLAUDE.md invariant 3).

   ⚠️ NEVER WRITE A COMMENT OPENER INSIDE THIS BLOCK. Until v1.2.102 the two
   lines below quoted tokens.css VERBATIM, brackets and all — and the quote
   contained an opening comment marker. CSS comments do not nest: the header
   comment therefore ENDED at that quote's closing marker on the very next line,
   and every line from there down to `.og-proof {` was handed to the parser as
   the PRELUDE of the first rule. An invalid prelude drops its whole rule, so
   `.og-proof { padding-block }` — this section's entire vertical air — has never
   applied on the front page since the file was written. Exactly the failure
   CLAUDE.md records for v1.2.98. The quote below is now paraphrased.

   THE SURFACE STORY — three planes, and that is the whole depth model.
   tokens.css is explicit about it: it declares --surface-raised as #ffffff and
   notes, in the shop's own language, that this is the SAME colour as --surface
   — elevation comes from the SHADOW, never from a different tone. So height
   comes from shadow, and the planes differ only where a real edge exists:

       1. page ground    --surface-page  #f8fafc   (body, inherited — this
                                                    section paints NO band)
       2. raised plane   --surface       #ffffff   (review card, strip)
       3. inset tile     --surface-muted #f1f5f9   (card foot, thumb frames)

   The section deliberately does NOT paint its own background. `.home-props`
   directly above it is a white band with a bottom border; a second white band
   underneath would merge with it into one ~700px sheet of white and the cards
   would have nothing to sit on. On the tinted ground they read as objects.

   FALLBACKS — every var() carries its literal. Deploys here are a hand-built
   zip uploaded by hand, and a custom property that cannot resolve does not fall
   back to a previous value: it becomes the guaranteed-invalid value and takes
   every consumer with it. A tokens.css that failed to upload must cost this
   block nothing.

   MOBILE FIRST — 73% of this shop's traffic is phones, where hover does not
   exist. Every hover affordance is duplicated as a :active press state, and
   every hover-only rule is fenced behind (hover:hover) and (pointer:fine) so a
   phone never gets stuck in a hover state after a tap. Layout targets are
   375 / 768 / 1280. Tap targets ≥ 44px (WCAG 2.5.5).

   MOTION — durations come from --dur / --dur-fast, which tokens.css already
   zeroes under prefers-reduced-motion. No animation is declared here; the only
   moving parts are a shadow, a 2px lift and a 3px arrow nudge.
   ========================================================================== */

/* ── Section shell ─────────────────────────────────────────────────────── */

/* v1.2.102 PEENHÄÄLESTUS — THE SECTION NOW BREATHES LIKE ITS NEIGHBOURS.
   This section is the only one on the front page that invented its own vertical
   rhythm. The page reads, top to bottom: hero → .home-props band → THIS →
   .home-rail → .home-rail → promo → CTA, and every one of those rails is
   `.section-y` = --space-56 under 768px and --space-80 from 768 up
   (main.css:152-153). This block was clamp(40px, 5vw, 64px), i.e. 40 at 375px
   and 64 at 1280px, so the gap between blocks went 40+56=96, then 56+56=112,
   then 56+56=112 — one section out of step with the two below it. Matching
   .section-y exactly makes every gap on the page identical:
       375px : 56 + 56 = 112px, three times in a row
      1280px : 80 + 80 = 160px, three times in a row
   (The .home-props band keeps its own smaller padding on purpose — it is a
   bordered band, not a section, and main.css owns it.)
   Costs 16px of scroll at each end on a phone. Rhythm is worth 16px. */
.og-proof {
	padding-block: var(--space-56, 56px);
}

@media (min-width: 768px) {
	.og-proof {
		padding-block: var(--space-80, 80px);
	}
}

/* ── Head: eyebrow (shared .eyebrow from main.css) + title + aggregate ─── */

/* margin-bottom was clamp(24px, 3vw, 36px) — 24 on a phone, 36 on desktop. Now
   --space-24 / --space-32.
   ⚠️ READ THE WHOLE CASCADE BEFORE "MATCHING" THE RAILS. `.home-section__head`
   is declared TWICE in main.css at the SAME specificity: :249 sets
   var(--space-32, 32px) and :458, two hundred lines later, sets 36px. Source
   order decides, so :249 is dead and the rails actually run 36px on desktop and
   22px below 768 (main.css:504) — neither of which is a step on the 4px scale.
   This file therefore lands on the scale (24 / 32) rather than copying two
   off-grid numbers, which leaves a residual 2px on a phone and 4px on desktop
   against the rails. The one-line main.css diff that closes it is in the
   handover report; it is not mine to apply — main.css is a shared file. */
.og-proof__head {
	max-width: 720px;
	margin-bottom: var(--space-24, 24px);
}

@media (min-width: 768px) {
	.og-proof__head {
		margin-bottom: var(--space-32, 32px);
	}
}

/* main.css:245 gives every `.eyebrow` a 10px bottom margin, and main.css:250
   raises it to --space-12 inside `.home-section__head` — which this head is not.
   So the label above THIS title sat 2px closer to it than the identical label
   above "Populaarsed tooted" 56px further down. (0,3,0) beats both. */
.og-proof .og-proof__head .eyebrow {
	margin-bottom: var(--space-12, 12px);
}

/* letter-spacing was -.015em. main.css:142 tracks EVERY h1–h4 in this theme at
   -.02em, including the `.home-section__title` of both rails below, so this one
   heading was 0,005em looser than every other heading on the page — about 1,3px
   across "Mida ostjad pärast ostu ütlevad" at 36px. Now the same ramp and the
   same tracking as its neighbours. */
.og-proof__title {
	margin: 0;
	font-family: var(--font-display, 'Space Grotesk', 'Segoe UI', sans-serif);
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: var(--fw-bold, 700);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--text, #0f172a);
}

/* The rails' mobile ramp (main.css:505) that this title never had. Without it the
   two ramps DISAGREE in the middle of the phone range: at a 500px viewport
   `.home-section__title` is min(28, 6.4vw=32) = 28px while this one is
   max(24, 3.5vw=17,5) = 24px — a 4px difference between two section headings on
   the same screen, on the widest phones. (At 375px they happen to coincide at
   24px, which is why nobody caught it.) They agree again at 768px (26,88px), so
   this override is scoped to the same max-width the rails use. */
@media (max-width: 767px) {
	.og-proof__title {
		font-size: clamp(22px, 6.4vw, 28px);
	}
}

/* "N arvustust · keskmine X,X" — printed only from 10 reviews upward.
   Below that PHP omits the whole line: an average of four reviews is noise. */
.og-proof__agg {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-8, 8px) var(--space-12, 12px);
	margin: var(--space-16, 16px) 0 0;
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-md, 16px);
	line-height: var(--lh-md, 24px);
	color: var(--text-muted, #475569);
}

.og-proof__agg-text {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-8, 8px);
}

.og-proof__agg-count {
	font-weight: var(--fw-semibold, 600);
	color: var(--text, #0f172a);
}

.og-proof__agg-sep {
	color: var(--border-strong, #cbd5e1);
}

/* "keskmine 4,8" is one fact and never breaks across two lines. */
.og-proof__agg-avg {
	white-space: nowrap;
}

/* ── Stars ─────────────────────────────────────────────────────────────── */

.og-proof__stars {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 2px);
	flex: 0 0 auto;
}

.og-proof__star {
	display: inline-flex;
	flex: 0 0 auto;
}

/* The helper prints width/height on the <svg>; display:block kills the inline
   baseline gap that would otherwise nudge the row off centre. */
.og-proof__stars svg {
	display: block;
	flex: 0 0 auto;
}

/* Filled vs empty is a real distinction and gets real contrast: the two tones
   sit 3,46:1 apart, which is the WCAG 1.4.11 non-text minimum. tokens.css
   documents that ratio beside --rating-empty and says not to lighten it. */
.og-proof__star--full,
.og-proof__star--half {
	color: var(--rating, #b45309);
}

.og-proof__star--empty {
	color: var(--rating-empty, #cbd5e1);
}

.og-proof__stars--lg {
	gap: 3px;
}

/* ── Card grid ─────────────────────────────────────────────────────────── */

.og-proof__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* minmax(0,1fr), never a bare 1fr: a long unbroken product name in the card
   foot would otherwise set a min-content floor and push the grid wider than
   its container — the same failure that cut the fourth trust card off the
   right edge at 768px (see the note at main.css:335). */
@media (min-width: 768px) {
	.og-proof__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.og-proof__cards {
		gap: var(--space-24, 24px);
	}
}

.og-proof__cards > li {
	min-width: 0;
}

/* ── Review card ───────────────────────────────────────────────────────── */

.og-proof-card {
	display: flex;
	flex-direction: column;
	background: var(--surface, #fff);
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius-16, 16px);
	box-shadow: var(--shadow-card, 0 1px 2px rgb(15 23 42/.04), 0 2px 8px rgb(15 23 42/.08));
	/* Clips the tinted foot into the bottom corners. It also clips an outline,
	   which is why the foot's focus ring below is drawn INSET. */
	overflow: hidden;
	transition:
		box-shadow var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)),
		border-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)),
		transform var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}

.og-proof-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-8, 8px) var(--space-12, 12px);
	padding: var(--space-20, 20px) var(--space-20, 20px) 0;
}

/* Verified-purchase chip. Rendered ONLY when WooCommerce's own `verified`
   comment meta says so (inc/home-proof.php reads it through
   wc_review_is_from_verified_owner(), the same call inc/reviews.php:280 uses).
   A card without the chip simply has no chip — the claim is never guessed. */
.og-proof-card__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4, 4px);
	padding: 5px 10px 5px 8px;
	border: 1px solid var(--brand-a3, rgb(4 120 87/.20));
	border-radius: var(--radius-pill, 999px);
	background: var(--brand-a1, rgb(4 120 87/.06));
	color: var(--brand, #047857);
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-2xs, 12px);
	font-weight: var(--fw-semibold, 600);
	line-height: var(--lh-flat, 1);
	letter-spacing: .02em;
	white-space: nowrap;
}

.og-proof-card__chip svg {
	display: block;
	flex: 0 0 auto;
	stroke-width: 2.6;
}

/* The quote is the loudest thing on the card. Metadata is quiet, the words are
   not — that hierarchy is what makes a testimonial read as a person rather than
   as a widget. */
.og-proof-card__quote {
	flex: 1 1 auto;
	margin: 0;
	padding: var(--space-12, 12px) var(--space-20, 20px) var(--space-20, 20px);
	border: 0;
}

/* v1.2.102: 15px/1.6 → --fs-md/--lh-md. THE LINE BOX DOES NOT MOVE: 15 × 1,6 =
   24px and 16 × 1,5 = 24px, so the 4-line clamp below still measures exactly
   96px and no card changes height. What changes is that the review text is
   16px on a phone instead of 15, the type scale gains a member and loses three
   hand-picked values — 15px here, 15,5px at 1024 and 14,5px under 380 were three
   sizes for one role (both overrides are deleted below).
   Measure at 375px: the card is the full 339px column, minus 2×20 padding =
   299px; 16px DM Sans averages ≈8,3px a glyph → ≈36 characters a line, inside
   the 35–60 band. Line-height 24/16 = 1,5 clears the 1,5 floor exactly. */
.og-proof-card__text {
	margin: 0;
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-md, 16px);
	line-height: var(--lh-md, 24px);
	color: var(--text, #0f172a);
	/* Four lines, then an ellipsis. PHP also trims the stored text to ~46 words
	   so a 2000-character review does not ship 2000 characters to every
	   visitor; the clamp handles the visual truth, the trim handles the wire. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* (the 15,5px @1024 step is deleted — see the note on .og-proof-card__text) */

/* Card foot — the inset plane. Whole row is the link to the product. */
/* v1.2.102 — THE CARD'S LEFT EDGE IS NOW ONE STRAIGHT LINE. The head and the
   quote are inset --space-20 (20px); the foot was inset --space-16 (16px), so
   the stars, the review text and the product thumbnail started at three… two
   different x-positions, 4px apart, down the left side of every card. The eye
   catches that stagger long before it can name it. Now all three are 20px.
   Room check at the tightest width this padding is used, 768px, where the grid
   is 3-up: track = (768 − 2×24 gutter − 2×16 gap) / 3 = 229,33px, foot content =
   229,33 − 2×20 = 189,33px. Spent: 48 media + 12 gap + 12 gap + ≈16 arrow =
   88px, leaving ≈101px for the meta column — and the date "19. juuli 2026" at
   --fs-2xs measures ≈87px, so it still sits on one line. The name above it is
   clamped to 2 lines with overflow-wrap:anywhere and cannot overflow.
   Below 380px the head and the quote drop to 16px, so the foot follows them
   there (see the small-phone block at the end of this file) — the three edges
   stay aligned at every width, not just at most of them. */
.og-proof-card__product {
	display: flex;
	align-items: center;
	gap: var(--space-12, 12px);
	margin-top: auto;
	padding: var(--space-12, 12px) var(--space-20, 20px);
	min-height: var(--tap-min, 44px);
	border-top: 1px solid var(--border, #e2e8f0);
	background: var(--surface-muted, #f1f5f9);
	color: var(--text-muted, #475569);
	text-decoration: none;
	transition: background-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}

/* A WHITE inner tile with object-fit:contain — the exact frame `.home-cat__frame`
   (main.css:373) gave every category photo, so the front page keeps that language
   now that the category grid is gone. Deliberately NO mix-blend-mode: main.css:371
   records that it greyed out white-background photos, and roughly 1200 dropshipped
   product shots here have white backgrounds.

   Two classes (0,2,0) on the image rules, on purpose. WooCommerce core ships
   `.woocommerce img { height:auto; max-width:100% }` at (0,1,1), and this page
   does contain a `.woocommerce` wrapper — the [products] rails below. This block
   sits outside that wrapper so the rule should not reach it, but I have no
   browser to read a computed value with (CLAUDE.md Trap 1 is exactly the case
   where that assumption was wrong), and the extra class costs nothing. */
.og-proof .og-proof-card__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 4px;
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius-12, 12px);
	background: var(--surface, #fff);
	box-shadow: 0 1px 2px var(--ink-a1, rgb(15 23 42/.04));
	overflow: hidden;
}

.og-proof .og-proof-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.og-proof-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 4px); /* was 3px — the scale's smallest real step is 4 */
	min-width: 0;
	flex: 1 1 auto;
}

.og-proof-card__name {
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-xs, 13px);
	font-weight: var(--fw-semibold, 600);
	line-height: 1.35;
	color: var(--text, #0f172a);
	/* Two lines maximum, so a long garden-hose name cannot make one card taller
	   than its two neighbours. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	transition: color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}

.og-proof-card__date {
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-2xs, 12px);
	line-height: var(--lh-2xs, 16px);
	color: var(--text-subtle, #64748b);
}

.og-proof-card__go {
	flex: 0 0 auto;
	color: var(--brand, #047857);
	font-size: var(--fs-md, 16px);
	line-height: var(--lh-flat, 1);
	transition: transform var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}

/* ── Card states ───────────────────────────────────────────────────────── */

/* Hover is a desktop luxury and is fenced as one: on a touch screen
   (hover:none) a :hover rule sticks after the tap and leaves the card lit up
   until the next tap somewhere else. */
@media (hover: hover) and (pointer: fine) {
	.og-proof-card:hover {
		transform: translateY(-2px);
		border-color: var(--brand-a3, rgb(4 120 87/.20));
		box-shadow: var(--shadow-card-hover, 0 2px 4px rgb(15 23 42/.08), 0 8px 24px rgb(15 23 42/.12));
	}

	.og-proof-card__product:hover {
		background: var(--brand-a1, rgb(4 120 87/.06));
	}

	.og-proof-card__product:hover .og-proof-card__name {
		color: var(--brand, #047857);
	}

	.og-proof-card__product:hover .og-proof-card__go {
		transform: translateX(3px);
	}
}

/* The press. On 73% of this traffic this is the ONLY feedback that exists, so
   it is not fenced behind anything and it is faster than the hover. */
.og-proof-card__product:active {
	background: var(--brand-a2, rgb(4 120 87/.12));
	transition-duration: var(--dur-fast, 120ms);
}

/* Drawn INSET: the card clips overflow (for its rounded foot), and an ancestor
   with overflow:hidden clips a descendant's outline. A ring at the card's very
   bottom edge would lose three of its four sides. */
.og-proof .og-proof-card__product:focus-visible {
	outline: 2px solid var(--brand, #047857);
	outline-offset: -3px;
	border-radius: 0;
}

/* ── „Viimased ostud" strip ────────────────────────────────────────────── */

/* Ships EMPTY and hidden inside the full-page cache; inc/home-proof.php's
   inline script fills it over AJAX and unhides it. A server-rendered "2 tundi
   tagasi" would be frozen by W3TC for hours and would eventually be false. */
/* The muted plane. Page ground #f8fafc → this panel #f1f5f9 → white tiles: three
   real steps, the same panel/tile relationship `.home-cat__media` +
   `.home-cat__frame` used to carry (main.css:371-373). No shadow — an INSET
   plane does not cast one, and pretending otherwise is what makes a page look
   like a template. */
.og-proof-recent {
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 12px);
	margin-top: clamp(24px, 3vw, 32px);
	padding: var(--space-16, 16px);
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius-16, 16px);
	background: var(--surface-muted, #f1f5f9);
}

/* MUST be spelled out. The UA rule is `[hidden]{display:none}`, and ANY author
   `display` beats a UA rule regardless of specificity — without this line the
   flex above would reveal the empty strip in every cached page. */
.og-proof-recent[hidden] {
	display: none;
}

.og-proof-recent__label {
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	margin: 0;
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: var(--fs-2xs, 12px);
	font-weight: var(--fw-semibold, 600);
	line-height: var(--lh-flat, 1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted, #475569);
}

/* A dot with a halo, not a pulse. Nothing here is allowed to imply urgency
   (invariant 3) — it marks a live feed, it does not hurry anybody. */
.og-proof-recent__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-circle, 50%);
	background: var(--brand, #047857);
	box-shadow: 0 0 0 4px var(--brand-a2, rgb(4 120 87/.12));
}

.og-proof-recent__list {
	display: flex;
	flex-wrap: wrap; /* safety net: a tile too many wraps instead of being clipped */
	gap: var(--space-12, 12px) 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
}

.og-proof-recent__item {
	flex: 0 0 auto;
}

/* 64 × ~92px — comfortably past the 44px minimum in both axes. */
.og-proof-recent__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 64px;
	padding: 4px;
	border-radius: var(--radius-12, 12px);
	color: var(--text-subtle, #64748b);
	text-decoration: none;
	transition: background-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}

/* Same white tile as the review card's thumbnail — one frame treatment for every
   product photo in this block. */
.og-proof .og-proof-recent__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 4px;
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius-12, 12px);
	background: var(--surface, #fff);
	box-shadow: 0 1px 2px var(--ink-a1, rgb(15 23 42/.04));
	overflow: hidden;
}

.og-proof .og-proof-recent__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.og-proof-recent__time {
	font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	color: var(--text-subtle, #64748b);
}

@media (hover: hover) and (pointer: fine) {
	.og-proof-recent__link:hover {
		background: var(--brand-a1, rgb(4 120 87/.06));
	}
}

.og-proof-recent__link:active {
	background: var(--brand-a2, rgb(4 120 87/.12));
	transition-duration: var(--dur-fast, 120ms);
}

.og-proof .og-proof-recent__link:focus-visible {
	outline: 2px solid var(--brand, #047857);
	outline-offset: 2px;
	border-radius: var(--radius-12, 12px);
}

/* Keep the strip one tidy row on small screens.
   Measured against .container's own gutters (main.css:151 = 24px, :480 = 18px
   below 768px) plus this strip's 16px padding:
     375px → 375 − 36 − 32 = 307px of track; 4 tiles = 4×64 + 3×10 = 286px ✔
     480px → 480 − 36 − 32 = 412px of track; 5 tiles = 5×64 + 4×10 = 360px ✔
     560px → 560 − 36 − 32 = 492px of track; 6 tiles = 6×64 + 5×10 = 434px ✔
   flex-wrap above is the backstop if a gutter ever changes underneath this. */
@media (max-width: 559px) {
	.og-proof-recent__item:nth-child(n + 6) {
		display: none;
	}
}

@media (max-width: 479px) {
	.og-proof-recent__item:nth-child(n + 5) {
		display: none;
	}
}

/* Desktop: label left, tiles right, one calm 14px-tall band. */
@media (min-width: 768px) {
	.og-proof-recent {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-20, 20px);
		padding: var(--space-12, 12px) var(--space-20, 20px);
	}

	.og-proof-recent__label {
		flex: 0 0 auto;
	}

	.og-proof-recent__list {
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
}

/* ── Small phones (~360px and under) — same treatment .home-cats had ───── */

@media (max-width: 380px) {
	.og-proof-card__head {
		padding: var(--space-16, 16px) var(--space-16, 16px) 0;
	}

	.og-proof-card__quote {
		padding: var(--space-12, 12px) var(--space-16, 16px) var(--space-16, 16px);
	}

	/* The foot follows the head and the quote down to 16px so the card's left
	   edge stays one line on the narrowest phones too. */
	.og-proof-card__product {
		padding-inline: var(--space-16, 16px);
	}

	/* (the 14,5px text step is deleted — --fs-md at every width) */

	.og-proof-recent__link {
		width: 58px;
	}

	.og-proof .og-proof-recent__media {
		width: 48px;
		height: 48px;
	}
}