/*
 * Roots 'n' Fruits — portal category guide styles.
 *
 * Enqueued only on the /portal/category/{slug}/ route (see functions.php), so
 * it never loads elsewhere. Ported verbatim from cookware-category-mockup.html.
 *
 * The mockup's :root tokens are scoped here to .rnf-guide (not global :root) so
 * they style the page body exactly as designed WITHOUT overriding the theme
 * tokens that the shared portal header/footer rely on. The shared chrome keeps
 * its own styling from portal.css + tokens.css.
 */

.rnf-guide {
	/*
	 * ROLLBACK 2026-09-13 unify page background. Was: --cream:#F3EEE1;
	 *
	 * Removed, not just unused: this token existed ONLY to paint the page canvas
	 * below, and leaving it declared invites a later edit to paint #F3EEE1 again.
	 * Verified no other rule in this file referenced var(--cream).
	 *
	 * This file is enqueued on ~24 guide routes, so this one line was the single
	 * biggest source of the off-cream canvas on the site.
	 */
	--surface:#FBF8F0;
	--ink:#272320;
	--muted:#736C5F;
	--faint:#756d5a; /* Brand retune 2026-09-15 (local only): was #A79E8C (2.65:1 on white, failed AA). Orange-anchor hue, own sat, darkened to clear 4.5:1 on white/surface/paper. */
	--pine:#414e2c; /* Brand retune 2026-09-15 (local only): was #2F4733. Green anchor #6a8048 hue+sat, L24%. */
	--pine-soft:#596c3d; /* Brand retune 2026-09-15 (local only): was #5C7460. Anchor hue, L33% -- solved against its worst bg (--sage-tint) for 4.5:1. */
	--sage:#a4b983; /* Brand retune 2026-09-15 (local only): was #9BAA8C. Anchor hue+sat, L62%. */
	--sage-tint:#e0e7d4; /* Brand retune 2026-09-15 (local only): was #E7E6D4. Hue 57->83.6 (anchor), sat+lightness kept. */
	--blush:#ECD7CC;
	--terracotta:#8e6501; /* Brand retune 2026-09-15 (local only): was #C0734F (3.62:1 on white, failed AA). Orange anchor hue+sat, L28%. */
	--line:#e3dbc8; /* Brand retune 2026-09-15 (local only): was #E3DAC8. Hue 40->42.7 (orange anchor); sat+lightness kept, so borders barely move. */
	--radius:18px;
	/* was: --serif:'Lora',Georgia,serif; */
	/* was: --sans:'Inter',system-ui,sans-serif; */
	/* Repointed at the global tokens 2026-08-08. Moving these two values moves
	 * every heading in the .rnf-guide scope at once — .pagehead h1, .swap__intro
	 * h2, and the .rnf-group__title / .bathroom-section-title rules that live in
	 * for-mom.css, baby-and-toddler.css and bathroom.css but define nothing of
	 * their own. All of those are already font-weight:600, which is loaded.
	 * The non-heading --serif users (.lede-turn, .price) are moved to
	 * --font-body individually below so they do NOT inherit Montserrat. */
	/* ROLLBACK 2026-09-08 cardo, was: --serif:var(--font-display); */
	/* ROLLBACK 2026-09-08 fraunces, was: --serif:var(--font-cardo); */
	--serif:var(--font-display);
	--sans:var(--font-body);

	/*
	 * ROLLBACK 2026-09-13 unify page background. Was: background:var(--cream);
	 *
	 * DELETED rather than repointed. .rnf-guide is a full-bleed wrapper, so this
	 * declaration WAS the page canvas and painted over body. With it gone the page
	 * shows body (tokens.css:159 -> --paper -> --rnf-cream #F5F0E8), the same value
	 * the footer paints.
	 *
	 * The .swap cards keep their own --surface fill AND their 1px var(--line) border
	 * (:84), which is what carries their separation from the canvas - so they read
	 * correctly on the slightly lighter background with no change needed.
	 */
	color:var(--ink);
	font-family:var(--sans);
	font-size:16px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}

.rnf-guide a{color:inherit;text-decoration:none;}

/* ---------- page frame ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
.crumb{display:inline-flex;align-items:center;gap:8px;margin:28px 0 22px;
	font-size:14px;color:var(--muted);}
.crumb svg{color:var(--muted);}

.pagehead{max-width:720px;margin-bottom:14px;}
/* was: .pagehead h1{ … font-weight:600 … letter-spacing:-.5px;} */
.pagehead h1{font-family:var(--serif);font-weight:700;font-size:54px;
	line-height:1.04;margin:0 0 18px;letter-spacing:var(--track-display);}
.lede{margin:0 0 16px;color:var(--muted);font-size:16.5px;line-height:1.62;}
/* was: .lede-turn{margin:0;font-family:var(--serif);font-weight:500; … } */
/* Prose, not a heading — held on the body face so the --serif alias above
 * cannot pull it into Montserrat. Weight 400, not 600: Open Sans has no 500,
 * and CSS matching resolves a 500 target DOWNWARD to 400 rather than up, so
 * 600 here would be a deliberate emboldening of a lede paragraph rather than
 * a like-for-like carry-over from Lora Medium. */
.lede-turn{margin:0;font-family:var(--font-body);font-weight:400;
	font-size:20px;line-height:1.42;color:var(--ink);}
.lede-disc{margin:11px 0 0;font-size:12.5px;color:var(--faint);line-height:1.5;}

/* ---------- optional "full Amazon list" affiliate button ---------- */
.rnf-guide a.full-list-link{display:inline-flex;align-items:center;gap:8px;margin:18px 0 4px;
	background:var(--pine);color:#fff;border:1px solid var(--pine);
	border-radius:999px;padding:11px 20px;font-family:var(--sans);
	font-size:14px;font-weight:600;text-decoration:none;
	transition:filter .15s ease;}
.full-list-link:hover{filter:brightness(0.9);}
.full-list-link:focus-visible{outline:2px solid var(--pine);outline-offset:2px;}

/* ---------- swap card ---------- */
.list{display:flex;flex-direction:column;gap:24px;margin:30px 0 64px;}
.swap{
	background:var(--surface);border:1px solid var(--line);
	border-radius:var(--radius);padding:24px;
	scroll-margin-top:90px; /* so #swap- deep links aren't hidden under the header */
}
/* Added 2026-09-10: the sibling of the rule above, for per-card deep links. A search
   result can now link to #card-… inside a carousel; without this the card lands flush
   against the top of the viewport with its section heading scrolled out of sight.
   portal-carousel.css loads later but sets no scroll-margin-*, so there is no conflict. */
.rnf-carousel__track > .tier{scroll-margin-top:90px;}
.swap__head{display:flex;gap:20px;align-items:center;margin-bottom:20px;}
.thumb{
	flex:0 0 92px;width:92px;height:92px;border-radius:14px;
	background:radial-gradient(120% 120% at 30% 20%,#e8efdd,var(--sage-tint)); /* Brand retune 2026-09-15: was #EFEFDD (hue 60->83.6). */
	display:grid;place-items:center;position:relative;overflow:hidden;
	border:1px solid #dad3c0; /* Brand retune 2026-09-15: was #DAD7C0 (hue 53->42.7). */
}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.swap__intro h2{font-family:var(--serif);font-weight:600;font-size:25px;
	margin:0 0 5px;letter-spacing:-.2px;}
.swap__intro p{margin:0;color:var(--muted);font-size:15px;max-width:560px;}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
/* Removed 2026-09-15 (local only): the single-card .tiers rule added alongside the
 * budget-only filter is gone with it. It scoped a one-track, normal-width, centred grid
 * to `.tiers:not(.is-single):has(> .tier:only-child)` under `@media (min-width:761px)`.
 * With full three-card sections restored there is no one-card row for it to match.
 * /bathroom/'s own .is-single treatment (bathroom.css) was never part of it. */
.tier{
	position:relative;display:flex;flex-direction:column;gap:6px;
	padding:16px 16px 15px;border:1px solid var(--line);border-radius:13px;
	background:#fff;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.tier:hover{transform:translateY(-2px);border-color:var(--pine-soft);
	box-shadow:0 8px 20px -12px rgba(65,78,44,.4); /* Brand retune 2026-09-15: decimal form of --pine; was rgba(47,71,51,.4) = #2F4733. */}
/* Added :target 2026-09-10 — the matched-card highlight for search deep links.
   A result link ends in #card-… (see inc/query.php in the rnf-search plugin), so the
   matched card IS the fragment target. Previously the green ring came only from
   :focus-visible, which fragment navigation happens to trigger — but that is focus,
   not intent: it vanishes the moment the member clicks anywhere (measured), and it
   can never fire on the partial's linkless <div class="tier"> branch, which is not
   focusable. :target holds for as long as the fragment does. Same treatment for both
   so keyboard focus and a deep-link match look identical. */
.tier:focus-visible,
.tier:target{outline:2px solid var(--pine);outline-offset:2px;}
/* was: .price{font-family:var(--serif); … } — numerals, not a heading. */
.price{font-family:var(--font-body);font-size:16px;letter-spacing:1px;}
.price i{font-style:normal;color:#d7ceb8;} /* Brand retune 2026-09-15: was #D7CDB8 (hue 41->42.7). */
.price i.on{color:var(--pine);}
/* Added 2026-09-15 (local only): $$ / $$$ cards now emit an EMPTY .price span (see
 * rnf_price_glyphs()). An empty span generates no line box and would collapse to zero
 * height, dropping the brand name up and breaking alignment across a row. A zero-width
 * space restores a line box of exactly the same height as a populated .price -- same font,
 * same line-height -- so no magic pixel value is needed.
 * :empty is what scopes this: pages that still render the full $/$$/$$$ scale always have
 * three <i> children, so their .price is never empty and never matches.
 * Reversible: delete this rule. */
.price:empty::before{content:"\200B";}
/* Added 2026-09-15 (local only): "Budget Pick" label, emitted inside .price by
   rnf_budget_pick_label() so it sits on the SAME line as the glyphs (.tier is a
   column flex container, so a sibling would drop to its own row). Font family is
   inherited from .price (--font-body); size/weight/tracking/colour copy the existing
   .swap__pair-label precedent in bathroom.css. letter-spacing deliberately overrides
   .price's 1px, which is tuned for numerals and reads wrong on words.
   Tuned 2026-09-15 (local only): font-size 11px -> 10px, margin-left 8px -> 6px. Old rule:
   .price .budget-pick{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--pine-soft);} */
.price .budget-pick{margin-left:6px;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--pine-soft);}
.brand{font-size:16px;font-weight:600;line-height:1.2;color:var(--ink);}
.brand em{display:block;font-style:normal;font-weight:500;font-size:14px;
	color:var(--ink);margin-top:2px;}
.origin{display:inline-flex;align-items:center;gap:5px;
	font-size:12.5px;color:var(--pine-soft);letter-spacing:.2px;}
.origin svg{flex:0 0 auto;}
.spec{font-size:11.5px;color:var(--faint);line-height:1.4;}
/* Additive 2026-07-26 (local only): spacing for the pagehead research citation line
   (reuses .spec look; only sets margin). Reversible: delete this rule. */
.pagehead p.cite{margin:0 0 16px;}
/* Optional pick detail lines (materials / clause) — normal body under the brand.
   Additive: only emitted by pages that supply these fields (e.g. Bedroom). */
.tier .detail{font-size:13px;color:var(--muted);line-height:1.5;}
.code{font-size:11px;color:var(--terracotta);letter-spacing:.2px;margin-top:1px;}
.code b{font-weight:600;}
/* Added 2026-07-18: optional fine-print note under the promo code line (e.g. "First order only"). Matches the small gray GRAS/.spec note text; reusable by any card that sets a 'promo_note' field. */
.promo-note{font-size:11.5px;color:var(--faint);line-height:1.4;margin-top:1px;}
.promo{position:absolute;top:13px;right:13px;
	background:var(--sage);color:#1f2c20;font-size:10.5px;font-weight:600;
	letter-spacing:.3px;padding:3px 8px;border-radius:999px;}
/* Packaging badge — small muted in-flow tag at the top of a .tier card (above all text).
   Additive 2026-07-09: only rendered when a card has packaging === 'plastic'. Neutral, not a
   warning color. Does not restyle any existing card element. */
.tier__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
	background:var(--sage-tint);color:var(--pine-soft);font-size:10.5px;font-weight:600;
	letter-spacing:.2px;padding:3px 8px;border-radius:999px;}
.tier__badge svg{flex:0 0 auto;}

@media (max-width:760px){
	.wrap{padding:0 18px;}
	.pagehead h1{font-size:40px;}
	.swap__head{align-items:flex-start;}
	.tiers{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.tier{transition:none!important;}}

/* Companion-product slot — two stacked image squares (primary over companion),
   a reusable pairing so a pick can read as one item made of two parts
   (frame + cover, desk + oil finish, curtain + wax). Presentation only; the
   markup renders only when a pick has companion_image, so this block is inert
   otherwise. Squares reuse the .thumb tokens (92px, radius 14, sage gradient).
   Vertical stack = mobile-safe by default. */
.companion{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;}
.companion__sq{flex:0 0 92px;width:92px;height:92px;border-radius:14px;overflow:hidden;border:1px solid #dad3c0;background:radial-gradient(120% 120% at 30% 20%,#e8efdd,var(--sage-tint)); /* Brand retune 2026-09-15: was #DAD7C0 + #EFEFDD, re-hued to the anchors. */display:grid;place-items:center;}
.companion__sq img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.companion__join{font-size:12px;color:var(--muted);letter-spacing:.02em;}

/* Companion-link box — a small labeled box attached to the top of a single tier card,
   for a paired product (IKEA cover, desk oil finish, curtain wax). Optional; renders
   only when a pick has companion_box_label, so this block is inert otherwise.
   Presentation only. Stacks cleanly on mobile (it is the card's own first row). */
.companion-box{display:block;margin:-16px -16px 4px;padding:6px 12px;
	border-top-left-radius:12px;border-top-right-radius:12px;
	background:var(--sage-tint);border-bottom:1px solid var(--line);
	font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--pine);
	text-decoration:none;}
a.companion-box:hover{background:var(--pine-soft);color:#fff;}

/* Optional primary-product link on the brand title — inherits the brand look. */
.brand-link{color:inherit;text-decoration:none;}
.brand-link:hover{text-decoration:underline;}