/*
 * RASID NEXT V5 — the ONE stylesheet system (Contract C-01/C-20).
 * Built from the DS foundations (docs/CREATIVE-DIRECTION-V5.md §1):
 * type scale, 8-based spacing, tokens, motion law. Every component
 * has exactly one home section here (C-04). Legacy stylesheets
 * (tokens/storefront/tranche1/design-v2/design-v4) are NOT loaded
 * by the V5 templates.
 *
 * IDENTITY — Salla round (owner directive 2026-10-25 19:27–19:29,
 * record: docs/DESIGN-V5-SALLA-IDENTITY.md): colour and type are
 * the owner's own Salla store identity (salla.sa/mtgr-rwdks),
 * extracted from that store's served code, not sampled from a
 * screenshot. Fonts: PingARLT (Ping AR LT), the store's family,
 * self-hosted woff2 in weights 400/500/700/800/900 (the family
 * has no 600). C-20's ≤ 60 KB font budget cannot be met by this
 * family — 400+800 alone are 99,100 B; the conflict is recorded
 * with numbers in the identity record, and the owner's explicit
 * directive governs the family. The four Noto Kufi subsets stay
 * on disk: the legacy tokens.css points at them; this sheet no
 * longer references them.
 */
/* Home-closure gate (2026-10-26, web-design-guidelines — dark
 * mode): the store is a dark theme; declaring the scheme makes
 * native scrollbars and form controls render dark with it. */
:root { color-scheme: dark; }

@font-face {
	font-family: "PingARLT";
	src: url("../fonts/pingarlt-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PingARLT";
	src: url("../fonts/pingarlt-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PingARLT";
	src: url("../fonts/pingarlt-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PingARLT";
	src: url("../fonts/pingarlt-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PingARLT";
	src: url("../fonts/pingarlt-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}



/* ================= TOKENS (Direction §1) ================= */
/* Salla round: every value below is either the owner's Salla
 * store token verbatim (source variable named per line) or a
 * documented DS decision where the store defines no token —
 * full mapping + contrast table in docs/DESIGN-V5-SALLA-IDENTITY.md.
 * WAVE 32 (owner Drive #18, 2026-11-01): the three SURFACE values
 * are superseded by the owner's surface ladder (§31) — per-line
 * notes mark the retired Salla values; the identity values
 * (accent family, ink family) remain Salla's. */
:root {
	--bg: #222328;              /* Drive #18 ladder BASE (owner 2026-11-01, §31.1) — retires Salla --dark-bg-main #191919 on NEXT surfaces */
	--bg-deep: #222328;         /* = the ladder base: header/footer/insets sit on the page bg */
	--surface: #2C2D33;         /* Drive #18 ladder CARDS — retires Salla --dark-grey #2e2e2e */
	--surface-2: #53565B;       /* Drive #18 ladder ELEVATED — everything that floats or is touched (search, capsule, fields, secondary buttons); retires the #3d3d3d derivation */
	--line: hsla(0, 0%, 100%, .14); /* NOT a Salla token: the theme's white-alpha divider family, strength set for field borders (record §3) */
	--ink: #ffffff;             /* Salla --dark-text-main */
	--ink-2: #a9a9a9;           /* Salla --dark-text-sec */
	--accent: #00c8ff;          /* Salla --color-primary */
	--accent-bright: #00c8ff;   /* text-accent role: converges to the primary — Salla's primary is itself text-grade on dark (8.96:1 on bg) */
	--accent-deep: #00a2d9;     /* Salla --color-primary-dark — hover-state accent (links), never a text ground for --on-accent (3.17:1, record §2) */
	--accent-light: #26eeff;    /* Salla --color-primary-light — the focus tint */
	--save: #4ade80;            /* NOT a Salla token: the theme's own compiled savings-badge green (record §3) */
	--star: #ffb020;            /* DS functional rating hue — the store defines no rating colour; kept (record §3) */
	--danger: #f87171;          /* NOT a Salla token: the theme's framework text-red-400 (record §3) */
	--pay-black: #000000;
	--on-accent: #004980;       /* Salla --color-primary-reverse — white on the cyan is 1.96:1 and is used nowhere */
	--ease: cubic-bezier(.2,.7,.3,1);
	--dur-fast: 120ms;
	--dur-med: 200ms;
	--dur-entrance: 320ms;
	--radius: 14px;
	--radius-s: 10px;
	--header-h: 56px;
}
/* Product-family hues: COVER ART + TILE ART ONLY, never chrome. */
:root {
	--fam-stream: #7c4dff;
	--fam-game: #e5484d;
	--fam-cards: #f76b15;
	--fam-soft: #2f6fed;
	--fam-social: #d6409f;
	--fam-conn: #0e9f6e;
	--fam-generic: #484848;
}

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
/* The canvas rule is scoped to body.rn5 (a class this layer adds
 * via body_class): the parent's inline settings CSS paints body
 * white with grey text — its winning declaration is
 * body:not([class*="wrapper-boxed"]) at (0,1,1), tied with a plain
 * body.rn5 and later in the document. html>body.rn5 is (0,1,2)
 * and wins regardless of order (fix round 2, matched-styles
 * proof via CDP CSS.getMatchedStylesForNode). */
html > body.rn5 {
	background: var(--bg);
	color: var(--ink);
	font-family: "PingARLT", "Segoe UI", system-ui, Tahoma, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 800; }
/* Explicit colour, scoped: the parent's inline CSS colours
 * headings directly (var(--wd-title-color), near-black) at the
 * same element specificity and a later position — the scoped
 * (0,1,2) form wins regardless of order (fix round 2). */
body.rn5 :is(h1, h2, h3, h4) { color: var(--ink); }
h1 { font-size: 28px; }
.rn5-screen-title { font-size: 28px; margin-block-end: 12px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* Woo price fragments (.amount spans) inherit their component's
 * colour inside this layer — the parent's inline Woo CSS colours
 * .amount with its own green accent, which repainted every price
 * green (fix round 2). DS rule: prices are --ink, savings --save,
 * and both are set on the component, never on .amount itself.
 * Correction round 1 (G-A-1): the guard must cover the product
 * summary too — single-product.php renders OUTSIDE .rn5-wrap, so
 * the variation-selected price (Woo JS writes .amount spans into
 * the mirror, the price block and the buy bar) escaped the guard
 * and computed to the parent's green. `color: inherit` alone is
 * NOT sufficient there: the injected .price element itself
 * carries the green rule, so an inheriting .amount inherits
 * green (measured rgb(131,183,53) on all three surfaces in this
 * round's first verification pass). The product surfaces below
 * therefore set the DS ink EXPLICITLY on the whole injected
 * price structure; the wrap surfaces keep inherit (their
 * components set ink themselves). */
.rn5-wrap .amount { color: inherit; }
body.rn5 .rn5-psummary .amount,
body.rn5 .single_variation .price,
body.rn5 .single_variation .amount,
body.rn5 .woocommerce-variation-price .price,
body.rn5 .woocommerce-variation-price .amount,
body.rn5 .rn5-priceblock .price,
body.rn5 .rn5-priceblock .amount,
body.rn5 .rn5-buybar .price,
body.rn5 .rn5-buybar .amount { color: var(--ink); }
body.rn5 .single_variation .price del,
body.rn5 .rn5-priceblock .price del,
body.rn5 .rn5-buybar .price del { color: var(--ink-2); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Salla round: the focus outline takes the family's lightest
 * tint (12.35:1 on the page bg — the DS's max-visibility role);
 * selection takes the store's own button pairing (accent ground,
 * --on-accent text, 4.73:1) — white on the hover cyan measured
 * 2.93:1 and is not used. */
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
.rn5-sr {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rn5-flip { transform: scaleX(-1); }
.rn5-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .rn5-wrap { padding-inline: 20px; } }
.rn5-ic { display: inline-block; vertical-align: -4px; flex: none; }

/* Page entrance: opacity + ≤12px rise, LCP element never animates. */
.rn5-rise { animation: rn5-rise var(--dur-entrance) var(--ease) both; }
@keyframes rn5-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ================= SECTIONS / BUTTONS / FORMS ================= */
.rn5-section { margin-block: 48px; }
.rn5-section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-block-end: 16px;
}
/* Correction round 2 (R-G-4): the view-all link is a real 44px
 * target (it measured 23px — text height only).
 * Micro-fix 2: the rule also carries the link colour now, scoped
 * under body.rn5. The class alone set no colour, so the only DS
 * colour reaching the link was the unscoped element rule
 * a{color:var(--accent-bright)} (0,0,1) — which TIES WoodMart's
 * inline a{color:var(--wd-link-color)} (wd-style-base-inline-css,
 * also 0,0,1) and loses on document order: matched styles proved
 * the parent winning, the link computing rgb(51,51,51) (≈1.4:1 on
 * the page ground, near-invisible) in both identities, hover
 * rgb(49,49,49). The section heads live outside the .rn5-frame /
 * .woocommerce scopes whose body.rn5 rules already win this war,
 * so the component scopes itself the same way: (0,2,1) beats the
 * tie outright, no generic anchor rule globalised. Hover takes
 * --accent-deep, the DS link-hover colour (cf. the frame rule). */
body.rn5 .rn5-viewall { font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-bright); }
body.rn5 .rn5-viewall:hover { color: var(--accent-deep); }
.rn5-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 10px 20px; border-radius: var(--radius-s);
	border: 1px solid transparent; font-weight: 800; font-size: 16px;
	cursor: pointer; text-align: center; transition: transform var(--dur-fast) var(--ease);
}
/* C-19 letter (G-A-11): hover is transform only — the transition
 * no longer animates background/border-color. */
.rn5-btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Variants scoped under body.rn5: the parent's inline button
 * rule :is(.btn,.button,button,[type=submit],[type=button])
 * resolves to (0,1,0) and prints later — unscoped variant rules
 * tied and lost, painting primary buttons light grey (fix
 * round 2, matched-styles proof on the buy-bar button). */
body.rn5 .rn5-btn--primary { background: var(--accent); color: var(--on-accent); }
/* Salla round — primary-action hover holds the accent ground:
 * the store's own .btn-primary has NO hover background change
 * (.btn:hover is opacity-only in its theme CSS), and the DS's
 * old shift to the darker variant is arithmetically closed
 * under the Salla pairing anyway: --on-accent on --accent-deep
 * measures 3.17:1, white on it 2.93:1 — no text colour passes
 * on the hover cyan. Hover language stays transform/opacity
 * (C-19); --accent-deep serves text hovers (links) instead.
 * This note governs every primary-action hover rule below
 * (buy button, place-order, auth submits, frame saves). */
body.rn5 .rn5-btn--primary:hover { background: var(--accent); }
body.rn5 .rn5-btn--secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
body.rn5 .rn5-btn--ghost { background: transparent; color: var(--accent-bright); border-color: var(--line); }
body.rn5 .rn5-btn--pay { background: var(--pay-black); color: #fff; border-color: #fff3; }
.rn5-btn[disabled], .rn5-btn.disabled { opacity: .55; cursor: not-allowed; }
/* Correction round 2 (R-G-4): the 48px above never actually
 * governed. The parent's inline button rule
 * :is(.btn,.button,button,[type=submit],[type=button])
 * { min-height: var(--btn-height, 42px) } resolves to (0,1,0) —
 * a tie with .rn5-btn — and prints AFTER this sheet, capping
 * every DS button at 42px (buy-bar button, empty-state CTA);
 * on the cart CTA, WoodMart's own .cart-totals-inner
 * .checkout-button (0,2,0, later file) capped it the same way
 * (CDP matched-styles proof, round-2 probe). The DS min-height
 * is therefore re-anchored at body.rn5 scope (0,2,1), which
 * outranks both regardless of order. */
body.rn5 .rn5-btn { min-height: 48px; }
.rn5-field { margin-block-end: 16px; }
.rn5-label { display: block; font-weight: 800; font-size: 14px; margin-block-end: 6px; }
.rn5-req { color: var(--danger); }
.rn5-input, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], select, textarea {
	width: 100%; min-height: 48px; padding: 10px 14px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-s);
}
textarea { min-height: 96px; }
.rn5-input::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-2); }
/* Form cascade system (correction round 1, G-B1/G-A-3): the
 * parent's global `label { color: var(--wd-title-color) }` (#242424,
 * CDP matched-styles proof) coloured EVERY form label near-black
 * because this layer set label colour only inside the checkout
 * scope. The fix is systemic, not per-page: on any V5 surface,
 * labels take --ink and form/frame links take the DS link colour,
 * at body.rn5 scope so the rules outrank the parent's element
 * rules regardless of order. Inputs already compute to --ink via
 * the control rule above; selects/textareas ride the same rule. */
body.rn5 label { color: var(--ink); }
body.rn5 .rn5-frame a:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart), body.rn5 .woocommerce a:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart) { color: var(--accent-bright); } /* Wave 10: button components excluded — see the prose rule's note */
/* Salla round: link hover takes the store's own hover colour
 * (.link--primary:hover = --color-primary-dark in its theme):
 * 6.00:1 on the page bg, 4.64:1 on surface. */
body.rn5 .rn5-frame a:hover:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart), body.rn5 .woocommerce a:hover:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart) { color: var(--accent-deep); }
.rn5-help { font-size: 12px; color: var(--ink-2); margin-block-start: 6px; }
.rn5-error { font-size: 14px; color: var(--danger); margin-block-start: 6px; }
.rn5-notice {
	border: 1px solid var(--line); border-inline-start: 4px solid var(--accent-bright);
	background: var(--surface); border-radius: var(--radius-s);
	padding: 12px 16px; margin-block-end: 16px; font-size: 14px;
}
.rn5-notice--success { border-inline-start-color: var(--save); }
.rn5-notice--error { border-inline-start-color: var(--danger); }
.rn5-notice--info { border-inline-start-color: var(--accent-bright); }
/* WooCommerce engine notices, restyled in place (engine markup kept).
 * Correction round 1 (G-A-14): the parent's inline settings CSS
 * carries `:where(.woocommerce-error, .woocommerce-message,
 * .woocommerce-info) { display: none }` (:where = zero specificity,
 * CDP CSSOM scan proof) — it hid every engine notice at render,
 * so a failed login returned NO visible feedback while the error
 * sat in the DOM. display:block here restores the notice on every
 * surface that shares the cause (auth, cart, checkout, account). */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	display: block;
	border: 1px solid var(--line); border-inline-start: 4px solid var(--accent-bright);
	background: var(--surface); color: var(--ink); border-radius: var(--radius-s);
	padding: 12px 16px; margin-block-end: 16px; font-size: 14px; list-style: none;
}
.woocommerce-message { border-inline-start-color: var(--save); }
.woocommerce-error { border-inline-start-color: var(--danger); }
.woocommerce-message .button, .woocommerce-info .button { float: left; min-height: 36px; }
.rn5-empty {
	border: 1px dashed var(--line); border-radius: var(--radius);
	padding: 32px 20px; text-align: center; background: var(--surface);
}
.rn5-empty-title { font-size: 18px; font-weight: 800; margin-block-end: 8px; }
.rn5-empty-line { color: var(--ink-2); font-size: 14px; }
.rn5-badge {
	display: inline-block; font-size: 12px; font-weight: 800;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.rn5-chip {
	display: inline-block; font-size: 12px; font-weight: 800;
	color: var(--save); border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px;
}
.rn5-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 12px;
	border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.rn5-pill--awaiting { color: var(--star); border-color: var(--star); background: transparent; }
.rn5-pill--preparing { color: var(--accent-bright); border-color: var(--accent-bright); background: transparent; }
.rn5-pill--completed, .rn5-pill--delivered { color: var(--save); border-color: var(--save); background: transparent; }
.rn5-pill--review { color: var(--danger); border-color: var(--danger); background: transparent; }

/* ================= CHROME: HEADER / NAV / FOOTER ================= */
.rn5-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--bg-deep); border-block-end: 1px solid var(--line);
}
.rn5-header-in {
	max-width: 1200px; margin-inline: auto; padding-inline: 16px;
	display: flex; align-items: center; gap: 12px; min-height: var(--header-h);
}
.rn5-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); flex: none; min-height: 44px; }
.rn5-logo:hover { text-decoration: none; }
.rn5-logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 10px;
	background: var(--accent); color: var(--on-accent);
	font-weight: 800; font-size: 20px;
}
.rn5-logo-word { font-weight: 800; font-size: 18px; }
.rn5-header-search { flex: 1 1 auto; display: none; }
@media (min-width: 768px) { .rn5-header-search { display: block; } }
/* V6 DEC-02 (two-tier chrome) supersedes the V5 R-G-2 in-row
 * mobile field: the mobile header is a 56px identity+action band,
 * and search lives in the contextual SearchRow (C6-07) below —
 * present on home/shop/category/search only. */
.rn5-searchrow { background: var(--bg-deep); border-block-end: 1px solid var(--line); }
.rn5-searchrow-in { max-width: 1200px; margin-inline: auto; padding: 4px 16px; }
.rn5-search.rn5-search--row .rn5-search-input { min-height: 44px; }
.rn5-search--row .rn5-search-go { display: none; }
@media (min-width: 768px) { .rn5-searchrow { display: none; } }
.rn5-header-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.rn5-hact {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 44px; height: 44px; padding-inline: 8px; border-radius: 10px; color: var(--ink);
	font-size: 12px; font-weight: 800;
}
@media (max-width: 479px) { .rn5-hact span { display: none; } .rn5-hact { padding-inline: 4px; } }
.rn5-hact:hover { background: var(--surface); text-decoration: none; }
.rn5-cart-count {
	position: absolute; top: 2px; inset-inline-end: 2px;
	min-width: 20px; height: 20px; padding-inline: 5px;
	border-radius: 999px; background: var(--accent); color: var(--on-accent);
	font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.rn5-catstrip { background: var(--bg-deep); border-block-end: 1px solid var(--line); }
.rn5-catstrip-in {
	max-width: 1200px; margin-inline: auto; padding: 8px 16px;
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.rn5-catstrip-in::-webkit-scrollbar { display: none; }
.rn5-catstrip a {
	flex: none; font-size: 14px; color: var(--ink);
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 999px; padding: 6px 14px;
	/* G-A-10: chrome links meet the 44px DS touch floor. With the
	 * strip's 8px block padding the whole chrome system (header
	 * 60 + strip 61) stays inside the §5 ~15% budget (121/844). */
	display: inline-flex; align-items: center; min-height: 44px;
}
.rn5-catstrip a:hover { text-decoration: none; border-color: var(--accent-bright); }
.rn5-bottomnav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
	display: flex; background: var(--bg-deep);
	border-block-start: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .rn5-bottomnav { display: none; } }
.rn5-bn-item {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 8px 2px 6px; font-size: 12px; color: var(--ink-2); min-height: 56px;
}
.rn5-bn-item:hover { text-decoration: none; }
.rn5-bn-item.is-active { color: var(--accent-bright); }
body.has-rn5-bottomnav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-rn5-bottomnav { padding-bottom: 0; } }
body.rn5-kb-open .rn5-bottomnav, body.rn5-kb-open .rn5-buybar { display: none; }
.rn5-crumbs { font-size: 12px; color: var(--ink-2); margin-block: 16px 8px; }
.rn5-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.rn5-crumbs .rn5-crumb { display: inline-flex; align-items: center; }
.rn5-catstrip a.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Woo 11 media gallery, contained by the DS frame (not overridden):
   the gallery's JS lifts its inline opacity when enhanced; the frame
   forces visibility + the 4/5 crop either way. */
.rn5-pgallery .woocommerce-product-gallery { opacity: 1 !important; }
/* §8.13 (Wave 10): product images render 100% complete — contain, never cover.
 * This catalogue's images are designed banners with titles/prices baked in;
 * cropping amputates information. The letterbox here stays transparent so the
 * product stage's registered family tint (§5) fills it where the stage applies. */
.rn5-pgallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--radius); }
.rn5-pgallery .flex-viewport { border-radius: var(--radius); }
.rn5-pgallery .flex-control-thumbs { display: flex; gap: 8px; margin-block-start: 8px; padding: 0; list-style: none; }
.rn5-pgallery .flex-control-thumbs img { width: 64px; height: 80px; object-fit: contain; background: var(--surface); border-radius: 8px; }
/* Woo's own variation price div is mirrored into the DS price block
   by rasid.js (found_variation) — the engine copy stays for data,
   visually the DS block is the one price. */
.single_variation .woocommerce-variation-price { display: none; }
.rn5-crumb + .rn5-crumb::before { content: "/"; margin-inline: 8px; color: var(--line); }
/* Correction round 2 (R-G-4): breadcrumb links (20px text) and
 * the variation reset link (26px) are inline text controls
 * whose layout boxes sit inside first-viewport budgets (the
 * product stack, R-G-7) that real padding would break. Their
 * HIT AREAS grow via an absolutely-positioned pseudo-element
 * (44px tall) without moving any layout box — the technique
 * and the reason are recorded per element in the round-2
 * record; controls that are buttons/fields got real boxes. */
.rn5-crumb a { position: relative; }
.rn5-crumb a::after { content: ""; position: absolute; inset: -12px -6px; }
a.reset_variations { position: relative; }
a.reset_variations::after { content: ""; position: absolute; inset: -9px -6px; }
.rn5-footer { background: var(--bg-deep); border-block-start: 1px solid var(--line); margin-block-start: 64px; }
.rn5-footer-in {
	max-width: 1200px; margin-inline: auto; padding: 40px 16px 24px;
	display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .rn5-footer-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.rn5-footer-brand .rn5-logo-word { font-size: 20px; }
.rn5-footer-tag { color: var(--ink-2); font-size: 14px; margin-block-start: 12px; max-width: 34ch; }
.rn5-footer-col h3 { font-size: 16px; margin-block-end: 12px; }
.rn5-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rn5-footer-col a { color: var(--ink-2); font-size: 14px; }
.rn5-footer-base {
	border-block-start: 1px solid var(--line); padding: 16px;
	max-width: 1200px; margin-inline: auto;
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	font-size: 12px; color: var(--ink-2);
}
.rn5-footer-pay { font-size: 12px; color: var(--ink-2); }

/* ================= SEARCH + SUGGESTIONS ================= */
/* .rn5-search IS the <form> (components.php) — a flex COLUMN:
 * .rn5-search-line (the field row) with the suggest sheet
 * stacked under it. The field row is a NOWRAP flex row of its
 * own, so no engine can wrap the button under the input or
 * overlap it: the previous single wrapping flex form rendered
 * correctly in Chromium but WebKit pushed the buttons onto a
 * second row where they overlapped (owner's iPhone drive
 * 2026-10-27 13:49; structural repair, owner ruling 14:52 —
 * wrapping is impossible by construction, not by measurement
 * luck). (FEED-232's mic note, the form's former second row,
 * was deleted with the feature — owner decision 2026-10-27.) */
.rn5-search { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.rn5-search-line { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; }
.rn5-search-ic {
	position: absolute; inset-inline-start: 12px; top: 50%;
	transform: translateY(-50%); color: var(--ink-2); pointer-events: none;
	display: inline-flex;
}
/* (0,2,0): the parent's physical padding-right on
 * input[type="search"] at (0,1,1) otherwise overrides the
 * logical inline-start padding in RTL and the icon overlaps
 * the placeholder text (fix round 2, matched-styles proof). */
.rn5-search .rn5-search-input { flex: 1 1 auto; min-width: 0; padding-inline-start: 44px; border-radius: var(--radius-s); min-height: 48px; }
body.rn5 .rn5-search-go {
	flex: none; margin-inline-start: 8px; min-height: 48px;
	background: var(--accent); color: var(--on-accent); border: 0;
	border-radius: var(--radius-s); padding-inline: 18px; font-weight: 800; cursor: pointer;
}
.rn5-suggest {
	position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 70;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 16px 40px rgba(0,0,0,.45);
	max-height: min(70vh, 480px); overflow-y: auto;
}
.rn5-sug-row {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; color: var(--ink); min-height: 56px;
}
.rn5-sug-row:hover, .rn5-sug-row.is-active { background: var(--surface-2); text-decoration: none; }
.rn5-sug-thumb { width: 40px; height: 50px; object-fit: contain; background: var(--surface); border-radius: 6px; flex: none; }
.rn5-sug-thumb--empty { background: var(--surface-2); display: inline-block; }
.rn5-sug-title { flex: 1 1 auto; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.rn5-sug-mode { font-size: 12px; color: var(--ink-2); font-weight: 800; }
.rn5-sug-oos { color: var(--danger); }
.rn5-sug-price { font-weight: 800; font-size: 14px; white-space: nowrap; }
.rn5-sug-all {
	display: block; padding: 12px 14px; text-align: center; font-weight: 800;
	background: var(--surface-2); color: var(--ink); border-block-start: 1px solid var(--line);
}

/* ================= SHEETS / TOAST / SKELETON ================= */
.rn5-sheet { position: fixed; inset: 0; z-index: 90; }
.rn5-sheet[hidden] { display: none; }
.rn5-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity var(--dur-med) var(--ease); }
.rn5-sheet.is-open .rn5-sheet-backdrop { opacity: 1; }
.rn5-sheet-panel {
	position: absolute; inset-inline: 0; bottom: 0; max-height: 86vh; overflow-y: auto;
	background: var(--bg); border-radius: 18px 18px 0 0; padding: 20px 16px 32px;
	transform: translateY(24px); opacity: 0; transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
@media (min-width: 768px) {
	.rn5-sheet-panel { inset-inline: auto; width: min(520px, 92vw); top: 0; bottom: 0; max-height: none; border-radius: 0; inset-inline-end: 0; transform: translateX(-24px); }
	[dir="rtl"] .rn5-sheet-panel { transform: translateX(24px); }
}
.rn5-sheet.is-open .rn5-sheet-panel { transform: none; opacity: 1; }
.rn5-toast {
	position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline: 16px;
	z-index: 95; background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 12px 16px; text-align: center; font-weight: 800; font-size: 14px;
	opacity: 0; pointer-events: none; transform: translateY(8px);
	transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
@media (min-width: 768px) { .rn5-toast { bottom: 24px; inset-inline: auto; inset-inline-end: 24px; min-width: 260px; } }
.rn5-toast.is-show { opacity: 1; transform: none; }
.rn5-skel { border-radius: var(--radius); background: var(--surface); padding: 12px; }
.rn5-skel-line { height: 12px; border-radius: 6px; background: var(--surface-2); margin-block-end: 10px; animation: rn5-pulse 1.2s ease-in-out infinite; }
@keyframes rn5-pulse { 50% { opacity: .5; } }

/* ================= THE ONE CARD (component 4) ================= */
.rn5-stars { position: relative; display: inline-flex; line-height: 0; }
.rn5-stars-bg { display: inline-flex; color: var(--line); }
.rn5-stars-fg { position: absolute; top: 0; inset-inline-start: 0; display: inline-flex; overflow: hidden; color: var(--star); }
.rn5-stars-fg .rn5-star, .rn5-stars-bg .rn5-star { flex: none; display: inline-flex; }
.rn5-ribbon {
	position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
	background: var(--accent); color: var(--on-accent);
	font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
}
.rn5-cover-img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface); } /* §8.13: full frame, DS surface letterbox */
.rn5-namecover {
	display: flex; align-items: center; justify-content: center; text-align: center;
	width: 100%; height: 100%; padding: 16px; background: var(--surface-2);
	border-block-end: 3px solid var(--fam-generic);
}
.rn5-namecover-word { font-weight: 800; font-size: 20px; line-height: 1.5; color: var(--ink); }
.rn5-fam-stream { border-color: var(--fam-stream); }
.rn5-fam-game { border-color: var(--fam-game); }
.rn5-fam-cards { border-color: var(--fam-cards); }
.rn5-fam-soft { border-color: var(--fam-soft); }
.rn5-fam-social { border-color: var(--fam-social); }
.rn5-fam-conn { border-color: var(--fam-conn); }
.rn5-fam-generic { border-color: var(--fam-generic); }
.rn5-card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.rn5-card-cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.rn5-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* The flex gap is the card's only rhythm: the parent's global
 * block margins (p { margin-block-end: 20px } class rules) added
 * ~20px between card rows and pushed the price band down. */
.rn5-card-body > * { margin-block: 0; }
.rn5-card-title {
	font-size: 16px; line-height: 1.55;
	/* Component 13 spec (correction round 1): two-line clamp with a
	 * reserved height, so the price band sits at one offset in
	 * every card of a rail/grid regardless of title length. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: calc(2 * 1.55em);
}
.rn5-card-title a { color: var(--ink); }
.rn5-card-title a:hover { color: var(--accent-bright); text-decoration: none; }
.rn5-card-meta { font-size: 12px; color: var(--ink-2); }
.rn5-card-oos { color: var(--danger); font-weight: 800; }
.rn5-card.is-oos .rn5-card-cover { opacity: .55; }
.rn5-card-rating { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.rn5-card-price { margin-top: auto; padding-block-start: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rn5-price-num { font-weight: 800; font-size: 18px; color: var(--ink); }
.rn5-price-num--xl { font-size: 34px; }
.rn5-price-was { color: var(--ink-2); text-decoration: line-through; font-size: 14px; }
.rn5-price-cur { font-size: 12px; color: var(--ink-2); font-weight: 800; }
.rn5-card--rail { flex: 0 0 168px; scroll-snap-align: start; }
@media (max-width: 767px) { .rn5-card--rail { flex-basis: 150px; } .rn5-card--rail .rn5-card-title { font-size: 14px; } }
@media (min-width: 768px) { .rn5-card--rail { flex-basis: 196px; } }
.rn5-card--row { flex-direction: row; }
.rn5-card--row .rn5-card-cover { flex: 0 0 96px; aspect-ratio: auto; }
.rn5-card--row .rn5-card-body { padding: 10px 12px; }
.rn5-rail {
	display: flex; gap: 12px; overflow-x: auto; padding-block-end: 8px;
	scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rn5-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 768px) { .rn5-grid { gap: 16px; } }
@media (min-width: 1024px) { .rn5-grid { grid-template-columns: repeat(4, 1fr); } }

/* ================= HOME: TILES / BUDGET / CERTAINTY STRIP ================= */
.rn5-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .rn5-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .rn5-tiles { grid-template-columns: repeat(6, 1fr); } }
.rn5-tile {
	display: block; background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden; color: var(--ink);
}
.rn5-tile:hover { text-decoration: none; border-color: var(--accent-bright); }
.rn5-tile-art { height: 64px; background: var(--surface-2); border-block-end: 3px solid var(--fam-generic); }
.rn5-tile-word { display: block; padding: 12px 14px 2px; font-weight: 800; font-size: 16px; }
.rn5-tile-meta { display: block; padding: 0 14px 12px; font-size: 12px; color: var(--ink-2); }
/* Correction round 1 (G-B5/G-A-5): the hero is a compact search
 * band heading, not a stage — no second search form (the header
 * owns search), padding and type sized so a real product + price
 * enter the first viewport below it. */
.rn5-hero { padding-block: 12px 2px; text-align: center; }
.rn5-hero h1 { font-size: 26px; margin-block-end: 6px; }
.rn5-hero-sub { color: var(--ink-2); max-width: 52ch; margin-inline: auto; }
.rn5-hero .rn5-search { max-width: 560px; margin: 24px auto 0; text-align: start; }
/* Home sections sit tighter than the generic rhythm: the §5
 * product anchor is a composition budget, not a margin wish. */
.rn5-home .rn5-section { margin-block: 18px; }
/* Family tiles: one snap row on mobile (a 3-row grid pushed the
 * first rail ~360px down); grid returns on wider screens. */
@media (max-width: 767px) {
	.rn5-tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 6px; align-items: flex-start; }
	.rn5-tile { flex: 0 0 138px; scroll-snap-align: start; height: 88px; overflow: hidden; }
	.rn5-tile-art { height: 34px; flex: none; }
	.rn5-tile-art img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
	/* Tile names clamp to two lines at one reserved height: the
	 * tallest name («بطاقات الألعاب والمتاجر», 3 lines at 16px)
	 * previously set a ~190px row height and pushed the first
	 * product rail below the fold (G-B5/G-A-5). */
	.rn5-tile-word { font-size: 14px; padding: 8px 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.5em + 8px); }
	.rn5-tile-meta { padding: 0 10px 8px; }
	/* Rail cards size to their own content on mobile (no stretch
	 * to the tallest sibling — the price must not be pushed down
	 * by margin-top:auto inside an over-tall body), and the rail
	 * cover goes 4/3: 4/5 portrait covers cost ~74px the §5
	 * anchor cannot afford. Grid cards keep the 4/5 cover. */
	.rn5-rail { align-items: flex-start; }
	.rn5-card--rail .rn5-card-cover { aspect-ratio: 4 / 3; }
	/* The category badge is one line on rail cards: wrapped to
	 * two lines it cost 46px above the title. */
	.rn5-card--rail .rn5-badge { font-size: 11px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; align-self: flex-start; }
	.rn5-home .rn5-section-head { margin-block-end: 6px; }
	/* Rail-card internals tighten by ~10px on mobile: the §5
	 * anchor is measured on the first price, and every row above
	 * it is budget. */
	.rn5-card--rail .rn5-card-body { gap: 4px; padding-top: 10px; }
	.rn5-tile-word { font-size: 13px; min-height: calc(2 * 1.5em + 6px); }
}
/* Correction round 2 (R-G-3): the logged-in home's first price
 * sat at 827–857 @390×844 — fully under the fixed bottom nav
 * (top edge 785) — because the resume slot's ~64px pushed the
 * first rail past the fold line the guest barely clears. The
 * mobile home composition tightens by spacing only (type scale
 * untouched): a shorter hero, the tiles heading visually hidden
 * (kept for assistive tech — the section is aria-labelled and
 * every tile names its category), 12px section rhythm, an 82px
 * tile row and a slimmer resume bar. Rail heads grow slightly
 * instead: the view-all link is now a real 44px target (R-G-4).
 * Measured result is in the round-2 record. */
@media (max-width: 767px) {
	.rn5-hero { padding-block: 8px 0; }
	.rn5-hero h1 { font-size: 22px; line-height: 1.3; margin-block-end: 4px; }
	.rn5-home .rn5-section { margin-block: 12px; }
	.rn5-section-head--tiles {
		position: absolute !important; width: 1px; height: 1px;
		padding: 0; margin: -1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.rn5-tiles { padding-block-end: 4px; }
	.rn5-tile { height: 82px; }
	.rn5-resume { padding: 6px 10px; margin-block: 6px; }
	.rn5-card--rail .rn5-card-body { padding-top: 8px; }
}
/* Resume slot (component: returning-customer next action) — one
 * compact bar: last order + its real status + the order link. */
.rn5-resume {
	display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 12px; margin-block: 8px;
	font-size: 13px;
}
/* One line, always: the label truncates, the pill and the link
 * never wrap (a wrapped resume bar cost ~30px and pushed the
 * logged-in home's first price below the fold at 393×852). */
.rn5-resume .rn5-resume-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rn5-resume .rn5-pill, .rn5-resume a { flex: none; }
.rn5-resume-label { font-weight: 800; font-size: 14px; }
.rn5-resume a { font-weight: 800; font-size: 14px; margin-inline-start: auto; }
/* Correction round 2 (R-G-4): the resume bar's order link
 * measured 23px (text line). Padding grows its box past 44px;
 * the negative margins keep the bar's one-line height. */
.rn5-resume a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.rn5-budget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.rn5-budget-form { display: grid; gap: 10px; }
.rn5-budget-label { font-weight: 800; font-size: 14px; }
.rn5-budget-row { display: flex; gap: 8px; }
.rn5-budget-row .rn5-input { flex: 1; }
.rn5-budget-count { font-weight: 800; margin-block: 14px 10px; }
.rn5-certainty-strip {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px; text-align: center;
}
.rn5-certainty-strip p { font-weight: 800; }
.rn5-certainty-strip .rn5-certainty-where { font-weight: 400; }

/* ================= LISTING / SEARCH RESULTS ================= */
.rn5-listhead { margin-block: 20px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.rn5-listhead h1 { font-size: 22px; }
.rn5-resultcount { color: var(--ink-2); font-size: 14px; }
.rn5-toolbar { display: flex; gap: 8px; align-items: center; }
.rn5-toolbar select { width: auto; min-height: 44px; }
.woocommerce-pagination { margin-block-start: 32px; }
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding-inline: 10px;
	border: 1px solid var(--line); border-radius: var(--radius-s);
	background: var(--surface); color: var(--ink); font-weight: 800;
}
.woocommerce-pagination .page-numbers.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rn5-zero { text-align: center; padding-block: 32px; }
.rn5-zero-title { font-size: 22px; font-weight: 800; margin-block-end: 8px; }
.rn5-zero-line { color: var(--ink-2); margin-block-end: 16px; }
.rn5-zero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rn5-zero-chips a {
	background: var(--surface); border: 1px solid var(--line); color: var(--ink);
	border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 800;
	/* Correction round 2 (R-G-4): the zero-state / 404 chips
	 * measured 41px — they are the screen's actions. */
	display: inline-flex; align-items: center; min-height: 44px;
}

/* ================= PRODUCT (components 12–26) ================= */
.rn5-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block-start: 16px; }
.rn5-product > * { min-width: 0; }
@media (min-width: 1024px) {
	.rn5-product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
	.rn5-pgallery { position: sticky; top: calc(var(--header-h) + 16px); }
}
.rn5-pcover { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-deep); border: 1px solid var(--line); }
.rn5-pcover .rn5-namecover-word { font-size: 28px; }
.rn5-pthumbs { display: flex; gap: 8px; margin-block-start: 8px; overflow-x: auto; }
.rn5-pthumbs img { width: 64px; height: 80px; object-fit: contain; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); }
.rn5-identity .rn5-badge { margin-block-end: 10px; }
.rn5-ptitle { font-size: 28px; margin-block-end: 8px; overflow-wrap: anywhere; }
.rn5-rating-anchor { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.rn5-rating-none { color: var(--ink-2); font-size: 14px; }
.rn5-buyzone, form.cart {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px; margin-block-start: 16px;
	display: grid; gap: 16px;
}
.rn5-priceblock { display: grid; gap: 4px; }
.rn5-priceblock .rn5-price-num { font-size: 22px; }
.rn5-priceblock .woocommerce-variation-price .price { font-size: 34px; font-weight: 800; }
.rn5-price-save { color: var(--save); font-weight: 800; font-size: 14px; }
.rn5-price-final { color: var(--ink-2); font-size: 14px; border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.rn5-priceblock .rn5-price-final { margin-block-start: 6px; }
.rn5-points-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
/* Correction round 2 (R-G-8): rasid.js drives this slot purely
 * through the hidden attribute (unhide on found_variation, hide
 * on reset_data) — but the flex declaration above outranks the
 * UA's [hidden] rule, so after a variation reset the slot stayed
 * rendered with the STALE points figure while its hidden
 * attribute was already true (probe-verified: hiddenAttr true,
 * display flex, stale text). The attribute must win. */
.rn5-points-line[hidden] { display: none; }
/* Correction round (D-A2b): inside the variations form, the
 * post-selection lines (saving / points) no longer enter the
 * price block's flow. They overlay the price zone, whose height
 * is reserved identically in both states — so selecting a
 * variation adds ZERO flow height above the certainty block:
 * the composed decision stack does not jump at the decision
 * moment (audit §3: selection pushed certainty down ≈127px on
 * staging's 374, ≈39px on the bench SUB fixture). The static
 * price block (rn5_price_block) is outside the form scope and
 * untouched. */
form.variations_form .rn5-priceblock { position: relative; }
form.variations_form .rn5-priceblock [data-rn5-vprice] { min-height: 54px; }
form.variations_form .rn5-priceblock .rn5-price-save,
form.variations_form .rn5-priceblock .rn5-points-line {
	position: absolute; inset-inline-end: 0; z-index: 1;
}
form.variations_form .rn5-priceblock .rn5-price-save { top: 2px; }
form.variations_form .rn5-priceblock .rn5-points-line { top: 26px; }
.rn5-certainty { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; background: var(--bg); }
.rn5-certainty-title { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-block-end: 8px; }
.rn5-certainty-method { font-size: 14px; }
.rn5-certainty-where { font-size: 14px; color: var(--ink-2); margin-block-start: 4px; }
form.cart { display: grid; gap: 16px; }
form.variations_form { display: grid; gap: 16px; }
table.variations { width: 100%; border-collapse: collapse; }
table.variations th, table.variations td { padding: 6px 0; text-align: start; vertical-align: middle; }
table.variations th.label { font-weight: 800; font-size: 14px; padding-inline-end: 12px; width: 34%; }
table.variations select { min-height: 48px; }
.variation { display: grid; gap: 10px; }
.single_variation_wrap { display: grid; gap: 14px; }
.woocommerce-variation-availability .stock.in-stock { color: var(--save); font-weight: 800; font-size: 14px; }
.woocommerce-variation-availability .stock.out-of-stock { color: var(--danger); font-weight: 800; font-size: 14px; }
.rn5-atc-row { display: flex; gap: 10px; align-items: stretch; }
.rn5-atc-row .quantity { flex: 0 0 110px; }
.rn5-atc-row .quantity input.qty { text-align: center; min-height: 52px; }
button.single_add_to_cart_button, .rn5-atc {
	flex: 1; min-height: 52px; background: var(--accent); color: var(--on-accent);
	border: 0; border-radius: var(--radius-s); font-weight: 800; font-size: 18px; cursor: pointer;
}
button.single_add_to_cart_button:hover, .rn5-atc:hover { background: var(--accent); /* hover holds the ground — see the primary-hover note at .rn5-btn--primary */ }
button.single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }
.rn5-stock-note { font-size: 14px; }
.rn5-stock-note.in { color: var(--save); font-weight: 800; }
.rn5-stock-note.out { color: var(--danger); font-weight: 800; }
/* V6 REPEAL (DEC-06, WP-6): the V5 correction-round mobile
 * product grid (identity beside a 92px cover thumb, the summary
 * dissolved via display:contents so its children became grid
 * items) is REPLACED by the V6 composition — media stage +
 * decision card (see the WP-6 block). The display:contents
 * technique silently nulled any card styling on the summary;
 * it is retired, and the summary is a real box again. The
 * spacing tightenings from that era that remain composition-
 * neutral are kept below. */
@media (max-width: 767px) {
	.rn5-product { gap: 12px; margin-block-start: 6px; }
	.rn5-pgallery .woocommerce-product-gallery__image img { aspect-ratio: 4 / 5; }
	.rn5-pgallery .flex-control-thumbs { display: none; }
	.rn5-identity { min-width: 0; }
	.rn5-ptitle { font-size: 22px; }
	.rn5-crumbs { margin-block: 6px 2px; }
	.rn5-certainty { padding: 8px 10px; }
	.rn5-priceblock .rn5-price-num { font-size: 20px; }
	/* Correction round 2 (R-G-7): the variable product's
	 * certainty block ended at 869 @390×844 (fits @393×852) —
	 * the composition carried ~25px of slack above and inside
	 * it. Tightened by spacing only (the DS type scale is
	 * untouched, the §4.2 order is untouched): a 92px cover
	 * thumb column (was 104), 10px form gaps, tighter variant
	 * cards, a 1.5 line-height inside the certainty text and a
	 * shallower final-price rule. The simple product's stack
	 * tightens by the same amounts; nothing is hidden. */
	.rn5-certainty-title { margin-block-end: 6px; }
	.rn5-certainty-method, .rn5-certainty-where { line-height: 1.5; }
	.rn5-priceblock .rn5-price-final { padding-block-start: 6px; margin-block-start: 4px; }
	.rn5-product .rn5-vargroup { gap: 6px; }
	.rn5-product .rn5-varcard { padding: 8px 12px; }
	.rn5-product .rn5-varcards { padding-block-end: 2px; }
}
/* Variant radio cards (component 19, correction round 1 / G-B4):
 * the engine <select> stays as the data binding (clipped, never
 * display:none — Woo's JS reads and writes it); the cards are
 * the presentation. One snap row on mobile keeps the selector
 * inside the first-viewport budget; a grid takes over on desktop. */
.rn5-vargroup { position: relative; display: grid; gap: 8px; }
.rn5-vargroup + .rn5-vargroup { margin-block-start: 4px; }
.rn5-vargroup-label { font-weight: 800; font-size: 14px; }
.rn5-varselect {
	position: absolute !important; width: 1px; height: 1px;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.rn5-varcards {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(122px, 44%);
	gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 4px;
}
@media (min-width: 768px) {
	.rn5-varcards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
}
.rn5-varcard {
	display: grid; gap: 2px; scroll-snap-align: start; cursor: pointer;
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 10px 12px; min-height: 44px;
}
/* Correction round (D-A5): the engine's variation reset link
 * («إزالة») computed rgb(51,51,51) on the surface card (~1.3:1 —
 * effectively invisible) in the post-selection state: the
 * parent's link colour wins there, the same tie family as
 * Micro-Fix 2, on a state the WP-2 probe set never enumerated.
 * DS-scoped at form level so the way back from a wrong plan is
 * always findable. (The post-selection state is part of the
 * permanent census set from this round on.) */
body.rn5 form.variations_form a.reset_variations { color: var(--accent); }
.rn5-varcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rn5-varcard.is-selected { border-color: var(--accent-bright); background: var(--surface-2); }
.rn5-varcard.is-disabled { opacity: .45; }
.rn5-varcard-name { font-weight: 800; font-size: 14px; }
.rn5-varcard-price { font-weight: 800; font-size: 16px; color: var(--ink); }
.rn5-varcard-delta { font-size: 12px; color: var(--save); font-weight: 800; }
.rn5-varcard-fact { font-size: 12px; color: var(--ink-2); }
.rn5-buybar {
	position: fixed; bottom: calc(64px + env(safe-area-inset-bottom)); inset-inline: 12px; z-index: 55;
	display: flex; align-items: center; gap: 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 10px 14px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
}
@media (min-width: 768px) { .rn5-buybar { display: none; } }
.rn5-buybar-price { font-weight: 800; font-size: 18px; }
.rn5-buybar .rn5-btn { flex: 1; }
.rn5-sample {
	border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 16px; background: var(--surface);
}
.rn5-sample-title { font-size: 16px; margin-block-end: 10px; }
.rn5-sample-card {
	background: var(--bg-deep); border: 1px dashed var(--line); border-radius: var(--radius-s);
	padding: 14px; text-align: center; margin-block-end: 10px;
}
.rn5-sample-card code { font-size: 18px; letter-spacing: 1px; color: var(--ink); direction: ltr; unicode-bidi: embed; }
.rn5-sample-body { font-size: 14px; color: var(--ink-2); }
.rn5-sample-note { font-size: 12px; color: var(--ink-2); margin-block-start: 8px; }
.rn5-psection { margin-block-start: 40px; }
.rn5-psection > h2 { margin-block-end: 16px; }
.rn5-facts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.rn5-facts li { display: flex; gap: 16px; padding: 12px 16px; background: var(--surface); }
.rn5-facts li + li { border-block-start: 1px solid var(--line); }
.rn5-facts dt, .rn5-facts .rn5-fact-k { font-weight: 800; font-size: 14px; flex: 0 0 38%; }
.rn5-facts dd, .rn5-facts .rn5-fact-v { margin: 0; font-size: 14px; }
.rn5-prose { font-size: 16px; color: var(--ink); }
.rn5-prose p { margin-block-end: 12px; }
.rn5-prose ul, .rn5-prose ol { padding-inline-start: 20px; margin-block-end: 12px; }
.rn5-revsum { display: grid; gap: 16px; margin-block-end: 24px; }
@media (min-width: 768px) { .rn5-revsum { grid-template-columns: auto 1fr; gap: 32px; align-items: center; } }
.rn5-revsum-avg { font-size: 40px; font-weight: 800; line-height: 1.1; }
.rn5-revsum-count { color: var(--ink-2); font-size: 14px; }
.rn5-revbar { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-block-end: 6px; }
.rn5-revbar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rn5-revbar-fill { height: 100%; background: var(--star); border-radius: 999px; }
.rn5-revbar-n { color: var(--ink-2); min-width: 28px; }
.rn5-reviewitem { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); padding: 16px; margin-block-end: 12px; }
.rn5-reviewitem .rn5-review-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-block-end: 8px; }
.rn5-verified { color: var(--save); font-size: 12px; font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
.rn5-awaiting { color: var(--star); font-size: 12px; font-weight: 800; }

/* ================= CART (screen 5) ================= */
.rn5-cartlayout { display: grid; gap: 24px; margin-block-start: 20px; }
@media (min-width: 1024px) { .rn5-cartlayout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.rn5-cartline {
	display: grid; grid-template-columns: 72px 1fr; gap: 14px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 14px; margin-block-end: 12px;
}
.rn5-cartline img { width: 72px; height: 90px; object-fit: contain; background: var(--surface); border-radius: 8px; }
.rn5-cartline-name { font-weight: 800; }
.rn5-cartline-name a { color: var(--ink); }
.rn5-cartline-meta { font-size: 12px; color: var(--ink-2); }
/* Cart-line delivery-mode line (component 31, correction round 1
 * / G-B9): the bridge's mode for the line's product, same source
 * as the product certainty block. Absent when unclassified. */
.rn5-cartline-mode { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); }
.rn5-cartline-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 10px; flex-wrap: wrap; }
.rn5-cartline .quantity input.qty { width: 84px; text-align: center; }
/* Correction round 2 (R-G-4): WoodMart's quantity rule
 * div.quantity input[type="number"] (0,2,1) sets
 * min-height: var(--wd-form-height) = 42px, outranking this
 * layer's global input rule (0,1,1) — the cart quantity field
 * measured 42px. Re-anchored at body scope (0,4,2). */
body.rn5 .rn5-cartline .quantity input.qty { min-height: 48px; }
.rn5-cartline-remove { color: var(--danger); font-size: 14px; }
.rn5-cartline-remove a { color: var(--danger); }
/* Correction round 2 (R-G-4): the remove control is a real
 * action (role="button") — it measured 27px (text height). It
 * becomes a 44px inline-flex hit box; the line's foot row is
 * already 48px tall (the quantity field), so nothing grows. */
.rn5-cartline-remove a.remove {
	display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px;
}
.rn5-totals {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px;
}
.rn5-totals h2 { font-size: 18px; margin-block-end: 14px; }
.rn5-totals table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rn5-totals th, .rn5-totals td { padding: 8px 0; text-align: start; }
.rn5-totals td { text-align: end; }
.rn5-totals .order-total th, .rn5-totals .order-total td { font-size: 18px; font-weight: 800; border-block-start: 1px solid var(--line); }
.rn5-totals .rn5-price-final { margin-block-start: 12px; }
.rn5-coupon { display: flex; gap: 8px; margin-block-end: 16px; }
.rn5-coupon input { flex: 1; }
/* Core basket companions (idea-basket module markup, fired at
 * woocommerce_before_cart_collaterals): contained into the DS —
 * the module's own stylesheet is light-themed, so its cards and
 * text are repainted here at (0,2,0)+. Facts/actions unchanged. */
/* Correction round 1 (G-A-7): the companions hook now fires
 * AFTER the collaterals in cart.php, so in the cart grid the
 * module's block spans the full row beneath totals + CTA — the
 * cart's job order (lines → totals → CTA → expand) is the
 * composition, with the hook itself preserved. */
.rn5-cartlayout > .rn-idea-cart-setup { grid-column: 1 / -1; }
.rn5-wrap .rn-idea-cart-setup { margin-block-start: 32px; }
.rn5-wrap .rn-idea-companions-sub { color: var(--ink-2); }
.rn5-wrap .rn-idea-companion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.rn5-wrap .rn-idea-companion img { background: var(--surface-2); border-radius: var(--radius-s); }
.rn5-wrap .rn-idea-companion h4 a { color: var(--ink); }
.rn5-wrap .rn-idea-companion-price { color: var(--ink); font-weight: 800; }
.rn5-wrap .rn-idea-companion-reason { color: var(--ink-2); font-size: 12px; }
.rn5-wrap .rn-idea-add { display: inline-block; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 14px; font-weight: 800; }

/* ================= CHECKOUT (screen 6) ================= */
/* Step indicator + persistent summary (components 36/37,
 * correction round 1 / G-B7 / G-A-6): real steps only — cart
 * (done, linked), checkout (current), confirmation (upcoming).
 * The summary bar sticks under the header and is refreshed by
 * Woo's own order-review fragments (hooks.php filter). */
.rn5-steps {
	display: flex; gap: 8px; align-items: center; list-style: none;
	margin: 0 0 14px; padding: 0; font-size: 14px;
}
.rn5-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 800; }
/* Correction round 2 (R-G-4): a completed step is a link back
 * (السلة) — it measured 23px. Checkout carries no first-viewport
 * anchor budget, so the link gets a real 44px box. */
.rn5-steps li a { display: inline-flex; align-items: center; min-height: 44px; }
.rn5-steps li + li::before { content: "‹"; color: var(--line); }
.rn5-steps li.is-done { color: var(--save); }
.rn5-steps li.is-done a { color: var(--save); }
.rn5-steps li.is-current { color: var(--ink); }
.rn5-checksummary {
	/* Device-gate response (2026-11-03): NOT sticky any more. As a
	 * sticky bar it rode over the form while scrolling and covered
	 * the bank card's top edge (reproduced in the owner's state),
	 * and its fixed one-line height could clip the total when the
	 * line wrapped. In-flow it can cover nothing and clips nothing. */
	position: static;
	display: flex; justify-content: space-between; gap: 12px; align-items: center;
	background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 10px 14px; margin-block-end: 16px; font-weight: 800; font-size: 14px;
}
.rn5-checksummary-total { font-size: 16px; }
.rn5-checklayout { display: grid; gap: 24px; margin-block-start: 20px; }
@media (min-width: 1024px) { .rn5-checklayout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.rn5-checkcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.rn5-checkcol h2, .rn5-checkcol h3 { margin-block-end: 16px; }
.woocommerce-checkout .form-row { margin-block-end: 14px; }
body.rn5 .woocommerce-checkout label { display: block; font-weight: 800; font-size: 14px; margin-block-end: 6px; color: var(--ink); }
.rn5-reviewtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rn5-reviewtable th, .rn5-reviewtable td { padding: 8px 0; text-align: start; border-block-end: 1px solid var(--line); }
.rn5-reviewtable td.amount, .rn5-reviewtable .product-total { text-align: end; }
.rn5-reviewtable .order-total th, .rn5-reviewtable .order-total td { font-size: 18px; font-weight: 800; border-block-end: 0; }
/* Correction round 2 (R-G-4): the checkout coupon toggle is an
 * action (it opens the coupon form) rendered as an inline text
 * link — it measured 27px. Padding grows its box to ~47px; the
 * negative margins keep the notice's line rhythm unchanged. */
.woocommerce-form-coupon-toggle .showcoupon { display: inline-block; padding-block: 11px; margin-block: -11px; }
#payment { margin-block-start: 20px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
#payment li.payment_method {
	border: 1px solid var(--line); border-radius: var(--radius-s);
	background: var(--bg); padding: 14px 16px;
}
#payment li.payment_method > label { font-weight: 800; display: inline; }
#payment .payment_box { margin-block-start: 10px; font-size: 14px; color: var(--ink-2); }
#payment .payment_box fieldset { border: 0; padding: 0; margin: 0; }
#place_order {
	width: 100%; min-height: 56px; background: var(--accent); color: var(--on-accent);
	border: 0; border-radius: var(--radius-s); font-weight: 800; font-size: 18px; cursor: pointer;
}
#place_order:hover { background: var(--accent); /* hover holds the ground — see the primary-hover note at .rn5-btn--primary */ }
.rn5-checkmicro { text-align: center; color: var(--ink-2); font-size: 14px; margin-block-start: 12px; }
.rn5-thankyou-hero { text-align: center; padding-block: 32px 8px; }
.rn5-thankyou-hero h1 { margin-block-end: 10px; }
.rn5-delivkey {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg-deep); border: 1px solid var(--save); border-radius: var(--radius-s);
	padding: 14px 16px; margin-block-end: 12px;
}
.rn5-delivkey code { flex: 1; font-size: 18px; direction: ltr; unicode-bidi: embed; text-align: end; }
.rn5-timeline { list-style: none; margin: 0; padding: 0; padding-inline: 16px; }
.rn5-tl-node { display: flex; gap: 12px; position: relative; padding-block-end: 20px; }
.rn5-tl-node::before {
	content: ""; position: absolute; inset-inline-start: 9px; top: 22px; bottom: 0;
	width: 2px; background: var(--line);
}
.rn5-tl-node:last-child::before { display: none; }
.rn5-tl-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); flex: none; z-index: 1; }
.rn5-tl-node.is-done .rn5-tl-dot { background: var(--save); border-color: var(--save); }
.rn5-tl-node.is-now .rn5-tl-dot { border-color: var(--accent-bright); background: var(--accent); }
.rn5-tl-label { font-weight: 800; font-size: 14px; }
.rn5-tl-date { font-size: 12px; color: var(--ink-2); }

/* ================= AUTH (screen 7) ================= */
.rn5-authwrap { max-width: 480px; margin-inline: auto; padding-block: 10px 16px; }
/* Compact brand band (Direction §3.7, correction round 1): the
 * store mark + name in one 44px row — brand presence that costs
 * no form height (decoration may not push the form down, §5). */
.rn5-authband {
	display: flex; align-items: center; gap: 10px; min-height: 44px;
	margin-block-end: 10px;
}
.rn5-authband .rn5-logo-word { font-size: 18px; }
.rn5-authcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.rn5-authcard h1, .rn5-authcard h2 { margin-block-end: 10px; }
.rn5-authcard .woocommerce-form-login, .rn5-authcard .woocommerce-form-register,
.rn5-authcard .lost_reset_password { display: grid; gap: 4px; }
/* Correction round 2 (R-G-9): the auth stack tightens so the
 * register card's heading + first field enter the first
 * viewport under the (mandated, untouched) login-first order:
 * 12px screen-title margin (base rule), 10px wrap head padding,
 * 10px band margin, 18px card padding, 10px card-heading
 * margin, 1.4 label line-height and an 8px form-row rhythm —
 * plus the template changes (benefits below the register form,
 * remember-me + lost-password on one meta row). */
body.rn5 .rn5-authcard label { line-height: 1.4; }
body.rn5 .rn5-authcard .form-row { margin-block-end: 8px; }
.rn5-login-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The lost-password link is the meta row's action: its box
 * grows past 44px by padding, the negative margins keep the
 * row's height where it was (R-G-4). */
.rn5-login-meta .lost_password a { display: inline-block; padding-block: 11px; margin-block: -11px; }
body.rn5 .rn5-authcard .rn5-login-meta .form-row,
body.rn5 .rn5-authcard .rn5-login-meta .lost_password { margin: 0; }
.rn5-auth-switch { text-align: center; margin-block-start: 20px; font-size: 14px; color: var(--ink-2); }
/* The benefits list now sits BELOW the register form (R-G-9):
 * its margin is head room, not foot room. */
.rn5-auth-benefits { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.rn5-auth-benefits li { display: flex; gap: 10px; align-items: center; font-size: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; }
.rn5-pwwrap { position: relative; display: block; }
/* Woo's JS wraps the password input in .password-input and injects
 * its OWN .show-password-input button (light #f3f3f3 block — the
 * "white block" of G-B19/G-A-3) alongside the DS toggle. Two
 * toggles for one field is a duplicate control: the engine button
 * is retired inside the DS wrap, the DS toggle is the one control,
 * seated inside the field's end edge. */
.rn5-pwwrap .password-input { display: block; position: relative; }
.rn5-pwwrap .show-password-input { display: none !important; }
.rn5-pwwrap input { padding-inline-end: 52px; }
body.rn5 .rn5-pwtoggle {
	position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; color: var(--ink-2); cursor: pointer; z-index: 2;
}
.woocommerce-form-login .woocommerce-button, .woocommerce-form-register .woocommerce-button,
.lost_reset_password .woocommerce-button {
	width: 100%; min-height: 52px; background: var(--accent); color: var(--on-accent);
	border: 0; border-radius: var(--radius-s); font-weight: 800; font-size: 16px; cursor: pointer;
}
/* Correction round 1 (G-B2/G-A-3): the accent rules above (0,2,0)
 * lose to the content-frame's `.rn5-frame button[type="submit"]`
 * (0,2,1, --surface-2) because the auth forms render inside
 * .rn5-frame — both submits computed to grey rgb(59,59,59). The
 * primary engine submits are raised above the frame default by
 * component scope (auth card + lost/reset forms), not by weakening
 * the frame rule plugin content relies on. */
body.rn5 .rn5-authcard .woocommerce-form-login button[type="submit"],
body.rn5 .rn5-authcard .woocommerce-form-register button[type="submit"],
body.rn5 .woocommerce .lost_reset_password button[type="submit"],
body.rn5 #add_payment_method button[type="submit"],
body.rn5 #add_payment_method input[type="submit"] {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
body.rn5 .rn5-authcard .woocommerce-form-login button[type="submit"]:hover,
body.rn5 .rn5-authcard .woocommerce-form-register button[type="submit"]:hover,
body.rn5 .woocommerce .lost_reset_password button[type="submit"]:hover {
	background: var(--accent); /* hover holds the ground — see the primary-hover note at .rn5-btn--primary */
}
/* Correction round 2 (R-G-5): the round-1 accent anchors for the
 * account saves named the FORM classes (.woocommerce-EditAccountForm,
 * .woocommerce-address-fields). The edit-account anchor never
 * matched the real save button — not because the class is absent
 * (it is in the served HTML) but because rasid-next-core's avatar
 * block (residue-ports.php, hooked at woocommerce_edit_account_form,
 * INSIDE the form) echoes its own <form>: HTML parsing drops the
 * nested start tag and the avatar form's </form> closes the
 * EditAccountForm early, so in the DOM the save paragraph —
 * nonce + «حفظ التغييرات» — sits OUTSIDE any form element
 * (probe-verified: the save button's closest('form') is null,
 * while the avatar submit, inside the form, took the accent).
 * The accent is therefore anchored to the buttons' own engine
 * identity — their name attributes, which are WooCommerce's
 * save contract and exist on the rendered buttons in every
 * environment — inside the content frame that does wrap them. */
body.rn5 .rn5-frame button[name="save_account_details"],
body.rn5 .rn5-frame button[name="save_address"] {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
body.rn5 .rn5-frame button[name="save_account_details"]:hover,
body.rn5 .rn5-frame button[name="save_address"]:hover {
	background: var(--accent); /* hover holds the ground — see the primary-hover note at .rn5-btn--primary */
}
/* Micro-fix (R2-G-1): the remember-me label is a real control —
 * clicking it toggles the checkbox — so DS §1.4's 44px floor
 * applies to its hit box, not just to buttons. Same mechanism the
 * meta row's lost-password link already uses (see .rn5-login-meta
 * above): padding grows the tappable box to 45.6px, the negative
 * margins return the layout height to the original 19.6px, so
 * nothing in the R-G-9-proven auth stack moves by a pixel. */
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; padding-block: 13px; margin-block: -13px; }
.woocommerce-form-login .lost_password { font-size: 14px; margin-block-start: 8px; }

/* ================= ACCOUNT (screen 8) + CONTENT FRAME ================= */
.rn5-acclayout { display: grid; gap: 24px; margin-block-start: 20px; }
@media (min-width: 1024px) { .rn5-acclayout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
/* Wave 20 (Drive #9, item 4): the sliding sections strip
 * (.rn5-accnav) is ABOLISHED — its rules are retired with its
 * markup. The account layout is hub-and-spoke now: on the
 * dashboard the nav template renders only the skip marker and
 * the layout collapses to ONE column (the sections grid lives
 * in the content); on section pages it renders the back bar. */
.rn5-acclayout:has(.rn7-acct-navskip) { grid-template-columns: minmax(0, 1fr); }
.rn5-acclayout:has(.rn7-acct-navskip) > .woocommerce-MyAccount-navigation { display: none; }
/* The content frame: plugin endpoint content inherits DS furniture —
 * same type, spacing and controls — without per-plugin markup (C-15). */
.rn5-frame { min-width: 0; }
.rn5-frame h2 { font-size: 22px; margin-block-end: 14px; }
.rn5-frame h3 { font-size: 18px; margin-block-end: 10px; }
.rn5-frame p { margin-block-end: 12px; }
.rn5-frame a { font-weight: 800; }
.rn5-frame .button, .rn5-frame button[type="submit"], .rn5-frame input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 8px 18px; border-radius: var(--radius-s);
	background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
	font-weight: 800; cursor: pointer; font-size: 14px;
}
.rn5-frame .button:hover, .rn5-frame button[type="submit"]:hover { text-decoration: none; border-color: var(--accent-bright); }
/* Correction round 2 (R-G-4): the frame's own 44px min-height
 * was itself losing the parent's 42px min-height war in places
 * (the view-order action buttons measured 42px — the same
 * (0,1,0)-tie/late-print mechanism documented at .rn5-btn,
 * through WoodMart's button rules at equal-or-later order).
 * Re-anchored at body.rn5 scope so the frame floor is real. */
body.rn5 .rn5-frame .button, body.rn5 .rn5-frame button[type="submit"], body.rn5 .rn5-frame input[type="submit"] { min-height: 44px; }
/* …but a DS button inside the frame keeps the DS's own 48px
 * (the cart checkout CTA is .rn5-btn inside .rn5-frame: the
 * frame floor must not cap it at 44). Same specificity as the
 * rule above, later in the sheet. */
body.rn5 .rn5-frame .rn5-btn { min-height: 48px; }
/* Micro-fix (R2-G-2): the guest track-order surface is composed by
 * the core module inside its OWN frame — it prints
 * <main class="rn-track-order"> after get_header(), outside
 * page.php's .rn5-frame article — so the frame floor above never
 * reached its submit, which measured WoodMart's generic 42px.
 * The same 44px floor, scoped to that surface's own frame only:
 * no generic button rule is globalised, and no other surface's
 * buttons gain or lose a pixel. */
body.rn5 .rn-track-order .button, body.rn5 .rn-track-order button[type="submit"], body.rn5 .rn-track-order input[type="submit"] { min-height: 44px; }
.rn5-frame .button.alt, .rn5-frame .checkout-button, .rn5-frame #place_order {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.rn5-frame table {
	width: 100%; border-collapse: collapse; font-size: 14px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
	overflow: hidden; margin-block-end: 16px;
}
/* P6 §3: every Woo table inside the account frame sits IN a card
 * with system padding — never flush to the screen edges (the frame
 * itself stays unpadded by design). Card = the DS surface token
 * (#2C2D33) + line border (rgba(255,255,255,.14)) at 16px radius,
 * 16px padding, 16px inline inset; the width is the frame width
 * minus that inset so the card never overflows. A shop_table
 * already inside a .responsive-table card keeps the wrapper as
 * its ONE card (no double inset); the points table's inner table
 * keeps width:100% inside its card. */
.rn5-frame .responsive-table, .rn5-frame table.shop_table, .rn5-frame .wps-wsfw-wallet-field-table, .rn5-frame .wcr-history-table {
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	padding: 16px; margin-inline: 16px; width: calc(100% - 32px);
}
.rn5-frame .responsive-table > table.shop_table {
	width: 100%; margin-inline: 0; padding: 0;
	background: transparent; border: 0; border-radius: 0;
}
.rn5-frame .wcr-history-table table { width: 100%; }
.rn5-frame th, .rn5-frame td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: middle; }
.rn5-frame thead th { background: var(--bg-deep); font-size: 12px; color: var(--ink-2); }
.rn5-frame img { border-radius: 6px; }
@media (max-width: 767px) {
	.rn5-frame table.shop_table_responsive tr { display: block; border-block-end: 1px solid var(--line); padding: 8px 0; }
	.rn5-frame table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 16px; border-block-end: 0; }
	.rn5-frame table.shop_table_responsive td::before { content: attr(data-title); font-weight: 800; color: var(--ink-2); font-size: 12px; }
	.rn5-frame table.shop_table_responsive thead { display: none; }
}
.rn5-tiles-account { display: grid; gap: 12px; grid-template-columns: 1fr; margin-block-end: 24px; }
@media (min-width: 768px) { .rn5-tiles-account { grid-template-columns: repeat(3, 1fr); } }
.rn5-atilenum { font-size: 34px; font-weight: 800; line-height: 1.15; }
.rn5-atile {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 18px; display: grid; gap: 6px;
}
/* Correction round 2 (R-G-4): the dashboard tile's link measured
 * 26px (one text line at the tile's foot). The tile IS the
 * component's action surface, so the link stretches over the
 * whole tile (stretched-link): the effective target is the
 * tile's full ≥110px box, not the text line. */
.rn5-atile { position: relative; }
.rn5-atile a::after { content: ""; position: absolute; inset: 0; }
.rn5-atile-label { font-size: 14px; color: var(--ink-2); font-weight: 800; }
.rn5-atile-line { font-size: 14px; }
.rn5-orderline {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 16px; margin-block-end: 10px; margin-inline: 16px;
}
.rn5-orderline-main { display: grid; gap: 2px; }
.rn5-orderline-id { font-weight: 800; }
/* Correction round 2 (R-G-4): the order-id link (31px) and the
 * address «تعديل» links (17px) are the primary actions of their
 * rows — padding grows their boxes past 44px, negative margins
 * keep the rows' rhythm unchanged. */
.rn5-orderline-id a { display: inline-block; padding-block: 9px; margin-block: -9px; }
body.rn5 .rn5-frame a.edit { display: inline-block; padding-block: 14px; margin-block: -14px; }
.rn5-orderline-meta { font-size: 12px; color: var(--ink-2); }

/* ================= 404 / MISC PAGES ================= */
.rn5-404 { text-align: center; padding-block: 56px 16px; }
.rn5-404 h1 { font-size: 34px; margin-block-end: 12px; }
.rn5-404 .rn5-search { max-width: 520px; margin: 24px auto 0; text-align: start; }
.rn5-page { margin-block-start: 20px; }
.rn5-page h1 { margin-block-end: 16px; }

/* ================= MOTION LAW ================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important; scroll-behavior: auto !important;
	}
}
/* V7 Wave 11 — X-17 checkout leg: the points line above the
 * order review (the cart strip's twin, DS totals styling). */
body.rn5 .rn7-points-line { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
body.rn5 .rn7-points-line strong { color: var(--ink); font-weight: 800; }
body.rn5 .rn7-points-line .rn7-points-note { color: var(--ink-2); }
body.rn5 .rn7-points-line a { color: var(--accent-bright); font-weight: 700; }

/* Woo's own review-order table (plugin default template, contained). */
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 8px 0; text-align: start; border-block-end: 1px solid var(--line); }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 18px; font-weight: 800; border-block-end: 0; }
.woocommerce-checkout-review-order-table tfoot td { text-align: end; }

/* ================= V6: TRUTH STRIP + NUMERALS =================
 * C6-12 TruthStrip: a hairline-divided fact band (home surface 1).
 * It prints standing system facts only (DEC-03/EV-22) — it is not
 * a promo banner and carries no product claim. */
.rn6-truthstrip { border-block-end: 1px solid var(--line); background: var(--bg); }
.rn6-truthstrip-in {
	max-width: 1200px; margin-inline: auto; padding: 7px 16px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rn6-truth-cell {
	display: flex; align-items: center; gap: 7px; min-width: 0;
	font-size: 12px; line-height: 1.3; color: var(--ink-2); font-weight: 500;
}
.rn6-truth-cell svg { flex: none; color: var(--accent); }
.rn6-truth-cell + .rn6-truth-cell { border-inline-start: 1px solid var(--line); padding-inline-start: 10px; }
@media (max-width: 479px) {
	.rn6-truthstrip-in { gap: 6px; padding: 8px 12px; }
	.rn6-truth-cell { font-size: 11.5px; gap: 5px; }
	.rn6-truth-cell + .rn6-truth-cell { padding-inline-start: 7px; }
}
/* Price numerals compare in tables and totals: tabular figures
 * everywhere a price renders (C6-02 TypeScale freeze). */
.woocommerce-Price-amount, .rn5-price-num, .rn5-card-price,
.rn5-varcard-price, .rn5-buybar-price, [data-rn5-vprice] {
	font-variant-numeric: tabular-nums;
}

/* ================= V6: LISTING (WP-4) =================
 * FacetBar + sort row: outcome facets as deep-link chips; the
 * active chip is accent-outlined; the count pill and clear link
 * close the bar. One composition for shop/category/search. */
.rn6-listbar {
	max-width: 1200px; margin-inline: auto; padding: 4px 16px 12px;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rn6-facetbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rn6-facet-chip {
	display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
	color: var(--ink); font-size: 13.5px; font-weight: 700;
}
.rn6-facet-chip:hover { text-decoration: none; border-color: var(--ink-2); }
.rn6-facet-chip.is-on { border-color: var(--accent); color: var(--accent); background: rgba(0, 200, 255, .08); }
.rn6-facet-count { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.rn6-facet-clear { font-size: 13px; font-weight: 700; color: var(--danger); }
.rn6-listbar-sort { margin-inline-start: auto; }
.rn6-ordering { display: flex; align-items: center; gap: 8px; }
.rn6-ordering-label { font-size: 13px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.rn6-ordering select { min-height: 40px; }
/* Card distinguishing line + request state + rank numeral. */
.rn6-card-fact { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.rn6-card-request { font-size: 13.5px; color: var(--accent); font-weight: 700; }
.rn6-rank {
	position: absolute; top: 8px; inset-inline-start: 10px; z-index: 2;
	font-size: 34px; font-weight: 900; line-height: 1; color: var(--ink);
	text-shadow: 0 2px 10px rgba(0,0,0,.65); font-variant-numeric: tabular-nums;
}

/* ================= V6: HOME (WP-5) =================
 * The hero is an identity band now (the promise lives in the
 * TruthStrip); the ranked list and the next-action band carry
 * the first viewport. */
.rn5-hero { padding: 6px 16px 0; text-align: center; }
.rn5-hero h1 { font-size: 18px; font-weight: 900; line-height: 1.35; }
.rn6-rail-basis { font-size: 12.5px; color: var(--ink-2); font-weight: 500; margin-top: 2px; }
.rn6-ranked-list { display: flex; flex-direction: column; gap: 10px; }
.rn6-ranked .rn5-card--row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rn6-ranked .rn6-rank { font-size: 26px; top: 6px; inset-inline-start: 8px; }
.rn6-nextband {
	max-width: 1200px; margin: 14px auto 0; padding: 10px 14px;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.rn5-home .rn6-nextband { margin-inline: 16px; }
@media (min-width: 1232px) { .rn5-home .rn6-nextband { margin-inline: auto; } }
.rn6-nextband-main { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; }
.rn6-nextband-main svg { flex: none; color: var(--accent); }
.rn6-nextband-text { font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 0; }
.rn6-nextband-cta { padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.rn6-nextband-cta { min-height: 44px; display: inline-flex; align-items: center; }
/* Correction round (D-A1, audit §7): the band CTA is an <a>, and
 * inside the account dashboard it lives under .woocommerce, where
 * the form-cascade rule body.rn5 .woocommerce a (0,2,2) outranks
 * body.rn5 .rn5-btn--primary (0,2,1) and paints the label with
 * var(--accent-bright) — which computes to the button's own
 * accent ground: text identical to its background, a blank cyan
 * slab (CDP matched-styles proof, bench + staging capture). The
 * band scope re-anchors the label colour at (0,3,1) so the
 * primary-button pairing (accent ground / on-accent text) holds
 * on every surface the band renders on, dashboard and home. */
body.rn5 .rn6-nextband .rn6-nextband-cta { color: var(--on-accent); }
@media (max-width: 767px) {
	/* The band stacks on mobile: ledger text at full width, then
	 * its action at full width. Side-by-side measured 136px with
	 * a long product name (both halves wrapped to ~5 lines); the
	 * stacked form is bounded (~108px) at any name length. */
	.rn6-nextband { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 12px; margin-top: 8px; }
	.rn6-nextband-text { font-size: 13.5px; line-height: 1.45; }
	.rn6-nextband-cta { justify-content: center; font-size: 14.5px; text-align: center; }
	.rn6-ranked { margin-top: 8px; }
	.rn6-ranked .rn5-section-head { margin-block-end: 2px; }
	.rn6-ranked .rn6-rail-basis { margin-block: 0 8px; }
	.rn6-ranked .rn5-card-body { padding: 7px 10px; gap: 2px; }
	.rn6-ranked .rn5-card-title { font-size: 15px; line-height: 1.35; }
	.rn6-ranked .rn5-card-price { margin: 0; line-height: 1.3; }
}
.rn6-nextband-alt { font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* WP-5 geometry discipline (DEC-03): the ranked section's head is
 * ONE line — title + named basis inline — and the section carries
 * no block margins of its own. Measured stack (390px, logged-in,
 * expiring fixture): chrome 114 + hero ~59 + strip 64 + band ~108
 * + head ~46 + card-to-price ~78 = ~469 <= 500. */
.rn6-ranked { margin-block: 0; }

/* Hero, screen-reader form (band present): the H1 remains for
 * the accessibility tree and search structure; visually the
 * buyer's next-action band leads (DEC-16). */
.rn5-hero--sr {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================= V6 PRODUCT (WP-6) =================
 * DEC-06 composition: a media STAGE (the family's art field with
 * the cover as a poster on it) + the DECISION CARD overlapping
 * the stage's lower edge. The stage field is pure CSS per family
 * (C-08) — no image data is invented for it. */
.rn6-stage {
	position: relative;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	padding: 14px 16px 36px;
	overflow: hidden;
	background: var(--bg-deep);
}
.rn6-stage.rn5-fam-stream { background: linear-gradient(160deg, #232733, var(--bg-deep) 70%); }
.rn6-stage.rn5-fam-game { background: linear-gradient(160deg, #1d2b26, var(--bg-deep) 70%); }
.rn6-stage.rn5-fam-cards { background: linear-gradient(160deg, #2b2419, var(--bg-deep) 70%); }
.rn6-stage.rn5-fam-soft { background: linear-gradient(160deg, #1d2733, var(--bg-deep) 70%); }
.rn6-stage.rn5-fam-conn { background: linear-gradient(160deg, #14333b, var(--bg-deep) 70%); }
.rn6-stage.rn5-fam-social { background: linear-gradient(160deg, #2e2133, var(--bg-deep) 70%); }
.rn6-stage .rn5-pgallery { max-width: 192px; margin-inline: auto; }
.rn6-stage .rn5-pgallery .woocommerce-product-gallery__image img,
.rn6-stage .rn5-pcover { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.rn6-decision {
	position: relative;
	z-index: 2;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
	margin-block-start: -72px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
@media (min-width: 1024px) {
	.rn6-stage { padding: 28px 24px; }
	.rn6-stage .rn5-pgallery { max-width: none; position: static; }
	.rn6-stage { position: sticky; top: calc(var(--header-h) + 16px); }
	.rn6-decision { margin-block-start: 0; }
}
/* FactRows (C6-24): label/value pairs from named sources only. */
.rn6-facts { display: grid; gap: 8px; margin: 14px 0 0; }
.rn6-fact {
	display: flex; align-items: baseline; gap: 12px;
	padding: 9px 12px; background: var(--surface-2);
	border: 1px solid var(--line); border-radius: 10px;
}
.rn6-fact dt { color: var(--ink-2); font-size: 13px; font-weight: 700; flex: none; }
.rn6-fact dd { margin: 0; font-weight: 800; font-size: 14.5px; }
.rn6-preface {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 14px 0 0; padding: 12px 14px;
	background: var(--surface-2); border: 1px solid var(--line);
	border-inline-start: 3px solid var(--accent);
	border-radius: 10px; font-size: 14px; line-height: 1.6;
}
.rn6-preface svg { flex: none; margin-block-start: 2px; color: var(--accent); }
.rn6-renewal-line {
	display: flex; gap: 8px; align-items: center;
	color: var(--ink-2); font-size: 13.5px; font-weight: 700; margin: 0;
}
.rn6-renewal-line svg { color: var(--save); flex: none; }
.rn6-renew-note {
	margin: 0 0 4px; padding: 10px 14px;
	background: var(--surface-2); border: 1px solid var(--accent-deep);
	border-radius: 10px; font-size: 14px; font-weight: 700;
}
.rn6-remedy { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.rn6-remedy a { color: var(--accent); font-weight: 800; }
/* DEC-22 request panel (price-absent buy zone). */
.rn6-request-panel {
	margin-block-start: 16px; padding: 18px;
	background: var(--surface-2); border: 1px dashed var(--line-strong, var(--line));
	border-radius: var(--radius); display: grid; gap: 8px; justify-items: start;
}
.rn6-request-title { font-size: 17px; font-weight: 900; margin: 0; }
.rn6-request-text { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin: 0; }
/* VariantCard modes (C6-25). */
.rn5-varcards--duration .rn5-varcard-price { font-size: 20px; font-weight: 900; }
.rn5-varcards--duration .rn5-varcard { padding-block: 16px; }
.rn6-varcard-unit { color: var(--accent); font-weight: 800; }
.rn6-varcard-contents { color: var(--ink-2); line-height: 1.55; }
.rn6-oos-group {
	margin: 10px 0 0; padding: 9px 12px;
	border: 1px dashed var(--line); border-radius: 10px;
	color: var(--ink-2); font-size: 13.5px; font-weight: 700;
}
/* DEC-09 guidance: a named, visible instruction — never an
 * error colour (nothing has gone wrong yet). */
.rn6-guide {
	margin: 0; padding: 11px 14px;
	background: var(--surface-2); border: 1px solid var(--accent-deep);
	border-radius: 10px; font-weight: 800; font-size: 14.5px;
}
.rn6-guide[hidden] { display: none; }
.rn5-vargroup.rn6-attn {
	outline: 2px solid var(--accent); outline-offset: 6px;
	border-radius: 12px;
}
/* The decision card IS the buy-zone panel: the engine form's
 * own V5 panel chrome flattens inside it (one surface, one
 * border — no panel-in-panel). */
.rn6-decision form.cart, .rn6-decision .rn5-buyzone {
	background: transparent; border: 0; box-shadow: none;
	padding: 0; margin-block-start: 14px;
}
@media (max-width: 767px) {
	.rn6-decision form.cart { gap: 10px; }
	.rn5-varcards--duration .rn5-varcard { padding-block: 8px; }
}
/* WP-6 geometry discipline (DEC-06/07): inside the decision
 * card the certainty block composes its own rhythm — the
 * systemic paragraph margins (21px each) are retired there,
 * and the identity's margins tighten. Type sizes unchanged. */
.rn6-decision .rn5-certainty { display: grid; gap: 6px; }
.rn6-decision .rn5-certainty p { margin: 0; }
.rn6-decision .rn5-identity .rn5-badge { margin-block-end: 6px; }
.rn6-decision .rn5-ptitle { margin-block-end: 4px; }
.rn6-decision .rn5-priceblock { gap: 2px; }
.rn6-decision .rn6-renewal-line { line-height: 1.35; }
.rn6-decision .rn5-certainty-method, .rn6-decision .rn5-certainty-where { line-height: 1.45; }
/* Wider duration/denomination cards: fewer wrapped consequence
 * lines, same information (DEC-08: option = price + one
 * consequence line). */
.rn5-varcards { grid-auto-columns: minmax(150px, 52%); }
/* C6-28 buy-bar states. */
.rn6-buybar-reason {
	flex: 1; text-align: center; color: var(--ink-2);
	font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.rn6-buybar-reason[hidden] { display: none; }
.rn5-buybar .rn5-btn.is-incomplete { opacity: .55; }
/* Correction round (D-A2a): the completed bar's fact slot. Same
 * geometry as the reason it replaces (one slot, swapped by
 * rasid.js on found_variation / reset_data), set in the ink —
 * it is a fact the decision rides on, not guidance. */
.rn6-buybar-mode {
	flex: 1; text-align: center; color: var(--ink);
	font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.rn6-buybar-mode[hidden] { display: none; }

/* ================= V6 CART (WP-7, DEC-13) =================
 * TotalsCard first: on mobile the DOM order is the visual order
 * (cart.php prints the collaterals before the form). On desktop
 * the grid restores the two-column composition explicitly —
 * items in column 1, totals in column 2, both on row 1; the
 * companions block keeps its full-row span beneath both. */
@media (min-width: 1024px) {
	.rn5-cartmain { grid-column: 1; grid-row: 1; }
	.rn5-cartside { grid-column: 2; grid-row: 1; }
}
/* The lead: the all-in total, largest figure in the card. */
.rn6-totals-lead {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; padding-block-end: 12px; margin-block-end: 6px;
	border-block-end: 1px solid var(--line);
}
.rn6-totals-lead-label { font-weight: 800; font-size: 15px; }
.rn6-totals-lead-amount { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rn6-totals-lead-amount .woocommerce-Price-currencySymbol { font-size: 15px; font-weight: 800; }
.rn5-totals .rn5-points-line { margin-block-start: 10px; text-align: center; }

/* WP-7 containment: the points module's cart strip (core
 * idea-points-display) ships a light-theme style (near-white
 * background) whose text inherits the DS ink — white on white
 * on the dark canvas (seen in the wp7-orderflow cart capture).
 * Repainted to DS tokens like the companions module before it;
 * content and link untouched. */
body.rn5 .rn-idea-points-strip {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); color: var(--ink);
	padding: 12px 16px; font-size: 14px; line-height: 1.6;
}
body.rn5 .rn-idea-points-strip strong { color: var(--ink); font-weight: 900; }
body.rn5 .rn-idea-points-note { color: var(--ink-2); }
body.rn5 .rn-idea-points-strip a { color: var(--accent); font-weight: 800; }

/* ================= V6 CHECKOUT (WP-8, DEC-14) =================
 * C6-35 PaymentFrame: the engine's #payment block (contained
 * Woo markup, subtemplates untouched per G-A-13) becomes ONE
 * encapsulated surface — the payment moment is visually bounded
 * as a whole. Marks inside it are the environment's own gateway
 * registry entries only; there is no seal, generic or otherwise. */
#payment {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-block-start: 16px;
}
/* Wave 33 Step-0 (§32.1 leak audit): the two #payment grounds
 * below rode var(--surface-2) when that token was the old
 * #3d3d3d derivation; the Wave-32 ladder remap lifted them to
 * the ELEVATED shade, and the measured .payment_box is a
 * 252×539 static panel — a large area, which §32.1 forbids for
 * the elevated level. Re-seated to the BASE shade: the fragment
 * keeps its own recessed ground inside the card-shade frame,
 * and the fields inside keep their own grounds (below). */
#payment li.payment_method { background: var(--bg); }
#payment li.payment_method:has(> input:checked) { border-color: var(--accent-deep); }
/* The contained gateway fragments were authored for a light
 * theme: Woo paints .payment_box #dfdcde and the cheque
 * fragment's own wrapper is white, so on the dark system the
 * gateway's own labels washed out (measured in the WP-8 frame
 * capture: «اكتب اسم صاحب التحويل» near-invisible). The DS
 * cascade re-grounds the fragment INSIDE the frame — markup
 * and fields untouched (G-A-13 containment preserved). */
#payment div.payment_box { background: var(--bg); }
#payment div.payment_box::before { border-bottom-color: var(--bg); }
#payment .bank-transfer-wrapper { background: transparent; }
#payment .bank-transfer-wrapper input[type="text"] {
	background: var(--bg); color: var(--ink); border: 1px solid var(--line);
}
#payment .rn-receipt #upload_area {
	background: var(--bg);
	border-color: var(--accent-deep);
	color: var(--ink-2);
}
/* Wave 11 (gate §12, checkout M3): the upload prompt and the
 * uploading status are functional instructions on the payment
 * path, but the receipt sheet paints them #00708f on the
 * re-grounded #191919 box = 3.11:1 — measured, failing. Colour
 * only, DS ink; the fragment's markup and behaviour stay the
 * plugin's (§11 flag otherwise unchanged). */
body.rn5 #payment .rn-receipt #upload_area p,
body.rn5 #payment .rn-receipt #upload_area #upload_loading { color: var(--ink); }

/* Correction round (D-A4): the cheque gateway's bank-info
 * fragment on thankyou / order-view (.rn-receipt-view, rendered
 * by the core port) paints its own ground #f8f9fa from
 * port-receipts.css — a sheet enqueued only on checkout, which
 * is why the defect convicted on order-received (where the DS
 * heading ink is white: white-on-white) and not in the account
 * (sheet absent, ground transparent). WP-8 re-grounded this
 * fragment family inside #payment only; the same re-grounding
 * now covers the fragment wherever it renders, at body.rn5
 * scope: DS surface + ink, its own padding/radius kept. */
body.rn5 .rn-receipt-view {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
}
body.rn5 .rn-receipt-view h2 { color: var(--ink); }

/* ================= V6 ACCOUNT + CONFIRMATION (WP-9) =================
 * The confirmation overview's VALUE cells took Woo's dark #242424
 * (measured rgb(36,36,36) on the #191919 page — the order's own
 * facts at ~1.2:1). Values are the system's ink; labels stay
 * inherited. Same family wherever the engine prints order facts. */
body.rn5 .woocommerce-order-overview strong,
body.rn5 .woocommerce-order-details :is(td, th),
body.rn5 .woocommerce-customer-details address { color: var(--ink); }
.rn6-confirm-status { display: flex; justify-content: center; margin-block: 14px 4px; }
.rn6-expiry { margin-block-start: 16px; }
.rn6-expiry-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.rn6-nextstep {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 18px; margin-block-start: 20px;
}
.rn6-nextstep h2 { font-size: 19px; font-weight: 800; margin-block-end: 10px; }
.rn6-nextstep-list { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.rn6-nextstep p { color: var(--ink-2); }
.rn6-nextstep-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
.rn6-lib-state--done { display: inline-flex; align-items: center; gap: 6px; color: var(--save); font-weight: 700; font-size: 13px; }

/* =====================================================================
 * V7 — HOME + CHROME (DESIGN-V7-SYSTEM: pinned identity §1, approved
 * storefront shape §3). Presentation only: every token below already
 * exists in :root; no new palette values, no gradients. Component
 * rules carry the body.rn5 scope the WoodMart cascade wars require.
 * ===================================================================== */

/* Screen-reader-only (the home H1: the header carries the brand). */
.rn7-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Announcement bar: one factual line; scrolls away (not sticky). */
.rn7-announce {
	background: var(--bg-deep); color: var(--ink-2);
	border-block-end: 1px solid var(--line);
	text-align: center; font-size: 12.5px; font-weight: 600;
	line-height: 1.5; padding: 8px 16px;
}

/* Sticky chrome: header + search row as one unit. The wrapper owns
 * the bottom hairline; the members drop theirs. */
.rn7-chrome {
	position: sticky; top: 0; z-index: 60;
	background: var(--bg); border-block-end: 1px solid var(--line);
}
body.rn5 .rn7-chrome .rn5-header { position: static; border-block-end: 0; }
body.rn5 .rn7-chrome .rn5-searchrow { background: transparent; border-block-end: 0; }
body.rn5 .rn7-chrome .rn5-searchrow-in { padding: 8px 16px 12px; }
/* The prominent search: 48px field, visible accent submit (the V6
 * row hid the submit and ran the field at 44px). */
body.rn5 .rn7-chrome .rn5-search--row .rn5-search-input { min-height: 48px; }
body.rn5 .rn7-chrome .rn5-search--row .rn5-search-go { display: inline-flex; }

/* Footer brand lockup (mark + word), matching the header mark. */
body.rn5 .rn5-footer-brand { display: flex; gap: 10px; align-items: flex-start; }

/* Chips rail (home): the strip chrome retires inside the page wrap;
 * the scroller keeps its own inset and gains the edge fade the
 * approved demo lacked — a mask, so hidden chips read as "more". */
body.rn5 .rn7-chips { background: transparent; border-block-end: 0; }
body.rn5 .rn7-chips .rn5-catstrip-in {
	max-width: none; padding: 10px 0 2px;
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
}

/* Home section heads sit on the wrap's inset, not their own. */
body.rn5 .rn7-home .rn5-section-head { padding-inline: 0; scroll-margin-top: 148px; }
.rn7-basis { font-size: 12px; color: var(--ink-2); margin-block-start: 2px; }

/* Promo band «عرض اليوم»: flat family tint (color-mix, never a
 * gradient), white text — every family tint at 30% over the page
 * background keeps white text above 7:1. One authored motion
 * moment for the page: this band's entrance. */
.rn7-promo {
	margin-block-start: 14px; border-radius: 18px; padding: 16px;
	color: #fff; background: var(--surface);
	animation: rn7-rise .45s cubic-bezier(.22, 1, .36, 1) both;
}
.rn7-promo--stream { background: color-mix(in srgb, var(--fam-stream) 30%, var(--bg)); }
.rn7-promo--game { background: color-mix(in srgb, var(--fam-game) 30%, var(--bg)); }
.rn7-promo--cards { background: color-mix(in srgb, var(--fam-cards) 30%, var(--bg)); }
.rn7-promo--soft { background: color-mix(in srgb, var(--fam-soft) 30%, var(--bg)); }
.rn7-promo--social { background: color-mix(in srgb, var(--fam-social) 30%, var(--bg)); }
.rn7-promo--conn { background: color-mix(in srgb, var(--fam-conn) 30%, var(--bg)); }
.rn7-promo--generic { background: color-mix(in srgb, var(--fam-generic) 30%, var(--bg)); }
@keyframes rn7-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rn7-promo-tag {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255, 255, 255, .16); color: #fff;
	border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 800;
}
.rn7-promo-main { display: flex; gap: 12px; margin-block-start: 12px; }
.rn7-promo-text { flex: 1 1 auto; min-width: 0; }
.rn7-promo-title { font-size: 21px; font-weight: 800; line-height: 1.4; }
.rn7-promo-desc { font-size: 13px; color: rgba(255, 255, 255, .88); margin-block-start: 3px; line-height: 1.6; }
.rn7-promo-art {
	/* Wave 25 (A3): the deal band's art sized to the band — the
	 * featured product's SQUARE cover at 118px in the unified 1/1
	 * ratio, not an 84px sliver cropped to 4/5. */
	flex: 0 0 118px; display: block; position: relative;
	border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-deep);
}
.rn7-promo-art .rn5-namecover { padding: 8px; }
.rn7-promo-art .rn5-namecover-word { font-size: 12px; }
.rn7-promo-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-block-start: 13px; }
.rn7-promo-price { font-size: 24px; font-weight: 800; line-height: 1.1; }
.rn7-promo-price .rn5-price-cur { color: rgba(255, 255, 255, .85); }
.rn7-promo-price .rn5-price-was { color: rgba(255, 255, 255, .65); }
body.rn5 .rn7-promo-row .rn7-add { width: auto; margin-block-start: 0; padding-inline: 20px; flex: 0 0 auto; }

/* The V7 storefront card (§3 anatomy). */
.rn7-card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; overflow: hidden;
	display: flex; flex-direction: column;
}
/* Wave 25 (D10): ONE unified cover ratio across ALL rn7 cards —
 * 1/1. Every measured homepage cover original is square, so 1/1
 * serves the real art uncropped and unletterboxed; the grid's 4/5
 * and the rail's 4/3 variants are abolished into it. */
.rn7-card-cover { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-deep); }
.rn7-card--rail { flex: 0 0 150px; scroll-snap-align: start; }
@media (min-width: 768px) { .rn7-card--rail { flex-basis: 196px; } }
.rn7-card-bd { padding: 4px 10px 6px; display: flex; flex-direction: column; flex: 1; }
.rn7-card-title {
	font-size: 14.5px; font-weight: 700; line-height: 1.5; min-height: 3em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Bench round 1–2 forensics: this Chromium computes the legacy
 * -webkit-box clamp's display as flow-root, and Range/scrollHeight
 * probes over-report the clamped lines — but the rendered result
 * is a clean ellipsis (screenshot proof, card 6 crop). The scoped
 * re-declaration stays as cascade insurance, not as a fix. */
body.rn5 .rn7-card-title { display: -webkit-box; }
body.rn5 .rn7-promo-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Anchored/scrolled-to sections clear the sticky chrome (129px). */
.rn7-promo, .rn7-trust, .rn7-best, .rn7-offers { scroll-margin-top: 140px; }
.rn7-card--rail .rn7-card-title { font-size: 13.5px; }
.rn7-card-title a { color: var(--ink); }
.rn7-card-title a:hover { text-decoration: none; }
.rn7-card-fact { font-size: 12px; color: var(--ink-2); margin-block-start: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn7-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; margin-block-start: 7px; }
.rn7-badge--auto { color: var(--save); }
.rn7-badge--manual { color: var(--ink-2); }
.rn7-promo .rn7-badge--manual { color: rgba(255, 255, 255, .8); }
.rn7-card-price { margin-block-start: auto; padding-block-start: 4px; font-size: 17px; }
.rn7-card-support { margin-block-start: auto; padding-block-start: 9px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rn7-add {
	margin-block-start: 10px; width: 100%; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent); color: var(--on-accent);
	font-size: 14px; font-weight: 800; border-radius: 12px; padding: 0 14px;
	text-align: center; transition: background-color .2s ease, opacity .2s ease;
}
.rn7-add:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; /* hover holds the ground — the DS primary-hover law (accent-deep is never an on-accent ground, 3.17:1) */ }
.rn7-add--link { background: var(--surface-2); color: var(--ink); }
.rn7-add--link:hover { background: var(--surface-2); color: var(--accent-light); }
.rn7-add.loading { opacity: .6; pointer-events: none; }
.rn7-add.added { background: var(--surface-2); color: var(--save); }
.rn7-card .added_to_cart {
	margin-block-start: 8px; width: 100%; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--accent); color: var(--accent);
	font-size: 13.5px; font-weight: 800; border-radius: 12px;
}
.rn7-card .added_to_cart:hover { text-decoration: none; color: var(--accent-light); border-color: var(--accent-light); }

/* Best-sellers grid: 2 columns on the phone, widening with room. */
.rn7-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .rn7-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .rn7-grid { grid-template-columns: repeat(4, 1fr); } }

/* Trust panel: icon-tile rows on one surface (never nested cards). */
.rn7-trust {
	margin-block-start: 20px; background: var(--surface);
	border: 1px solid var(--line); border-radius: 16px; padding: 6px 16px;
}
/* Wave 26 (Drive #12 item 6, §24.5): vertical compression — the
 * rows' padding and icon shrink; the approved texts themselves
 * are untouched (geometry only). */
.rn7-trow { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; }
.rn7-trow + .rn7-trow { border-block-start: 1px solid var(--line); }
.rn7-ticon {
	width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px;
	background: var(--surface-2); color: var(--accent);
	display: grid; place-items: center;
}
.rn7-tt { font-size: 14px; font-weight: 700; }
.rn7-ts { font-size: 12.5px; color: var(--ink-2); margin-block-start: 1px; line-height: 1.6; }
.rn7-ts a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }


/* =====================================================================
 * V7 CORRECTIONS ROUND 1 — owner iPhone review of the V7 home,
 * 2026-10-26 (docs/DESIGN-V7-CORRECTIONS-HOME-1.md). Eight defects,
 * one block; every rule below answers a numbered defect and is
 * scoped to outrank the cascade that produced it.
 * ===================================================================== */

/* Defect 1 — the search field must READ as a field. The substrate's
 * global input rule sets --surface, but on the real stack the field
 * computed to background: transparent (CDP probe, bench + staging
 * class) — the page's own black showed through and only the 14%
 * --line border remained: black on black. The chrome scope pins the
 * card colour, a visibly stronger neutral border, and a brighter
 * placeholder (82% of the ink over the field ground ≈ #CFCFCF,
 * ~10:1 on #2E2E2E). */
body.rn5 .rn7-chrome .rn5-search .rn5-search-input {
	background: var(--surface);
	border: 1.5px solid hsla(0, 0%, 100%, .38);
	color: var(--ink);
}
body.rn5 .rn7-chrome .rn5-search .rn5-search-input::placeholder {
	color: color-mix(in srgb, var(--ink) 82%, transparent);
	opacity: 1;
}

/* Defect 2 — the no-image placeholder (rn7_cover_html): a dark
 * neutral field (the surface-2 tile), the store's bolt mark in an
 * outlined tile, the product name beneath. Never an accent fill,
 * never a bare colour block. The family bottom border the substrate
 * name-cover carries does not apply here. */
.rn7-namecover {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; width: 100%; height: 100%; padding: 16px;
	background: var(--surface-2); text-align: center;
}
.rn7-namecover-mark {
	width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px;
	border: 1.5px solid hsla(0, 0%, 100%, .28); color: var(--ink-2);
	display: grid; place-items: center;
}
.rn7-namecover-word {
	font-weight: 800; font-size: 17px; line-height: 1.5; color: var(--ink);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-promo-art .rn7-namecover { padding: 8px; gap: 6px; }
.rn7-promo-art .rn7-namecover-mark { width: 30px; height: 30px; border-radius: 9px; }
.rn7-promo-art .rn7-namecover-word { font-size: 11px; -webkit-line-clamp: 4; }

/* Defect 3b — uniform card bodies. The component now always renders
 * the fact line and the badge slot; CSS reserves their heights, the
 * price follows the badge at a FIXED offset (the auto top margin
 * that manufactured the in-card void is gone), and the action takes
 * the auto margin instead: any residual difference in a row lands
 * directly above the full-width button, where it reads as button
 * spacing — and the buttons align on one baseline per row. */
.rn7-card-fact { min-height: 1.5em; }
/* The substrate's own lesson (.rn5-card-body): the parent's global
 * block margins on <p>/<h3> otherwise smuggle ~30px into the card
 * stack and re-open the void this round closes. */
body.rn5 .rn7-card-bd > :is(p, h3) { margin-block: 0; }
.rn7-badge-slot { display: flex; align-items: center; min-height: 18px; margin-block-start: 2px; }
.rn7-badge-slot .rn7-badge { margin-block-start: 0; }
body.rn5 .rn7-card-price { margin-block-start: 0; margin-block-end: 4px; }
body.rn5 .rn7-card-support { margin-block-start: 0; margin-block-end: 4px; }
body.rn5 .rn7-card-bd .rn7-add { margin-block-start: auto; }
body.rn5 .rn7-promo-row .rn7-add { margin-block-start: 0; }

/* Defect 3a (historical) — an odd-count grid's last card spanned
 * the row and turned horizontal (the "wide card").
 * WAVE 25 (Drive #11, item D11) — SETTLED BY ABOLITION: the wide
 * card is deleted at every breakpoint. The grid is ONE unified
 * grid (§23 card law: same card, same ratio, same anatomy
 * everywhere); an odd last card simply occupies its own cell like
 * every other card. No replacement rule exists by design. */

/* Defects 3c + 4 — the footer breathes naturally, and its payment
 * line lives inside the same container metrics as the rest of the
 * footer (it previously sat outside .rn5-footer-in: no max-width,
 * no inline padding, one unwrapped inline run flush to the screen
 * edge — the owner's clipped line). Flex-wrap makes overflow of
 * that line structurally impossible. */
body.rn5 .rn5-footer { margin-block-start: 40px; }
body.rn5 .rn5-footer-in { padding: 28px 16px 20px; gap: 24px; }
body.rn5 .rn5-footer-tag { margin-block-start: 8px; line-height: 1.55; }
body.rn5 .rn5-footer-col h3 { margin-block-end: 8px; }
body.rn5 .rn5-footer-col ul { gap: 6px; }
body.rn5 .rn5-footer-col a { line-height: 1.5; }
body.rn5 .rn5-footer-pay {
	max-width: 1200px; margin-inline: auto; padding: 0 16px 14px;
	display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
	line-height: 1.5; white-space: normal;
}
body.rn5 .rn5-footer-base { padding: 14px 16px; }

/* Defect 5 — the promo title: two lines maximum (the owner's cap),
 * balanced across the two lines so no line ends in a stranded
 * character; Latin runs are isolated in markup (rn7_bidi_title). */
body.rn5 .rn7-promo-title { -webkit-line-clamp: 2; text-wrap: balance; }

/* Defect 8 — fixed chrome never covers content. The page's bottom
 * clearance grows past the nav's true height (item 56px + its
 * padding + safe-area) with margin to spare, and the offers rail
 * gains internal top/side/bottom padding so cards and their
 * discount ribbons render fully inside the scroll area, never
 * flush against its edges. */
@media (max-width: 767px) {
	body.has-rn5-bottomnav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
body.rn5 .rn7-rail { padding-block-start: 10px; padding-block-end: 12px; padding-inline: 2px; }
body.rn5 .rn7-offers { padding-block-end: 6px; }

/* =====================================================================
 * V7 CORRECTIONS ROUND 2 — owner iPhone review of the corrected
 * home, 2026-10-26 (docs/DESIGN-V7-CORRECTIONS-HOME-2.md).
 * Item 1: ONE type/spacing rhythm (system doc §9) + the
 * letter-spacing law. Item 2: the rebuilt footer. Item 3: the
 * reviews slider. Scoped like round 1: outrank the cascade that
 * produced the defect, touch nothing else.
 * ===================================================================== */

/* ---- Item 1a — Arabic NEVER takes letter-spacing (owner law).
 * It severs the joining of Arabic letters. The package's own sheet
 * set none on Arabic text (round-2 audit: the only letter-spacing
 * in rasid.css is on an LTR machine-code sample), but the parent
 * cascade is not ours to trust: the V7 text scopes pin it to
 * normal, and the round probe audits computed styles on every
 * visible Arabic element. ---- */
body.rn5 .rn7-home, body.rn5 .rn7-chrome, body.rn5 .rn7-footer,
body.rn5 .rn7-product, body.rn5 .rn7-buybar,
body.rn5 .rn5-bottomnav { letter-spacing: normal; }

/* ---- Item 1b — the unified rhythm (§9). Baseline truth: the
 * sections sat at gaps of 0 / 0 / 20 / 40px and the section head's
 * own parts were set ad hoc (basis at margin-top 2px). One gap
 * token between sections now; one head construction everywhere. */
body.rn5 .rn7-best, body.rn5 .rn7-offers,
body.rn5 .rn7-reviews, body.rn5 .rn7-trust { margin-block-start: 32px; }
body.rn5 .rn7-home .rn5-section-head { margin-block-end: 14px; }
body.rn5 .rn7-home .rn5-section-head h2 { line-height: 1.45; }
.rn7-basis { margin-block-start: 6px; line-height: 1.6; }

/* Line-height scale (§9): Arabic breathes — display 1.5, card
 * titles 1.55, body copy 1.7, meta 1.6. */
body.rn5 .rn7-promo-title { line-height: 1.5; }
.rn7-promo-desc { line-height: 1.7; }
.rn7-announce { line-height: 1.6; }
.rn7-card-title { line-height: 1.55; }
.rn7-card-fact { line-height: 1.55; }
.rn7-tt { line-height: 1.5; }
.rn7-ts { line-height: 1.55; }

/* ---- Item 3 — reviews slider «آراء عملائنا». A snap rail of
 * real review cards under the store aggregate, production's
 * anatomy in the pinned identity: stars gold (the §1 star token),
 * card on the surface, author initial in a neutral disc. Card
 * text reserves five lines so the rail never shifts as it
 * scrolls (no CLS from content). ---- */
.rn7-rev-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-block-end: 4px; }
.rn7-rev-agg { display: inline-flex; align-items: center; gap: 8px; }
.rn7-rev-avg { font-size: 20px; font-weight: 900; }
.rn7-rev-count { font-size: 13px; color: var(--ink-2); }
.rn7-rev-rail {
	display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-block: 4px 8px; padding-inline: 2px; scrollbar-width: none;
}
.rn7-rev-rail::-webkit-scrollbar { display: none; }
.rn7-rev-card {
	flex: 0 0 86%; min-width: 0; scroll-snap-align: start;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) { .rn7-rev-card { flex-basis: 340px; } }
.rn7-rev-text {
	font-size: 14.5px; line-height: 1.7; color: var(--ink);
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-rev-meta { display: flex; align-items: center; gap: 10px; margin-block-start: auto; min-width: 0; }
.rn7-rev-avatar {
	width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
	background: var(--surface-2); color: var(--ink);
	display: grid; place-items: center; font-size: 16px; font-weight: 800;
}
.rn7-rev-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.rn7-rev-author { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn7-rev-prod { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn7-rev-date { margin-inline-start: auto; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.rn7-rev-nav { display: flex; gap: 8px; justify-content: flex-start; margin-block-start: 6px; }
/* Wave 26 (Drive #12, §24.3/§24.5): production's dots (one per
 * page, built by JS) + the «عميل موثّق» badge (renders only where
 * the verified flag is truly set) + the shared summary typography
 * (the section strip and the footer anchor print the same helper). */
.rn7-rev-agg b { font-size: 20px; font-weight: 900; color: var(--ink); }
.rn7-rev-agg span { font-size: 13px; color: var(--ink-2); }
.rn7-rev-dots { display: flex; gap: 6px; justify-content: center; margin-block-start: 10px; }
body.rn5 .rn7-rev-dot {
	width: 8px; height: 8px; padding: 0; border-radius: 999px; cursor: pointer;
	background: var(--surface-2); border: 1px solid var(--line);
}
body.rn5 .rn7-rev-dot.is-on { background: var(--accent); border-color: var(--accent); width: 22px; }
.rn7-rev-verified {
	flex: 0 0 auto; font-size: 11px; font-weight: 700; white-space: nowrap;
	color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
	padding: 2px 8px;
}
/* Wave 26 (item 7): the footer review anchor sits in the brand
 * block, left-aligned with the intro line it anchors under. */
.rn7-fanchor { justify-content: flex-start; text-align: start; padding: 0; margin-block-start: 8px; }
.rn7-fanchor b { color: var(--ink); }
/* body.rn5 scope: the parent's global button rule otherwise
 * repaints these light grey (the substrate's standing lesson). */
body.rn5 .rn7-rev-btn {
	width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
	background: var(--surface); border: 1px solid var(--line); color: var(--ink);
	display: grid; place-items: center;
}
body.rn5 .rn7-rev-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Prev/next in RTL: the shared chev already flips to point at
 * the inline end (left = «next»); «prev» un-flips it. */
.rn7-rev-btn[data-rev-nav="prev"] .rn5-ic { transform: none; }

/* ---- Item 2 — the rebuilt footer. Production's structure and
 * level (identity block → organised link panel → help band →
 * payment/trust strip → rating strip → base line) on the pinned
 * dark identity, with the §9 rhythm: tight, even, no void. The
 * panel carries the three columns; on the phone the shop column
 * stands beside the stacked help/links pair so no column block
 * is spent on a single link. ---- */
.rn7-footer { background: var(--bg-deep); border-block-start: 1px solid var(--line); margin-block-start: 36px; }
.rn7-footer-in { max-width: 1200px; margin-inline: auto; padding: 26px 16px 18px; display: grid; gap: 16px; }
.rn7-ftop { display: grid; gap: 16px; }
@media (min-width: 768px) {
	.rn7-ftop { grid-template-columns: 1fr 1.9fr; gap: 24px; align-items: start; }
}
.rn7-fbrand-lock { display: flex; align-items: center; gap: 10px; }
.rn7-fbrand .rn5-logo-word { font-size: 20px; }
.rn7-ftag { color: var(--ink-2); font-size: 14px; line-height: 1.7; margin-block-start: 10px; max-width: 36ch; text-wrap: balance; }
.rn7-fsocial { display: flex; gap: 8px; margin-block-start: 14px; }
.rn7-fsocial-a {
	width: 44px; height: 44px; border-radius: 12px;
	border: 1px solid var(--line); background: var(--surface); color: var(--ink);
	display: grid; place-items: center;
}
.rn7-fsocial-a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.rn7-fpanel {
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	padding: 18px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
}
@media (min-width: 768px) { .rn7-fpanel { grid-template-columns: 1.2fr 1fr 1fr; } }
.rn7-fcolstack { display: grid; gap: 20px; align-content: start; }
@media (min-width: 768px) {
	.rn7-fcolstack { display: contents; }
}
.rn7-fcol h3 { font-size: 15px; line-height: 1.5; margin-block-end: 8px; }
.rn7-fcol ul { list-style: none; margin: 0; padding: 0; }
.rn7-fcol li + li { border-block-start: 1px solid var(--line); }
.rn7-fcol a {
	display: flex; align-items: center; min-height: 44px;
	color: var(--ink-2); font-size: 14px; line-height: 1.6;
}
.rn7-fcol a:hover { color: var(--accent); text-decoration: none; }
.rn7-fhelp {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px;
}
.rn7-fhelp-t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.rn7-fhelp-a {
	min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
	background: var(--accent); color: var(--on-accent); border-radius: 12px;
	font-size: 14px; font-weight: 800;
}
.rn7-fhelp-a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.rn7-fpay {
	display: flex; align-items: center; gap: 8px 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px;
}
/* Wave 18: the label + marks group wraps INTERNALLY; the seal
   is a direct child pinned to the strip's row (flex: 0 0 auto
   below) — it never drops to a row of its own. */
.rn7-fpay-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 auto; min-width: 0; }
.rn7-fpay-t { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.rn7-fpay-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rn7-fpay-chips span {
	border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px;
	font-size: 12px; font-weight: 700; color: var(--ink); background: var(--bg);
}
.rn7-frate {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
	font-size: 13.5px; color: var(--ink-2); text-align: center; padding: 2px 8px;
}
.rn7-frate b { color: var(--ink); }
.rn7-fbase {
	border-block-start: 1px solid var(--line); padding-block-start: 14px;
	font-size: 12.5px; color: var(--ink-2); text-align: center; line-height: 1.6;
}

/* ================= V7 PRODUCT (Wave 1) =================
 * The buy zone is composed for the first viewport at 375:
 * compact crumbs → stage (registered FLAT family tint, §5 —
 * the V6 per-family gradients retire here) → decision card
 * overlapping the stage. Inside the card the DEC-07 order
 * stands (identity → facts → selector → price → delivery line
 * → action); the full certainty text lives in its own section
 * below. Type steps: product title 22/1.45, section heads
 * 19/1.45, body 16/1.65 — the §9 rhythm (32px section gaps,
 * 14px head→content) applies unchanged. */

/* Compact crumbs: one line, the current crumb ellipsises —
 * the trail never wraps into two lines again. */
body.rn5.single-product .rn5-crumbs { margin-block: 4px 8px; }
body.rn5.single-product .rn5-crumbs ol { flex-wrap: nowrap; overflow: hidden; }
body.rn5.single-product .rn5-crumbs li { flex: none; }
body.rn5.single-product .rn5-crumbs li.is-current { flex: 0 1 auto; min-width: 0; }
body.rn5.single-product .rn5-crumbs li.is-current span {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 34vw;
}

.rn7-product { gap: 0; margin-block-start: 4px; }

/* Stage: flat registered tint per family (color-mix 30% over
 * the page bg — the same values the home promo band ships). */
.rn7-stage {
	position: relative; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 12px; background: var(--surface);
}
.rn7-stage--stream { background: color-mix(in srgb, var(--fam-stream) 30%, var(--bg)); }
.rn7-stage--game { background: color-mix(in srgb, var(--fam-game) 30%, var(--bg)); }
.rn7-stage--cards { background: color-mix(in srgb, var(--fam-cards) 30%, var(--bg)); }
.rn7-stage--soft { background: color-mix(in srgb, var(--fam-soft) 30%, var(--bg)); }
.rn7-stage--social { background: color-mix(in srgb, var(--fam-social) 30%, var(--bg)); }
.rn7-stage--conn { background: color-mix(in srgb, var(--fam-conn) 30%, var(--bg)); }
.rn7-stage--generic { background: color-mix(in srgb, var(--fam-generic) 30%, var(--bg)); }
.rn7-stage .rn5-pgallery { max-width: 168px; margin-inline: auto; }
.rn7-stage .rn5-pgallery .woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 5; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.rn7-stage-cover { max-width: 168px; margin-inline: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-s); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.rn7-stage-cover .rn7-namecover-word { font-size: 15px; font-weight: 800; line-height: 1.5; }

/* Decision card. */
.rn7-decision {
	position: relative; z-index: 2;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 16px;
	margin-block-start: -30px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
	animation: rn7-rise .45s cubic-bezier(.22, 1, .36, 1) both;
}
.rn7-identity .rn5-badge { margin-block-end: 8px; }
.rn7-ptitle {
	font-size: 22px; font-weight: 800; line-height: 1.45; margin-block-end: 6px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-decision .rn5-rating-anchor, .rn7-decision .rn5-rating-none { font-size: 13.5px; }
.rn7-decision .rn6-facts { margin-block-start: 10px; gap: 6px; }
.rn7-decision .rn6-fact { padding: 7px 10px; }
.rn7-decision .rn6-preface { margin-block-start: 10px; padding: 10px 12px; font-size: 13.5px; }
/* The engine form flattens inside the card (one surface, one
 * border — the WP-6 rule carried over). */
.rn7-decision form.cart, .rn7-decision .rn5-buyzone {
	background: transparent; border: 0; box-shadow: none;
	padding: 0; margin-block-start: 12px; gap: 10px;
}
.rn7-decision .rn5-priceblock .rn5-price-num { font-size: 24px; font-weight: 900; }
.rn7-decision .rn5-priceblock .woocommerce-variation-price .price { font-size: 28px; font-weight: 800; }
.rn7-decision .rn5-priceblock .rn5-price-final { font-size: 12.5px; padding-block-start: 6px; margin-block-start: 4px; }
.rn7-decision .rn5-vargroup { gap: 6px; }
.rn7-decision .rn5-vargroup-label { font-size: 13.5px; }
.rn7-decision .rn5-varcards { grid-auto-columns: minmax(128px, 47%); padding-block-end: 2px; }
.rn7-decision .rn5-varcard { padding: 9px 11px; }
.rn7-decision .rn5-varcard-name { font-size: 13.5px; }
.rn7-decision .rn5-varcard-price { font-size: 15px; }
.rn7-decision .rn5-varcard:focus-within { outline: 2px solid var(--accent-light); outline-offset: 2px; }
/* Compact delivery line (buy zone): badge + destinations. */
.rn7-delivery-line {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.rn7-delivery-line .rn7-badge { margin-block-start: 0; flex: none; font-size: 12px; }
/* Express slot (§6): collapsed while empty; a real gateway's
 * official button fills it in Wave 2. */
.rn7-express { margin-block-start: 12px; }
.rn7-express:empty { display: none; }
.rn7-express > * { width: 100%; }
/* FEED-011 beside-CTA verified review. */
.rn7-cta-review {
	display: flex; align-items: center; gap: 8px; margin-block-start: 12px;
	padding: 10px 12px; background: var(--surface-2);
	border: 1px solid var(--line); border-radius: 10px;
	color: var(--ink); font-size: 12.5px; line-height: 1.55; text-decoration: none;
}
.rn7-cta-review .rn5-stars { flex: none; }
.rn7-cta-review-text { min-width: 0; }
.rn7-verified { color: var(--save); font-weight: 800; display: inline-flex; gap: 3px; align-items: center; flex: none; }

/* Buy bar: facts stack (price over the delivery/reason line)
 * + the one action. */
.rn7-buybar-facts { display: grid; gap: 1px; align-content: center; min-width: 0; }
.rn7-buybar .rn5-buybar-price { font-size: 16px; line-height: 1.3; }
.rn7-buybar .rn6-buybar-mode, .rn7-buybar .rn6-buybar-reason {
	flex: none; text-align: start; font-size: 11.5px; line-height: 1.35;
}
.rn7-buybar .rn5-btn { flex: 1; align-self: center; min-height: 48px; }
.rn7-buybar .rn5-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* Sections below the buy zone — §9 rhythm. */
.rn7-psection { margin-block-start: 32px; }
.rn7-psection > h2 { font-size: 19px; line-height: 1.45; margin-block-end: 14px; }
.rn7-psection .rn5-certainty { background: var(--surface); }
.rn7-psection .rn5-certainty-method, .rn7-psection .rn5-certainty-where { line-height: 1.6; }

/* Reviews: the engine comment list contained as cards; the
 * review form's fields are real fields (§8 item 1 — surface
 * fill, visible border, legible text). */
#rn5-reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#rn5-reviews .comment_container {
	display: flex; gap: 10px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px;
}
#rn5-reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
#rn5-reviews .comment-text { min-width: 0; }
#rn5-reviews #review_form input[type="text"],
#rn5-reviews #review_form input[type="email"],
#rn5-reviews #review_form textarea,
#rn5-reviews #review_form select {
	width: 100%; min-height: 48px; padding: 10px 12px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px;
	font: inherit; font-size: 14.5px;
}
#rn5-reviews #review_form label { font-weight: 700; font-size: 13.5px; }

/* Related / up-sells: the loop renders the existing card in
 * .rn5-grid (2 columns at 375 by the substrate's own rule);
 * the sections take the §9 rhythm here. The stacked-cards
 * defect measured in this wave was NOT the grid — it was the
 * parent theme's duplicate loop thumbnail printing a bare IMG
 * beside every card; removed at the hook (inc/v5/hooks.php). */
body.rn5.single-product .related.products, body.rn5.single-product .up-sells { margin-block-start: 32px; }
body.rn5.single-product .related.products > h2, body.rn5.single-product .up-sells > h2 {
	font-size: 19px; line-height: 1.45; margin-block-end: 14px;
}

@media (min-width: 1024px) {
	.rn7-stage { position: sticky; top: calc(var(--header-h) + 16px); padding: 20px; }
	.rn7-stage .rn5-pgallery, .rn7-stage-cover { max-width: 300px; }
	.rn7-decision { margin-block-start: 0; }
}

/* Companions (core module surface on this page): the shared
 * card fills the module's wrap; the reason line keeps the
 * module's own rhythm. */
.rn-idea-companion-wrap .rn5-card, .rn-idea-companion-wrap .rn7-card { width: 100%; height: 100%; }

/* =====================================================================
 * V7 WAVE 2 — CART + CHECKOUT + THANK-YOU (DESIGN-V7-SYSTEM §6/§8/§9).
 * Presentation only: every Woo class/id/name of the cart, checkout
 * and payment fragments is the engine's and stays; these scopes
 * recompose and restyle. Arabic letter-spacing pin extends to the
 * wave's scopes (§8 item 9).
 * ===================================================================== */
body.rn5 .rn7-cart, body.rn5 .rn7-checkout, body.rn5 .rn7-thankyou { letter-spacing: normal; }

/* ---- Cart: line composition in the V7 language ---- */
.rn5-cartlayout.rn7-cart { gap: 32px; }
.rn7-cart .rn5-cartline { align-items: start; }
.rn7-cart .rn5-cartline-media a { display: block; }
.rn7-cart .rn5-cartline-media .rn7-namecover {
	width: 72px; height: 90px; padding: 6px; gap: 4px; border-radius: 8px;
}
.rn7-cart .rn5-cartline-media .rn7-namecover-mark { width: 22px; height: 22px; border-radius: 7px; }
.rn7-cart .rn5-cartline-media .rn7-namecover-word {
	font-size: 9.5px; line-height: 1.5; display: -webkit-box;
	-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Title integrity (§8 item 5): two lines, then the clamp — the
 * full name stays in the DOM and in the link's target page. */
.rn7-cart .rn5-cartline-name {
	font-size: 14.5px; line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-cart .rn5-cartline-meta { line-height: 1.55; }
.rn7-cart .rn5-cartline-subtotal { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }

/* Quantity stepper (JS-added buttons; the input + the update
 * action remain the engine's contract and the no-JS path). */
.rn7-cart .quantity { display: inline-flex; align-items: stretch; }
.rn7-cart .quantity input.qty {
	width: 52px; min-height: 48px; text-align: center;
	border-block: 1px solid var(--line); border-inline: 0; border-radius: 0;
	background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 800;
	-moz-appearance: textfield; appearance: textfield;
}
.rn7-cart .quantity input.qty::-webkit-outer-spin-button,
.rn7-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rn7-qty-btn {
	width: 44px; min-height: 48px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); font-size: 20px; font-weight: 800; line-height: 1;
	cursor: pointer; padding: 0;
}
.rn7-qty-btn[data-rn7-qty="minus"] { border-radius: 0 10px 10px 0; border-inline-end: 0; }
.rn7-qty-btn[data-rn7-qty="plus"] { border-radius: 10px 0 0 10px; border-inline-start: 0; }
.rn7-qty-btn:active { background: var(--accent); color: var(--on-accent); }
.rn7-qty-btn:disabled { opacity: .38; cursor: default; }
.rn7-qty-btn:disabled:active { background: var(--surface-2); color: var(--ink); }

/* The totals card: the sanctioned final-price line sits under
 * the proceed action (proceed-to-checkout-button.php); the
 * express slot follows it, collapsed while empty (§6). */
.rn7-cart .rn5-totals .rn7-express { margin-block-start: 12px; }

/* ---- Checkout: fields are real fields (§8 item 1) ---- */
.rn7-checkout .rn5-checklayout { gap: 32px; }
.rn7-checkout .form-row { scroll-margin-top: 150px; }
.rn7-checkout .form-row input.input-text,
.rn7-checkout .form-row input[type="text"],
.rn7-checkout .form-row input[type="email"],
.rn7-checkout .form-row input[type="tel"],
.rn7-checkout .form-row input[type="number"],
.rn7-checkout .form-row select,
.rn7-checkout .form-row textarea.input-text,
.rn7-checkout .payment_box input[type="text"] {
	width: 100%; min-height: 48px; padding: 10px 12px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px;
	font: inherit; font-size: 14.5px;
}
.rn7-checkout .form-row textarea.input-text { min-height: 96px; }
.rn7-checkout .form-row input::placeholder,
.rn7-checkout .form-row textarea::placeholder { color: var(--ink-2); opacity: 1; }
.rn7-checkout .form-row input:focus,
.rn7-checkout .form-row select:focus,
.rn7-checkout .form-row textarea:focus,
.rn7-checkout .payment_box input[type="text"]:focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(0, 200, 255, .22);
}
.rn7-checkout .form-row.woocommerce-invalid input.input-text,
.rn7-checkout .form-row.woocommerce-invalid select,
.rn7-checkout .form-row.woocommerce-invalid textarea.input-text,
.rn7-checkout .form-row input[aria-invalid="true"] { border-color: var(--danger); }
/* Woo renders the country select through selectWoo: same field
 * treatment for the enhanced control. */
.rn7-checkout .select2-container .select2-selection--single {
	background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 10px; height: 48px;
}
.rn7-checkout .select2-container .select2-selection__rendered { color: var(--ink); line-height: 46px; font-size: 14.5px; }
.rn7-checkout .select2-container .select2-selection__arrow { height: 46px; }
/* The sanctioned phone helper + any field description reads as
 * a helper line under its field, never as body copy. */
.rn7-checkout .form-row .description {
	display: block; color: var(--ink-2);
	font-size: 12.5px; line-height: 1.6; margin-block-start: 6px;
}
/* X-09: the inline error lives under ITS field (JS-injected from
 * the engine's own invalid marks — values are never touched). */
.rn7-field-error {
	color: var(--danger); font-size: 12.5px; font-weight: 700;
	line-height: 1.6; margin-block-start: 6px;
}
/* Payment methods: real radio cards; the checked method is the
 * accent-edged card; every row is a ≥44px target. */
.rn7-checkout #payment li.payment_method > label {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px; cursor: pointer; font-size: 15px;
}
.rn7-checkout #payment input.input-radio {
	width: 20px; height: 20px; flex: none; accent-color: var(--accent); cursor: pointer;
}
.rn7-checkout #payment li.payment_method:has(> input.input-radio:checked) { border-color: var(--accent); }
.rn7-checkout .payment_box input[type="file"] { color: var(--ink); font: inherit; font-size: 13.5px; max-width: 100%; }
.rn7-checkout .rn7-express { margin-block: 4px 16px; }

/* ---- Thank-you: the post-payment account offer (§6 item 4) ---- */
.rn7-account-offer {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px; margin-block-start: 32px;
}
.rn7-account-offer h2 { font-size: 19px; line-height: 1.45; margin-block-end: 8px; }
.rn7-account-offer p { color: var(--ink-2); line-height: 1.65; }
.rn7-account-offer .rn5-btn { margin-block-start: 14px; }
.rn7-account-offer .rn7-account-offer-note { font-size: 12.5px; margin-block-start: 10px; }

/* ================= V7 WAVE 3 — ACCOUNT AREA =================
 * DESIGN-V7-SYSTEM §8.1/§9 on the account surfaces. Before this
 * wave the account forms inherited WooCommerce's light defaults
 * (transparent fill, rgba(0,0,0,.1) border) — fields read as
 * voids on the dark identity (recon-measured: bg rgba(0,0,0,0),
 * border rgba(0,0,0,0.1)). The treatment below is the checkout
 * treatment of Wave 2, scoped to the account regions only:
 * the MyAccount content frame, the auth cards and the
 * lost/reset-password forms. Arabic letter-spacing stays normal
 * (§8 item 9) — the anchor states it for this wave's scopes. */
body.rn5.woocommerce-account { letter-spacing: normal; }

/* ---- §8.1 fields: real fill, visible border, 48px ---- */
body.rn5.woocommerce-account :is(.woocommerce-MyAccount-content, .rn5-authcard, .lost_reset_password) :is(
	input[type="text"], input[type="email"], input[type="password"],
	input[type="tel"], input[type="number"], input[type="url"],
	input[type="search"], input[type="date"], select, textarea
) {
	background: var(--surface-2); border: 1px solid rgba(255,255,255,.38);
	border-radius: 10px; min-height: 48px; padding: 10px 12px;
	color: var(--ink); font: inherit; width: 100%;
}
body.rn5.woocommerce-account :is(.woocommerce-MyAccount-content, .rn5-authcard, .lost_reset_password) :is(
	input[type="text"], input[type="email"], input[type="password"],
	input[type="tel"], input[type="number"], input[type="url"],
	input[type="search"], input[type="date"], select, textarea
)::placeholder { color: var(--ink-2); opacity: 1; }
body.rn5.woocommerce-account :is(.woocommerce-MyAccount-content, .rn5-authcard, .lost_reset_password) :is(
	input[type="text"], input[type="email"], input[type="password"],
	input[type="tel"], input[type="number"], input[type="url"],
	input[type="search"], input[type="date"], select, textarea
):focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(0,200,255,.22);
}
/* The engine's own invalid mark (where it marks) gets the danger
 * border — the same rule as checkout (Wave 2). */
body.rn5.woocommerce-account .woocommerce-invalid :is(
	input[type="text"], input[type="email"], input[type="password"],
	input[type="tel"], input[type="number"], select, textarea
) { border-color: var(--danger); }
/* Labels: one rhythm across every account form. */
body.rn5.woocommerce-account :is(.woocommerce-MyAccount-content, .rn5-authcard, .lost_reset_password) label:not(.woocommerce-form__label-for-checkbox) {
	color: var(--ink); font-weight: 700; font-size: 13.5px;
	line-height: 1.5; margin-block-end: 6px;
}
body.rn5.woocommerce-account label .required { color: var(--danger); }
/* Native checkbox keeps its label as the ≥44px control (R2-G-1);
 * the box itself grows to a legible 20px and takes the accent. */
body.rn5.woocommerce-account input[type="checkbox"] {
	width: 20px; height: 20px; accent-color: var(--accent); flex: none;
}
/* selectWoo-enhanced selects (address country/state) get the
 * same field treatment as the native control. */
body.rn5.woocommerce-account .select2-container .select2-selection--single {
	background: var(--surface-2); border: 1px solid rgba(255,255,255,.38);
	border-radius: 10px; min-height: 48px;
}
body.rn5.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--ink); line-height: 46px; padding-inline: 12px;
}
body.rn5.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
/* Notices inside the account frame: panel radius + breathing
 * room (the base notice rule carries colours and the start
 * border). */
body.rn5.woocommerce-account :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	border-radius: 10px; padding: 12px 16px; margin-block-end: 16px;
}
/* P6 §3: the account info notice (e.g. payment-methods) takes the
 * same card treatment as the account tables — inset 16px so its
 * button never touches the screen edge. */
body.rn5 .rn5-frame .woocommerce-info {
	background: var(--surface); border-color: var(--line);
	border-radius: 16px; padding: 16px; margin-inline: 16px;
}
/* Keyboard focus is visible on every account control. */
body.rn5.woocommerce-account :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Dashboard identity block (Wave 3 composition) ---- */
.rn7-identity {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 16px; margin-block-end: 24px;
}
.rn7-identity-avatar { flex: none; }
.rn7-identity-avatar img { width: 52px; height: 52px; border-radius: 50%; display: block; }
.rn7-identity-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 180px; }
.rn7-identity-name { font-size: 17px; font-weight: 800; line-height: 1.45; }
.rn7-identity-mail { color: var(--ink-2); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; text-align: end; }
.rn7-identity-line { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.rn7-identity-edit {
	flex: none; display: inline-flex; align-items: center; min-height: 44px;
	padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
	background: var(--surface-2); color: var(--ink); font-weight: 800; font-size: 13.5px;
}
.rn7-identity-edit:hover { text-decoration: none; border-color: var(--accent-bright); }
/* Dashboard tiles: the tile link's own box joins the tile's
 * stretched-link area at ≥44px (the census measures the box;
 * the round-2 note at .rn5-atile records why the tile is the
 * target). */
body.rn5.woocommerce-account .rn5-atile a {
	display: inline-flex; align-items: center; min-height: 44px;
}

/* ---- Edit account: the password-change panel + avatar slot ---- */
body.rn5.woocommerce-account .rn7-pwfieldset {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 16px 10px;
	margin: 6px 0 18px; min-width: 0;
}
body.rn5.woocommerce-account .rn7-pwfieldset legend {
	color: var(--ink); font-size: 16px; font-weight: 800;
	line-height: 1.45; padding-inline: 8px;
}
body.rn5.woocommerce-account #account_display_name_description {
	display: block; color: var(--ink-2); font-size: 12.5px;
	line-height: 1.6; margin-block-start: 6px;
}
/* The F-4 slot: hook output that renders complete forms of its
 * own (the core avatar upload) lands here, a sibling of the
 * account form — panelled as its own account section. */
.rn7-account-extras { margin-block-start: 20px; }
body.rn5.woocommerce-account .rasid-next-avatar-form {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 16px;
}
body.rn5.woocommerce-account .rasid-next-avatar-form img { border-radius: 50%; }
body.rn5.woocommerce-account .rasid-next-avatar-form input[type="file"] {
	color: var(--ink); font: inherit; font-size: 13.5px; max-width: 100%;
}
body.rn5.woocommerce-account .rasid-next-avatar-notice {
	border: 1px solid var(--line); border-inline-start: 3px solid var(--save);
	border-radius: var(--radius-s); padding: 10px 14px; margin-block-end: 12px;
	font-size: 13.5px; font-weight: 700;
}
body.rn5.woocommerce-account .rasid-next-avatar-notice--err { border-inline-start-color: var(--danger); }

/* ---- Order view: customer-details address + order notes ---- */
body.rn5.woocommerce-account .woocommerce-customer-details address {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-s); padding: 14px 16px;
	line-height: 1.7; font-style: normal;
}
body.rn5.woocommerce-account .woocommerce-OrderUpdates { list-style: none; padding: 0; }
body.rn5.woocommerce-account .woocommerce-OrderUpdates .woocommerce-OrderUpdate-text {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-s); padding: 12px 14px;
}
body.rn5.woocommerce-account .woocommerce-OrderUpdates .woocommerce-OrderUpdate-meta {
	color: var(--ink-2); font-size: 12px; margin-block-end: 4px;
}

/* ---- Addresses: the saved-address cards become panels ---- */
body.rn5.woocommerce-account .woocommerce-Address {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 16px; margin-block-end: 16px;
}
body.rn5.woocommerce-account .woocommerce-Address address { line-height: 1.7; font-style: normal; }

/* ================= V7 WAVE 4 — CATALOGUE (shop / category / search) =================
 * One composition for every browsing surface, scoped .rn7-cat
 * (archive-product.php). The loop renders the V7 DS card on the
 * V7 grid; this section owns the catalogue furniture only: the
 * head band, the categories index, the toolbar targets, the
 * pagination geometry and the dark restyle of the two core-module
 * panels that render on the zero-results surface (their own
 * stylesheet is a light theme — the plugin is untouched; the
 * theme scopes their presentation onto the dark system, the same
 * treatment Waves 2–3 gave plugin furniture). */

/* Head band: §9 rhythm; on term archives the band is an ART FIELD
 * in the family's registered tint (§5 — the promo band's exact
 * color-mix; white text measures above 7:1 on every tint, the
 * meta/crumb lines ride at the promo description's .88 white). */
body.rn5 .rn7-cat .rn5-listhead { margin-block: 20px 16px; }
body.rn5 .rn7-cat .rn5-listhead h1 { font-size: 24px; line-height: 1.45; }
body.rn5 .rn7-cat-head { border-radius: 16px; padding: 14px 16px; }
body.rn5 .rn7-cat-head--stream { background: color-mix(in srgb, var(--fam-stream) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--game { background: color-mix(in srgb, var(--fam-game) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--cards { background: color-mix(in srgb, var(--fam-cards) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--soft { background: color-mix(in srgb, var(--fam-soft) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--social { background: color-mix(in srgb, var(--fam-social) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--conn { background: color-mix(in srgb, var(--fam-conn) 30%, var(--bg)); }
body.rn5 .rn7-cat-head--generic { background: color-mix(in srgb, var(--fam-generic) 30%, var(--bg)); }
body.rn5 .rn7-cat-head .rn5-crumbs { color: rgba(255, 255, 255, .82); margin-block-start: 0; }
body.rn5 .rn7-cat-head .rn5-crumb a { color: rgba(255, 255, 255, .82); }
body.rn5 .rn7-cat-head .rn5-resultcount { color: rgba(255, 255, 255, .88); }
body.rn5 .rn7-cat-head .rn5-prose { color: rgba(255, 255, 255, .92); line-height: 1.7; }
body.rn5 .rn7-cat .rn5-prose { line-height: 1.7; }

/* Categories index (shop root): the substrate tiles' proven
 * responsive pattern — one snap rail on mobile (a 12-row grid
 * would bury the products), a true grid from 768 up. The art
 * field is the registered family tint; a term thumbnail, when the
 * term carries one, covers it whole. */
.rn7-catindex { margin-block-end: 20px; }
.rn7-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .rn7-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .rn7-tiles { grid-template-columns: repeat(4, 1fr); } }
.rn7-tile {
	display: block; background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; overflow: hidden; color: var(--ink);
}
.rn7-tile:hover { text-decoration: none; border-color: var(--accent-bright); }
.rn7-tile-art { display: block; height: 64px; background: var(--surface-2); overflow: hidden; }
.rn7-tile--stream .rn7-tile-art { background: color-mix(in srgb, var(--fam-stream) 30%, var(--bg)); }
.rn7-tile--game .rn7-tile-art { background: color-mix(in srgb, var(--fam-game) 30%, var(--bg)); }
.rn7-tile--cards .rn7-tile-art { background: color-mix(in srgb, var(--fam-cards) 30%, var(--bg)); }
.rn7-tile--soft .rn7-tile-art { background: color-mix(in srgb, var(--fam-soft) 30%, var(--bg)); }
.rn7-tile--social .rn7-tile-art { background: color-mix(in srgb, var(--fam-social) 30%, var(--bg)); }
.rn7-tile--conn .rn7-tile-art { background: color-mix(in srgb, var(--fam-conn) 30%, var(--bg)); }
.rn7-tile--generic .rn7-tile-art { background: color-mix(in srgb, var(--fam-generic) 30%, var(--bg)); }
.rn7-tile-art img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); display: block; }
.rn7-tile-word { display: block; padding: 12px 14px 2px; font-weight: 800; font-size: 16px; line-height: 1.5; color: #fff; }
.rn7-tile-meta { display: block; padding: 8px 14px 12px; font-size: 12px; color: var(--ink-2); }
/* An imaged term's name lives in the meta — clamped to the same
 * two lines every title in the system gets (§8 item 5), so a long
 * name can never crush the art field above it. */
.rn7-tile-meta strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; color: var(--ink); margin-block-end: 2px; }
@media (max-width: 767px) {
	.rn7-tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 6px; align-items: flex-start; }
	/* Flex column with a FIXED art height: the first geometry (a
	 * fixed 88px tile) let a tall meta squeeze one imaged tile's
	 * art to 8px, and the substrate's 34px band clipped two-line
	 * names. The art now owns its 58px, the meta takes what it
	 * needs below it, and the wider basis lets every current
	 * category name close inside the two-line reservation. */
	.rn7-tile { flex: 0 0 168px; scroll-snap-align: start; display: flex; flex-direction: column; }
	.rn7-tile-art { height: 66px; flex: none; }
	.rn7-tile-meta { flex: none; }
	/* A directory label is not a product title: on the narrow
	 * rail it may take a third line rather than truncate a word
	 * (§8 item 5's anti-mangling rule outranks the two-line habit
	 * here). The 66px art field holds three 12.5px lines whole. */
	.rn7-tile-word { font-size: 12.5px; line-height: 1.45; padding: 8px 10px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.45em + 6px); }
	.rn7-tile-meta { padding: 0 10px 8px; }
}

/* Toolbar targets (§8: every control a real target): facet chips
 * 40 -> 44, the sort select becomes a §8.1 field at 48, the
 * subcategory strip chips match the chip system at 44. */
body.rn5 .rn7-cat .rn6-facet-chip { min-height: 44px; padding-block: 8px; }
body.rn5 .rn7-cat .rn6-facet-count, body.rn5 .rn7-cat .rn6-facet-clear { display: inline-flex; align-items: center; min-height: 44px; }
body.rn5 .rn7-cat .rn6-ordering select {
	min-height: 48px; background: var(--surface); color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px; padding-inline: 10px;
}
body.rn5 .rn7-cat .rn5-catstrip a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pagination geometry: the base sheet promises 44px but the
 * parent cascade delivers 34px on this frame — the scope
 * re-asserts the system's own number (and its current state). */
body.rn5 .rn7-cat .woocommerce-pagination { margin-block-start: 32px; }
body.rn5 .rn7-cat .woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding-inline: 10px;
	border: 1px solid var(--line); border-radius: var(--radius-s);
	background: var(--surface); color: var(--ink); font-weight: 800;
}
body.rn5 .rn7-cat .woocommerce-pagination .page-numbers.current {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* Zero-results module panels (rasid-next-core furniture, FEED-031
 * leg 2 + FEED-152): restated on the dark system. The request
 * panel is position:relative + overflow:hidden so the module's
 * off-screen honeypot (left:-9999px, a legacy visually-hidden
 * pattern) is clipped by its own panel instead of widening the
 * document in RTL (recon measured scrollWidth 10359 at 375). */
body.rn5 .rn7-cat .rn-idea-zero,
body.rn5 .rn7-cat .rn-idea-request {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; color: var(--ink); padding: 20px; margin-block: 20px;
}
body.rn5 .rn7-cat .rn-idea-request { position: relative; overflow: hidden; }
body.rn5 .rn7-cat .rn-idea-request h3 { color: var(--ink); margin-block-start: 0; }
body.rn5 .rn7-cat .rn-idea-zero-label { color: var(--ink); font-weight: 700; }
body.rn5 .rn7-cat .rn-idea-zero-cats a,
body.rn5 .rn7-cat .rn-idea-zero-new a {
	display: inline-flex; align-items: center; min-height: 44px;
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: 999px; padding: 6px 14px; color: var(--ink); font-weight: 700;
}
body.rn5 .rn7-cat .rn-idea-zero-cats a:hover,
body.rn5 .rn7-cat .rn-idea-zero-new a:hover { text-decoration: none; border-color: var(--accent-bright); }
body.rn5 .rn7-cat .rn-idea-request-form label { color: var(--ink); font-weight: 700; }
body.rn5 .rn7-cat .rn-idea-request-form input[type="text"] {
	background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 10px; color: var(--ink); min-height: 48px;
	padding-inline: 12px; width: 100%; max-width: 420px;
}
body.rn5 .rn7-cat .rn-idea-request-note { color: var(--ink-2); }
body.rn5 .rn7-cat .rn-idea-request-done { color: var(--save); font-weight: 700; }
body.rn5 .rn7-cat .rn-idea-zero-actions a { display: inline-flex; align-items: center; min-height: 44px; }
body.rn5 .rn7-cat .rn-idea-request-form .button,
body.rn5 .rn7-cat .rn-idea-zero-actions .button {
	background: var(--accent); color: var(--on-accent); border: 0;
	border-radius: 12px; min-height: 48px; padding-inline: 20px; font-weight: 800;
	display: inline-flex; align-items: center;
}

/* ================= V7 WAVE 5 — CONTENT SURFACES (article / guest tracking / verification / 404) =================
 * One content composition for every long-form surface (doctrine
 * §0: one component system, no spot solutions). Three scopes share
 * it: .rn7-article (theme page/index templates), .rn-verify and
 * .rn-track-order (core-module mains printed inside the theme
 * chrome — their markup is the module's own and cannot be
 * template-scoped, so the composition is style-scoped to their
 * frames exactly as Wave 4 treated the zero-results panels; the
 * modules themselves are untouched). */

/* ---- The content panel: one measure, one panel language ---- */
body.rn5 .rn7-article,
body.rn5 .rn-verify,
body.rn5 .rn-track-order {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; padding: 22px 20px; max-width: 720px;
}
body.rn5 .rn7-article { margin-block-start: 20px; margin-inline: auto; }
/* The module mains are direct children of #rn5-main (no .rn5-wrap
 * around them), so they carry their own page margin. */
body.rn5 #rn5-main > .rn-verify,
body.rn5 #rn5-main > .rn-track-order { margin: 20px 16px 8px; }
@media (min-width: 768px) {
	body.rn5 #rn5-main > .rn-verify,
	body.rn5 #rn5-main > .rn-track-order { margin-inline: auto; }
}

/* ---- Prose rhythm inside the panel (§9 scale) ---- */
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) h1 {
	font-size: 26px; line-height: 1.45; font-weight: 900; margin-block-end: 12px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) h2 {
	font-size: 22px; line-height: 1.45; font-weight: 800; margin-block: 26px 10px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) h3 {
	font-size: 17px; line-height: 1.5; font-weight: 800; margin-block: 20px 8px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) p {
	font-size: 16px; line-height: 1.7; margin-block-end: 14px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) ul,
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) ol {
	padding-inline-start: 22px; margin-block-end: 14px; line-height: 1.7;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) li { margin-block-end: 6px; }
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) a:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart) { /* Wave 10: button components excluded, same rule as prose/frame — this article-family link rule (0,2,2) was still painting the FEED-225 exit-A primary button's label after the prose/frame exclusions (CDP-named) */
	color: var(--accent-bright); font-weight: 700;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) blockquote {
	background: var(--surface-2); border-inline-start: 3px solid var(--accent);
	border-radius: 10px; padding: 14px 16px; margin: 0 0 14px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) blockquote p:last-child { margin-block-end: 0; }
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) table {
	width: 100%; border-collapse: collapse; font-size: 14px;
	background: var(--bg); border: 1px solid var(--line);
	border-radius: 10px; overflow: hidden; margin-block-end: 16px;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) th,
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) td {
	padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: middle;
}
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) img { border-radius: 10px; }
body.rn5 :is(.rn7-article, .rn-verify, .rn-track-order) code {
	background: var(--surface-2); border-radius: 6px; padding: 2px 7px; font-size: 13.5px;
}

/* ---- Guest tracking: the form is real fields (§8 item 1, the
 * Wave 2 field values verbatim) ---- */
body.rn5 .rn-track-form { margin-block-start: 18px; }
body.rn5 .rn-track-form p { margin-block-end: 16px; }
body.rn5 .rn-track-form label {
	display: block; font-size: 14px; font-weight: 700;
	color: var(--ink); margin-block-end: 8px;
}
body.rn5 .rn-track-form input[type="text"] {
	width: 100%; min-height: 48px; padding: 10px 12px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px;
	font: inherit; font-size: 16px;
}
body.rn5 .rn-track-form input[type="text"]:focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(0, 200, 255, .22);
}
body.rn5 .rn-track-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; padding: 10px 22px;
	background: var(--accent); color: var(--on-accent);
	border: 1px solid var(--accent); border-radius: var(--radius-s);
	font-weight: 800; font-size: 15.5px; cursor: pointer;
}
/* The module's generic failure (its no-oracle contract) reads as
 * the system's danger notice — text untouched. */
body.rn5 .rn-track-error {
	background: rgba(248, 113, 113, .10);
	border: 1px solid rgba(248, 113, 113, .45);
	color: var(--danger); font-weight: 700; font-size: 14px; line-height: 1.65;
	border-radius: 10px; padding: 12px 14px; margin-block-start: 16px;
}
/* The tracked result: an inner panel on the article panel. */
body.rn5 .rn-track-result {
	background: var(--bg); border: 1px solid var(--line);
	border-radius: 14px; padding: 18px; margin-block-start: 20px;
}
body.rn5 .rn-track-result h2 { font-size: 19px; margin-block: 0 8px; }
body.rn5 .rn-track-status { font-weight: 700; }
body.rn5 .rn-track-timeline {
	display: flex; gap: 6px; flex-wrap: wrap;
	list-style: none; padding: 0; margin: 14px 0;
}
body.rn5 .rn-track-timeline li {
	flex: 1 1 40%; display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 8px 10px; text-align: center;
	border: 1px solid var(--line); border-radius: 999px;
	font-size: 13px; color: var(--ink-2); margin: 0;
}
body.rn5 .rn-track-timeline li.is-done {
	background: var(--accent); border-color: var(--accent);
	color: var(--on-accent); font-weight: 700;
}
body.rn5 .rn-track-result h3 { font-size: 16px; margin-block: 18px 6px; }
body.rn5 .rn-track-items,
body.rn5 .rn-track-deliveries { list-style: none; padding: 0; margin-block-end: 14px; }
body.rn5 .rn-track-items li,
body.rn5 .rn-track-deliveries li {
	padding-block: 9px; border-block-end: 1px solid var(--line); margin: 0;
}
body.rn5 .rn-track-items li:last-child,
body.rn5 .rn-track-deliveries li:last-child { border-block-end: 0; }
body.rn5 .rn-track-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
/* The module's discoverability link under the account login form
 * is a real target, not a text line. */
body.rn5 .rn-track-login-link a {
	display: inline-flex; align-items: center; min-height: 44px;
}

/* ---- 404: the same rhythm (statement is a display moment) ---- */
body.rn5 .rn7-404 { padding-block: 48px 8px; }
body.rn5 .rn7-404 h1 { font-size: 32px; line-height: 1.4; }
body.rn5 .rn7-404 .rn5-hero-sub { font-size: 16px; line-height: 1.7; }
body.rn5 .rn7-404 .rn5-zero-chips { margin-block-start: 24px; }
body.rn5 .rn7-404 .rn7-404-home { margin-block-start: 24px; }

/* ============================================================
 * WAVE 6 — FEED-306 purchase-path accessibility + FEED-217
 * in-app rescue (presentation layer only).
 *
 * A1 — Focus visibility: the parent kills outlines with
 * a:is(:hover,:focus,:active){outline:none} and a:focus
 * (specificity 0,1,1), which silently beat this sheet's bare
 * :focus-visible rule (0,1,0) — keyboard focus computed to
 * `3px none` (invisible) on links/buttons/controls across
 * home/product/cart/checkout (CDP matched-styles proof in the
 * wave record). The account pages survived only via the wave-3
 * scoped rule. The rule below scopes to body.rn5 and lists the
 * interactive set explicitly (0,3,1) so it wins the war the
 * parent started; form fields that carry their own designed
 * :focus treatment (accent border + ring) keep it untouched.
 * ============================================================ */
body.rn5 :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
	outline: 2px solid var(--accent-light);
	outline-offset: 2px;
}
body.rn5 .rn7-checkout .form-row :is(input, select, textarea):focus-visible {
	outline: none; /* wave-2 field treatment (border + ring) stands alone */
}
/* A1b — two widget stragglers the general rule ties/loses to
 * (CDP matched-styles proof, probe2): WooCommerce's select2 CSS
 * kills the country box's outline at equal specificity but later
 * source order, and the receipt plugin's own sheet kills its
 * upload area's outline at ID specificity. Both get widget-state
 * rules at winning specificity — presentation only; neither the
 * plugin nor Woo's files are touched. */
body.rn5 .select2-container--default .select2-selection--single:focus-visible {
	outline: 2px solid var(--accent-light);
	outline-offset: 2px;
}
body.rn5 .rn-receipt #upload_area:focus-visible {
	outline: 2px solid var(--accent-light);
	outline-offset: 2px;
}

/* A2 — Skip link: visually hidden until keyboard focus, then a
 * solid pill above all chrome. The parent's own skip link
 * targeted #main-content, which this layer never renders; it is
 * removed in boot.php and this is the only one. */
body.rn5 .rn7-skip {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.rn5 .rn7-skip:focus-visible {
	position: fixed; top: 10px; inset-inline-start: 10px;
	width: auto; height: auto; min-height: 48px; margin: 0;
	display: inline-flex; align-items: center;
	padding: 10px 18px; overflow: visible; clip-path: none;
	background: var(--accent); color: var(--on-accent);
	font-weight: 800; font-size: 15px; border-radius: 12px;
	text-decoration: none; z-index: 100000;
}
body.rn5 #rn5-main:focus { outline: none; } /* skip target: focus lands, no ring on the whole page */

/* FEED-217 — the in-app rescue strip: in-flow, under the chrome,
 * never an overlay; dismiss is one 44px tap. */
body.rn5 .rn7-iab {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var(--surface); border-bottom: 1px solid var(--line);
	padding: 10px 14px;
}
body.rn5 .rn7-iab-text {
	flex: 1 1 190px; margin: 0;
	font-size: 13.5px; line-height: 1.7; color: var(--ink);
}
body.rn5 .rn7-iab-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 8px 14px;
	background: transparent; color: var(--accent);
	border: 1px solid var(--accent); border-radius: 10px;
	font: inherit; font-size: 14px; font-weight: 700;
	cursor: pointer; text-decoration: none;
}
body.rn5 .rn7-iab-btn--open { background: var(--accent); color: var(--on-accent); }
body.rn5 .rn7-iab-close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: 0 0 44px;
	background: transparent; color: var(--muted);
	border: 1px solid var(--line); border-radius: 10px;
	font: inherit; font-size: 15px; cursor: pointer;
}

/* ============================================================
 * V7 WAVE 7 — OWNER CORRECTION BATCH (2026-10-26): container
 * inset root fix, prose rhythm, contrast floor pins, reviews
 * rebuild, auth tabs. Evidence: qa/design-v7/wave7/.
 * ============================================================ */

/* W7-1a — THE CONTAINER INSET (root fix, Item 1). The product
 * template's below-fold stack was never wrapped in the DS
 * container (.rn5-wrap), so every unpanelled section rendered
 * full-bleed: text, list markers and form fields flush at the
 * physical screen edge (measured pad 0 on the whole ancestor
 * chain, probe2). The inset now lives on the section stack
 * itself — one system rule, not per-page patches. Framed
 * sections (.rn5-frame) self-pad and are excluded; the media
 * stage stays full-bleed by design (art field). */
body.rn5.single-product :is(.rn5-psection, .rn7-psection):not(.rn5-frame) {
	padding-inline: 16px;
}
body.rn5.single-product .rn5-crumbs { padding-inline: 16px; }

/* W7-1b — the header row must compress, never overflow: at
 * layout widths <= ~358px the actions measured 12.6px past the
 * left edge. Diagnosis (probe8, layout 345): the actions
 * (2 x 44px targets) cannot shrink and the search is hidden —
 * the rigid child was the LOGO itself (flex: 0 0 auto as a
 * header item, 237.6px), so the row pushed the actions out.
 * The logo item now shrinks (flex-shrink 1 + min-width 0) and
 * the wordmark ellipsises inside it; the mark carries the
 * identity. The row's gaps also tighten on narrow screens. */
.rn5-logo { min-width: 0; flex: 0 1 auto; }
.rn5-logo-word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 380px) {
	.rn5-header-in { gap: 8px; }
	.rn5-header-actions { gap: 2px; }
}

/* W7-2a — PROSE RHYTHM (Item 2): the documented prose scale
 * (DESIGN-V7-SYSTEM §9 + the Wave-5 article rhythm) applied to
 * product prose explicitly — before, in-prose headings rode
 * generic content rules (H2 24px/1.4, H3 22px/1.4 measured) and
 * the body inherited 1.65 instead of the rhythm's 1.7. */
body.rn5 .rn5-prose { line-height: 1.7; }
body.rn5 .rn5-prose h2 { font-size: 22px; line-height: 1.45; }
body.rn5 .rn5-prose h3 { font-size: 17px; line-height: 1.5; }
body.rn5 .rn5-prose h4 { font-size: 15px; line-height: 1.5; }
body.rn5 .rn5-prose table { max-width: 100%; }

/* W7-2b — CONTRAST FLOOR PINS (Item 2): every pair below was
 * measured BELOW the WCAG AA floor wearing a non-DS colour
 * from the parent/module sheets (fg values in the wave
 * record). Each pin uses a REGISTERED token only. */
body.rn5 .rn5-prose a:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart) { color: var(--accent); text-underline-offset: 3px; } /* was #333, 1.39:1 — the «تصفح» ghost link class. Wave 10 (owner correction item 1): this rule at (0,2,2) also captured the .rn7-add BUTTON anchors the basket-companions module prints inside .rn5-prose (cart + product), painting their labels var(--accent) on the accent ground .rn7-add itself sets — computed ratio 1.00, labels invisible (CDP getMatchedStylesForNode named this rule the winner). Button components are excluded here and in the frame/woocommerce link rules above: a button's label colour belongs to the button's own rule, never to a link rule. */
body.rn5 .rn5-crumbs a { color: var(--ink-2); } /* was #333, 1.39:1 */
body.rn5 .comment-form .required,
body.rn5 #respond .required { color: var(--danger); } /* was #E01020, 3.57:1 */
body.rn5 .rn-idea-companions-sub { color: var(--ink-2); } /* was #4A5A60, 2.45:1 */
body.rn5 .rn-idea-companion-reason { color: var(--ink-2); } /* was #005F73, 2.41:1 */

/* W7-3 — REVIEWS REBUILD (Item 3). The summary header
 * (rn5-revsum: average + count + distribution) already ships
 * in the DS and stays; everything below it is recomposed. */
/* The ONE empty state: the summary's empty variant becomes an
 * elegant invitation panel (the template's duplicate
 * .woocommerce-noreviews line is removed in the template; the
 * buy-zone identity slot no longer repeats the message). */
body.rn5 .rn5-revsum--empty {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px 16px; text-align: center;
}
body.rn5 .rn5-revsum--empty p { font-size: 15px; line-height: 1.7; color: var(--ink); }
/* The list: DS panel rows over the engine's comment markup. */
body.rn5 #reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
body.rn5 #reviews .commentlist .rn5-reviewitem {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 14px;
}
body.rn5 #reviews .comment_container { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
body.rn5 #reviews .comment_container img.avatar { border-radius: 50%; width: 40px; height: 40px; }
body.rn5 #reviews .comment-text { margin: 0; }
body.rn5 #reviews .woocommerce-review__author { color: var(--ink); font-weight: 700; font-size: 14px; }
body.rn5 #reviews .woocommerce-review__published-date { color: var(--ink-2); font-size: 12px; }
body.rn5 #reviews .woocommerce-review__dash { color: var(--ink-2); }
body.rn5 #reviews .description { font-size: 14.5px; line-height: 1.7; margin-block-start: 6px; }
body.rn5 #reviews .rn5-verified { color: var(--save); font-size: 12.5px; font-weight: 700; margin-block-start: 4px; }
body.rn5 #reviews .rn5-awaiting {
	color: var(--accent); font-size: 13px; font-weight: 700;
	border: 1px solid var(--accent); border-radius: 10px;
	padding: 8px 10px; margin-block-start: 8px;
}
/* Woo's .star-rating painted with the DS star token (the Woo
 * icon font is not part of this layer): outline row beneath, the
 * engine's own inline width% span clips the filled row. */
body.rn5 .star-rating {
	position: relative; display: inline-block; vertical-align: middle;
	width: 5.6em; height: 1.1em; overflow: hidden;
	font-size: 15px; line-height: 1.1; color: rgba(255, 255, 255, .14);
}
body.rn5 .star-rating::before {
	content: "★★★★★"; position: absolute; inset-inline-start: 0; top: 0; letter-spacing: 2px;
}
body.rn5 .star-rating > span {
	position: absolute; inset-inline-start: 0; top: 0; height: 100%;
	overflow: hidden; color: var(--star); font-size: 0;
}
body.rn5 .star-rating > span::before {
	content: "★★★★★"; position: absolute; inset-inline-start: 0; top: 0;
	font-size: 15px; line-height: 1.1; letter-spacing: 2px;
}
/* The form: one DS panel; fields at the §8.1 standard measured
 * on Waves 2/3 (inset page-bg fill on the panel, visible
 * border, 48px, accent focus ring). */
body.rn5 #review_form {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 18px 16px;
}
body.rn5 #review_form .comment-reply-title {
	display: block; font-size: 18px; font-weight: 800; line-height: 1.45; margin-block-end: 6px;
}
body.rn5 #review_form .comment-notes { color: var(--ink-2); font-size: 13px; line-height: 1.6; margin-block-end: 14px; }
body.rn5 #review_form label { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; margin-block-end: 6px; }
body.rn5 #review_form .comment-form-rating,
body.rn5 #review_form .comment-form-comment,
body.rn5 #review_form .comment-form-author,
body.rn5 #review_form .comment-form-email,
body.rn5 #review_form .comment-form-cookies-consent { margin-block-end: 14px; }
body.rn5 #review_form input[type="text"],
body.rn5 #review_form input[type="email"],
body.rn5 #review_form textarea {
	width: 100%; min-height: 48px;
	background: var(--bg); color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .38); border-radius: 12px;
	padding: 10px 12px; font: inherit; font-size: 16px;
}
body.rn5 #review_form textarea { min-height: 110px; line-height: 1.6; resize: vertical; }
body.rn5 #review_form input[type="text"]:focus,
body.rn5 #review_form input[type="email"]:focus,
body.rn5 #review_form textarea:focus {
	border-color: var(--accent); outline: 2px solid var(--accent-light); outline-offset: 1px;
}
/* The star INPUT: the engine's own generated links (Woo JS owns
 * the select + aria-checked contract), recomposed as five
 * >=44px tappable stars. Unselected = muted token, selected
 * (painted by rasid.js from the select's value) = star token. */
body.rn5 .comment-form-rating .stars { margin: 2px 0 0; }
body.rn5 .comment-form-rating .stars > span { display: inline-flex; gap: 4px; }
body.rn5 .comment-form-rating .stars a {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px;
	font-size: 0; color: transparent; text-decoration: none;
}
body.rn5 .comment-form-rating .stars a::before {
	content: "★"; font-size: 30px; line-height: 1; color: var(--ink-2);
}
body.rn5 .comment-form-rating .stars a.rn7-star-on::before { color: var(--star); }
body.rn5 .comment-form-rating select#rating { display: none; }
/* ONE prominent submit in the store identity (was the parent
 * theme's light-grey button, #3E3E3E on #F3F3F3 measured). */
body.rn5 #respond .form-submit input#submit {
	width: 100%; min-height: 52px;
	background: var(--accent); color: var(--on-accent);
	border: 0; border-radius: var(--radius-s);
	font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
/* The parent theme's review-photo note is furniture for a
 * feature this form does not expose (no upload control exists
 * in it) — contained at the presentation layer; the component
 * is inventoried in the wave record. */
body.rn5 .comment-form-img-message { display: none; }
/* Cookies consent: the label is the control — its box carries
 * the 44px target (the Wave-3 remember-me mechanism). */
body.rn5 .comment-form-cookies-consent label {
	display: flex; gap: 8px; align-items: flex-start;
	font-size: 13.5px; font-weight: 400; line-height: 1.6;
	padding-block: 11px; margin-block: -7px;
}
body.rn5 #cancel-comment-reply-link { color: var(--ink-2); font-size: 13px; }

/* W7-4 — AUTH: ONE LIGHT CARD, TABBED (Item 4). Production's
 * greeting head carried into the DS (pattern, not mechanism —
 * production's OTP method choice is a mechanism staging does
 * not hold; register W7-1). */
body.rn5 .rn7-auth-greet { color: var(--accent); font-size: 13px; font-weight: 700; margin-block-end: 2px; }
body.rn5 .rn7-auth-title { font-size: 24px; line-height: 1.45; margin-block-end: 4px; }
body.rn5 .rn7-auth-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; margin-block-end: 14px; }
body.rn5 .rn7-authtabs {
	display: flex; gap: 6px;
	background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
	padding: 4px; margin-block-end: 16px;
}
body.rn5 .rn7-authtabs [role="tab"] {
	flex: 1 1 0; min-height: 44px;
	background: transparent; color: var(--ink-2);
	border: 0; border-radius: 9px;
	font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
body.rn5 .rn7-authtabs [role="tab"][aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
/* The submits inside the one card are pinned to the DS primary
 * spec (52px / 16px / accent pairing) at card scope. */
body.rn5 .rn5-authcard .woocommerce-form-login button[type="submit"],
body.rn5 .rn5-authcard .woocommerce-form-register button[type="submit"] {
	min-height: 52px; font-size: 16px;
}
body.rn5 #review_form .rn7-optional { color: var(--ink-2); font-weight: 400; font-size: 13px; }

/* ============================================================
 * V7 WAVE 8 — FEED-393 «كمّل طلبك» (Frequently Bought Together):
 * merchant-curated complement rows under the buy zone. Every
 * colour/type value is a registered token; the row is a LABEL
 * (the whole row is the checkbox's target, ≥44px by build), the
 * price cell reuses the engine price spans (rn5-price-*), and
 * the action is the DS primary button at the auth-card spec
 * (52px / 16px / accent pairing). Evidence: qa/design-v7/wave8/.
 * ============================================================ */
body.rn5 .rn7-fbt-rows { display: flex; flex-direction: column; gap: 10px; }
body.rn5 .rn7-fbt-row {
	display: flex; align-items: center; gap: 12px;
	min-height: 68px; padding: 10px 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
	cursor: pointer;
}
body.rn5 .rn7-fbt-check {
	flex: 0 0 auto; width: 24px; height: 24px; margin: 0;
	accent-color: var(--accent); cursor: pointer;
}
body.rn5 .rn7-fbt-media {
	flex: 0 0 auto; width: 52px; height: 52px;
	border-radius: 10px; overflow: hidden; background: var(--surface-2);
	display: flex; align-items: center; justify-content: center;
}
body.rn5 .rn7-fbt-img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); display: block; }
body.rn5 .rn7-fbt-namecover { color: var(--ink-2); display: flex; }
body.rn5 .rn7-fbt-name {
	flex: 1 1 auto; min-width: 0;
	font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--ink);
}
body.rn5 .rn7-fbt-price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
body.rn5 .rn7-fbt-note { color: var(--ink-2); font-size: 12.5px; line-height: 1.7; margin-block-start: 10px; }
body.rn5 .rn7-fbt-foot { margin-block-start: 14px; }
body.rn5 .rn7-fbt-totalrow {
	display: flex; align-items: baseline; justify-content: space-between;
	font-size: 15px; margin-block-end: 10px;
}
body.rn5 .rn7-fbt-totalrow strong { font-size: 19px; font-weight: 800; }
body.rn5 .rn7-fbt-btn { width: 100%; min-height: 52px; font-size: 16px; }
body.rn5 .rn7-fbt-btn[disabled] { opacity: .65; cursor: wait; }
body.rn5 .rn7-fbt-status { color: var(--danger); font-size: 13px; line-height: 1.6; margin-block-start: 10px; }

/* ============================================================
 * V7 WAVE 10 — Guide pages (FEED-007 bank transfer · FEED-225
 * Windows 10 decision). Both live inside the Wave-5 article
 * panel (.rn7-article); these rules add only the guides' own
 * components: numbered steps, the config sockets, the checker.
 * Every value is a registered token or the §9 rhythm.
 * ============================================================ */
body.rn5 .rn7-guide-lead { font-size: 17px; line-height: 1.75; }
body.rn5 .rn7-steps {
	list-style: none; counter-reset: rn7step;
	padding-inline-start: 0; margin-block: 20px 6px;
	display: flex; flex-direction: column; gap: 12px;
}
body.rn5 .rn7-steps > li {
	counter-increment: rn7step;
	display: flex; flex-direction: column; gap: 4px;
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
	padding: 14px 16px 14px; padding-inline-start: 58px; position: relative;
	margin-block-end: 0;
}
body.rn5 .rn7-steps > li::before {
	content: counter(rn7step);
	position: absolute; inset-inline-start: 14px; top: 14px;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--accent); color: #004980;
	font-weight: 900; font-size: 15px; line-height: 30px; text-align: center;
}
body.rn5 .rn7-steps > li strong { font-size: 16px; line-height: 1.55; }
body.rn5 .rn7-steps > li span { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
body.rn5 .rn7-guide-socket {
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
	padding: 16px 18px; margin-block: 18px;
}
body.rn5 .rn7-guide-socket h2 { margin-block-start: 2px; }
body.rn5 .rn7-guide-details p { margin-block-end: 8px; }
body.rn5 .rn7-guide-details p:last-child { margin-block-end: 0; }
body.rn5 .rn7-guide-warn { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-block: 10px 0; }
body.rn5 .rn7-guide-note {
	background: var(--surface-2); border-inline-start: 3px solid var(--accent);
	border-radius: 10px; padding: 14px 16px; margin-block: 16px;
	font-size: 15px; line-height: 1.7;
}
body.rn5 .rn7-guide-foot { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin-block-start: 22px; }

/* FEED-007's thank-you line (cheque orders only). */
body.rn5 .rn7-ty-bank {
	display: flex; gap: 10px; align-items: flex-start;
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
	padding: 14px 16px; margin-block: 16px;
	font-size: 14.5px; line-height: 1.65;
}
body.rn5 .rn7-ty-bank svg { flex: 0 0 auto; margin-block-start: 2px; }
body.rn5 .rn7-ty-bank a { color: var(--accent-bright); font-weight: 700; }

/* FEED-225 checker — panels stack in reading order; JS hides the
 * unreached ones (the [hidden] attribute — no display rule here
 * may override it). */
body.rn5 .rn7-w10 { margin-block-start: 8px; }
body.rn5 .rn7-w10-panel {
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
	padding: 16px 18px; margin-block-end: 14px;
}
body.rn5 .rn7-w10-q { font-size: 17px; font-weight: 800; line-height: 1.55; margin-block-end: 12px; }
body.rn5 .rn7-w10-opts { display: flex; flex-wrap: wrap; gap: 10px; }
body.rn5 .rn7-w10-opts .rn5-btn { min-height: 48px; }
body.rn5 .rn7-w10-opts .rn5-btn[aria-pressed="true"] {
	background: var(--accent); color: #004980; border-color: var(--accent);
}
body.rn5 .rn7-w10-how { padding-inline-start: 22px; line-height: 1.7; margin-block-end: 14px; }
body.rn5 .rn7-w10-exit {
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
	padding: 16px 18px; margin-block-end: 14px;
}
body.rn5 .rn7-w10-exit h3 { margin-block-start: 0; }
body.rn5 .rn7-w10-card {
	display: flex; align-items: center; gap: 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
	padding: 10px 12px; margin-block-start: 12px;
}
body.rn5 .rn7-w10-card-media {
	flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
	background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
body.rn5 .rn7-w10-card-main { flex: 1 1 auto; min-width: 0; }
body.rn5 .rn7-w10-card-name { font-size: 14.5px; line-height: 1.55; font-weight: 500; margin-block-end: 2px; }
body.rn5 .rn7-w10-card-price { font-weight: 700; margin-block-end: 0; }
body.rn5 .rn7-w10-card-btn { flex: 0 0 auto; min-height: 48px; }

/* ============================================================
 * V7 WAVE 10 — FEED-237 «الوضع السهل» + FEED-116 cart transfer.
 * The easy mode is a token scope on <html> (html.rn7-easy): one
 * documented step up in type, one-column grids, and the product
 * page reduced to its decision sections. Every rule lives under
 * that scope in THIS block — the standard presentation is never
 * touched, and leaving the mode restores it exactly.
 * ============================================================ */
body.rn5 .rn7-easybar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	border-block-start: 1px solid var(--line); padding: 14px 16px 2px; margin-block-start: 6px;
}
body.rn5 .rn7-easybar-t { font-size: 14px; font-weight: 700; }
body.rn5 .rn7-easy-toggle {
	min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); font: inherit; font-size: 14px; font-weight: 700;
}
body.rn5 .rn7-easy-toggle[aria-pressed="true"] {
	background: var(--accent); color: #004980; border-color: var(--accent);
}

html.rn7-easy body.rn5 { font-size: 18px; }
html.rn7-easy body.rn5 .rn5-prose,
html.rn7-easy body.rn5 .rn5-prose p,
html.rn7-easy body.rn5 .rn5-prose li { font-size: 18px; line-height: 1.85; }
html.rn7-easy body.rn5 .rn7-article p,
html.rn7-easy body.rn5 .rn7-article li { font-size: 18px; line-height: 1.85; }
html.rn7-easy body.rn5 .rn5-section-head h2,
html.rn7-easy body.rn5 .rn7-psection > h2 { font-size: 27px; }
html.rn7-easy body.rn5 .rn7-card-title,
html.rn7-easy body.rn5 .rn5-card-title { font-size: 16.5px; line-height: 1.6; }
html.rn7-easy body.rn5 .rn7-grid,
html.rn7-easy body.rn5 .rn5-grid,
html.rn7-easy body.rn5 .rn5-tiles { grid-template-columns: 1fr; }
html.rn7-easy body.rn5 .rn7-grid > .rn7-card:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; }
html.rn7-easy body.rn5 input[type="text"],
html.rn7-easy body.rn5 input[type="email"],
html.rn7-easy body.rn5 input[type="tel"],
html.rn7-easy body.rn5 input[type="number"],
html.rn7-easy body.rn5 input[type="password"],
html.rn7-easy body.rn5 select,
html.rn7-easy body.rn5 textarea { font-size: 17px; }
html.rn7-easy body.rn5 .rn5-btn--primary { min-height: 52px; }
html.rn7-easy body.single-product .rn7-pdesc,
html.rn7-easy body.single-product .rn7-pspecs,
html.rn7-easy body.single-product #rn5-support,
html.rn7-easy body.single-product .rn7-pcompanions,
html.rn7-easy body.single-product section.related,
html.rn7-easy body.single-product #rn5-reviews #comments,
html.rn7-easy body.single-product #rn5-reviews #review_form_wrapper { display: none; }

/* WAVE 13 (FEED-237 recommendation leg): the «موصى به» badge rides
 * in the variation-card markup whenever a variation is merchant-
 * flagged (inc/v5/recommended.php) and is VISIBLE only inside the
 * easy-mode scope, where the flagged card also surfaces first in
 * its group with an accent edge. Standard mode keeps the pre-wave
 * presentation exactly: the badge is display:none and no order or
 * border changes outside the scope. The badge is a label only —
 * it never selects anything — painted in the pinned on-accent
 * pair (var(--on-accent) on var(--accent), 4.73:1). */
body.rn5 .rn7-rec-badge { display: none; }
html.rn7-easy body.rn5 .rn7-rec-badge {
	display: inline-flex; align-items: center; justify-self: start;
	background: var(--accent); color: var(--on-accent);
	font-size: 12.5px; font-weight: 800; line-height: 1.5;
	border-radius: 999px; padding: 2px 10px;
}
html.rn7-easy body.rn5 .rn5-varcards .rn7-varcard--rec { order: -1; border-color: var(--accent); }

/* FEED-116 — the cart-transfer panel (under the cart). */
body.rn5 .rn7-transfer {
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	padding: 18px 16px; margin-block: 20px;
}
body.rn5 .rn7-transfer h2 { font-size: 20px; line-height: 1.45; margin-block-end: 8px; }
body.rn5 .rn7-transfer p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
body.rn5 .rn7-transfer-row { display: flex; gap: 10px; margin-block: 12px; }
body.rn5 .rn7-transfer-url {
	flex: 1 1 auto; min-width: 0; min-height: 48px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
	font-size: 13px; direction: ltr; text-align: left;
}
body.rn5 .rn7-transfer-copy { flex: 0 0 auto; min-height: 48px; }
body.rn5 .rn7-transfer-note { font-size: 12.5px; }

/* ================================================================
   WAVE 10 CLOSING BATCH (2.2.27-v7) — owner corrections 2026-10-27
   ================================================================ */

/* Basket companions, owner item 2: the core module prints the reason
 * <p> as a SIBLING after the card inside .rn-idea-companion-wrap,
 * while the containment rule set the card to height:100% of the
 * wrap — the card filled the wrap and the reason spilled 102px
 * below its box, over the following content (measured, gate §12
 * pre-run). The wrap is now the card: a bordered surface column;
 * the inner card goes flush and flexes; the reason lives in-flow
 * as the wrap's footer line behind a hairline. It is contained by
 * construction and never hidden. */
.rn-idea-companion-wrap {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
}
.rn-idea-companion-wrap .rn5-card,
.rn-idea-companion-wrap .rn7-card {
	flex: 1 1 auto; height: auto; width: 100%;
	border: 0; border-radius: 0; background: transparent;
}
.rn-idea-companion-wrap .rn-idea-companion-reason {
	flex: 0 0 auto; margin: 0; padding: 10px 14px 12px;
	border-top: 1px solid var(--line);
}

/* Product stage: the decision card pulls up -30px over the stage
 * BY DESIGN — that overlap must land on the stage's tint field,
 * never on the gallery box (gate §12 pre-run measured the gallery
 * sliding 17px under the decision card). Bottom padding grows so
 * the gallery box always clears the pulled-up card. */
.rn7-stage { padding-block-end: 42px; }

/* FEED-225 mini-card: the action takes its own full-width row —
 * media + name + price never squeeze each other at 375px. */
body.rn5 .rn7-w10-card { flex-wrap: wrap; }
body.rn5 .rn7-w10-card-btn { flex: 1 1 100%; margin-block-start: 10px; }

/* =====================================================================
 * V7 WAVE Q1 — Tier-1 conversion core (FEED-297/403/207/211/197/
 * 189/232/312). DS tokens only; every component is hidden by its
 * own emptiness server-side, so these rules style surfaces that
 * exist only when their data exists.
 * =================================================================== */

/* Honeypot (bot trap on Q1 forms): never visible, never tabbed. */
.rn7-hp { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }

/* —— FEED-297 resume strip + FEED-312 rise strip + FEED-197 guard —— */
.rn7-resume, .rn7-rise, .rn7-guard {
	margin: 14px 0; padding: 14px 16px; border-radius: 14px;
}
.rn7-resume-title, .rn7-rise-title, .rn7-guard-title {
	margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--ink, #fff);
}
.rn7-resume-facts, .rn7-rise-facts { margin: 0 0 10px; }
.rn7-resume-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.rn7-resume-clear, .rn7-guard-dismiss {
	background: none; border: 0; color: var(--accent, #00c8ff);
	font: inherit; cursor: pointer; text-decoration: underline; padding: 6px 2px;
}
.rn7-resume-note, .rn7-rise-source { margin: 8px 0 0; font-size: 14px; opacity: .85; }
.rn7-guard { border-inline-start: 4px solid var(--save, #4ade80); }
.rn7-guard p { margin: 0 0 8px; }
.rn7-guard-actions { margin-bottom: 0 !important; }
.rn7-rise { border-inline-start: 4px solid var(--accent, #00c8ff); }

/* —— FEED-403 call booking —— */
.rn7-call-btn { margin-top: 10px; width: 100%; text-align: center; }
.rn7-call-note, .rn7-call-error, .rn7-call-closed {
	padding: 12px 14px; border-radius: 12px; margin: 14px 0;
	background: var(--surface, #2C2D33);
}
.rn7-call-error { border-inline-start: 4px solid var(--danger, #f87171); }
.rn7-call-done { padding: 16px; margin: 14px 0; border-inline-start: 4px solid var(--save, #4ade80); }
.rn7-call-picker { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.rn7-call-picker a {
	display: flex; justify-content: space-between; gap: 12px; align-items: center;
	padding: 14px 16px; border: 1px solid var(--line, hsla(0,0%,100%,.14));
	border-radius: 12px; color: inherit; text-decoration: none; min-height: 52px;
}
.rn7-call-product { padding: 14px 16px; margin: 14px 0; }
.rn7-call-form { display: grid; gap: 14px; margin-top: 16px; }
.rn7-call-slots { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.rn7-call-slots legend { font-weight: 700; margin-bottom: 8px; }
.rn7-call-slot {
	display: flex; gap: 10px; align-items: center; padding: 12px 14px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14)); border-radius: 12px;
	min-height: 52px; cursor: pointer;
}
.rn7-call-slot--full { opacity: .55; cursor: not-allowed; }
.rn7-call-slot input { width: 20px; height: 20px; flex: 0 0 auto; }
.rn7-call-field { display: grid; gap: 6px; font-weight: 500; }
.rn7-call-field input {
	min-height: 52px; padding: 10px 12px; border-radius: 10px; font-size: 17px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33); color: inherit;
}
.rn7-call-doctrine {
	padding: 12px 14px; border-radius: 12px;
	border: 1px dashed var(--line, hsla(0,0%,100%,.14));
}
.rn7-call-doctrine ul { margin: 6px 0 0; padding-inline-start: 20px; }
.rn7-call-submit { min-height: 56px; font-size: 18px; }

/* —— FEED-207 collaborative cart —— */
.rn7-collab-panel { margin: 18px 0; padding: 16px; }
.rn7-collab-create { display: grid; gap: 10px; margin-top: 10px; }
.rn7-collab-create label, .rn7-collab-add label, .rn7-collab-confirm label, .rn7-collab-find label {
	display: grid; gap: 6px; font-weight: 500;
}
.rn7-collab-create input, .rn7-collab-add input, .rn7-collab-add select,
.rn7-collab-confirm input, .rn7-collab-confirm select, .rn7-collab-find input {
	min-height: 48px; padding: 9px 12px; border-radius: 10px; font-size: 16px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33); color: inherit;
}
.rn7-collab-share, .rn7-collab-excluded, .rn7-collab-pay { padding: 14px 16px; margin: 14px 0; }
.rn7-collab-linkrow { display: flex; gap: 8px; flex-wrap: wrap; }
.rn7-collab-linkrow input {
	flex: 1 1 220px; min-height: 48px; padding: 8px 10px; border-radius: 10px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33); color: inherit; font-size: 13px;
}
.rn7-collab-items { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 12px; }
.rn7-collab-item { padding: 14px 16px; }
.rn7-collab-item-main { display: flex; gap: 12px; align-items: flex-start; }
.rn7-collab-thumb { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; flex: 0 0 auto; }
.rn7-collab-item-name { margin: 0 0 4px; font-weight: 700; }
.rn7-collab-item-meta { margin: 0 0 4px; font-size: 15px; }
.rn7-collab-warn { color: var(--danger, #f87171); }
.rn7-collab-confirm { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, hsla(0,0%,100%,.14)); }
.rn7-collab-remove { margin-top: 10px; }
.rn7-collab-remove-btn {
	background: none; border: 0; color: var(--danger, #f87171); font: inherit;
	cursor: pointer; text-decoration: underline; padding: 6px 2px;
}
.rn7-collab-find { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 12px 0; }
.rn7-collab-cands { list-style: none; padding: 0; display: grid; gap: 8px; }
.rn7-collab-cands li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.rn7-collab-add { display: grid; gap: 12px; padding: 16px; margin-top: 12px; }
.rn7-collab-vars { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.rn7-collab-confirmline { display: flex !important; gap: 10px; align-items: flex-start; }
.rn7-collab-confirmline input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
.rn7-collab-rule { padding: 12px 14px; margin: 14px 0; }

/* —— FEED-189 cover search —— */
.rn7-covers-filter { display: grid; gap: 6px; font-weight: 500; margin: 14px 0; }
.rn7-covers-filter input {
	box-sizing: border-box; width: 100%;
	min-height: 52px; padding: 10px 12px; border-radius: 10px; font-size: 17px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33); color: inherit;
}
.rn7-covers-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0;
}
.rn7-cover {
	box-sizing: border-box; min-width: 0;
	display: grid; gap: 8px; text-decoration: none; color: inherit;
	padding: 10px; border-radius: 12px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33);
}
.rn7-cover-img {
	display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
	background: var(--surface-2, #53565B);
}
.rn7-cover-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rn7-cover-name { font-size: 14px; font-weight: 500; line-height: 1.5; }
.rn7-verdict { padding: 16px; margin: 14px 0; border-inline-start: 4px solid var(--save, #4ade80); }
.rn7-verdict-name { margin-top: 0; }

/* —— FEED-211 listen (visible only in easy mode + with synthesis) —— */
.rn7-listen { display: none; margin: 14px 0; }
html.rn7-easy .rn7-listen { display: block; }
.rn7-listen-note { font-size: 15px; margin: 8px 0 0; }

/* —— FEED-211 easy scope: checkout steps + account scale —— */
html.rn7-easy form.checkout.rn7-easy-steps-on [data-rn7-step] { display: none; }
html.rn7-easy form.checkout.rn7-easy-steps-on [data-rn7-step].rn7-step-on { display: block; }
.rn7-easy-steps-nav {
	display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; flex-wrap: wrap;
}
.rn7-easy-steps-nav button {
	min-height: 52px; padding: 10px 16px; border-radius: 12px; font: inherit; font-size: 18px;
	border: 1px solid var(--line, hsla(0,0%,100%,.14));
	background: var(--surface, #2C2D33); color: inherit; cursor: pointer;
}
.rn7-easy-steps-nav button.rn7-stepnav-on {
	background: var(--accent, #00c8ff); color: #004980; font-weight: 700;
}
.rn7-easy-steps-nav button:disabled { opacity: .45; cursor: not-allowed; }
.rn7-easy-navrow { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.rn7-easy-navrow .rn5-btn { min-height: 56px; font-size: 19px; flex: 1 1 140px; }
.rn7-easy-stepmsg {
	margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
	border-inline-start: 4px solid var(--danger, #f87171);
	background: var(--surface, #2C2D33); font-size: 18px;
}
/* No optional fields visible in easy checkout (FEED-211's text):
 * the order-notes block is optional by the engine's own marking;
 * the standard mode keeps everything, untouched. */
html.rn7-easy .woocommerce-checkout .woocommerce-additional-fields { display: none; }
/* Account/vault surfaces at easy scale. */
html.rn7-easy .rn6-lib-row { font-size: 19px; padding: 16px; }
html.rn7-easy .woocommerce-MyAccount-navigation a { min-height: 56px; display: flex; align-items: center; font-size: 19px; }
html.rn7-easy .rn6-nextstep { font-size: 19px; line-height: 1.9; }
html.rn7-easy .rn6-nextstep-list li { margin-bottom: 12px; }


/* ============================================================
 * V7 WAVE Q2 — BASKET & B2B (FEED-409/414/199/212/415/407/383/
 * 384/412/228). Shared form furniture first (all Q2 forms use
 * the same classes), then per-surface blocks. DS tokens only.
 * Contrast ledger (computed, rendered — re-measured by gateQ2):
 * - --ink #ffffff on --surface #2e2e2e = 13.6:1; on --bg
 *   #191919 = 17.9:1.
 * - --muted #a9a9a9 on --surface = 6.9:1; on --bg = 8.2:1.
 * - --accent-bright #26eeff on --surface = 10.4:1.
 * - --on-accent #004980 on --accent #00c8ff = 4.73:1 (buttons).
 * - --save #4ade80 on --surface = 7.9:1.
 * - --danger #f87171 on --surface = 4.9:1.
 * ============================================================ */

/* ---- Shared Q2 form furniture ---------------------------- */
.rn7-hp { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.rn7-q2-form { display: grid; gap: 14px; margin-top: 14px; }
.rn7-q2-field { display: grid; gap: 6px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.rn7-q2-field input, .rn7-q2-field select, .rn7-q2-field textarea {
	width: 100%; min-height: 48px; padding: 10px 12px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: 12px;
	font: inherit; font-weight: 400;
}
.rn7-q2-field textarea { min-height: 84px; }
.rn7-q2-field select[dir="ltr"], .rn7-q2-field input[dir="ltr"] { text-align: left; }
.rn7-q2-note { color: var(--muted); font-size: .88rem; line-height: 1.8; }
.rn7-q2-helpline { color: var(--muted); font-weight: 400; font-size: .85rem; }
.rn7-q2-linkbtn {
	background: none; border: 0; padding: 6px 4px; cursor: pointer;
	color: var(--accent-bright); font: inherit; font-size: .9rem; font-weight: 700;
}
.rn7-q2-linkbtn.rn7-q2-danger { color: var(--danger); }
.rn7-q2-doctrine {
	border-inline-start: 3px solid var(--accent);
	background: var(--surface-2); border-radius: 10px;
	padding: 12px 16px; margin: 14px 0;
}
.rn7-q2-doctrine p, .rn7-q2-doctrine li { font-size: .93rem; line-height: 1.85; color: var(--ink); }
.rn7-q2-doctrine ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }

/* ---- FEED-409: tasting gift on the cart ------------------- */
.rn7-gift {
	border: 1px dashed var(--accent); border-radius: var(--r-card, 18px);
	background: var(--surface); padding: 14px 16px; margin: 0 0 16px;
}
.rn7-gift-title { margin: 0 0 8px; }
.rn7-gift-progress { margin: 0 0 8px; font-size: .95rem; line-height: 1.8; }
.rn7-gift-progress strong { color: var(--accent-bright); }
.rn7-gift-note { color: var(--muted); font-size: .86rem; line-height: 1.8; margin: 8px 0 0; }
.rn7-gift-form { display: grid; gap: 8px; margin-top: 10px; }
.rn7-gift-row {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 10px 12px; margin: 0;
	background: var(--surface-2); border-radius: 12px; cursor: pointer;
}
.rn7-gift-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.rn7-gift-name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.rn7-gift-cat { color: var(--muted); font-size: .85rem; display: block; }
.rn7-gift-price { color: var(--save); font-weight: 800; white-space: nowrap; }
.rn7-gift-remove { margin-top: 4px; }

/* ---- FEED-414: second-order activation card --------------- */
.rn7-second {
	border: 1px solid var(--accent); border-radius: var(--r-card, 18px);
	background: var(--surface-2); padding: 16px; margin: 0 0 16px;
}
.rn7-second h3 { margin: 0 0 6px; }
.rn7-second-reason { color: var(--ink); line-height: 1.85; margin: 0 0 8px; }
.rn7-second-price { color: var(--muted); margin: 0 0 12px; }
.rn7-second-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rn7-second form { margin: 0; }

/* ---- FEED-199: cart for-whom + dashboard link cards -------- */
.rn7-forwhom {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	border: 1px solid var(--line); border-radius: 14px;
	background: var(--surface); padding: 12px 14px; margin: 0 0 16px;
}
.rn7-forwhom label { font-weight: 700; }
.rn7-forwhom select {
	min-height: 44px; padding: 6px 10px; border-radius: 10px;
	background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font: inherit;
}
.rn7-q2-links { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0; }
body.rn5 .rn7-q2-linkcard {
	display: block; border: 1px solid var(--line); border-radius: 14px;
	background: var(--surface); padding: 14px; text-decoration: none;
}
.rn7-q2-linkcard strong { display: block; color: var(--ink); margin-bottom: 4px; }
.rn7-q2-linkcard span { color: var(--muted); font-size: .88rem; line-height: 1.7; display: block; }

/* ---- FEED-199: family vault page -------------------------- */
.rn7-fam-profiles { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.rn7-fam-profiles li {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	background: var(--surface); border-radius: 12px; padding: 8px 12px;
}
.rn7-fam-pname { font-weight: 800; flex: 1 1 auto; }
.rn7-fam-del { margin: 0; }
.rn7-fam-add { margin-bottom: 18px; }
.rn7-fam-gtitle { margin: 18px 0 8px; }
.rn7-fam-ents { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.rn7-fam-ent { margin: 0; }
.rn7-fam-entname { font-weight: 800; margin: 0 0 4px; }
.rn7-fam-entmeta { color: var(--muted); margin: 0 0 10px; font-size: .92rem; }
.rn7-fam-entactions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rn7-fam-assign { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.rn7-fam-assign select {
	min-height: 40px; padding: 4px 8px; border-radius: 10px;
	background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font: inherit;
}

/* ---- FEED-228: allowance page ----------------------------- */
.rn7-allow-plans { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.rn7-allow-plan { margin: 0; }
.rn7-allow-pname { font-weight: 800; margin: 0 0 4px; }
.rn7-allow-label { color: var(--muted); font-weight: 400; }
.rn7-allow-meta { color: var(--muted); margin: 0 0 10px; font-size: .92rem; line-height: 1.8; }
.rn7-allow-meta strong { color: var(--save); }
.rn7-allow-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rn7-allow-actions form { margin: 0; }

/* ---- B2B intake paths ------------------------------------- */
.rn7-b2b-done { border: 1px solid var(--save); margin: 14px 0; }
.rn7-b2b-done h2 { color: var(--save); margin-top: 0; }
.rn7-b2b-error {
	border: 1px solid var(--danger); border-radius: 12px;
	background: var(--surface); color: var(--danger);
	padding: 12px 14px; margin: 12px 0; font-weight: 700;
}
.rn7-b2b-closed { color: var(--muted); }
.rn7-b2b-submit { justify-self: start; min-width: 200px; }

/* ---- FEED-412: quotation builder + document --------------- */
.rn7-quote-lines { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0; }
.rn7-quote-lines legend { font-weight: 800; padding: 0 6px; }
.rn7-quote-line { display: grid; grid-template-columns: 1fr 92px; gap: 10px; margin-bottom: 10px; align-items: end; }
.rn7-quote-qty input { text-align: center; }
.rn7-quote-doc { background: var(--surface); border-radius: var(--r-card, 18px); padding: 20px 18px; }
.rn7-quote-head h1 { margin: 6px 0; }
.rn7-quote-store { font-size: 1.25rem; font-weight: 900; margin: 0; }
.rn7-quote-legal, .rn7-quote-meta, .rn7-quote-to { color: var(--muted); margin: 4px 0; line-height: 1.8; }
.rn7-quote-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.rn7-quote-table th, .rn7-quote-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: start; font-size: .93rem; }
.rn7-quote-table thead th { color: var(--muted); font-weight: 700; }
.rn7-quote-table tfoot td { border-bottom: 0; border-top: 2px solid var(--line); font-size: 1rem; }
.rn7-quote-from { color: var(--muted); font-size: .82rem; }
.rn7-quote-final { font-weight: 800; color: var(--save); margin: 8px 0; }
.rn7-quote-notes { color: var(--muted); font-size: .88rem; line-height: 1.85; }
.rn7-quote-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.rn7-quote-convert { margin: 0; }

@media print {
	body.rn7-quote-print header, body.rn7-quote-print footer,
	body.rn7-quote-print .rn7-quote-actions, body.rn7-quote-print nav { display: none !important; }
	body.rn7-quote-print .rn7-quote-doc { background: #fff; color: #000; }
	body.rn7-quote-print .rn7-quote-doc p, body.rn7-quote-print .rn7-quote-doc td,
	body.rn7-quote-print .rn7-quote-doc th, body.rn7-quote-print .rn7-quote-doc h1 { color: #000 !important; }
}

/* —— WAVE Q3: trust & payment surfaces (FEED-346/381/385/201/230/329/406) —— */
.rn7-q3-guarantee, .rn7-q3-seal, .rn7-q3-promise, .rn7-q3-waitline {
	margin: 14px 0; padding: 14px 16px; border-radius: 14px;
}
.rn7-q3-guarantee { border-inline-start: 4px solid var(--save, #4ade80); }
.rn7-q3-seal { border-inline-start: 4px solid var(--accent, #00c8ff); }
.rn7-q3-seal--fail { border-inline-start-color: var(--danger, #f87171); }
.rn7-q3-promise { border-inline-start: 4px solid var(--accent-bright, #26eeff); }
.rn7-q3-waitline { border-inline-start: 4px solid var(--line, hsla(0,0%,100%,.14)); }
.rn7-q3-strip-title { margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--ink, #fff); }
.rn7-q3-guarantee p, .rn7-q3-seal p, .rn7-q3-promise p, .rn7-q3-waitline p { margin: 0 0 8px; }
.rn7-q3-terms { margin: 8px 0 0; padding-inline-start: 20px; }
.rn7-q3-terms li { margin: 4px 0; }
.rn7-q3-morelink { margin: 8px 0 0 !important; font-size: 14px; }

.rn7-q3-queue, .rn7-q3-claims { margin: 14px 0; padding: 14px 16px; border-radius: 14px; }
.rn7-q3-queue-pos { font-size: 17px; }
.rn7-q3-claim-line { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 12px; }
.rn7-q3-claim-product { font-weight: 700; margin: 0 0 8px; }
.rn7-q3-check { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; line-height: 1.7; cursor: pointer; }
.rn7-q3-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
.rn7-q3-done { margin: 14px 0; padding: 14px 16px; border-radius: 14px; border-inline-start: 4px solid var(--save, #4ade80); }
.rn7-q3-error { padding: 12px 14px; border-radius: 12px; margin: 14px 0; background: var(--surface, #2C2D33); border-inline-start: 4px solid var(--danger, #f87171); }
.rn7-q3-closed, .rn7-q3-empty, .rn7-q3-login { padding: 12px 14px; border-radius: 12px; margin: 14px 0; background: var(--surface, #2C2D33); }

.rn7-q3-dcb {
	margin: 12px 0; padding: 12px 14px; border-radius: 12px;
	border: 1px dashed var(--line); opacity: .85;
}
.rn7-q3-dcb-title { margin: 0 0 6px; font-weight: 700; color: var(--ink, #fff); }
.rn7-q3-dcb-badge {
	display: inline-block; padding: 1px 8px; border-radius: 999px;
	background: var(--surface-2, #53565B); color: var(--muted, #a9a9a9);
	font-size: 12px; font-weight: 700; vertical-align: middle;
}
.rn7-q3-dcb-note { margin: 0; color: var(--muted, #a9a9a9); font-size: 14px; line-height: 1.8; }

.rn7-q3-log-product { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 12px; }
.rn7-q3-log-list { margin: 8px 0; padding-inline-start: 20px; }
.rn7-q3-log-list li { margin: 5px 0; }
.rn7-q3-fail { color: var(--danger, #f87171); }
.rn7-q3-pass { color: var(--save, #4ade80); }
.rn7-q3-ownsubs, .rn7-q3-schedule { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }

/* Inherited-defect repair found by THIS wave's §12 gate
 * (the Wave-Q1 fix10 precedent — disclosed, colour-only): two
 * core-plugin account elements failed computed legibility on
 * surfaces this wave's gate measures. (1) The review nudge is
 * a light island whose link inherited the DS accent (1.96:1 on
 * white) — the link takes the DS dark ink, which passes on
 * its own ground (≈8.9:1). (2) The core order-action buttons
 * («تقييم المنتجات» / «اطلب مجددًا») render #333 text on a
 * non-DS teal (2.23:1) — they take the DS primary-button
 * treatment (accent ground, on-accent ink, 4.73:1). */
/* The frame link rule (line ~284) weighs (0,6,2); the light-
 * island rules below are anchored above it, the fix10 way. */
body.rn5 .rn5-frame .woocommerce-MyAccount-content :is(.rn-review-nudge, .rn-review-prompt) a:not(.rn7-add):not(.rn5-btn) { color: #004980; }
body.rn5 .woocommerce-MyAccount-content a.order-actions-button,
body.rn5 .woocommerce-MyAccount-content .order-again a.button {
	background: var(--accent);
	color: var(--on-accent);
}

/* ============ WAVE T9 — tail queue: transfer, summary, Deck,
   push, TikTok session, top-up, swap, messages, status ===== */
.rn7-t9-strip{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rn7-t9-strip-title{font-size:17px;font-weight:700;line-height:1.5;margin:0 0 8px;color:#fff}
.rn7-t9-strip p{margin:0 0 10px;color:var(--muted);font-size:15px;line-height:1.7}
.rn7-t9-strip p:last-child{margin-bottom:0}
.rn7-t9-check{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rn7-t9-check-row{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font-size:15px;line-height:1.7;color:#fff;cursor:pointer}
.rn7-t9-check-row input[type="checkbox"]{margin-top:6px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--accent)}
.rn7-t9-check-row .rn7-t9-note{flex-basis:100%}
.rn7-t9-verdict{margin:6px 0 0;font-size:15px;line-height:1.7;color:var(--accent-light)}
.rn7-t9-steps{list-style:none;margin:12px 0;padding:0;counter-reset:rn7t9}
.rn7-t9-step{margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rn7-t9-step h3{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.5;color:#fff}
.rn7-t9-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.rn7-t9-facts{margin:12px 0;padding:0 18px 0 0;font-size:15px;line-height:1.9;color:#fff}
.rn7-t9-facts li{margin:0 0 4px}
.rn7-t9-note{font-size:13.5px;line-height:1.7;color:var(--muted)}
.rn7-t9-ok{padding:12px 14px;border:1px solid var(--save);border-radius:12px;color:#fff;background:var(--surface);font-size:15px;line-height:1.7}
.rn7-t9-err{padding:12px 14px;border:1px solid var(--danger);border-radius:12px;color:#fff;background:var(--surface);font-size:15px;line-height:1.7}
.rn7-t9-form{margin:14px 0}
.rn7-t9-field{margin:0 0 12px}
.rn7-t9-field label{display:block;font-size:15px;line-height:1.7;color:#fff}
.rn7-t9-field select,.rn7-t9-field input[type="text"],.rn7-t9-field input[type="url"]{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:#fff;font:inherit}
.rn7-t9-calc{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rn7-t9-calc[disabled]{opacity:.55}
.rn7-t9-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.rn7-t9-deck-list{list-style:none;margin:0;padding:0}
.rn7-t9-deck-row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rn7-t9-deck-title{font-weight:700;color:#fff;font-size:15.5px}
.rn7-t9-deck-badge{font-size:13.5px;font-weight:700}
.rn7-t9-deck-badge[data-rn7-badge="verified"]{color:#4ade80}
.rn7-t9-deck-badge[data-rn7-badge="playable"]{color:#26eeff}
.rn7-t9-deck-badge[data-rn7-badge="unsupported"]{color:#f87171}
.rn7-t9-deck-badge[data-rn7-badge="unknown"]{color:#a9a9a9}
.rn7-t9-deck-sync{font-size:13px;color:var(--muted)}
.rn7-t9-push-state{font-size:14.5px;line-height:1.7;color:var(--muted)}
.rn7-t9-prefs select{margin:0 6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:#fff;font:inherit}
/* .rn7-hp honeypot: the established 1×1 in-bounds rule from the
   earlier waves governs — a -9999px offset reads as page-level
   overflow to the §12 census, so T9 adds NO override. */

/* §15.2 — the ONE campaign slot (Wave 15). Fixed geometry: the
 * art box is the full content width (343px at a 375 viewport)
 * × 150px and the price row is always in the layout, so the
 * slot's size never depends on whether a price shows. The image
 * renders COMPLETE (object-fit: contain, §8.13) on the page
 * background inside the box; recommended upload 686×300 px. */
.rn7-campaign {
	margin-block-start: 14px; border-radius: 18px; overflow: hidden;
	background: var(--surface); border: 1px solid var(--line);
}
.rn7-campaign-art { display: block; height: 150px; background: var(--bg); }
.rn7-campaign-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rn7-campaign-body { padding: 12px; }
.rn7-campaign-title {
	margin: 0; font-size: 19px; font-weight: 800; line-height: 1.45; color: var(--ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-campaign-title a { color: var(--ink); text-decoration: none; }
.rn7-campaign-text {
	margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn7-campaign-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-block-start: 10px; min-height: 36px;
}
.rn7-campaign-price { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.rn7-campaign-btn { flex: 0 0 auto; }

/* ---- Wave 16 · Item 4 trust furniture (trust.php sockets) ---- */
.rn7-fpay-marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rn7-fpay-marks .rn7-mark { height: 22px; width: auto; max-width: 64px; background: #fff; border-radius: 4px; padding: 2px 5px; }
/* The seal socket: NO box and NO reserved space until the
   official script injects its frame (Wave 18, §18). */
.rn7-seal { display: inline-flex; }
.rn7-seal:empty { display: none; }
.rn7-channels { display: grid; gap: 10px; margin-block-start: 14px; }
.rn7-channel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; }
.rn7-channel-go { display: inline-flex; color: var(--muted); }
.rn7-channel--whatsapp { border-color: rgba(37, 211, 102, .45); }

/* ---- Wave 16 · floating-elements amendment (owner 2026-10-27 22:17),
   recomposed by Wave 18 (owner Drive #5, 2026-10-28) ---- */
/* The seal lives IN the footer trust strip (in-flow, never
   floating, never a row of its own) seated in a white capsule
   with the payment-mark capsules' EXACT metrics — under the
   global border-box the marks' total height is 22px (their
   height:22px INCLUDES their 2px×2 padding), radius 4px,
   padding 2px 5px, white. The capsule exists only while a
   frame exists (:has) — §18: a trust asset that does not
   render disappears completely; the frame is scaled (never
   cropped) into the capsule's 56×18 content box and is
   revealed only when it loads (the w18.js watchdog retires
   the socket otherwise). */
.rn7-fpay > .rn7-seal { flex: 0 0 auto; }
.rn7-seal:has(> iframe) {
	background: #fff; border-radius: 4px; padding: 2px 5px;
	width: 66px; height: 22px; overflow: hidden; align-items: flex-start;
}
.rn7-seal iframe {
	position: static !important; border: 0; flex: none;
	width: 120px; height: 44px;
	transform: scale(.4091); transform-origin: top right;
	opacity: 0; transition: opacity .25s ease;
}
.rn7-seal.is-live iframe { opacity: 1; }
.rn7-seal--dead { display: none !important; }
/* WhatsApp: the ONLY floater — icon-only circle. Offsets are the
   measured chrome stack: bottom nav 64px + 20px safety margin
   (the .rn5-toast precedent); on product pages the sticky buy
   bar (bottom 64px, ~72px tall) joins the stack. */
.rn7-wa-float {
	position: fixed; inset-inline-start: 14px; z-index: 58;
	bottom: calc(84px + env(safe-area-inset-bottom));
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #25d366; color: #fff; text-decoration: none;
	box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
body.single-product .rn7-wa-float { bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .rn7-wa-float { bottom: 20px; } }

/* ---- Tail #1 · add-to-cart feedback component (atc.php) ---- */
/* Bottom-nav badge: same fragment-fed span, positioned on the
   nav's cart item; the pulse replays whenever Woo replaces the
   fragment node (i.e. on every successful add). */
.rn5-bn-item { position: relative; }
.rn5-cart-count--nav { top: 4px; inset-inline-end: calc(50% - 24px); }
.rn5-cart-count:not([hidden]) { animation: rn7-count-pulse .45s ease; }
@keyframes rn7-count-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Button states (DS tokens; static under reduced motion). */
.rn7-adding { opacity: .75; pointer-events: none; }
.rn7-adding::after {
	content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-start: 8px;
	border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
	animation: rn7-spin .7s linear infinite; vertical-align: -2px;
}
@keyframes rn7-spin { to { transform: rotate(360deg); } }
.rn7-added { background: var(--save) !important; color: #0b2413 !important; border-color: var(--save) !important; }
/* The toast socket: DS fixed-toast stack — inside the viewport,
   clear of the bottom nav (84px precedent), and above the
   product buy bar on product pages (150px stack, as the
   WhatsApp floater). */
.rn7-atc-toast {
	position: fixed; inset-inline: 16px; z-index: 96;
	bottom: calc(84px + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 12px;
	background: var(--surface-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 12px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.5);
	font-size: 14px; font-weight: 700;
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
body.single-product .rn7-atc-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.rn7-atc-toast.is-show { opacity: 1; transform: none; pointer-events: auto; }
.rn7-atc-toast-msg { flex: 1; min-width: 0; }
.rn7-atc-toast-act { flex: none; color: var(--accent-bright); font-weight: 800; text-decoration: none; }
.rn7-atc-toast-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; }
/* While the toast shows, the WhatsApp floater steps aside. */
body.rn7-toast-on .rn7-wa-float { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.rn5-cart-count:not([hidden]) { animation: none; }
	.rn7-adding::after { animation: none; }
	.rn7-atc-toast { transition: none; }
}
/* Tail #1: Woo's inserted archive "view cart" link is retired —
   the component's toast is the one feedback language. The link
   only ever exists via Woo's JS, so this hides a JS artefact. */
a.added_to_cart.wc-forward { display: none !important; }

/* ---- Tail #2 · header account text button + categories rows ---- */
.rn7-acct-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding-inline: 14px; border-radius: 999px;
	border: 1px solid var(--accent); color: var(--accent-bright);
	font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
	max-width: 128px;
}
.rn7-acct-btn:hover { text-decoration: none; background: rgba(0,200,255,.08); }
.rn7-acct-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn7-catrows { display: grid; gap: 10px; }
.rn7-catrow {
	display: flex; align-items: center; gap: 12px; min-height: 68px;
	padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius, 14px);
	background: var(--surface); color: var(--ink); text-decoration: none;
}
.rn7-catrow:hover { text-decoration: none; border-color: var(--accent); }
.rn7-catrow-art { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.rn7-catrow-art img { width: 100%; height: 100%; object-fit: contain; }
.rn7-catrow-art--init { font-size: 20px; font-weight: 900; color: var(--accent-bright); }
.rn7-catrow-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rn7-catrow-name { font-size: 16px; font-weight: 800; }
.rn7-catrow-count { font-size: 12.5px; color: var(--muted); }
.rn7-catrow-go { flex: none; color: var(--muted); display: inline-flex; }

/* ---- WAVE 17 (owner ideas wave, 2026-10-27). ---- */
.rn7-compat { margin: 16px 0; padding: 14px 16px; background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: 14px; }
.rn7-compat-t { margin: 0 0 6px; font-size: 16px; color: var(--rn-text); }
.rn7-compat-sub { margin: 0 0 10px; font-size: 13px; color: var(--rn-muted); }
.rn7-compat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rn7-compat-row label { flex: 1 1 140px; display: grid; gap: 6px; font-size: 13px; color: var(--rn-muted); }
.rn7-compat-row select { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rn-border); background: var(--rn-bg); color: var(--rn-text); font: inherit; }
.rn7-compat-verdict { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.rn7-compat[data-verdict="ok"] .rn7-compat-verdict { background: rgba(0, 200, 120, .12); color: var(--rn-text); border: 1px solid rgba(0, 200, 120, .5); }
.rn7-compat[data-verdict="warn"] .rn7-compat-verdict { background: rgba(255, 176, 0, .12); color: var(--rn-text); border: 1px solid rgba(255, 176, 0, .55); }
.rn7-anchor { margin: 10px 0; font-size: 14px; color: var(--rn-text); }
.rn7-anchor-src { color: var(--rn-accent); }
.rn7-anchor-date { color: var(--rn-muted); font-size: 12px; }
.rn7-stockleft { margin: 8px 0; font-size: 14px; color: var(--rn-text); }
.rn7-guarantee-line { margin: 12px 16px; padding: 12px 14px; background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: 12px; font-size: 13.5px; color: var(--rn-text); }
.rn7-q3-policy { margin-top: 10px; font-size: 13px; color: var(--rn-muted); white-space: normal; }
.rn7-reward-promise { margin: 16px; padding: 12px 14px; background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: 12px; font-size: 13.5px; }
.rn7-watch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.rn7-watch-btn { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rn-accent); background: transparent; color: var(--rn-accent); font: inherit; font-size: 13.5px; cursor: pointer; }
.rn7-watch-btn[disabled] { opacity: .55; }
.rn7-watch-email { min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rn-border); background: var(--rn-bg); color: var(--rn-text); font: inherit; flex: 1 1 180px; }
.rn7-watch-state { font-size: 13px; color: var(--rn-muted); flex-basis: 100%; }
.rn7-tile-badge { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--rn-accent); color: var(--rn-onaccent); font-size: 11.5px; font-weight: 700; }
.rn7-tile-saving { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rn-accent); color: var(--rn-accent); font-size: 11.5px; font-weight: 700; }
.rn7-buyagain-line { margin: 14px 0; }
.rn7-delivery { margin: 18px 0; padding: 16px; }
.rn7-delivery-card { padding: 12px 0; border-top: 1px solid var(--rn-border); }
.rn7-delivery-name { margin: 0 0 8px; font-weight: 700; }
.rn7-delivery-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.rn7-delivery-key { color: var(--rn-muted); font-size: 13px; }
.rn7-delivery-val { font-size: 14px; }
.rn7-reveal-btn, .rn7-copy-btn { min-height: 36px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rn-border); background: var(--rn-bg); color: var(--rn-text); font: inherit; font-size: 13px; cursor: pointer; }
.rn7-delivery-steps-t { margin: 10px 0 6px; font-weight: 700; }
.rn7-delivery-steps ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 13.5px; }

/* ---- WAVE 18 (owner Drive Results #2–#4, 2026-10-28) ---- */
/* The official logo at the wordmark sockets (Drive #3): a
   fixed 36px box, the complete emblem — the asset is a disc
   on transparency, rendered whole, never cropped (§8.13). */
.rn7-logo-img { width: 36px; height: 36px; flex: none; display: block; }

/* The description fold (Drive #2): presentation only — the
   full text is always in the page; the clamp + fade exist
   only in the JS-measured .is-clamped state. */
.rn7-desc-body { position: relative; transition: max-height .3s ease; }
.rn7-desc.is-clamped .rn7-desc-body {
	max-height: calc(var(--rn7-desc-lines, 7) * 1.7em); overflow: hidden;
}
.rn7-desc.is-clamped .rn7-desc-body::after {
	content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3.4em;
	background: linear-gradient(to bottom, transparent, var(--bg));
	pointer-events: none;
}
.rn7-desc.is-open .rn7-desc-body { max-height: none; }
.rn7-desc.is-open .rn7-desc-body::after { display: none; }
.rn7-desc-btn {
	margin-top: 10px; display: inline-flex; align-items: center; min-height: 44px;
	padding: 0 18px; background: var(--surface); color: var(--accent);
	border: 1px solid var(--line); border-radius: 12px;
	font-size: 14px; font-weight: 700; cursor: pointer;
}
.rn7-desc-btn:hover { border-color: var(--accent); text-decoration: none; }

/* The categories panel (Drive #4): a full-screen in-app view
   (NOT a floater — it replaces the screen while open, so the
   §12 floater-coverage rule does not apply to it; its open +
   drilled states are gate-measured as shown states). */
.rn7-catpanel {
	position: fixed; inset: 0; z-index: 92;
	background: var(--bg); display: flex; flex-direction: column;
}
.rn7-catpanel[hidden] { display: none; }
.rn7-catpanel-head {
	display: flex; align-items: center; gap: 10px; min-height: 56px;
	padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
	background: var(--bg-deep); border-block-end: 1px solid var(--line);
}
.rn7-catpanel-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; }
.rn7-catpanel-close, .rn7-catpanel-back {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-width: 44px; min-height: 44px; padding: 0 10px;
	background: var(--surface); color: var(--ink);
	border: 1px solid var(--line); border-radius: 12px;
	font-size: 14px; font-weight: 700; cursor: pointer;
}
.rn7-catpanel-back svg { transform: scaleX(-1); }
/* The DS [hidden] discipline (cf. .rn5-sheet[hidden]): an
   explicit display rule on the component would otherwise
   defeat the hidden attribute — the back affordance exists
   only in the drilled state, the fold button only when the
   JS measurement armed it. */
.rn7-catpanel-back[hidden] { display: none; }
.rn7-desc-btn[hidden] { display: none; }
.rn7-catpanel-body {
	flex: 1; overflow-y: auto; padding: 16px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.rn7-catpanel-sub { margin: 16px 2px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.rn7-catpanel .rn7-catrows { gap: 10px; }
button.rn7-catrow { font: inherit; text-align: start; cursor: pointer; width: 100%; }
body.rn7-catopen { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.rn7-desc-body { transition: none; }
	.rn7-seal iframe { transition: none; }
}

/* ============ WAVE 19 — Account & Economy Bundle (§A fixes +
   §B sockets + §D one account shell; SYSTEM §19) ============
   Sources: docs/DESIGN-V7-ACCOUNT-ECONOMY-BUNDLE.md items 1–13. */

/* — ITEM 4 (§A): floater coverage on ALL account pages. The
   WhatsApp floater is fixed (mobile: bottom 84px + 48px tall →
   its top edge sits 132px above the viewport bottom; desktop:
   20px + 48px → 68px). A 176px bottom clearance on the account
   content makes it structurally impossible for the last text of
   any account page to rest under the floater at full scroll:
   ≥44px margin on mobile, ≥108px on desktop. */
.woocommerce-account .woocommerce-MyAccount-content { padding-bottom: 176px; }

/* — ITEM 2 (§A): ONE re-buy component, DS row spacing. The
   orders-list action row had no layout rule at all; the view
   shares the same actions array + the same key class, so the
   component rule below paints both surfaces identically. */
.rn5-orderline-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.woocommerce-MyAccount-content a.rn7_buy_again { border: 1px solid var(--accent-deep); color: var(--accent-light); background: transparent; }
.woocommerce-MyAccount-content a.rn7_buy_again:hover { border-color: var(--accent); color: var(--accent-light); }

/* — ITEM 1 (§A): the order rating panel, REBUILT as a DS
   component. The substrate prompt (idea-reviews) shipped a
   light surface under the theme's white frame text (invisible
   title, product name, near-invisible stars — owner Drive #7).
   The whole surface family now sits on the DS dark surface;
   the star input's DOM runs 5→1 in RTL, so :checked + its
   following siblings are exactly the chosen rating and below —
   the selected state paints the full chosen range in --star. */
.rn-review-prompt { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.rn-review-prompt-head strong { color: var(--ink); }
.rn-review-prompt-sub { color: var(--ink-2); }
.rn-review-prompt-product { color: var(--ink); }
/* Star labels need the theme's own account-label anchor: the
   base rule body.rn5.woocommerce-account :is(...) label:not(...)
   resolves to (0,4,2) and paints every account label --ink —
   the un-anchored (0,1,1) attempt below it in cascade order
   lost, leaving the stars white (gate-caught, Wave 19 fix). */
body.rn5.woocommerce-account .woocommerce-MyAccount-content .rn-review-prompt-stars label { color: #7d8891; }
body.rn5.woocommerce-account .woocommerce-MyAccount-content .rn-review-prompt-stars label:has(input:checked),
body.rn5.woocommerce-account .woocommerce-MyAccount-content .rn-review-prompt-stars label:has(input:checked) ~ label { color: var(--star); }
@media (hover: hover) {
	body.rn5.woocommerce-account .woocommerce-MyAccount-content .rn-review-prompt-stars label:hover,
	body.rn5.woocommerce-account .woocommerce-MyAccount-content .rn-review-prompt-stars label:hover ~ label { color: var(--star); }
}
.rn-review-prompt-text { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rn-review-prompt-msg { color: var(--danger); }
.rn-review-prompt-done { color: var(--save); }
.rn-review-nudge { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.rn-reviews-awaiting li { background: var(--surface); border-color: var(--line); color: var(--ink); }
/* Supersedes the light-island link rule above (line ~3844):
   on the DS dark surface the prompt's links take the DS
   text-accent, same selector, later position. */
body.rn5 .rn5-frame .woocommerce-MyAccount-content :is(.rn-review-nudge, .rn-review-prompt) a:not(.rn7-add):not(.rn5-btn) { color: var(--accent-light); }

/* — ITEM 1 (§A): the orders-list review modal, REBUILT as a DS
   component (substrate port-reviews surface; engine untouched). */
#review-modal .modal-box { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
#review-modal .modal-title { color: var(--ink); }
#review-modal .modal-heading p { color: var(--ink-2); }
#review-modal .modal-heading-icon { color: var(--accent); }
#review-modal .modal-close { color: var(--ink-2); }
#modal-loading { color: var(--ink-2); }
#modal-loading .rc-loader { border-color: var(--line); border-top-color: var(--accent); }
.review-product-block { border-color: var(--line); }
.review-product-block .rpb-name { color: var(--ink); }
body.rn5 .star-rating-input label { color: #7d8891; }
body.rn5 .star-rating-input input:checked ~ label,
body.rn5 .star-rating-input label:hover,
body.rn5 .star-rating-input label:hover ~ label { color: var(--star); }
.review-textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.rpb-submit { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.rpb-msg.error, .rc-review-error { color: var(--danger); }
.rpb-msg.success { color: var(--save); }
.rpb-already { color: var(--ink-2); }

/* — §D (ITEM 13): the ONE account-zone shell — balance-card
   pattern, log pattern with designed empty state, action-button
   pattern. Native in محفظتي/إحالاتي (acct.php); mapped onto
   نقاطي (wheel overrides below) and اشتراكاتي (RRE mapping at
   the end of this section). Muted text sits on --surface
   (5.6:1), never on --surface-2 (4.42:1 — under AA). */
.rn7-acct-shell { display: grid; gap: 16px; }
.rn7-acct-balance { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 6px; }
.rn7-acct-balance-label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.rn7-acct-balance-value { color: var(--ink); font-size: 30px; font-weight: 900; line-height: 1.2; }
.rn7-acct-note { color: var(--ink-2); font-size: 13.5px; line-height: 1.9; margin: 0; }
.rn7-acct-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
body.rn5 .rn7-acct-action { min-height: 48px; padding: 10px 20px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-weight: 800; font-size: 15px; cursor: not-allowed; }
.rn7-acct-action-note { color: var(--ink-2); font-size: 12.5px; }
.rn7-acct-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rn7-acct-balance--mini .rn7-acct-balance-value { font-size: 24px; }
.rn7-acct-log { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.rn7-acct-log-title { color: var(--ink); font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.rn7-acct-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 28px 16px; text-align: center; display: grid; gap: 4px; justify-items: center; }
.rn7-acct-empty-title { color: var(--ink); font-size: 15px; font-weight: 800; }
.rn7-acct-empty-sub { color: var(--ink-2); font-size: 13px; line-height: 1.8; margin: 0; max-width: 420px; }

/* — ITEM 11 (§C): the rewards wheel in نقاطي, REBUILT as a DS
   component (presentation only — the KEEP plugin's engine,
   canvas, costs and prizes are untouched). Its palette is
   re-mapped to DS tokens at the variable level first, then the
   hardcoded light grounds are replaced one by one. Headings
   land on flat DS surfaces (no gradient under any heading), so
   the lightest-gradient-point clause is met by construction
   and verified by computed measurement in the wave gate. */
.woocommerce-account .wcr-container,
.wcr-modal-content {
	--wcr-primary: #00c8ff; --wcr-primary-dark: #00a2d9;
	--wcr-primary-soft: rgba(0, 200, 255, .12);
	--wcr-accent: #26eeff; --wcr-accent-soft: rgba(38, 238, 255, .10);
	--wcr-ink: #ffffff; --wcr-text: #f2f2f2; --wcr-muted: #bdbdbd;
	--wcr-border: hsla(0, 0%, 100%, .14);
	--wcr-surface: #2C2D33; --wcr-bg: #222328;
	--wcr-success: #4ade80; --wcr-success-soft: rgba(74, 222, 128, .12);
	--wcr-error: #f87171; --wcr-error-soft: rgba(248, 113, 113, .12);
	--wcr-warning: #ffb020;
	--wcr-shadow-sm: none; --wcr-shadow-md: none;
	--wcr-shadow-lg: 0 24px 70px rgba(0, 0, 0, .5);
}
.woocommerce-account .wcr-container { font-family: inherit; max-width: none; }
.woocommerce-account .wcr-container::before,
.woocommerce-account .wcr-container::after { display: none; }
.woocommerce-account .wcr-hero { background: var(--surface); border-color: var(--line); box-shadow: none; }
.woocommerce-account .wcr-hero::after { display: none; }
.woocommerce-account .wcr-hero h2 { color: var(--ink); font-weight: 800; }
.woocommerce-account .wcr-balance-card { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.woocommerce-account .wcr-game-head { border-bottom-color: var(--line); }
.woocommerce-account .wcr-meta-pill { background: var(--surface-2); color: #e8e8e8; border-color: var(--line); }
.woocommerce-account .wcr-meta-pill.wcr-meta-cost { color: var(--accent); }
.woocommerce-account .wcr-wheel-column { background: var(--surface-2); border-color: var(--line); }
.woocommerce-account .wcr-wheel-halo { background: var(--surface); border-color: var(--line); box-shadow: 0 0 0 12px rgba(0, 0, 0, .25), 0 24px 50px rgba(0, 0, 0, .35); }
.woocommerce-account .wcr-wheel-halo::before { border-color: rgba(0, 200, 255, .25); }
.woocommerce-account .wcr-wheel-halo::after { border-color: rgba(38, 238, 255, .12); }
.woocommerce-account .wcr-wheel-pointer { background: var(--surface-2); border-color: var(--line); }
.woocommerce-account .wcr-spin-btn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.woocommerce-account .wcr-spin-button-icon { background: rgba(255, 255, 255, .28); color: var(--on-accent); }
.woocommerce-account .wcr-spin-button-copy small { color: rgba(0, 73, 128, .78); }
.woocommerce-account .wcr-spin-button-cost { color: var(--on-accent); border-color: rgba(0, 73, 128, .35); background: rgba(255, 255, 255, .28); }
.woocommerce-account .wcr-spin-btn:disabled { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }
.woocommerce-account .wcr-spin-btn:disabled .wcr-spin-button-cost { color: var(--ink-2); border-color: var(--line); background: transparent; }
.woocommerce-account .wcr-spin-btn:focus-visible,
.woocommerce-account .wcr-btn:focus-visible,
.woocommerce-account .wcr-modal-close:focus-visible { outline-color: rgba(0, 200, 255, .45); }
.woocommerce-account .wcr-status-card,
.woocommerce-account .wcr-how-card { background: var(--surface-2); }
.woocommerce-account .wcr-status-card.is-ready { background: var(--surface-2); border-color: rgba(74, 222, 128, .4); }
.woocommerce-account .wcr-status-card.is-locked { background: var(--surface-2); border-color: rgba(248, 113, 113, .4); }
.woocommerce-account .wcr-how-item + .wcr-how-item { border-top-color: var(--line); }
.woocommerce-account .wcr-trust-strip { background: var(--surface-2); }
.woocommerce-account .wcr-trust-strip > div { background: var(--surface); border-color: var(--line); }
.woocommerce-account .wcr-trust-strip strong { color: #e8e8e8; }
.woocommerce-account .wcr-message.wcr-error { color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
.woocommerce-account .wcr-message.wcr-success { color: var(--save); border-color: rgba(74, 222, 128, .4); }
.woocommerce-account .wcr-history-note { background: var(--surface-2); border-color: var(--line); }
.woocommerce-account .wcr-history-table { border-color: var(--line); }
.woocommerce-account .wcr-history-table table { background: transparent; }
.woocommerce-account .wcr-history-table th { background: var(--surface-2); border-bottom-color: var(--line); }
.woocommerce-account .wcr-history-table td { color: #e8e8e8; border-bottom-color: var(--line); }
.woocommerce-account .wcr-history-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.woocommerce-account .wcr-prize-badge { color: var(--accent-light); background: rgba(0, 200, 255, .10); border-color: var(--line); }
.woocommerce-account .wcr-prize-badge.is-neutral { color: var(--wcr-muted); background: var(--surface-2); border-color: var(--line); }
.woocommerce-account .wcr-spin-id { background: var(--surface-2); }
/* The attempts log's empty state, structurally inside its
   bounds (§19.2): the plugin's 620px table min-width pushed the
   empty cell's centre off the visible edge at 375px — when the
   log is empty the table takes the card's own width and the
   empty text wraps inside it. */
.woocommerce-account .wcr-history-table:has(.wcr-no-data) { overflow: visible; }
.woocommerce-account .wcr-history-table table:has(.wcr-no-data) { min-width: 0; }
.woocommerce-account .wcr-no-data { white-space: normal; }
.woocommerce-account .wcr-no-data small { font-size: 12px; }
.woocommerce-account .wcr-buy-points { background: var(--surface); }
.woocommerce-account .wcr-buy-points-icon { background: var(--surface-2); border-color: var(--line); }
.woocommerce-account .wcr-buy-points::after { border-color: rgba(0, 200, 255, .05); }
.woocommerce-account .wcr-btn-primary { background: var(--accent); color: var(--on-accent) !important; box-shadow: none; }
.wcr-modal-content { background: var(--surface); border-color: var(--line); }
.wcr-modal-close { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.wcr-prize-icon { background: rgba(0, 200, 255, .10); border-color: var(--line); }
.wcr-coupon-code { background: var(--surface-2); border-color: var(--line); }
.wcr-coupon-value { background: var(--bg); color: var(--ink); border-color: var(--line); }
.wcr-copy-coupon { background: var(--accent); color: var(--on-accent); border-color: transparent; }
@media (max-width: 640px) {
	.woocommerce-account .wcr-container { padding: 16px 12px; }
	.woocommerce-account .wcr-hero { padding: 22px 18px; flex-direction: column; align-items: stretch; }
	.woocommerce-account .wcr-game-card { padding: 18px 14px; }
	.woocommerce-account .wcr-history-section,
	.woocommerce-account .wcr-buy-points { padding: 18px 14px; }
	.rn7-acct-stats { grid-template-columns: 1fr; }
}

/* — §D mapping: اشتراكاتي (RRE render, bare markup) takes the
   shell's empty-state treatment on its empty paragraph; its
   save action already rides the DS .button pattern. */
body.woocommerce-rre-subscriptions .woocommerce-MyAccount-content > p:first-of-type {
	border: 1px dashed var(--line); border-radius: 12px; padding: 28px 16px;
	text-align: center; color: var(--ink-2); background: var(--surface);
}

/* ================================================================
 * WAVE 20 — OWNER DRIVE #9 (account-zone mastery layer)
 * Item 4: the sections GRID + back bar. Item 2: the wheel's DS
 * rim + hub overlay and the single-mode definition line.
 * Item 3: the avatar picker. Item 1: the reviews designed empty
 * state. Item 7: the account zone's primary actions anchored to
 * the ONE DS primary pair — no per-button exceptions.
 * ================================================================ */

/* ---- Item 4: sections grid (dashboard) ---- */
.rn7-acctgrid { margin-block-start: 26px; }
.rn5-frame h3.rn7-acctgrid-group {
	font-size: 15px; font-weight: 900; color: var(--ink-2);
	margin-block-end: 10px; letter-spacing: .01em;
}
.rn7-acctgrid-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-block-end: 22px; }
@media (min-width: 768px) { .rn7-acctgrid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.rn5 .rn5-frame a.rn7-acctcard {
	display: flex; align-items: center; gap: 12px;
	min-height: 72px; padding: 12px 14px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
	color: var(--ink); text-decoration: none; font-weight: 400;
}
body.rn5 .rn5-frame a.rn7-acctcard:hover { border-color: var(--accent); text-decoration: none; }
.rn7-acctcard-ic {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px; border-radius: var(--radius-s);
	background: var(--surface-2); color: var(--accent);
}
.rn7-acctcard-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn7-acctcard-name { font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.rn7-acctcard-info { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.rn7-acctcard-chev { margin-inline-start: auto; flex: none; color: var(--ink-2); display: inline-flex; }
.rn7-acctgrid-logout { margin-block-start: 4px; }
body.rn5 .rn5-frame .rn7-acctgrid-logout a:not(.rn7-add):not(.rn5-btn):not(.button):not(.added_to_cart) { color: var(--ink-2); font-weight: 700; }

/* ---- Item 4: back bar (section pages) ---- */
.rn7-acct-backbar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-block-end: 16px;
}
body.rn5 .rn5-frame a.rn7-acct-backlink {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 8px 14px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
	color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none;
}
body.rn5 .rn5-frame a.rn7-acct-backlink:hover { border-color: var(--accent); text-decoration: none; }
.rn7-acct-cursec { font-size: 15px; font-weight: 900; color: var(--ink-2); }
.rn7-acct-backlink span { color: var(--ink); }
body.rn5 .rn5-frame h3.rn7-acctgrid-group { font-size: 15px; }

/* ---- Item 2: wheel DS rim + hub (static-zone overlays; the
 * plugin canvas, its sectors and its engine are untouched) ---- */
.wcr-wheel-container { position: relative; }
.rn7-wheel-rim {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block;
}
.rn7-wheel-rim svg { display: block; width: 100%; height: 100%; }
.rn7-wheel-rim-main { stroke: var(--surface-2); }
.rn7-wheel-rim-edge { stroke: var(--accent); }
.rn7-wheel-hub {
	position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none;
	transform: translate(-50%, -50%);
	width: 17%; aspect-ratio: 1; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--line);
	display: grid; place-items: center; overflow: hidden;
}
.rn7-wheel-hub img { width: 72%; height: 72%; object-fit: contain; display: block; }
.wcr-mode-note {
	margin-block-start: 10px; font-size: 13px; line-height: 1.9; color: var(--ink-2);
}

/* ---- Item 3: avatar picker (the raw input never renders) ---- */
.rn7-avatar-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rn7-avatar-thumb { border-radius: 50%; object-fit: cover; }
.rn7-avatar-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
	background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
	border-radius: var(--radius-s); font-size: 14px; font-weight: 800; cursor: pointer;
}
.rn7-avatar-input {
	position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.rn7-avatar-name { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.rn7-avatar-hint { display: block; margin-block-start: 6px; font-size: 12.5px; color: var(--ink-2); }

/* ---- Item 1: reviews empty state spacing ---- */
.rn-reviews-empty { margin-block-start: 6px; }

/* ---- Item 7: ONE primary pair for the account zone ----
 * The review prompt's submit (a Woo .button), the review
 * modal's submit (.rpb-submit — its plugin stylesheet's legacy
 * teal is also fixed at the source), and the wheel's spin
 * action all take the DS primary; declared secondaries take
 * the DS secondary pattern (surface-2 + ink). */
body.rn5 .rn5-frame .rn-review-prompt-submit,
body.rn5 .rn5-frame .wcr-spin-button:not(:disabled) {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
body.rn5 .rn5-frame .wcr-balance-button {
	background: var(--surface-2); color: var(--ink); border-color: var(--line);
}
/* The review modal lives at BODY level (outside .rn5-frame):
 * its submit is anchored at #review-modal scope, which also
 * outranks the generic :is(button) reset (woodmart dynamic
 * sheet, #F3F3F3/#3E3E3E) that gate-probing found painting it,
 * and the plugin sheet's own rule, whose ?ver never changes
 * and therefore serves stale at the CDN edge. */
body.rn5 #review-modal .rpb-submit {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
body.rn5 #review-modal .rpb-load-more {
	background: var(--surface-2); color: var(--ink); border-color: var(--line);
}

/* =====================================================================
 * DRIVE #10 — THE ORDER-DETAIL PAGE (Owner Drive Result #10;
 * DESIGN-V7-DRIVE10-ORDER-DETAIL.md; §12 spacing measure).
 * ===================================================================== */

/* ITEM 1 — the DS action bar below the details table: the
 * shared order actions on one strip, fixed 12px gaps (flex
 * gap, never margins that can collapse), one unified 44px
 * height, and 12px of strip padding so no button ever touches
 * another button or the strip's edge, in any state. */
body.rn5 .rn7-order-actions {
	display: flex; flex-wrap: wrap; gap: 12px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; padding: 12px; margin-block-start: 16px;
}
body.rn5 .rn7-order-actions .order-actions-button {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 1 1 0; height: 44px; min-height: 44px; padding-block: 0;
	margin: 0; white-space: nowrap;
}

/* ITEM 4 — the DS delivery-status card (the account shell's
 * card pattern): one status title with a tone dot, the
 * terminal-state note, and one line per product carrying the
 * canonical class + state from the RC presenter. */
body.rn5 .rn7-status-card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; padding: 18px; margin-block-start: 16px; margin-inline: 16px;
	display: grid; gap: 12px;
}
body.rn5 .rn7-status-head { display: flex; align-items: center; gap: 10px; }
body.rn5 .rn7-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-2); }
body.rn5 .rn7-status--ok .rn7-status-dot { background: var(--save); }
body.rn5 .rn7-status--warn .rn7-status-dot,
body.rn5 .rn7-status--pending .rn7-status-dot { background: var(--star); }
body.rn5 .rn7-status--info .rn7-status-dot { background: var(--accent-bright); }
body.rn5 .rn7-status--bad .rn7-status-dot { background: var(--danger); }
body.rn5 .rn7-status-title { color: var(--ink); font-size: 17px; font-weight: 800; margin: 0; }
body.rn5 .rn7-status-note { color: var(--ink-2); font-size: 14px; margin: 0; }
body.rn5 .rn7-status-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.rn5 .rn7-status-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.rn5 .rn7-status-name { color: var(--ink); font-weight: 600; }
body.rn5 .rn7-status-class { color: var(--ink-2); font-size: 13px; }
body.rn5 .rn7-status-state {
	font-size: 13px; font-weight: 700; line-height: 1;
	border: 1px solid var(--ink-2); color: var(--ink-2);
	border-radius: 999px; padding: 5px 10px;
}
body.rn5 .rn7-state--ready { color: var(--save); border-color: var(--save); }
body.rn5 .rn7-state--pending { color: var(--accent-bright); border-color: var(--accent-bright); }
body.rn5 .rn7-state--delayed { color: var(--star); border-color: var(--star); }
body.rn5 .rn7-state--failed_item { color: var(--danger); border-color: var(--danger); }
body.rn5 .rn7-status-explain { color: var(--ink-2); font-size: 13px; flex-basis: 100%; }

/* ITEM 1 (card side) — the order card's own action row
 * (.rn5-orderline-actions, wave 19) was built with a 10px
 * gap; §12's spacing measure (registered with this drive)
 * sets the floor at 12px for every action component, the
 * card included. Same component, brought to the floor. */
body.rn5 .rn5-orderline-actions { gap: 12px; }

/* ITEM 5 — the collapsed billing section: one contact line
 * where a «غير محدد» address block stood. */
body.rn5 .rn7-contact-line { color: var(--ink); margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
body.rn5 .rn7-contact-label { color: var(--ink-2); }
body.rn5 .rn7-contact-value { color: var(--ink); unicode-bidi: plaintext; }

/* ================================================================
 * WAVE 25 (Drive #11) — search chips, card review row, strips.
 * ================================================================ */

/* E13 (abolished, Wave 26 / §24.1): the search chips rail is gone —
 * one category row only. Its rule retires with the layer. */

/* E14: the card review row — real counts only; the row exists in
 * the DOM only when the product's approved-review count is > 0.
 * The star SVGs carry no intrinsic size (viewBox only): on other
 * surfaces an ancestor sizes them, inside a card nothing did —
 * the paths painted as one overlapped blob past the card edge
 * (Wave-25 gate catch). Here they get their explicit card size. */
.rn7-card-rate { display: flex; align-items: center; gap: 6px; margin-block-start: 4px; font-size: 12px; color: var(--ink-2); }
.rn7-card-rate .rn5-star svg { display: block; width: 13px; height: 13px; }
.rn7-card-rate-n { font-weight: 700; }

/* D12: the «يبدأ من» lead-in on variable-product card prices. */
.rn7-from { font-size: 12px; font-weight: 700; color: var(--ink-2); }

/* C6: the announcement strip as a link — same line, same colour;
 * the destination never changes the strip's voice. */
.rn7-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* C9: the closing strip — one governed invitation line above the
 * footer, in the announcement strip's voice, on the surface. */
.rn7-closing {
	margin-block-start: 28px; padding: 14px 16px; border-radius: var(--radius);
	background: var(--surface); border: 1px solid var(--line);
	text-align: center; font-size: 15px; font-weight: 700; line-height: 1.7;
}
.rn7-closing a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
 * V7 WAVE 27 (Drive #13, §26) — product-page completeness.
 * Item 1: the short-description block (display clamp 3 lines; the
 * stored content is never cut). Item 2: variable groups — cards
 * mode (≤3 options: all visible, no scroll) and dropdown mode
 * (>3: the engine select as a real DS field, cards hidden).
 * Item 3: the customer input field inside the buy form.
 * ===================================================================== */
.rn7-shortdesc {
	color: var(--ink-2); font-size: 14px; line-height: 1.65;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
}
.rn7-shortdesc p { margin: 0; }
.rn7-vargroup--cards .rn5-varcards {
	grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	overflow: visible; scroll-snap-type: none;
}
.rn7-vargroup--dropdown .rn5-varcards { display: none; }
.rn7-vargroup--dropdown .rn5-varselect {
	position: static !important; width: 100%; height: auto; min-height: 48px;
	clip: auto; clip-path: none; overflow: visible; white-space: normal;
	background: var(--surface); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: 10px 12px; font: inherit; font-size: 14.5px;
}
.rn7-custinput { display: grid; gap: 6px; margin-block: 10px; }
.rn7-custinput-label { font-weight: 700; font-size: 14px; }
.rn7-custinput-req { color: var(--danger); }
.rn7-custinput-help { color: var(--ink-2); font-size: 12.5px; line-height: 1.6; margin: 0; }
.rn7-custinput-field {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-s); color: var(--ink);
	padding: 12px; min-height: 48px; width: 100%; font: inherit; font-size: 14.5px;
}
/* Wave 27 fix round: the field takes its own full row inside the
 * variation add-to-cart flex line, and its error line (§8 tokens). */
.woocommerce-variation-add-to-cart:has(> .rn7-custinput) { flex-wrap: wrap; }
.rn7-custinput { flex: 1 1 100%; }
.rn7-custinput-err { color: var(--danger); font-size: 13px; line-height: 1.6; margin: 0; }

/* =====================================================================
 * WAVE 28 (owner Drive #14) — §27.2 page end + §27.4 brand alignment.
 *
 * §27.2 THE PAGE END. Before: every footer-painted page ended 102px
 * after the copyright line (footer-in bottom padding 18 + a body
 * bottom-nav clearance of 84 reserved against a nav whose rendered
 * height is 59); account pages stacked a further 176px of WhatsApp-
 * floater clearance under their last content although the floater
 * renders only when a channel is configured; the footer links panel
 * was a 2-column grid on mobile whose shop column ended 206px above
 * the panel's bottom edge (grid stretch against the taller column);
 * and on buy-bar pages the sticky bar COVERED the copyright line at
 * full scroll (measured 35px overlap) because the page-end clearance
 * knew only the nav. After: the clearance is the small fixed footer
 * padding + the TRUE clearance of the bar that actually renders —
 * the nav everywhere, the buy bar only on buy-bar pages
 * (body.has-rn7-buybar, set by wave28.php under the template's own
 * render condition), the floater clearance only while the floater
 * exists (body.has-rn7-wa-float). The panel stacks in one column on
 * mobile so no lateral void can exist.
 * ===================================================================== */
.rn7-fbrand { text-align: start; }
.rn7-fbrand .rn7-frate { justify-content: flex-start; text-align: start; }
.rn7-fsocial { justify-content: flex-start; }
.rn7-fpanel { align-items: start; }
/* P6 §3: 110px (was 24px) — the account content must clear the
 * floating bottom capsule (nav.rn5-bottomnav: 62px tall + 12px
 * offset = 74px footprint) with real slack at full scroll. This
 * later rule is the one that wins over the Wave-19 176px rule
 * above; the WA-floater variant below still raises it to 176px. */
/* Device-gate §4: the 110px / 176px values were dead space, not
 * clearance — the floating capsule is cleared by the BODY's
 * padding-bottom (§7: exactly 86px), and the WhatsApp float now
 * yields on collision (§6), so the account content column ends
 * on the standard rhythm like every other surface. */
.woocommerce-account .woocommerce-MyAccount-content { padding-bottom: 24px; }
body.has-rn7-wa-float .woocommerce-account .woocommerce-MyAccount-content { padding-bottom: 24px; }
@media (max-width: 767px) {
	.rn7-fpanel { grid-template-columns: 1fr; }
	body.has-rn5-bottomnav { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
	body.has-rn7-buybar { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
}

/* ================================================================
 * WAVE 29 (owner Drive #15) — §28.2 footer numeric scale + §28.1
 * bound-field visibility.
 * Scale law: link rows 44–48px (the footer link rows already sit
 * at the 44 floor — unchanged); every section gap on the 8pt
 * scale, max 24px; the brand block is ONE compact cluster. This
 * block ONLY re-scales spacing — no furniture moves or leaves.
 * The footer-in BOTTOM padding deliberately stays 18px: it is
 * the §27.2/§28.2 page-end measure itself (void 86 = 18 + the
 * 68px bar clearance), not an inter-section gap, so the
 * page-end law cannot regress from this block.
 * ================================================================ */
.rn7-custinput[hidden] { display: none; }
.rn7-footer { margin-block-start: 32px; }
.rn7-footer-in { padding-block-start: 24px; }
.rn7-ftag { margin-block-start: 8px; }
/* The tag's bottom margin was the UA paragraph default (1em =
 * 20px at the footer's sizes) — the brand cluster's largest
 * internal gap; the scale puts it at 16 (§28.2c). */
.rn7-fbrand .rn7-ftag { margin-block-end: 16px; }
.rn7-fsocial { margin-block-start: 8px; }
.rn7-fpanel { padding: 16px; gap: 16px; }
.rn7-fcolstack { gap: 16px; }
.rn7-fhelp { padding-block: 8px; }
.rn7-fpay { padding-block: 8px; }
/* Scoped to beat the easy-mode block's own body.rn5 rule,
 * which otherwise wins on specificity. */
body.rn5 .rn7-easybar { margin-block-start: 0; padding-block: 8px; }
.rn7-fbase { padding-block-start: 8px; }

/* ================================================================
 * WAVE 30 (owner Drive #16) — §29.1 THE FOOTER'S CORRECTED SCALE
 * + §29.2 THE INPUT FIELD'S FINAL FORM.
 *
 * §29.1: the owner's 375px drive rejected Wave 29's scale report:
 * his row reads ≈90–100px where the wave printed 44. The wave's
 * probe had measured ONLY the anchor's own box (44px = its
 * min-height); the row the customer scrolls also carries the
 * <li>'s 10px bottom margin (a parent-theme list rule the footer
 * block never touched) and the 1px divider border — a measured
 * pitch of 54–55px (Wave-30 BEFORE gate, owner's way). This block
 * removes every component above the box itself: no li margin, no
 * divider line (spacing alone separates), and the anchor's box
 * is fixed at exactly 44px all-in. Link text 15px at the
 * readable #D7DBE0 grade; headings full white; heading → first
 * link 12px. Section gaps (16px everywhere) and card paddings
 * (panel 16/16, footer-in 24/16/18) already sit inside §29.1's
 * ceilings (≤24 gaps, ≤20 horizontal / ≤24 vertical padding)
 * and are unchanged. NO furniture moves or leaves.
 * ================================================================ */
.rn7-fcol li { margin: 0; }
.rn7-fcol li + li { border-block-start: 0; }
.rn7-fcol a {
	height: 44px; min-height: 44px; padding-block: 0;
	font-size: 15px; line-height: 1.4; color: #D7DBE0;
}
.rn7-fcol h3 { color: #ffffff; margin-block-end: 12px; }

/* §29.2: ONE component styles every customer input field (link /
 * username / phone / text, product-level and option-level alike —
 * all render as .rn7-custinput-field). BEFORE (recon-measured):
 * a parent-theme form rule outranked the component's own rule,
 * so the field computed to a 2px rgba(0,0,0,0.1) border over a
 * TRANSPARENT background — the effectively borderless field the
 * owner rejected (the same disease the checkout block at
 * «V7 CHECKOUT» documented and cured in its own scope). This
 * block is scoped (body.rn5 + the component class) to outrank
 * it: single-line 54px box; background one DS shade above the
 * page surface it sits on — WAVE 32 (Drive #18): the field now
 * seats on the ladder ELEVATED shade (--surface-2 #53565B) and
 * its border is re-derived by Wave 30's own arithmetic: the old
 * pair (#3d3d3d ground, #626262 border) differed by +37 per
 * channel; +37 over #53565B gives #787B80 — the same two-plus
 * ladder steps above the field background;
 * focus = the primary #00C8FF border + a light halo; the
 * placeholder carries the field's format example in the muted
 * readable grey; label 15px white semi-bold; help 13px at the
 * #B9BEC7 clarity floor; a validation failure turns the border
 * red while the §13 error line renders directly under the
 * field (the border rule below keys on the error line's own
 * visibility). */
body.rn5 .rn7-custinput-label { font-size: 15px; font-weight: 600; color: #ffffff; }
body.rn5 .rn7-custinput-help { font-size: 13px; color: #B9BEC7; }
body.rn5 .rn7-custinput-field {
	height: 54px; min-height: 54px; padding: 0 14px;
	background: var(--surface-2); border: 1.5px solid #787B80;
	border-radius: var(--radius-s); color: var(--ink); font-size: 15px;
}
body.rn5 .rn7-custinput-field::placeholder { color: #a9a9a9; opacity: 1; }
body.rn5 .rn7-custinput-field:focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(0, 200, 255, .22);
}
/* The red border tracks the VISIBLE error line only. The
 * bridge's aria-invalid attribute is a stale flag after a
 * corrected add (it is never cleared on success — Wave-29
 * behaviour), so keying the border to it would leave a
 * successfully-added field looking invalid (measured in this
 * wave's first gate run on 293); the :has() form follows the
 * error element's own visibility in every state. */
body.rn5 .rn7-custinput:has(.rn7-custinput-err:not([hidden])) .rn7-custinput-field {
	border-color: var(--danger);
}

/* ================================================================
 * WAVE 31 (owner Drive #17) — §30 THE BOTTOM NAVIGATION IS A
 * FLOATING CAPSULE IN THE PROJECT'S OWN IDENTITY.
 *
 * BEFORE (Wave-31 BEFORE gate, Chromium 375px, live 2.2.118-v7):
 * the bar was a flat full-width band — measured height 58.8px,
 * bottom offset 0, background #191919 (the page bg itself),
 * radius 0, no shadow, no blur; inactive items #a9a9a9; page
 * clearance came from THREE layered body rules (64 base / 84 /
 * 68 — the 68px Wave-28 value won) and 148px on buy-bar pages;
 * the buy bar sat at bottom 64px leaving a 5.2px sliver above
 * the flat bar's top edge; the WhatsApp floater and the toasts
 * stacked at 84px (150px on product pages).
 *
 * AFTER — ONE capsule-aware system (§30.3 / Drive L3). The
 * capsule: height 62px, radius 31px (half the height), side
 * margins 16px, bottom offset = safe-area + 12px, a glass
 * derivative of the pinned surface #2E2E2E (rgba(46,46,46,.86)
 * + backdrop blur) with the --line translucent border and a
 * soft shadow. Active item stays var(--accent-bright) #00C8FF;
 * inactive items rise to the readable #D7DBE0 grade. Markup,
 * destinations, order and the badge element are untouched —
 * this is a presentation transform of .rn5-bottomnav only.
 *
 * The stack above the capsule (mobile only; desktop ≥768px
 * keeps today's behaviour — the bar is hidden there):
 *   capsule occupies [12 .. 74] + safe-area from the bottom;
 *   ONE declared gap of 12px above it;
 *   buy bar bottom = 86 + safe (its measured height is 70px,
 *   so its top edge sits at 156 + safe);
 *   WhatsApp floater bottom = 86 + safe on general pages and
 *   168 + safe on product pages (buy-bar top 156 + the 12px
 *   gap); the two toasts follow the same stack tokens as
 *   before (they shared the floater's 84/150 stack);
 *   page clearance = the capsule footprint + ≥16px breathing:
 *   62 + 12 + 16 = 90 + safe on nav pages, and on buy-bar
 *   pages 86 + 70 + 16 = 172 + safe. No page type keeps a
 *   flat-bar number; no clearance is stacked twice.
 * The keyboard-open hide (body.rn5-kb-open, line ~415) and
 * the account floater clearance (body.has-rn7-wa-float,
 * 176px — still above this stack's 56px requirement) are
 * untouched.
 * ================================================================ */
.rn5-bottomnav {
	left: 16px; right: 16px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	height: 62px; padding-bottom: 0;
	background: rgba(46, 46, 46, .86);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	border: 1px solid var(--line);
	border-radius: 31px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.rn5-bn-item { color: #D7DBE0; justify-content: center; }
@media (max-width: 767px) {
	/* Device-gate §7: bottom clearance is EXACTLY the capsule's
	 * footprint — 62px tall + 12px below it + 12px of air above
	 * it = 86px. The 90px value left a dead strip under the
	 * footer on the owner's device. The buy-bar pages keep their
	 * own stack value (capsule zone + the bar fills it). */
	body.has-rn5-bottomnav { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
	body.has-rn7-buybar { padding-bottom: calc(172px + env(safe-area-inset-bottom)); }
	.rn5-buybar { bottom: calc(86px + env(safe-area-inset-bottom)); }
	.rn7-wa-float { bottom: calc(86px + env(safe-area-inset-bottom)); }
	body.single-product .rn7-wa-float { bottom: calc(168px + env(safe-area-inset-bottom)); }
	.rn7-atc-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
	body.single-product .rn7-atc-toast { bottom: calc(168px + env(safe-area-inset-bottom)); }
	.rn5-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ================================================================
 * WAVE 32 (owner Drive #18) — §31 THE SURFACE LADDER.
 *
 * The token remap itself lives in :root (base #222328 · cards
 * #2C2D33 · elevated #53565B, Drive #18 §1); every var(--bg) /
 * var(--surface) / var(--surface-2) consumer rides it. The
 * field-treatment scopes that had painted inputs on the page
 * ground were re-seated on the elevated token in place (generic
 * form family, checkout, account, track, review, cart qty, T9,
 * login.css auth fields). This block carries what a token
 * cannot express:
 *
 * 1) THE CAPSULE BODY (§31.4) — Wave 31's geometry, clearance
 *    system and stack tokens stand untouched; ONLY the glass
 *    surface changes: rgba(46,46,46,.86) -> the elevated shade
 *    as glass. DOCUMENTED CALIBRATION (§31.3): at Wave 31's .86
 *    alpha the glass composites over the new base to
 *    ~rgb(76,79,84), where the pinned active #00C8FF measures
 *    4.20:1 — below the §12 legibility floor (4.5:1) for the
 *    item labels. The owner's ladder fixes the SHADE, not the
 *    glass's transparency; alpha .75 composites to
 *    ~rgb(71,73,78) and the same pair measures 4.58:1 (inactive
 *    #D7DBE0: 6.46:1). Blur, shadow, border, radius unchanged.
 * 2) THE SEARCH FIELD (§31.5) — every .rn5-search instance
 *    (header, search row, hero, 404) becomes an elevated
 *    capsule: fully rounded, icon + placeholder in the
 *    sanctioned secondary grade #D7DBE0, focus = the §29.2
 *    language (#00C8FF border + halo). The defect-1 block's
 *    visibly-stronger neutral border (white .38, composite
 *    ~#949699 on the elevated ground) is kept.
 * 3) LEGIBILITY RAISES (§12 / Drive L7) — text grades that the
 *    remap stranded below the floor on the elevated ground are
 *    raised to the next sanctioned grade #D7DBE0: the field
 *    help line (#B9BEC7 measured 4.01:1 on #53565B), the field
 *    placeholder and the suggest-row mode line and the
 *    selected varcard's fact line (#A9A9A9 measured 3.19:1).
 *    Muted #A9A9A9 still passes on base (6.68:1) and cards
 *    (5.84:1) and is NOT touched there.
 * 4) CHIPS TO THE CARD SHADE (§31.1) — inactive chips sit on
 *    the card shade with the theme's light border (--line):
 *    .rn5-pill / .rn5-badge leave the elevated token their
 *    display ancestors rode. (Facet chips and zero-state chips
 *    already sat on var(--surface) with --line — compliant,
 *    untouched.)
 * 5) --rn-bg DEFINED — the Wave-17 socket components (compat
 *    select, watch email field, reveal/copy buttons) referenced
 *    a token defined nowhere and rendered transparent; the
 *    surface token now resolves to the elevated shade, the
 *    level the ladder assigns to everything touched.
 * ================================================================ */
.rn5-bottomnav { background: rgba(83, 86, 91, .75); }
body.rn5 .rn5-search .rn5-search-input {
	background: var(--surface-2); border-radius: 999px;
}
body.rn5 .rn7-chrome .rn5-search .rn5-search-input {
	background: var(--surface-2); border-radius: 999px;
}
body.rn5 .rn5-search-ic { color: #D7DBE0; }
body.rn5 .rn5-search .rn5-search-input::placeholder { color: #D7DBE0; opacity: 1; }
body.rn5 .rn7-chrome .rn5-search .rn5-search-input::placeholder { color: #D7DBE0; opacity: 1; }
body.rn5 .rn5-search .rn5-search-input:focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(0, 200, 255, .22);
}
body.rn5 .rn7-custinput-help { color: #D7DBE0; }
body.rn5 .rn7-custinput-field::placeholder { color: #D7DBE0; }
body.rn5 .rn5-sug-mode { color: #D7DBE0; }
body.rn5 .rn5-varcard.is-selected .rn5-varcard-fact { color: #D7DBE0; }
body.rn5 .rn5-pill { background: var(--surface); }
body.rn5 .rn5-badge { background: var(--surface); }
:root { --rn-bg: var(--surface-2); }
/* 6) CASCADE COMPLETION (same wave, CDP-verified on staging):
 * WoodMart's form rule (input[type="email"], ... { background-
 * color: var(--wd-form-bg) } — the variable resolves transparent
 * on this site) loads after this sheet and outranks both the
 * generic field rule and these components' own class rules, so
 * the socket fields/buttons and the cart coupon field sat at NO
 * ladder level (computed rgba(0,0,0,0) before and after the
 * token remap). Scoped overrides seat them at the elevated
 * shade the ladder assigns to fields and secondary actions;
 * borders and text are untouched. The two shop selects follow
 * the field language to the same shade, while their freeze
 * siblings — the facet and zero-state chips — stay on the card
 * shade, as §31.1 orders for inactive chips. */
body.rn5 .rn7-watch-email,
body.rn5 .rn7-compat-row select { background: var(--surface-2); }
body.rn5 .rn7-reveal-btn,
body.rn5 .rn7-copy-btn { background: var(--surface-2); }
body.rn5 .rn5-coupon input { background: var(--surface-2); }
body.rn5 .quantity input.qty { background: var(--surface-2); }
body.rn5 .rn5-varselect,
body.rn5 .rn7-cat .rn6-ordering select { background: var(--surface-2); }


/* =====================================================================
 * Wave 33 (Drive #19 Result 2, §32.2) — «مجتمع رصيد كارد»: ONE card
 * on the CARD shade; the twin buttons on the ELEVATED shade (small,
 * touched — lawful under the §32.1 area ration). Differentiation is
 * the white official glyph ONLY: no platform brand colour exists
 * in this block, in any state. The hover is a neutral border lift;
 * focus carries the store's own action colour (these are links).
 * ===================================================================== */
body.rn5 .rn7-community { margin-block-start: 24px; }
body.rn5 .rn7-community-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; }
body.rn5 .rn7-community-title { font-size: 19px; font-weight: 900; color: var(--ink); margin: 0 0 6px; }
body.rn5 .rn7-community-line { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
body.rn5 .rn7-community-btns { display: grid; gap: 10px; }
@media (min-width: 768px) {
	body.rn5 .rn7-community-btns { grid-template-columns: 1fr 1fr; }
}
body.rn5 .rn7-comm-btn { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
body.rn5 .rn7-comm-btn:hover { border-color: rgba(255, 255, 255, .32); color: var(--ink); text-decoration: none; }
body.rn5 .rn7-comm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.rn5 .rn7-comm-btn-ic { flex: 0 0 auto; display: grid; place-items: center; color: #fff; }
body.rn5 .rn7-comm-btn-tx { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
body.rn5 .rn7-comm-btn-label { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
body.rn5 .rn7-comm-btn-sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
/* The strip variant (careers page, Wave 34): the line rides above
 * the same twin buttons, compact — one renderer, §32.2. */
body.rn5 .rn7-community--strip .rn7-community-line { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* =====================================================================
 * Wave 34 (Drive #19 Result 3, §32.3) — THE CAREERS PAGE.
 * Ladder discipline: page grounds stay BASE; the why cards, role
 * cards and the form panel are CARD shade; ELEVATED appears only
 * on small touched furniture (apply buttons, the fields) per the
 * §32.1 area ration. Cyan is the hero CTA + the submit (actions).
 * The form fields ARE the §29.2 component (.rn7-custinput — the
 * same classes the product fields render with); this block adds
 * only what that component does not carry: select / textarea /
 * file shapes, the bio counter, the consent row.
 * ===================================================================== */
body.rn5 .rn7-careers section { margin-block-end: 26px; }
body.rn5 .rn7-job-hero { padding-block: 10px 2px; }
body.rn5 .rn7-job-hero-title { font-size: 27px; font-weight: 900; line-height: 1.35; color: var(--ink); margin: 0 0 8px; }
body.rn5 .rn7-job-hero-line { font-size: 15px; line-height: 1.8; color: #D7DBE0; margin: 0 0 16px; }
body.rn5 .rn7-job-cta { display: inline-flex; align-items: center; height: 50px; padding: 0 22px; font-size: 15.5px; font-weight: 800; border-radius: 12px; text-decoration: none; }
body.rn5 .rn7-job-sec-title { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 12px; }
body.rn5 .rn7-job-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.rn5 .rn7-job-why-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
body.rn5 .rn7-job-why-card h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.5; }
body.rn5 .rn7-job-why-card p { font-size: 13px; line-height: 1.75; color: #D7DBE0; margin: 0; }
body.rn5 .rn7-job-roles, body.rn5 .rn7-job-apply-sec { scroll-margin-top: 84px; }
body.rn5 .rn7-job-role-grid { display: grid; gap: 10px; }
@media (min-width: 768px) {
	body.rn5 .rn7-job-role-grid { grid-template-columns: 1fr 1fr; }
}
body.rn5 .rn7-job-role-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 6px; align-content: start; }
body.rn5 .rn7-job-role-card h3 { font-size: 16.5px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.5; }
body.rn5 .rn7-job-role-line { font-size: 13.5px; line-height: 1.7; color: #D7DBE0; margin: 0; }
body.rn5 .rn7-job-apply { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; margin-block-start: 8px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none; }
body.rn5 .rn7-job-apply:hover { border-color: rgba(255, 255, 255, .32); color: var(--ink); text-decoration: none; }
body.rn5 .rn7-job-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.rn5 .rn7-jobform { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; }
body.rn5 .rn7-jobform .rn7-custinput:first-child { margin-block-start: 0; }
body.rn5 select.rn7-custinput-field {
	appearance: none; -webkit-appearance: none; padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23D7DBE0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left 14px center;
}
body.rn5 textarea.rn7-custinput-field { height: auto; min-height: 108px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
body.rn5 textarea.rn7-job-bio--over { border-color: var(--danger); }
body.rn5 input[type="file"].rn7-custinput-field { height: auto; min-height: 54px; padding: 10px 14px; }
body.rn5 .rn7-job-counter { font-size: 12px; color: #B9BEC7; margin: 2px 0 0; text-align: end; }
body.rn5 .rn7-job-consent { margin-block: 12px 4px; display: grid; gap: 6px; }
body.rn5 .rn7-job-consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; color: #D7DBE0; cursor: pointer; }
body.rn5 .rn7-job-consent-label input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-block-start: 3px; accent-color: var(--accent); }
body.rn5 .rn7-job-submit { width: 100%; height: 54px; margin-block-start: 10px; font-size: 16px; font-weight: 800; border-radius: var(--radius-s); }
body.rn5 .rn7-job-del { font-size: 13px; line-height: 1.8; color: #D7DBE0; margin: 14px 2px 0; }
body.rn5 .rn7-job-success { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 16px; text-align: center; }
body.rn5 .rn7-job-success h2 { font-size: 21px; font-weight: 900; color: var(--ink); margin: 0 0 10px; }
body.rn5 .rn7-job-success-line { font-size: 14px; color: #D7DBE0; margin: 0 0 4px; }
body.rn5 .rn7-job-ref { font-size: 27px; font-weight: 900; letter-spacing: 1px; color: var(--ink); margin: 0 0 10px; direction: ltr; }
body.rn5 .rn7-job-success-note { font-size: 13.5px; line-height: 1.8; color: #D7DBE0; margin: 0; }
body.rn5 .rn7-careers .rn7-community { margin-block-start: 2px; }
/* Wave 34 cascade raises (measured on the first gate): the frame
 * default `.rn5-frame button[type="submit"]` (0,2,1, elevated)
 * seated the form's primary submit on grey — raised by component
 * scope, the same remedy the auth submits use (see the C6-13
 * note at the login forms). The apply anchors' bare text took
 * the generic link cyan — raised by card scope to white. */
body.rn5 .rn7-jobform button[type="submit"].rn7-job-submit { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.rn5 .rn7-jobform button[type="submit"].rn7-job-submit:hover { background: var(--accent); }

/* ================= WAVE 35 — THE BANNER SYSTEM (§33) =================
 * Three fixed positions on the ladder: the unit ground is the
 * CARD shade, text zones are solid card (legibility measurable),
 * the only elevated/cyan touches are the CTA (primary action)
 * and the active dot. Imagery is CONTAINED over a blurred copy
 * of itself (§33.3) — the art zone can never crop.
 * Geometry: hero track aspect 4/3 (1080×810), wide 3/1
 * (1080×360) — fixed from first paint, so rotation and load
 * state contribute zero CLS (§33.6). */
body.rn5 .rn7-hero { margin-block: 14px 4px; }
body.rn5 .rn7-hero-track { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
body.rn5 .rn7-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 450ms var(--ease), visibility 0s linear 450ms; }
body.rn5 .rn7-hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease); z-index: 1; }
body.rn5 .rn7-bnr { position: relative; display: flex; width: 100%; height: 100%; background: var(--surface); overflow: hidden; }
body.rn5 .rn7-bnr--wide { aspect-ratio: 3 / 1; height: auto; border-radius: var(--radius); border: 1px solid var(--line); margin-block: 18px; }
body.rn5 .rn7-bnr-art { position: relative; flex: 0 0 42%; overflow: hidden; background: var(--bg); display: block; }
body.rn5 .rn7-bnr--wide .rn7-bnr-art { flex-basis: 34%; }
body.rn5 .rn7-bnr-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.65); transform: scale(1.35); }
body.rn5 .rn7-bnr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
body.rn5 .rn7-bnr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; }
body.rn5 .rn7-bnr-badge { align-self: flex-start; background: var(--save); color: #0b2e17; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
body.rn5 .rn7-bnr-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.rn5 .rn7-bnr-name a { color: var(--ink); text-decoration: none; }
body.rn5 .rn7-bnr-hook { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.rn5 .rn7-bnr-row { display: flex; align-items: center; gap: 10px; margin-block-start: 3px; }
body.rn5 .rn7-bnr-price { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
body.rn5 .rn7-bnr-price .rn5-price-old { font-size: 14px; color: var(--ink-2); }
body.rn5 .rn7-bnr-cta { flex: 0 0 auto; margin-inline-start: auto; min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; }
body.rn5 .rn7-bnr-brand { position: absolute; inset-block-end: 7px; inset-inline-end: 10px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); opacity: .75; pointer-events: none; }
body.rn5 .rn7-hero-dots { display: flex; justify-content: center; gap: 2px; margin-block-start: 6px; }
body.rn5 .rn7-hero-dot { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
body.rn5 .rn7-hero-dot::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 999px; background: transparent; border: 1.5px solid var(--ink-2); transition: all var(--dur-med) var(--ease); }
body.rn5 .rn7-hero-dot.is-active::after { width: 22px; background: var(--accent); border-color: var(--accent); }
body.rn5 .rn7-bnr--wide .rn7-bnr-body { gap: 2px; padding: 8px 12px; }
body.rn5 .rn7-bnr--wide .rn7-bnr-name { font-size: 14.5px; -webkit-line-clamp: 1; }
body.rn5 .rn7-bnr--wide .rn7-bnr-hook { font-size: 12px; -webkit-line-clamp: 1; }
body.rn5 .rn7-bnr--wide .rn7-bnr-price { font-size: 16.5px; }
body.rn5 .rn7-bnr--wide .rn7-bnr-cta { min-height: 38px; padding-inline: 13px; font-size: 13.5px; }
body.rn5 .rn7-bnr--wide .rn7-bnr-badge { font-size: 10.5px; padding: 1px 7px; }
body.rn5 .rn7-bnr--wide .rn7-bnr-brand { display: none; }
@media (min-width: 768px) {
	body.rn5 .rn7-hero { max-width: 900px; margin-inline: auto; }
	body.rn5 .rn7-bnr-name { font-size: 21px; }
	body.rn5 .rn7-bnr-hook { font-size: 14.5px; }
	body.rn5 .rn7-bnr--wide .rn7-bnr-name { font-size: 18px; }
	body.rn5 .rn7-bnr--wide .rn7-bnr-hook { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	body.rn5 .rn7-hero-slide { transition: none; }
	body.rn5 .rn7-hero-dot::after { transition: none; }
}

/* ============================================================
 * AZ LIVE SWEEP FIXES — owner directive 2026-11-03 18:23 +01.
 * Each rule cites the defect it closes; measurements live in the
 * run's evidence folder (before/after pairs).
 * ============================================================ */

/* §2.4 — Checkout «مراجعة الطلب والدفع» was clipped at BOTH ends on
 * 375px: below the desktop breakpoint the layout grid declared no
 * template columns, so the single column sized to its widest
 * content (413px) and overflowed the viewport in RTL. One
 * minmax(0,1fr) column, shrinkable columns, a 100% review table,
 * and the Elementor checkout container kept inside the viewport. */
@media (max-width: 1023.98px) {
	.rn5-checklayout { grid-template-columns: minmax(0, 1fr); }
	.rn5-checkcol { min-width: 0; }
	.e-checkout__container, .e-checkout__column { max-width: 100%; margin-inline: 0; }
}
#order_review, .woocommerce-checkout-review-order { max-width: 100%; }
#order_review .shop_table { width: 100%; }
/* §2.4b — the review block itself measured at HALF its column
 * (146px inside 292px): a legacy two-column float/width on
 * #order_review survives into the mobile layout. On the stacked
 * layout the review always takes the full column. */
@media (max-width: 1023.98px) {
	body.rn5 .woocommerce-checkout #order_review { width: 100%; float: none; }
	/* §2.4c — measured chain: the widget's end column sat at 195px
	 * inside the 237px column and its order-review card pads 30px
	 * per side, leaving the summary 133px with its table (178px)
	 * overflowing. Stack the widget's columns full-width and give
	 * the review card the design system's own padding. */
	.elementor-widget-woocommerce-checkout-page .e-checkout__container { grid-template-columns: minmax(0, 1fr) !important; }
	.elementor-widget-woocommerce-checkout-page .e-checkout__column,
	.elementor-widget-woocommerce-checkout-page .e-checkout__column-inner { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
	.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review { padding-inline: 14px; }
	/* §2.4d — final measured links: the end column still measured
	 * 195px (its sizing comes from the widget's own generated CSS,
	 * outside the prefixed selectors above), and the summary table's
	 * product-name cell is capped at 150px with a 40px end padding
	 * by the widget stylesheet — inside the narrowed card the name
	 * and totals clipped. Unprefixed, mobile-only, full-width chain
	 * + a natural name cell. */
	.e-checkout__container { grid-template-columns: minmax(0, 1fr) !important; }
	.e-checkout__column, .e-checkout__column-start, .e-checkout__column-end, .e-checkout__column-inner, .e-checkout__order_review { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
	.woocommerce-checkout-review-order-table .cart_item td.product-name { max-width: none !important; padding-inline-end: 8px !important; }
	.wd-table-wrapper { max-width: 100%; }
	/* §2.4e — the payment box's terms/privacy rows measured 269px
	 * starting at left −8 (the document's last 7px of horizontal
	 * overflow): cap the payment subtree at its column. */
	.rn7-checkout #payment, .rn7-checkout #payment .woocommerce-terms-and-conditions-wrapper, .rn7-checkout #payment .form-row { max-width: 100% !important; box-sizing: border-box; }
	/* §2.4h — the upstream squeeze, measured ancestor by ancestor:
	 * the checkout widget sits in an Elementor container capped at
	 * 85% (--content-width at ≤768px in the page's generated CSS),
	 * giving the form 279px of the 328px row; the theme's two
	 * nested check columns then pad 21px per side each (279 → 237
	 * → 195), starving the summary table (~230px of natural cell
	 * layout) until its cells painted outside the card. On mobile
	 * the checkout container takes the full row and the nested
	 * columns stop double-padding; the summary column gets the
	 * same single 14px gutter as every other card. */
	body.woocommerce-checkout .e-con-inner { max-width: 100% !important; }
	body.woocommerce-checkout .rn5-checkcol { padding-inline: 0 !important; }
	body.woocommerce-checkout .rn5-checklayout { gap: 14px; }
	/* §2.4f — cell-level proof: the summary table's own box fits
	 * (scrollW == clientW) yet the amounts clip at the card edge in
	 * the rendered shot — the widget's fixed table layout starves
	 * the amount column. Natural layout + unbreakable amounts. */
	.woocommerce-checkout-review-order-table { table-layout: auto !important; }
	.woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table .cart-subtotal td, .woocommerce-checkout-review-order-table .order-total td, .woocommerce-checkout-review-order-table tfoot td { white-space: nowrap; }
	/* §2.4g — element-screenshot proof: the review block's inner
	 * table paints shifted outside its card (text cut at the card
	 * edges) while every box measurement reads as fitting — a
	 * legacy offset in the wrapper/table chain. Hard-reset the
	 * block's geometry and cell padding at mobile. */
	#order_review, #order_review .wd-table-wrapper, #order_review table.shop_table { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; transform: none !important; left: auto !important; right: auto !important; }
	#order_review th, #order_review td { padding-inline: 6px !important; }
}

/* §2.6 — Gateway radios rendered as solid BLACK discs (the dark
 * colour-scheme's native paint on the white payment card). Restore
 * the standard choice appearance: a light disc with a clear ring,
 * and the brand accent dot when selected. */
.rn7-checkout #payment input.input-radio {
	-webkit-appearance: none; appearance: none;
	width: 20px; height: 20px; flex: none;
	border: 2px solid #9aa3ad; border-radius: 50%;
	background: #fff; cursor: pointer;
}
.rn7-checkout #payment input.input-radio:checked {
	border-color: var(--accent);
	background: radial-gradient(circle, var(--accent) 0 5px, #fff 6.5px);
}

/* §2.5 — Coupon toggle at checkout was a solid blue block with NO
 * visible field: the toggle link's label is painted in the accent
 * colour ON the accent fill (invisible). Text-on-accent per the
 * identity law makes the label read; the opened form's button and
 * field take the same law. */
.e-coupon-box .e-show-coupon-form { color: #004980 !important; }
.e-coupon-box .e-apply-coupon {
	background: var(--accent); color: #004980;
	border: 0; border-radius: 10px; min-height: 44px; font-weight: 700;
}
.e-coupon-box .coupon-container-grid .input-text { min-height: 44px; }

/* ============================================================
 * P6 §1 — CHECKOUT AS ONE DARK DS SURFACE (2026-11-03).
 * Measured before-state: the page body painted #F7F7F7, a white
 * .elementor-widget-container slab sat behind the form and
 * #payment rendered ENTIRELY white (methods, boxes, terms,
 * place-order) while the two .rn5-checkcol were already dark
 * — three grounds on one screen. This block re-grounds the
 * whole page on the ladder (base var(--bg) #222328, cards
 * var(--surface) #2C2D33, elevated var(--surface-2) #53565B).
 * Presentation ONLY: no markup, field order, gateway geometry,
 * totals logic (incl. the PPCP USD re-price fragment) or JS is
 * touched; gateway li spacing/box geometry is preserved as-is.
 * ============================================================ */

/* (a) Page ground + the Elementor slab: the canvas is the DS
 * base and the widget container stops painting its own white
 * ground behind the form. (The html>body.rn5 canvas rule above
 * already wins the body ground against the parent's inline
 * settings CSS; restated here at checkout scope so the page
 * ground is pinned even if that rule's context changes.) */
body.woocommerce-checkout { background: var(--bg) !important; }
body.woocommerce-checkout .elementor-widget-container { background: transparent !important; }

/* (b) #payment becomes the card it sits next to: same surface,
 * line and radius family as .rn5-checkcol, restated at checkout
 * scope so the Elementor/WoodMart checkout sheets cannot
 * re-light it. Inside it, every text role takes a legible-on-
 * dark colour: method labels + terms copy in the theme ink,
 * secondary copy in --ink-2, links in the accent. The
 * .payment_box ground follows the neighbouring DS cards: the
 * method li already sits on var(--bg) inside this card, so the
 * box takes the same recessed base shade (the earlier V6 frame
 * chose --bg for exactly this pairing; --surface-2 is reserved
 * for small touched elements, not large static panels). */
body.woocommerce-checkout #payment.woocommerce-checkout-payment {
	background: var(--surface) !important;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px;
	color: var(--ink) !important;
}
body.woocommerce-checkout #payment li.payment_method > label { color: var(--ink) !important; }
body.woocommerce-checkout #payment .payment_box {
	background: rgba(255, 255, 255, .06) !important;
	color: var(--ink) !important;
}
body.woocommerce-checkout #payment .payment_box p,
body.woocommerce-checkout #payment .payment_box label { color: var(--ink) !important; }
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { color: var(--ink) !important; }
body.woocommerce-checkout #payment a { color: var(--accent) !important; }

/* (c) Cheque bank block re-grounded INTO the ladder: the
 * fragment paints itself with INLINE styles (container
 * background:#1a2332, rows #0d1419, labels #4fc3f7 — off-ladder
 * navy), so only !important declarations can re-seat it.
 * Layout and the copy buttons are untouched: no box property
 * is set here, and button elements are excluded from the row
 * reset. The label hue stays in the accent family, DS-exact
 * var(--accent) #00c8ff for the fragment's #4fc3f7. */
body.woocommerce-checkout #bank_account_details {
	background: var(--surface-2) !important;
	color: var(--ink) !important;
}
body.woocommerce-checkout #bank_account_details :is(div, li, tr, td, p, span) {
	background: transparent !important;
	color: var(--ink) !important;
}
body.woocommerce-checkout #bank_account_details :is(label, strong, b, dt, th, .bank-label, .label) {
	color: var(--accent) !important;
}
/* The fragment's labels are plain first-child <div>s inside each
 * row (measured live: #bank_account_details > div > div holds
 * the label, its sibling <span> the value) — the element-name
 * rule above never matches them and the row reset paints them
 * ink. Pin the label node itself to the accent. */
body.woocommerce-checkout #bank_account_details > div > div:first-child {
	color: var(--accent) !important;
}

/* (d) The Elementor coupon box folds into the surface: nudge
 * copy in the theme ink, the field on the same translucent
 * ground as the payment boxes, the apply button on the accent
 * law (accent ground, --on-accent text — the §2.5 rule above
 * already paints the button; restated with the field so the
 * box reads as one piece). */
body.woocommerce-checkout .e-coupon-box { color: var(--ink); }
body.woocommerce-checkout .e-coupon-box .e-coupon-nudge,
body.woocommerce-checkout .e-coupon-box p { color: var(--ink); }
body.woocommerce-checkout .e-coupon-box #coupon_code,
body.woocommerce-checkout .e-coupon-box .coupon-container-grid .input-text {
	background: rgba(255, 255, 255, .06);
	color: var(--ink);
	border: 1px solid var(--line);
}
body.woocommerce-checkout .e-coupon-box .e-apply-coupon {
	background: var(--accent);
	color: var(--on-accent);
}

/* (e) Summary as a card in ALL states: the Elementor column
 * padding differs between guest and logged-in renders (the
 * review measured 277px guest / 309px logged-in at 375px), so
 * the summary column chain is forced to one uniform 16px
 * padding and the review takes the full column width — the
 * two states converge. Long-name safety: the WoodMart product
 * cell may shrink and wrap anywhere; the totals column never
 * wraps — zero clipping is the contract. The AZ §2.4h mobile
 * rule zeroing .rn5-checkcol padding-inline sits earlier at
 * the same specificity, so this later equal-specificity rule
 * wins the cascade at every width; its width/flex resets are
 * untouched. */
body.woocommerce-checkout .e-checkout__column-inner,
body.woocommerce-checkout .rn5-checkcol:has(#order_review) {
	padding: 16px;
}
body.woocommerce-checkout #order_review { width: 100%; }
body.woocommerce-checkout #order_review .wd-checkout-prod-title,
body.woocommerce-checkout #order_review .cart-product-label {
	min-width: 0;
	overflow-wrap: anywhere;
}
body.woocommerce-checkout #order_review .wd-checkout-prod-total { white-space: nowrap; }

/* (f) Place-order capsule clearance: the floating capsule
 * (343×62, 12px bottom offset) covered ~45px of #place_order
 * at the docked scroll position and the checkout layout had
 * padding-bottom:0. Same figure as the P6 §3 account fix:
 * 62 + 12 + 36 margin = 110px. */
body.woocommerce-checkout .rn5-checklayout { padding-bottom: 110px; }
body.woocommerce-checkout #place_order { scroll-margin-bottom: 110px; }

/* §2.6 — Account screen titles stay inside their frame on 375px. */
.rn5-screen-title { max-width: 100%; }

/* §3 sweep fixes (A→Z round, 2026-11-03): two live surfaces broke
 * the nothing-clipped rule at 375px. (1) The variable-product buy
 * zone: .single_variation_wrap is a grid whose single track sized
 * to its content's max-content (572px measured on product 330220,
 * docScrollW 691). (2) The populated cart's totals card sized to
 * its table's min-content (443px card, docScrollW 608) and pushed
 * off-canvas. Both chains are capped to the column at mobile and
 * their inner rows may wrap/shrink. */
@media (max-width: 1023.98px) {
	.single_variation_wrap { grid-template-columns: minmax(0, 1fr) !important; max-width: 100% !important; }
	.woocommerce-variation-add-to-cart { flex-wrap: wrap !important; max-width: 100% !important; }
	.woocommerce-variation-add-to-cart > * { min-width: 0; }
	.cart-collaterals .cart_totals, .cart_totals.rn5-totals { width: 100% !important; max-width: 100% !important; float: none !important; }
	.cart_totals .cart-totals-inner, .cart_totals table.shop_table { max-width: 100% !important; }
	.rn6-totals-lead { flex-wrap: wrap; max-width: 100%; }
	.rn6-totals-lead > * { min-width: 0; }
}

/* §3 sweep fix, cart leg 2: the collaterals block itself is the
 * oversized grid item (443px in a 328px layout track — grid items
 * do not shrink below content by default). */
@media (max-width: 1023.98px) {
	.cart-collaterals.rn5-cartside { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
	.rn5-cartlayout > * { min-width: 0 !important; }
}

/* §3 sweep fix, cart leg 3: the cart line is a 72px + content
 * grid whose second track resolved to the content's max-content
 * (327px) inside a 328px card, painting the line's main column
 * off-canvas (row measured at left −84). Track capped. */
@media (max-width: 1023.98px) {
	.rn5-cartline { grid-template-columns: 72px minmax(0, 1fr) !important; }
	.rn5-cartline-main, .rn5-cartline-foot, .rn5-cartline-meta { min-width: 0; max-width: 100%; }
}

/* §3 sweep fix, cart leg 4: the line foot is a flex row whose
 * quantity item carries a 327px min-content, pushing it off the
 * row's left edge inside the capped 212px column. */
@media (max-width: 1023.98px) {
	.rn5-cartline-foot { flex-wrap: wrap; row-gap: 8px; }
	.rn5-cartline-foot .product-quantity, .rn5-cartline-foot .quantity { max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; }
}

/* §3 sweep fix, cart leg 5 (root of the stepper overflow): the
 * quantity widget's screen-reader label renders as a real 187px
 * block inside the stepper's inline-flex on this surface, shoving
 * the stepper off the row. Restore the canonical visually-hidden
 * pattern for it inside the cart. */
@media (max-width: 1023.98px) {
	.rn7-cart .quantity .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
}

/* §3 sweep fix (child-A finding) — SUPERSEDED by P6 §9 (2026-11-03):
 * this rule gave the footer 104px of capsule clearance because its
 * last row then was the recovery link «لم تستلم طلبك؟ استعد منتجك
 * هنا». That link was DELETED by owner order (P6 §10) and the
 * footer's last row is now the copyright line inside .rn7-footer-in
 * (its own 18px bottom padding is the closing rhythm). The 104px
 * had become pure dead space (measured: copyright → footer bottom
 * 122px on home / 191px on product). Body padding-bottom still
 * guarantees end-of-page capsule clearance. */
@media (max-width: 1023.98px) {
	.rn5-footer, .rn7-footer { padding-bottom: 0 !important; }
}

/* ============================================================
 * P6 §7 — WHATSAPP FLOAT SAFE ZONE (2026-11-03, owner annex).
 * The float is printed by plugin rasid-whatsapp-button (inline
 * style, bottom:20px) and covered the capsule's «الرئيسية» slot
 * by 56×53px. Standing rule: no floating element may cover a
 * navigation slot or a field, ever. Measured constants: capsule
 * top edge = 74px from viewport bottom (62 + 12 offset); product
 * buy-bar top edge = 182.8px. Clearance target: float bottom
 * edge >= 12px above both. On checkout the raised float was
 * MEASURED overlapping #billing_first_name (28x43.6px) — no
 * offset honours the rule on a scrolling form, so it hides
 * there. While the ATC toast is visible (full-width, 168-240px
 * band) the float yields. !important: the plugin prints its
 * rule inline at wp_footer. */
@media (max-width: 767px) {
	div.rwb-root.whatsapp-float {
		bottom: calc(86px + env(safe-area-inset-bottom)) !important;
	}
	body.single-product div.rwb-root.whatsapp-float {
		bottom: calc(195px + env(safe-area-inset-bottom)) !important;
	}
	body.woocommerce-checkout div.rwb-root.whatsapp-float {
		display: none !important;
	}
	body.rn7-toast-on div.rwb-root.whatsapp-float {
		opacity: 0;
		pointer-events: none;
	}
}

/* ============================================================
 * P6 §1 REMATCH-2 (2026-11-03) — the inner Elementor surfaces.
 * After the ground rematch landed, measurement exposed the
 * widget's INNER white cards and near-black text roles the
 * first pass missed: the billing column (div.col-1) and the
 * review wrapper (.e-checkout__order_review) still painted
 * white inside the dark columns; the gateway labels (the li
 * class is wc_payment_method — the first pass's li.payment_
 * method selector matched nothing), the cheque-box H3 and the
 * summary product label all computed near-black (rgb(5,0,0) /
 * rgb(11,0,0) / rgb(0,0,0)) on the new dark grounds; #payment's
 * radius computed 3px (the widget's rule), not the card's 16px.
 * This block makes the inner wrappers transparent (the column
 * card is the single card), flips every text role inside the
 * form to the ink token, darkens the form fields, and aligns
 * the place-order button with the store's accent law (accent
 * ground, --on-accent text — the same law the coupon button
 * already follows). All !important: every one of these
 * properties is contested by the widget sheet.
 * ============================================================ */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout .e-checkout__order_review,
body.woocommerce-checkout .e-checkout__column,
body.woocommerce-checkout .e-checkout__column-inner,
body.woocommerce-checkout .e-coupon-box {
	background: transparent !important;
}
body.woocommerce-checkout #payment.woocommerce-checkout-payment {
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
}
body.woocommerce-checkout form.checkout :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ink) !important;
}
body.woocommerce-checkout #payment .wc_payment_methods label,
body.woocommerce-checkout #payment li.wc_payment_method > label {
	color: var(--ink) !important;
}
body.woocommerce-checkout #customer_details label {
	color: var(--ink) !important;
}
body.woocommerce-checkout form.checkout :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], select, textarea) {
	background: rgba(255, 255, 255, .06) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
}
body.woocommerce-checkout form.checkout .select2-container .select2-selection {
	background: rgba(255, 255, 255, .06) !important;
	border-color: var(--line) !important;
}
body.woocommerce-checkout form.checkout .select2-container .select2-selection__rendered {
	color: var(--ink) !important;
}
body.woocommerce-checkout #order_review {
	color: var(--ink) !important;
}
body.woocommerce-checkout #order_review .cart-product-label,
body.woocommerce-checkout #order_review .product-name {
	color: var(--ink) !important;
}
body.woocommerce-checkout #place_order {
	background: var(--accent) !important;
	color: var(--on-accent) !important;
}

/* ============================================================
 * P6 §1 REMATCH-3 (2026-11-03) — the completeness sweep's last
 * three contrast remnants inside the buy flow, all measured
 * dark-on-dark or ~1.5:1 after the ground landed: (1) the steps
 * breadcrumb's upcoming step «التأكيد» computed rgb(0,0,0) on
 * the dark ground (its muted tone was written for the old
 * light canvas); (2) the .rn5-checksummary bar carried grey
 * rgb(105,114,125) text on its own #53565B bar; (3) the review
 * table's quantity «× 1» computed rgb(0,0,0) and its totals
 * rows the same muted grey. The steps and the summary bar are
 * shared buy-flow components whose ground is dark on every
 * surface, so their rules are unscoped; the review-table rules
 * stay inside #order_review. */
.rn5-steps li.is-next { color: rgba(255, 255, 255, .62) !important; }
.rn5-checksummary,
.rn5-checksummary .rn5-checksummary-count,
.rn5-checksummary .rn5-checksummary-total,
.rn5-checksummary .woocommerce-Price-amount,
.rn5-checksummary .woocommerce-Price-currencySymbol { color: var(--ink) !important; }
body.woocommerce-checkout #order_review :is(td, th, strong, .woocommerce-Price-amount) { color: var(--ink) !important; }

/* ================================================================
 * DEVICE-GATE RESPONSE (2026-11-03) — owner device re-check fixes.
 * Appended last so these rules close the cascade for their scopes.
 * ================================================================ */

/* §2 — ONE frame per review card. The <li> is the card (frame,
 * ground, padding); the inner .comment_container carries NO frame
 * of its own (it previously painted a second border + ground +
 * padding inside the first). A text-less review collapses to its
 * real content: tighter padding, no empty description block. */
#rn5-reviews .comment_container,
body.rn5 #reviews .comment_container {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	padding: 0;
}
body.rn5 #reviews .commentlist .rn5-reviewitem.rn-dg-textless { padding: 10px 14px; }
.rn-dg-textless .description:empty { display: none; }

/* §3 — the out-of-stock notify card joins the design system:
 * one dark card, standard 48px field and action, measured
 * compact. The plugin's own sheet is a light design with
 * !important guards, so these rules carry the specificity
 * (body.single-product + box) to close over them. */
body.single-product .rcss-notify-box {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px;
	margin: 16px 0;
	box-shadow: none;
}
body.single-product .rcss-notify-box::before {
	background: var(--accent);
	height: 3px;
}
body.single-product .rcss-notify-title {
	color: var(--ink);
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 6px;
	gap: 8px;
	letter-spacing: 0;
}
body.single-product .rcss-notify-title .rcss-bell {
	background: var(--surface-2);
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 10px;
	box-shadow: none;
	font-size: 0;
	position: relative;
}
body.single-product .rcss-notify-title .rcss-bell::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c8ff'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body.single-product .rcss-notify-desc {
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0 0 12px;
}
body.single-product .rcss-notify-form {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 10px;
}
body.single-product .rcss-notify-box input.rcss-notify-email {
	flex: none;
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border-radius: 12px;
	font-size: 15px;
	background: var(--bg) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	-webkit-text-fill-color: var(--ink) !important;
}
body.single-product .rcss-notify-box input.rcss-notify-email::placeholder {
	color: var(--ink-2) !important;
	-webkit-text-fill-color: var(--ink-2) !important;
	opacity: 1 !important;
}
body.single-product .rcss-notify-box input.rcss-notify-email:focus {
	background: var(--bg) !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 200, 255, .18);
}
/* The plugin guards its black-gradient button with !important at
 * (0,3,1); this rule closes over it at (0,4,2) + !important, and
 * retires the emoji its ::before paints before the label. */
body.single-product .rcss-notify-box .rcss-notify-form button.rcss-notify-btn {
	width: 100%;
	height: 48px;
	border: 0 !important;
	border-radius: 12px;
	background: var(--accent) !important;
	background-image: none !important;
	color: var(--on-accent) !important;
	-webkit-text-fill-color: var(--on-accent) !important;
	font-size: 15px;
	font-weight: 800;
	box-shadow: none;
	transform: none;
}
body.single-product .rcss-notify-box .rcss-notify-form button.rcss-notify-btn::before {
	content: none;
}
body.single-product .rcss-notify-ok {
	color: var(--save);
	background: rgba(74, 222, 128, .12);
	border: 1px solid rgba(74, 222, 128, .35);
	font-size: 14px;
	margin: 0 0 10px;
}
body.single-product .rcss-notify-err {
	color: #ff8a8a;
	background: rgba(255, 107, 107, .12);
	border: 1px solid rgba(255, 107, 107, .35);
	font-size: 14px;
	margin: 0 0 10px;
}

/* §4 — «قد يناسبك أيضًا» becomes designed product cards: the raw
 * text-link list is restyled in place (the list markup is printed
 * by the recommendations engine; this layer owns only its look).
 * The « — » separator is a bare text node: the item runs at
 * font-size 0 and every real child restores its own size, so the
 * separator never paints. */
.rre-onsite-recs { margin-top: 8px; }
.rre-onsite-recs h4 {
	font-size: 17px;
	font-weight: 800;
	color: var(--ink);
	margin: 0 0 12px;
}
.rre-onsite-recs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.rre-onsite-recs li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 12px 14px;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
/* The theme's content-link law paints in-frame anchors accent at
 * (0,6,2); a recommendation card's title follows the store's own
 * product cards instead — ink title, accent price — so this one
 * leaf rule carries !important. */
.woocommerce-account .rre-onsite-recs li a {
	color: var(--ink) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.rre-onsite-recs li .woocommerce-Price-amount {
	color: var(--accent);
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
}
.rre-onsite-recs li small:empty { display: none; }

/* §6 — the WhatsApp float yields on collision (the guard script
 * toggles .rn-dg-yield when a protected element passes under the
 * float), and on an out-of-stock product — no buy bar exists —
 * it takes the standard base position instead of the raised
 * buy-bar position. Checkout hiding (above) is unchanged. */
div.rwb-root.whatsapp-float { transition: opacity .18s ease; }
div.rwb-root.whatsapp-float.rn-dg-yield {
	opacity: 0 !important;
	pointer-events: none !important;
}
@media (max-width: 767px) {
	body.single-product:has(.rcss-notify-box) div.rwb-root.whatsapp-float {
		bottom: calc(86px + env(safe-area-inset-bottom)) !important;
	}
}