/*
Theme Name: RC Garage
Theme URI: https://rcrideoncars.com/
Author: Kevinsmak LLC
Author URI: https://rcrideoncars.com/about-us/
Description: Backyard Garage design for RC Ride On Cars. Classic PHP theme, no page builder, no jQuery. Built from css-src/ by tools/build_theme.py; edit the sources, not this file.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: rcgarage
*/

/* ===== 01-base.css ===== */
/* 01-base.css · Foundation (key "fnd"). The Backyard Garage design system, ported from
   design/backyard-garage/styles.css (Kevin's 9/29 edits included: blue photo frames, green verdict + "My Pick",
   striped comparison rows, quick picks 3 per row, charcoal signup button + checkered stripe + larger cover,
   and the phone full-width photo rules). Mock-only rules dropped; seasons are server-side (html[data-season]).
   Section 2 (bottom) adds the WordPress layout: .entry column, templates, archive cards, pagination, 404, Woo. */
:root{
--bg:#FAFAF7;--surface:#FFF;--ink:#1B1F24;--ink-2:#4A525C;--line:#E3E6EA;--frame:#4A74F5;--gauge:#6B93FF;--pick:#16804E;--pick-dk:#0F5C38;
--brand:#D90429;--brand-ink:#FFF;--brand-dk:#A30320;--cta:#FFC928;--cta-ink:#1B1F24;
--accent:#5259E8;--ok:#146C43;--warn:#C2410C;
--dk:#1B1F24;--dk2:#242A31;--dk3:#39424C;--muted:#C9D1D9;--red2:#FF5A5F;--lamp:#4ADE80;
--band:#E8F4FB;--link:#3A41C6;--hazard:#F5A300;--qp:#1B1F24;--season:#1F6F43;
--fd:"Archivo","Arial Black",Arial,sans-serif;
--fb:"Atkinson Hyperlegible Next",system-ui,"Segoe UI",Roboto,sans-serif;
--g:16px;--focus:#3A41C6;--flag:#1B1F24}
/* Christmas: 3 token swaps (+ wreath, lights, bar, nav item). CTA never changes. */
html[data-season=christmas]{--ok:#1F6F43;--band:#EEF6F0;--qp:#1F6F43}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb);overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,.dsp{margin:0 0 .5em;font-family:var(--fd);font-stretch:125%;font-weight:800;line-height:1.2}
h1,h2,.up{text-transform:uppercase}
h1{font-size:26px;font-weight:900;line-height:1.12}
h2{margin-top:1.9em;font-size:21px}
h2::after{content:"";display:block;width:72px;height:8px;margin-top:10px;background:repeating-conic-gradient(var(--flag) 0 25%,#0000 0 50%) 0 0/8px 8px}
h3{margin-top:1.6em;font-size:18px}
[id]{scroll-margin-top:14px}
p,ul,ol,dl{margin:0 0 1em}
li{margin:.25em 0}
.dsp{font-size:17px}
.k,.xl small,.posts small,.cmp caption,.tab,.verdict b,.pick-list em,.figure-diagram a>span{font:800 12px/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.k{margin:0 0 6px;color:var(--ink-2)}
@media (min-width:48em){:root{--g:24px}body{font-size:18px}h1{font-size:40px}h2{font-size:28px}h3{font-size:21px}}

/* utilities */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--g)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctr{display:grid;place-items:center;place-content:center;text-align:center}
.ul0{list-style:none;margin:0;padding:0}
.ul0>li{margin:0}
.card{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
a.card:hover{border-color:var(--ink)}
.on-dark{--focus:#FFF;--link:#AEB4FF;--flag:#FFF;--ink-2:var(--muted);color:#FFF}
html:not([data-season=christmas]) .xmas,html[data-season=christmas] .no-xmas{display:none!important}
.skip{position:absolute;left:8px;top:-90px;z-index:99}
.skip:focus{top:8px}

/* buttons: Sunshine is only ever the Amazon button */
.btn-amz,.btn-brand,.btn-find{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border:0;border-radius:12px;font:800 16px/1.15 var(--fd);text-decoration:none;text-align:center;cursor:pointer}
.btn-amz{background:var(--cta);color:var(--cta-ink);box-shadow:inset 0 -4px 0 #0002}
.btn-amz:hover{background:#FFD54D}
.btn-amz::after,.go::after{content:"";flex:none;width:8px;height:8px;border:solid;border-width:3px 3px 0 0;transform:rotate(45deg)}
.btn-brand,.btn-find{background:var(--brand);color:#FFF}
.btn-brand:hover,.btn-find:hover{background:var(--brand-dk)}
.btn-block{display:flex;width:100%}
.btn-sm,.btn-find{min-height:44px;padding:8px 12px;font-size:14px}
.go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}

/* season bar + header (60px + 4px red rule on phones) */
.season-bar{background:var(--season);font-weight:700;font-size:13px;line-height:1.25}
.season-bar a{justify-content:center;min-height:36px;padding:6px var(--g);color:#FFF;text-decoration:none}
.site-header{position:relative;z-index:30;background:var(--dk);color:#FFF;border-bottom:4px solid var(--brand)}
.hdr{display:flex;align-items:center;gap:8px;height:60px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:#FFF;text-decoration:none}
.emblem{position:relative;flex:none;width:48px;height:48px}
.emblem img,.ft .dsp img{width:40px;height:40px;padding:4px;border-radius:50%;background:#FFF;box-shadow:0 0 0 2px var(--dk),0 0 0 4px var(--brand)}
.emblem__wreath{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html[data-season=christmas] .emblem img{box-shadow:none}
.wordmark{display:grid;font:900 15px/1 var(--fd);text-transform:uppercase}
.wordmark b{display:none}
.wordmark i{font-style:normal;color:var(--red2)}
.btn-find .i{width:18px;height:18px;stroke-width:2.6}
.qnav{display:none}
.nav>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;border:2px solid var(--dk3);border-radius:10px;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.nav[open]>summary{border-color:#FFF;background:#FFF;color:var(--ink)}
.nav:not([open]) .ic-x,.nav[open] .ic-menu{display:none}
.nav__panel{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:calc(100vh - 64px);overflow:auto;padding:16px var(--g) 24px;border-top:1px solid var(--dk3);background:var(--dk);box-shadow:0 16px 28px #0006}
.nav__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:1200px;margin:auto}
.nav__panel a{display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--dk3);color:#FFF;text-decoration:none;font-weight:700}
.nav__end{grid-column:1/-1;gap:0 18px}
.nav__end a{border:0}
html[data-season=christmas] .site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:15px;border-top:2px solid #111;pointer-events:none;background:radial-gradient(3px 4px at 10px 7px,#FF5A5F 98%,#0000) 0 0/44px 15px,radial-gradient(3px 4px at 32px 7px,#6BD394 98%,#0000) 0 0/44px 15px}
@media (min-width:40em){.wordmark{display:flex;gap:.3em;align-items:center;font-size:20px}.wordmark b{display:inline-block;padding:3px 4px 2px;border:2px solid;border-radius:4px;font-size:.62em}}
/* small phones (iPhone SE/mini, 320-388px): brand, "Find a ride" and the menu stay on one row, each label on one line */
.wordmark>*,.btn-find{white-space:nowrap}
.site-header,.season-bar,.cmp-jump{--focus:#FFF}   /* WCAG 1.4.11: the blue ring is 2.2:1 on the asphalt */
@media (max-width:24.3em){.hdr{gap:6px}.brand{gap:8px}.wordmark{font-size:14px}.btn-find{gap:6px;padding:8px 10px}.btn-find .i{display:none}}
@media (max-width:21.5em){.brand{gap:6px}.wordmark{font-size:13px}.btn-find{padding:8px 9px;font-size:13px}}
@media (min-width:62em){.qnav{display:flex}.qnav a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;color:#FFF;text-decoration:none;font-weight:700}
.nav>summary{padding:0 12px}.nav__grid{grid-template-columns:repeat(4,1fr)}}

/* article: 720px reading column, 1120px wide band */
.flow{display:grid;grid-template-columns:minmax(var(--g),1fr) minmax(0,200px) min(720px,100% - 2*var(--g)) minmax(0,200px) minmax(var(--g),1fr)}
.flow>*{grid-column:3;min-width:0}
.flow>.wide{grid-column:2/5}
.crumbs ol{display:flex;flex-wrap:wrap;margin-top:6px;font-size:14px}
.crumbs li+li::before{content:"/";margin:0 6px;color:#8A939D}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.post-head{padding-top:18px}
h1 small{display:block;margin-top:.4em;font-size:.6em;font-weight:800;text-transform:none;color:var(--ink-2)}
.byline{gap:0 6px;margin:0 0 14px;font-size:15px;color:var(--ink-2)}
.byline>:not(:last-child)::after{content:"·";margin-left:6px}   /* dot ends a line, never starts one */
.byline a{color:var(--ink);font-weight:700}
.ph{padding:8px;border:2px solid var(--frame);border-radius:10px;background:#F1F3F5;color:var(--ink-2);font:700 13px/1.3 var(--fb)}
.sq{aspect-ratio:1}
.feat{aspect-ratio:12/5;margin:0 0 14px;background:var(--band)}
.disclosure{margin:0 0 14px;padding:10px 12px;border-left:5px solid var(--ink)}
.toc,.faq details{border:2px solid var(--ink);border-radius:12px;background:var(--surface)}
.toc>summary,.faq summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;list-style:none;cursor:pointer}
.toc>summary{font:800 15px var(--fd);text-transform:uppercase}
.toc>summary::after,.faq summary::after{content:"+";margin-left:auto;font:900 22px/1 var(--fd)}
.toc[open]>summary::after,.faq [open] summary::after{content:"–"}
.toc ol{margin:0;padding:0 14px 10px 32px}
.toc ol ol{padding:0 0 0 18px;list-style:disc}
.toc li{margin:0}
.toc a{display:block;padding:11px 0;line-height:1.3}

/* race-number plates, badges, fit chips */
.plate{display:inline-flex;vertical-align:middle;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px var(--ink);font:900 16px/1 var(--fd);text-transform:uppercase;white-space:nowrap}
.plate b{min-width:2.5em;padding:7px 7px 6px;background:#FFF;color:var(--ink);text-align:center}
.plate span{display:flex;align-items:center;padding:0 10px;background:var(--ink);color:#FFF;font-size:11.5px;letter-spacing:.06em}
.plate.pick{box-shadow:0 0 0 2px var(--pick)}
/* long ribbon labels (e.g. "Overhead Garage Storage Racks") wrap inside the plate on narrow phones instead of clipping */
.plate{max-width:100%}
.plate span{white-space:normal;line-height:1.15;padding-block:4px;overflow-wrap:anywhere}
.plate.pick b{background:var(--pick);color:#FFF}
.plate.pick span{background:var(--pick-dk)}
.on-dark .plate{box-shadow:0 0 0 2px #FFF}
.tags{gap:6px;margin:0 0 10px}
.badge,.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;font:700 13px/1.15 var(--fb);white-space:nowrap}
.badge{border:1.5px solid;border-radius:99px;background:var(--surface)}
.badge .i{width:15px;height:15px}
.scarce{background:var(--warn)!important;border-color:var(--warn);color:#FFF}
.tested{background:var(--ok)!important;border-color:var(--ok);color:#FFF}
.fav{color:var(--ok)}
.checked{color:var(--link)}
.on-dark .badge{background:none}
.on-dark .fav{color:var(--lamp)}
.stock,.src,.small{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.chip{border-radius:6px;background:#EBEEF1;color:var(--ink)}
.chip.grass{background:#DDF0E4}
.chip.pave{background:#FCE8DD}

/* pick list + In a hurry */
.pick-list{display:grid;gap:6px;margin-bottom:18px}
.pick-list a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-height:48px;padding:6px 10px 6px 8px;font-weight:700;line-height:1.3}
.pick-list em{font-size:11px;font-style:normal;color:var(--link);white-space:nowrap}   /* --frame is 4.1:1 on white: too light for 11px text */
.pick-list .plate,.quick-picks .plate{font-size:14px}
.hurry,.note,.more,.short{margin:0 0 12px;padding:12px 16px 14px;border-radius:14px;background:var(--band)}
.hurry p:last-child,.note p:last-child,.short p:last-child{margin:0}
@media (min-width:48em){.pick-list{grid-template-columns:1fr 1fr}}

/* compare: phone = stacked dashboards, desktop = real table */
.cmp-jump{position:sticky;top:0;z-index:6;display:flex;margin:0 0 10px;border-radius:12px;overflow:hidden;background:var(--dk);box-shadow:0 6px 12px -6px #0008}
.cmp-jump a{flex:1 1 0;display:grid;place-items:center;min-height:44px;color:#FFF;text-decoration:none;font:900 14px/1 var(--fd)}
.cmp-jump a+a{border-left:1px solid var(--dk3)}
.cmp-jump .pk{background:var(--pick)}
.dash{margin:0 0 12px;padding:12px;border-radius:16px;background:var(--dk);scroll-margin-top:58px}
.did{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;margin:2px 0 12px}
.did .ph,.pitem .ph{padding:4px;border-color:var(--frame);background:#FFF;color:#4A525C;font-size:10px}
.did a{display:block;padding:2px 0;font:800 17px/1.25 var(--fd);color:#FFF}
.dash dl,.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 0}
.dash dl>div,.facts>div{padding:8px 8px 9px;border:1px solid var(--dk3);border-radius:10px;background:var(--dk2)}
.dash dt,.facts dt{display:flex;flex-direction:column;gap:6px;font:700 11px/1.2 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dash dd,.facts dd{margin:3px 0 0;font:700 15px/1.25 var(--fb);color:#FFF}
.dash .no dd{color:var(--muted)}
.dash .go{color:var(--muted);font-size:15px}
/* CSS-only instruments: .g --v 0-100, .bar --a/--b %, .dots/.seats --n */
.g,.lamp,.bar,.dots,.seats{display:block;flex:none}
.g{width:46px;height:23px;border-radius:23px 23px 0 0;background:conic-gradient(from -90deg at 50% 100%,var(--gauge) calc(var(--v)*1.8deg),#46505B 0 180deg,#0000 0);-webkit-mask:radial-gradient(circle at 50% 100%,#0000 15px,#000 15.5px)}
.lamp{width:24px;height:24px;border:2px solid #6B7580;border-radius:50%;background:radial-gradient(#46505B 4px,#0000 4.5px)}
.lamp.on{border-color:var(--lamp);background:radial-gradient(var(--lamp) 5px,#4ADE8033 5.5px);box-shadow:0 0 8px #4ADE8066}
.bar{position:relative;width:100%;height:8px;margin:8px 0 7px;border-radius:4px;background:#46505B}
.bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--b);border-radius:4px;background:linear-gradient(90deg,var(--gauge) var(--a),#6B93FF80 0)}
.bar.band::after{left:var(--a);width:calc(var(--b) - var(--a));background:var(--gauge)}
.dots{width:calc(var(--n)*13px);height:10px;margin:7px 0;background:radial-gradient(circle,var(--gauge) 4.5px,#0000 5px) 0 0/13px 10px}
.seats{width:calc(var(--n)*17px);height:16px;margin:4px 0;background:linear-gradient(90deg,var(--c,#FFF) 12px,#0000 0) 0 0/17px 16px}
.cells{--c:#8C92FF}
.cmp-wrap{display:none}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;background:#FFF;font-size:15px;line-height:1.35}
.cmp caption{padding:10px 14px;background:var(--dk);color:var(--muted);text-align:left}
.cmp th,.cmp td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center}
.cmp thead th,.cmp thead td{padding:4px 6px 14px;border:0;background:var(--dk)}
.cmp .plate{white-space:normal;text-align:left}
/* header plates: one line where the column allows (1366: "LICENSED CAN-AM" fits); a label that must wrap breaks
   evenly ("LICENSED / CAN-AM"), never "LICENSED CAN- / AM" */
.cmp .plate span{line-height:1.1;text-wrap:balance}
.cmp thead .plate span{font-size:11px;letter-spacing:.03em}
.cmp tbody th{width:132px;background:#F4F5F7;color:var(--ink-2);text-align:left;font:700 12px/1.3 var(--fb);letter-spacing:.05em;text-transform:uppercase}
.cmp .ph{width:110px;margin:auto;font-size:11px}
.cmp td>a:first-child:not(.btn-amz){display:block;padding:4px 0;font-weight:700;color:var(--ink)}
.cmp tbody tr:nth-child(even):not(.buy) td{background:#F1F3F6}
.cmp tbody tr:nth-child(even):not(.buy) th{background:#E6E9EE}
.cmp .tags{justify-content:center;margin:6px 0 0}
.y,.n{position:relative;display:inline-block;width:24px;height:24px;overflow:hidden;text-indent:40px;white-space:nowrap;vertical-align:middle}
.y::before{content:"";position:absolute;left:8px;top:2px;width:7px;height:14px;border:solid var(--ok);border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}
.n::before,.n::after{content:"";position:absolute;left:3px;top:10px;width:18px;height:3px;border-radius:2px;background:#8A939D;transform:rotate(45deg)}
.n::after{transform:rotate(-45deg)}
.cmp .buy td{padding:12px 8px;border:0}
.cmp .btn-amz{width:100%;padding:8px 10px;font-size:14px}
@media (min-width:62em){.dash-set,.cmp-jump{display:none}.cmp-wrap{display:block;overflow-x:auto;margin:0 0 18px;border:2px solid var(--ink);border-radius:14px}}

/* quick picks, crosslinks, "Looking for more" */
.quick-picks{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--g)) 18px;padding:4px var(--g) 10px;scroll-padding-inline:var(--g)}
.quick-picks>li{scroll-snap-align:start}
.quick-picks>li>div{display:flex;flex-direction:column;height:100%;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--surface)}
.quick-picks .dsp{margin:0;padding:10px 12px;background:var(--qp);color:#FFF;font-size:14px;line-height:1.25}
.qb{display:grid;align-content:start;gap:8px;padding:10px 12px 12px}
.qb p,.qb .tags{margin:0}
.qb a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:700;line-height:1.25}
.qb a .plate{flex:none}
@media (min-width:48em){.quick-picks{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0 0 18px;padding:0}}
.xlinks{display:grid;gap:10px;margin:12px 0 24px}
.xl{display:grid;grid-template-columns:48px 1fr;gap:12px;height:100%;padding:12px 14px;border-top:4px solid var(--c,var(--brand))}
a.card:hover b{text-decoration:underline}
.xl>i{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--c,var(--brand));color:#FFF;font:900 11px/1.05 var(--fd);text-align:center}
.xl small,.posts small{display:block;font-size:11px;color:var(--ink-2)}
.xl b{display:block;margin:3px 0;font:800 16px/1.25 var(--fd)}
.xl span span:not(.badge){display:block;font-size:15px;line-height:1.45;color:var(--ink-2)}
.c-fix{--c:var(--accent)}.c-find{--c:var(--ok)}.c-dk{--c:var(--dk)}
@media (min-width:48em){.xlinks{grid-template-columns:repeat(3,1fr)}.xlinks>:only-child{grid-column:1/-1}}

/* content blocks */
.factors{display:grid;gap:10px;margin:8px 0 12px}
.factor,.vs>div{padding:12px 14px;border-top:4px solid var(--ink)}
.factor h3{margin:0 0 4px}
.factor p,.vs p{margin:0;font-size:16px}
@media (min-width:48em){.factors{grid-template-columns:repeat(3,1fr)}}
.faq{display:grid;gap:8px;margin:14px 0 18px}
.faq summary{min-height:52px;padding:10px 14px}
.faq summary::before{content:"Q";flex:none;width:28px;height:28px;border-radius:6px;background:var(--ink);color:#FFF;font-size:14px}
.faq summary>*{margin:0;font-size:18px;line-height:1.25;text-transform:none}
.faq h2::after{display:none}
.faq details>div{padding:0 14px 12px 52px}
.faq details>div>p:last-child{margin:0}

/* product box: phone = one column, desktop = photo left */
.product{margin:22px 0;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--surface)}
.product>header{gap:8px;padding:10px 12px;background:var(--dk)}
.product>header .tags{margin:0}
.pin{display:flex;flex-direction:column;padding:14px}
.pmain{display:contents}
.pmain>*{order:3}
.pmain>h3,.pmain>.tags{order:1}
.pmedia{order:2;aspect-ratio:4/3;width:100%;max-width:240px;margin:0 auto 12px}
.pbody{order:4}
.product h3{margin:0 0 10px;scroll-margin-top:70px}
.facts{margin:0 0 6px;padding:6px;border-radius:12px;background:var(--dk)}
.src{gap:5px;margin-bottom:12px}
.src .i{width:15px;height:15px;color:var(--link)}
.verdict{padding:10px 12px;border-left:5px solid var(--ok);border-radius:0 10px 10px 0;background:#EEF8F1}
.verdict b,.tab{display:inline-block;margin-right:6px;padding:4px 7px 3px;border-radius:4px;background:var(--ink);color:#FFF}
.verdict b{background:var(--ok)}
.kf{padding-left:20px;font-size:16px}
.kf li::marker{color:var(--frame);font-size:1.2em}
.proscons{display:grid;gap:10px;margin:0 0 14px}
.proscons>div{padding:10px 14px;border-radius:12px;background:#EEF7F1}
.proscons>div+div{background:#FDF1F1}
.proscons p{margin:0 0 4px;font:800 14px var(--fd);text-transform:uppercase;color:var(--ok)}
.proscons>div+div p,.proscons div+div li::before{color:var(--brand-dk)}
.proscons ul{font-size:16px}
.proscons li{padding-left:22px;text-indent:-22px}
.proscons li::before{content:"+";display:inline-block;width:22px;text-indent:0;font:900 18px/1 var(--fd);color:var(--ok)}
.proscons div+div li::before{content:"–"}
@media (min-width:48em){.proscons{grid-template-columns:1fr 1fr}.pin{display:grid;grid-template-columns:280px 1fr;align-items:start;gap:0 24px}.pmain{display:block;grid-column:2;grid-row:1}.pmedia{grid-column:1;grid-row:1;aspect-ratio:1;max-width:none;margin:0}.pbody{grid-column:1/-1;margin-top:14px}}
@media (min-width:62em){.pmain .facts{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* guide pieces */
.short{border-left:6px solid var(--ink);border-radius:0 14px 14px 0}
.short .tab{margin-bottom:8px}
.short p:last-child{font-size:18px;line-height:1.55}
.safety{margin:6px 0 16px;padding:12px 16px 14px;border:10px solid;border-image:repeating-linear-gradient(-45deg,var(--hazard) 0 10px,var(--ink) 0 20px) 10;background:var(--surface)}
.safety .dsp{margin:0;font-size:20px;color:var(--brand)}
.safety .dsp .i{width:26px;height:26px;color:var(--ink)}
.safety ul{margin:0 0 8px;padding-left:20px}
.safety p:last-child{margin:0;font-weight:700}
.steps li::before,.faq summary::before,.pitem+.pitem::before{display:grid;place-items:center;font:900 17px/1 var(--fd)}
.stages a{display:block;color:var(--ink);text-decoration:none}
.stages b+span{display:block}
.stages b{display:block;font:800 16px/1.2 var(--fd);text-transform:uppercase}
.stages li:last-child::before{background:repeating-conic-gradient(#FFF 0 25%,var(--ink) 0 50%) 0 0/14px 14px;color:#0000}
@media (min-width:48em){.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.steps.stages li{padding:52px 0 0}}
.steps{padding:0;list-style:none;counter-reset:n}
.steps li{position:relative;min-height:44px;margin:0 0 6px;padding:6px 0 6px 54px;counter-increment:n}
.steps li::before{content:counter(n);position:absolute;left:0;top:2px;width:40px;height:40px;border:3px solid;border-radius:8px;background:#FFF}
.vs{display:grid;gap:10px;margin:14px 0}
.vs>div{border-top-color:var(--brand)}
.vs>div+div{border-top-color:var(--accent)}
@media (min-width:40em){.vs{grid-template-columns:1fr 1fr}}
/* diagram: blueprint mat > white plate (12px+ padding) > JPG, max 755px */
.figure-diagram{margin:20px 0}
.figure-diagram>div{padding:16px 10px 10px;border-radius:12px;background:linear-gradient(#5259E82B 1px,#0000 0) 0 0/14px 14px,linear-gradient(90deg,#5259E82B 1px,#0000 0) 0 0/14px 14px,#EEF0FD}
.figure-diagram a{position:relative;display:block;max-width:779px;margin:auto;padding:22px 12px 12px;border-radius:6px;background:#FFF;box-shadow:0 8px 18px -10px #1B1F2480}
.figure-diagram a>span{position:absolute;top:-12px;left:14px;padding:8px 12px 7px;background:#ECE0BEF5;color:var(--ink);transform:rotate(-2deg)}
.figure-diagram img{width:100%;max-width:755px;margin:auto}
.figure-diagram figcaption{max-width:720px;margin:10px auto 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.legend{gap:4px 14px;margin:8px 0 0;font-size:14px}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:50%;background:#E81622}
.legend li+li i{background:#000}.legend li:nth-child(3) i{width:22px;height:5px;background:#06EB0F}.legend li:nth-child(4) i{border-radius:3px;background:#5259E8}
.figure-diagram.sm a{max-width:520px}
/* parts: a parts-bin drawer label */
.parts{position:relative;margin:18px 0;padding:10px 10px 24px;border-radius:12px;background:#E4E8EC;box-shadow:inset 0 -8px 0 #CDD3D9}
.parts::after{content:"";position:absolute;left:50%;bottom:8px;width:64px;height:8px;margin-left:-32px;border-radius:0 0 8px 8px;background:#8A939D}
.parts .k{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.pitem{position:relative;display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 10px 10px;border:2px solid #9AA3AD;border-radius:6px;background:#FFF}
.pitem .ph{align-self:start}
.pitem+.pitem{margin-top:20px}
.pitem+.pitem::before{content:"+";position:absolute;top:-19px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--ink);color:#FFF}
.pitem p{margin:0 0 8px}
.pitem p:first-child{margin:0 0 2px;font-weight:700;line-height:1.3}
.pitem small{display:block;margin:0 0 6px;font-size:12px;color:var(--ink-2)}
.tbl{width:100%;margin:10px 0 22px;border-collapse:collapse;background:#FFF;font-size:16px;line-height:1.4}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:var(--dk);color:#FFF;font:800 13px/1.3 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.tbl tbody th{background:#F4F5F7}
@media (max-width:47.99em){.tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
.tbl{background:none}
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tbl tr{margin:0 0 10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#FFF}
.tbl tbody th{border:0;background:var(--dk);color:#FFF;font:800 15px/1.3 var(--fd)}
.tbl td{padding:6px 12px;border:0}
.tbl td:last-child{padding-bottom:12px}
.tbl td::before{content:attr(data-label);display:block;font:700 12px/1.3 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}}

/* signup, author box, risk note */
.signup{position:relative;display:grid;grid-template-columns:101px 1fr;gap:12px 14px;margin:24px 0;padding:22px 16px 16px;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--surface)}
.signup::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 18px,#FFF 0 36px)}
.signup .btn-brand{background:var(--ink);color:#FFF}
.cover{aspect-ratio:3/4;padding:6px;border-left:8px solid var(--brand);border-radius:6px;background:var(--dk);color:var(--muted);font:700 12px/1.2 var(--fb)}
.signup .dsp,.author-box .dsp{font-size:18px;line-height:1.25;text-transform:none}
.signup form{grid-column:1/-1;display:grid;gap:8px}
.signup label{font-weight:700;font-size:15px}
.field{width:100%;min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:#FFF;color:var(--ink)}
@media (min-width:40em){.signup{grid-template-columns:132px 1fr}.signup form{grid-column:2;grid-template-columns:1fr auto;align-items:end}.signup label,.signup .small{grid-column:1/-1}}
.author-box{display:grid;grid-template-columns:72px 1fr;gap:14px;margin:26px 0 12px;padding:16px}
.author-box>.ph{width:72px;height:72px;padding:6px;border-radius:50%;font-size:10px}
.author-box .dsp{margin:0}
.author-box p{font-size:16px}
.author-box .small{margin:2px 0 8px}
.pills{gap:6px;margin-top:6px}
.pills .i{width:18px;height:18px}
.author-box>:nth-child(n+3){grid-column:1/-1}
.risk{margin:0 0 20px;padding:10px 12px;border-radius:10px;background:#F1F3F5;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* home */
.hero{padding-top:16px;background:var(--dk)}
.hero::after,.site-footer::before{content:"";display:block;height:10px;margin-top:28px;background:repeating-linear-gradient(90deg,var(--brand) 0 28px,#FFF 0 56px)}
.hero>div{display:grid;gap:16px}
.hero figure{order:-1;margin:0}
.hero figure img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:45% 40%;border-radius:14px}
.hero figcaption{margin-top:6px;font-size:14px;color:var(--muted)}
.hero h1{margin:0 0 10px;font-size:28px}
.hero h1 em{font-style:normal;color:var(--red2)}
.hero p{max-width:44ch;margin:0 0 16px;color:var(--muted)}
.finder{display:grid;gap:12px;padding:14px;border:1px solid var(--dk3);border-radius:16px;background:var(--dk2)}
.finder .dsp{margin:0;font-size:15px}
.finder>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.finder label,.finder legend{display:block;margin-bottom:4px;padding:0;font-weight:700;font-size:15px}
.finder .field{border-color:#FFF}
.seg{display:flex;gap:6px;min-width:0;margin:0;padding:0;border:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{flex:1 1 0;display:grid;place-items:center;min-height:48px;margin:0;padding:4px 6px;border:2px solid #6B7580;border-radius:10px;line-height:1.2;text-align:center;cursor:pointer}
.seg input:checked+label{border-color:#FFF;background:#FFF;color:var(--ink)}
.seg input:focus-visible+label{outline:3px solid #FFF;outline-offset:2px}
.hero .finder p{margin:0;font-size:15px}
.sec{padding:34px 0 8px}
.sec h2:first-child,.lede{margin:-4px 0 16px;color:var(--ink-2)}
.shopby{display:grid;gap:14px}
.chipl,.pills a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:10px;background:#FFF;color:var(--ink);font:800 15px/1 var(--fd);text-decoration:none}
@media (min-width:48em){.shopby>div{display:grid;grid-template-columns:90px 1fr;align-items:center}.shopby .k{margin:0}}
.guides,.posts,.tagwall{display:grid;gap:10px;margin:0}
.xl.lg{grid-template-columns:72px 1fr;align-items:center}
.xl.lg>i{width:72px;height:72px;font-size:14px}
.xl .badge{margin-top:6px}
.peg{margin-top:26px;padding:30px 0 22px;background:radial-gradient(circle,#C9CFD6 2.2px,#0000 2.8px) 0 0/22px 22px,#E9ECEF}
.peg h2{margin-top:0}
.grid2{display:grid;gap:20px}
.peg h3{margin:0 0 10px;font-size:17px;text-transform:uppercase}
.peg h3 .i{width:24px;height:24px;color:var(--brand)}
.peg .xl{position:relative;grid-template-columns:1fr;padding-left:40px;border-top-width:1px;box-shadow:0 2px 0 #1B1F2414}
.peg .xl::before{content:"";position:absolute;left:14px;top:18px;width:13px;height:13px;border-radius:50%;background:#E9ECEF;box-shadow:inset 0 0 0 2px #8A939D}
.peg .xl>i{display:none}
.trust{margin-top:30px;padding:8px 0;background:var(--dk)}
.trust .author-box,.trust .ph{border-color:#6B7580;background:none}
.trust .pills a{border-color:#FFF;background:none;color:#FFF}
.posts a{display:block;height:100%;padding:12px 14px;border-left:5px solid var(--ink);font-weight:700;line-height:1.35}
@media (min-width:40em){.guides,.posts{grid-template-columns:1fr 1fr}}
@media (min-width:62em){.hero{padding-top:36px}.hero>div{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}.hero figure{order:2}.hero h1{font-size:44px}
.guides,.posts{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr 1fr;gap:32px}}

/* footer */
.site-footer{margin-top:36px;padding:0 0 26px;background:var(--dk);color:var(--muted);font-size:15px}
.site-footer::before{margin:0 0 26px}
.ft{display:grid;gap:22px}
.ft p{margin:0 0 10px}
.ft .dsp{gap:10px;color:#FFF}
.ft .dsp img{width:36px;height:36px;padding:3px;box-shadow:none}
.ft .k{color:#FFF}
.ft ul{gap:0 16px}
.ft ul a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#FFF}
.ft .social a{width:44px;border:1px solid #6B7580;border-radius:50%}
.ft-disc{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:var(--dk2);color:#FFF}
.ft-low{justify-content:space-between;gap:8px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--dk3)}
.ft-low p{margin:0}
@media (min-width:62em){.ft{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}

/* Kevin 9/29: phone photo gets its own full-width line (name above, Amazon button right below) */
@media (max-width:47.99em){.did{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.did .ph{width:100%;aspect-ratio:4/3;height:auto;padding:10px}.did a{font-size:19px}.pmedia{max-width:none;width:100%;aspect-ratio:4/3}}

/* ================= 2. WordPress layer (Foundation) ================= */
/* a11y helpers used by WP core + plugins */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip-path:none}
/* season bar: long copy from 40em, short on phones (keeps the bar one 36px line) */
.season-bar .sb-long{display:none}
@media (min-width:40em){.season-bar .sb-long{display:inline}.season-bar .sb-short{display:none}}
.season-bar a span{text-decoration:underline;text-underline-offset:.16em}
/* nav panel links: current page */
.nav__panel a[aria-current],.qnav a[aria-current]{color:var(--lamp)}
/* footer extras */
.ft address{font-style:normal;line-height:1.5}
.ft address a{color:#FFF}
.ft .ft-sub{margin-top:14px}

/* the article: main.flow keeps the mockup grid for head/hook items; .entry holds the_content().
   .entry pads its sides so children sit in a 720px column (margins stay free for content CSS);
   .wide/.alignwide reach 1120px, .alignfull goes edge to edge. */
.flow{container-type:inline-size}
.flow>.entry{grid-column:1/-1;display:flow-root;padding-inline:max(var(--g),(100% - 720px)/2)}
.flow>.entry>.wide,.flow>.entry>.alignwide{margin-inline:calc(-1*clamp(0px,(100cqi - 720px)/2 - var(--g),200px))}
.flow>.entry>.alignfull{margin-inline:calc(-1*max(var(--g),(100cqi - 720px)/2))}
.entry>:first-child{margin-top:0}
.entry::after{content:"";display:table;clear:both}
.alignleft{float:left;margin:4px 20px 12px 0}
.alignright{float:right;margin:4px 0 12px 20px}
.aligncenter{margin-inline:auto;text-align:center}
img.aligncenter{display:block}
@media (max-width:39.99em){.alignleft,.alignright{float:none;margin:0 auto 14px}}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:15px;line-height:1.5;color:var(--ink-2)}
figure{margin:0 0 1em}
iframe,video,embed,object{max-width:100%}
table{max-width:100%}
.crumbs ol{margin-bottom:0}
.crumbs .here{display:none}
@media (min-width:48em){.crumbs .here{display:list-item;max-width:36ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;align-self:center;color:var(--ink-2)}}
.byline time{white-space:nowrap}
.page-head{padding-top:22px}
.page-head h1{margin-bottom:.6em}
/* author box (theme version, only when the post has no reusable author block) */
.author-box .avatar{width:72px;height:72px;border-radius:50%;border:2px solid var(--frame);background:#FFF}
.author-box>*{min-width:0}
.xl-h{margin:1.4em 0 .4em}
/* "Popular Power Wheels on Amazon" (rcg_popular_box): 3 AAWP picks on posts with no Amazon link of their own.
   Every card, phone and desktop: plate, name, photo (links to Amazon), yellow button under it. No description. */
.rcg-popular{margin:6px 0 10px}
.rcg-popular__grid{display:grid;gap:14px;margin:12px 0 0}
.rcg-popular__grid>.aawp{display:contents}
.rcg-popular .product{margin:0}
.rcg-popular .pin{display:flex;flex-direction:column;align-items:stretch;padding:12px}
.rcg-popular .pmain{display:contents}
.rcg-popular .pmedia{order:2;width:100%;max-width:none;aspect-ratio:4/3;margin:0 0 12px}
.rcg-popular .rcg-name{order:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0 0 10px;font-size:16px}
.rcg-popular .rcg-buy{order:3;margin:auto 0 0}
.rcg-popular .pmain>:not(.rcg-name):not(.rcg-buy),.rcg-popular .pbody{display:none}
@media (min-width:48em){.rcg-popular__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rcg-popular .pmedia{aspect-ratio:1}.rcg-popular .rcg-name{font-size:16px}
.rcg-popular .btn-amz{gap:8px;padding:10px 12px;font-size:14px}}   /* "Check at Amazon" on one line in a 230px card */

/* archives + search: card grid */
.arch{padding-bottom:10px}
.arch-head{padding:22px 0 8px}
.arch-head h1{margin-bottom:.35em}
.arch-desc{max-width:720px;margin:0 0 18px;color:var(--ink-2)}
.arch-desc p:last-child{margin-bottom:0}
.cards{display:grid;gap:14px;margin:0 0 8px;padding:0;list-style:none}
.cards>li{margin:0}
.pcard{display:flex;flex-direction:column;height:100%;overflow:hidden}
.pcard__img{display:block;aspect-ratio:16/9;background:var(--band);overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover}
/* no featured image (most reviews): a slim sky band with a small emblem, not a blank 16:9 tile */
.pcard__img--ph{display:flex;align-items:center;aspect-ratio:auto;height:56px;padding:0 14px}
.pcard__img .pcard__ph{width:36px;height:36px;padding:3px;border-radius:50%;background:#FFF;box-shadow:0 0 0 2px var(--dk),0 0 0 4px var(--brand);object-fit:contain}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.pcard h2{margin:2px 0 8px;font-size:18px;line-height:1.25;text-transform:none}
.pcard h2::after{display:none}
.pcard h2 a{color:var(--ink);text-decoration:none}
.pcard h2 a:hover{text-decoration:underline}
.pcard p{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pcard .go{margin-top:auto;font-size:15px}
@media (min-width:40em){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:62em){.cards{grid-template-columns:repeat(3,1fr)}}
.pagination{margin:22px 0 8px}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:#FFF;color:var(--ink);font:800 15px/1 var(--fd);text-decoration:none}
a.page-numbers:hover{background:var(--ink);color:#FFF}
.page-numbers.current{background:var(--ink);color:#FFF}
.page-numbers.dots{border:0;background:none;min-width:24px;padding:0}
/* phones: "‹ Newer" / "Older ›" shrink to the arrows (the words stay for screen readers), so the row fits one line */
.page-numbers:is(.prev,.next){display:inline-flex;align-items:center;justify-content:center;gap:.35em}
@media (max-width:39.99em){.page-numbers .pg-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pagination .nav-links{gap:6px}.page-numbers{padding:0 10px}}
/* search form (searchform.php) */
.search-form{display:flex;gap:8px;max-width:560px;margin:0 0 18px}
.search-form .field{flex:1;min-width:0}
.search-form .btn-brand{flex:none}
.on-dark .search-form .field{border-color:#FFF}
.none{margin:10px 0 18px;padding:14px 16px;border-radius:14px;background:var(--band)}
.none p:last-child{margin:0}
/* 404 */
.e404{padding:10px var(--g) 10px}
.e404 .plate{margin:22px 0 12px;font-size:22px}
.e404 .plate b{min-width:3em}
.e404 h1{max-width:18ch}
.e404 .lede{max-width:60ch;margin:0 0 16px;color:var(--ink-2)}
.e404 .btn-brand{margin:0 0 20px}
.e404 .xlinks{margin-top:4px}
@media (min-width:48em){.e404 .xlinks{grid-template-columns:repeat(4,1fr)}}
/* full-width page template */
.page-full{padding-bottom:10px}
/* WooCommerce wrapper (woocommerce.php): brand-red buttons, never Sunshine */
.woo{padding-block:18px 10px}
.nav:not([open])>.nav__panel{display:none}
.woo .woocommerce-breadcrumb{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
/* Woo loads its CSS after ours, so these carry body.* for specificity (Woo's olive sale/price colours read as yellow) */
body:is(.woocommerce,.woocommerce-page) :is(a,button,input).button,body:is(.woocommerce,.woocommerce-page) :is(a,button).button.alt,.wc-block-components-button:not(.is-link){border-radius:12px;background:var(--brand);color:#FFF;font:800 15px/1.2 var(--fd)}
body:is(.woocommerce,.woocommerce-page) :is(a,button,input).button:hover,body:is(.woocommerce,.woocommerce-page) :is(a,button).button.alt:hover{background:var(--brand-dk);color:#FFF}
body:is(.woocommerce,.woocommerce-page) span.onsale{min-height:0;padding:4px 10px;border-radius:99px;background:var(--dk);color:#FFF;font:800 12px/1.3 var(--fd);text-transform:uppercase}
body.woocommerce-page ul.products li.product .price,body.woocommerce-page div.product p.price,body.woocommerce-page div.product span.price{color:var(--ink)}
body.woocommerce-page ul.products li.product a:not(.button){color:var(--ink);text-decoration:none}
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title{font:800 16px/1.25 var(--fd);text-transform:none}
.woo h2::after,.woocommerce-page h2.woocommerce-loop-product__title::after{display:none}
body.woocommerce-page ul.products li.product span.onsale{margin:0;top:8px;right:8px;left:auto}

/* post hero (featured image on info posts; uncropped) */
.post-hero{margin:4px 0 18px}
.post-hero__img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 6px 16px #0002;background:var(--surface)}

/* smart sticky header (Kevin 9/29: the menu reachable at any time): stuck to the top, slides away while scrolling
   down, comes back on any scroll up or when focused/open. The #1-#8 jump bar sits under it while it shows. */
.site-header{position:sticky;top:0;transition:transform .25s ease}
html.hdr-hide .site-header{transform:translateY(calc(-100% - 8px))}
html.hdr-hide .site-header:focus-within{transform:none}
html{scroll-padding-top:72px}
.cmp-jump{transition:top .25s ease}
html.hdr-pin:not(.hdr-hide) .cmp-jump{top:64px}
/* back to top: appears after ~2 screens, bottom-right, small so it never hides a whole Amazon button */
.to-top{position:fixed;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #FFF;border-radius:50%;background:var(--dk);color:#FFF;box-shadow:0 4px 12px #0005;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
html.show-top .to-top{opacity:1;visibility:visible;transform:none}
.to-top svg{width:22px;height:22px}
.to-top:focus-visible{outline:3px solid #FFF;outline-offset:2px;box-shadow:0 0 0 6px var(--focus)}
@media (prefers-reduced-motion:reduce){.site-header,.cmp-jump,.to-top{transition:none}}
@media print{.to-top{display:none}}

/* Toybox age colours (Kevin 9/29: "I really liked the colored boxes for ages"): one soft sticker colour per age range,
   wherever ages show: home Shop-by age tiles, the age heads of Quick picks, and "Ages ..." chips in posts. Ink text. */
:root{--age-a:#7ED6B5;--age-b:#9CCBFF;--age-c:#E7DDF3;--age-d:#FFC6DA}
.age-a{--agec:var(--age-a)}.age-b{--agec:var(--age-b)}.age-c{--agec:var(--age-c)}.age-d{--agec:var(--age-d)}
.chip:is(.age-a,.age-b,.age-c,.age-d){background:var(--agec);color:var(--ink)}
.quick-picks .dsp:is(.age-a,.age-b,.age-c,.age-d){background:var(--agec);color:var(--ink);border-bottom:2px solid var(--ink)}
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px}
.ages a{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:4px;border:2px solid var(--ink);border-radius:14px;background:var(--agec,#FFF);color:var(--ink);text-align:center;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.ages a:hover{transform:translateY(-2px)}
.ages b{font:900 clamp(1.3rem,1rem + 1.6vw,2rem)/1 var(--fd)}
.ages span{margin-top:5px;font:700 13px/1.15 var(--fb)}
@media (prefers-reduced-motion:reduce){.ages a{transition:none}}

/* ===== 02-content.css ===== */
/* 02-content.css · Content (key "cnt"). The existing post content (core blocks, old popcorn presets, Schema Pro FAQ,
   cg-* boxes, calculators, diagrams, YouTube) in the Backyard Garage look. Pairs with inc/40-content.php.
   Everything is scoped to .entry (the_content). WordPress prints its block CSS and global preset classes AFTER this
   file (with !important on presets), so rules here carry .entry for specificity and presets are remapped through
   their CSS variables. Sunshine yellow stays reserved for Amazon buttons: no yellow backgrounds in content. */

/* 1. presets: core palette + font sizes resolve to Garage values inside the article */
.entry{--wp--preset--font-size--small:15px;--wp--preset--font-size--medium:1em;--wp--preset--font-size--normal:1em;--wp--preset--font-size--large:1.2em;--wp--preset--font-size--x-large:1.3em;--wp--preset--font-size--huge:1.3em;
--wp--preset--color--black:var(--ink);--wp--preset--color--white:#FFF;--wp--preset--color--vivid-red:var(--brand-dk);--wp--preset--color--luminous-vivid-amber:#FBF0DC;--wp--preset--color--luminous-vivid-orange:#FCE8DD;
--wp--preset--color--pale-cyan-blue:var(--band);--wp--preset--color--vivid-cyan-blue:var(--link);--wp--preset--color--cyan-bluish-gray:#F1F3F5;--wp--preset--color--pale-pink:#FDF1F1;--wp--preset--color--light-green-cyan:#EEF8F1;--wp--preset--color--vivid-green-cyan:var(--ok);--wp--preset--color--vivid-purple:var(--accent);--warm:#FBF0DC}
/* 4,649 paragraphs carry the popcorn "medium" preset: it is body size here, never bigger */
.entry :is(.has-medium-font-size,.has-normal-font-size,.has-regular-font-size){font-size:1em}
.entry .has-small-font-size{font-size:15px;line-height:1.5}
.entry :is(.has-large-font-size,.has-x-large-font-size){font-size:1.2em;line-height:1.4}
.entry [class*="has-popcorn-font-"]{font-size:1em}
.entry .has-popcorn-font-s-font-size{font-size:15px}
/* old popcorn palette classes (popcorn2's theme.json no longer loads) */
.entry :is(.has-popcorn-primary-color-color,.has-pop-primary-color,.has-vivid-red-color){color:var(--brand-dk)}
.entry .has-popcorn-secondary-color-color{color:var(--link)}
.entry :is(.has-popcorn-tertiary-color-color,.has-popcorn-senary-color-color,.has-popcorn-quaternary-color-color,.has-popcorn-quinary-color-color,.has-popcorn-info-text-color,.has-popcorn-warning-text-color,.has-popcorn-success-text-color,.has-popcorn-error-text-color,.has-black-color){color:var(--ink)}
.entry :is(.has-popcorn-info-background-background-color,.has-popcorn-secondary-color-background-color,.has-pale-cyan-blue-background-color,.is-popcorn-paragraph-alert-info){background-color:var(--band)}
.entry :is(.has-popcorn-warning-background-background-color,.has-luminous-vivid-amber-background-color){background-color:var(--warm)}
.entry .has-popcorn-success-background-background-color{background-color:#EEF8F1}
.entry .has-popcorn-error-background-background-color{background-color:#FDF1F1}
.entry :is(.has-popcorn-quaternary-color-background-color,.has-popcorn-element-background-background-color){background-color:#F1F3F5}
.entry .has-popcorn-quinary-color-background-color{background-color:var(--surface)}
.entry :is(.has-popcorn-primary-color-background-color,.has-pop-primary-background-color,.has-popcorn-tertiary-color-background-color,.has-popcorn-senary-color-background-color){background-color:var(--dk);color:#FFF}
.entry .popcorn-box-shadow{border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 0 #1B1F2414}
.entry p.has-background,.entry div.has-background{padding:12px 16px 14px;border-radius:14px}
/* inline colours pasted into content: the yellow highlight goes warm, red text goes dark red, grey callouts go sky */
.entry [style*="fbeeb8" i]{background-color:var(--warm)!important}
.entry p[style*="e1e6e9" i]{background-color:var(--band)!important;font-size:inherit!important}
.entry [style*="color:#ff0000" i]:not(hr):not([style*="background-color:#ff0000" i]){color:var(--brand-dk)!important}
.entry :is(h1,h2,h3,h4,h5,h6) [style*="color"]{color:inherit!important}
.entry mark{background:var(--band);color:inherit}

/* 2. type: headings, lists, links */
.entry :is(h2,h3,h4) a{color:inherit}
.entry :is(h2,h3) strong{font-weight:inherit}
.entry h2.has-text-align-center::after{margin-inline:auto}
.entry h4{margin:1.5em 0 .4em;font:800 17px/1.3 var(--fd);font-stretch:125%}
.entry :is(h5,h6){margin:1.3em 0 .3em;font:700 15px/1.35 var(--fb);letter-spacing:.05em;text-transform:uppercase}
.entry :is(ul,ol):where(:not([class]),.wp-block-list){padding-left:1.4em}
.entry ul:where(:not([class]),.wp-block-list)>li::marker{color:var(--frame);font-size:1.15em}
.entry ol:where(:not([class]),.wp-block-list)>li::marker{color:var(--link);font-weight:700}
.entry li>:is(ul,ol){margin:.3em 0 .4em}
.entry pre{overflow-x:auto;max-width:100%;padding:12px;border-radius:10px;background:#F1F3F5;font-size:15px}
@media (min-width:48em){.entry h4{font-size:18px}}

/* 3. callouts: grey/cyan notes, warm notes, green verdicts, risk note, the old info/warning groups */
.entry .note,.entry .rcg-warm{margin:1.2em 0;padding:12px 16px 14px;border-radius:14px;background:var(--band)}
.entry .rcg-warm{background:var(--warm)}
.entry :is(.note,.rcg-warm)>:last-child,.entry :is(.note,.rcg-warm)>.wp-block-group__inner-container>:last-child{margin-bottom:0}
.entry p.verdict{margin:1em 0 1.3em}
.entry .verdict>strong:first-child{display:inline-block;margin-right:6px;padding:4px 7px 3px;border-radius:4px;background:var(--ok);color:#FFF;font:800 12px/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.entry p.risk{margin:1.4em 0 20px}
.entry p.risk strong{color:var(--ink)}
.entry .wp-block-group{margin:1.2em 0}
.entry :is(.wp-block-group,.wp-block-group__inner-container)>:last-child{margin-bottom:0}
.entry .wp-block-group.short{padding:12px 16px 14px}
.entry .short>p:first-child:has(>strong:only-child),.entry .short>.wp-block-group__inner-container>p:first-child:has(>strong:only-child){display:table;margin:0 0 8px;padding:4px 7px 3px;border-radius:4px;background:var(--ink);color:#FFF;font:800 12px/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.entry .short p:last-child{font-size:inherit}
.entry .wp-block-group.safety{margin:1.2em 0}
.entry .wp-block-group.safety p{font-weight:400}

/* 4. separators, spacers, quotes */
.entry hr,.entry hr.wp-block-separator{width:auto;height:0;margin:2em 0;border:0;border-top:2px solid var(--line);background:none;color:inherit;opacity:1}
.entry hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:72px;margin-inline:auto;border-top:3px solid var(--ink)}
.entry .wp-block-spacer{max-height:40px}
@media (min-width:48em){.entry .wp-block-spacer{max-height:64px}}
.entry blockquote{margin:1.5em 0;padding:14px 18px 14px 20px;border-left:5px solid var(--frame);border-radius:0 12px 12px 0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.entry blockquote p{font-style:normal}
.entry blockquote>:last-child{margin-bottom:0}
.entry blockquote cite{display:block;margin-top:6px;font-size:14px;font-style:normal;color:var(--ink-2)}
/* an old pasted highlight inside a quote: the quote card is the box, so no cream box inside it */
.entry blockquote :is(.rcg-warm,.note,[style*="fbeeb8" i],.has-background){margin:0 0 1em;padding:0;border-radius:0;background:none!important}
.entry blockquote>:is(.rcg-warm,.note,[style*="fbeeb8" i],.has-background):last-child{margin-bottom:0}

/* 5. images, captions, Amazon product thumbnails (solid blue frame) */
.entry .wp-block-image,.entry .wp-block-uagb-image{margin:1.5em 0}
.entry .wp-block-image img,.entry .wp-block-uagb-image img{max-width:100%;height:auto;border-radius:10px}
.entry .wp-block-image img[style*="height"],.entry img[style*="height"][class*="wp-image"]{height:auto!important}
.entry .wp-block-image.aligncenter,.entry .wp-block-image .aligncenter{margin-inline:auto}
.entry .wp-block-image :is(figcaption,.wp-element-caption){margin-top:8px;text-align:center;font-size:15px;line-height:1.45;color:var(--ink-2)}
.entry .wp-block-image.alignleft,.entry .wp-block-image.alignright{max-width:50%}
@media (max-width:39.99em){.entry .wp-block-image:is(.alignleft,.alignright){max-width:100%}}
.entry :is(.wp-block-table,.wp-block-image,p) a:is([href*="amazon.com"],[href*="amzn.to"])>img{padding:4px;border:2px solid var(--frame);border-radius:10px;background:#FFF}
/* Kevin's wiring diagrams: inc wraps them in the mockup's .figure-diagram (styled in 01-base) */
.entry .figure-diagram img{border-radius:0}

/* 6. tables: framed, dark header, alternating rows; 3+ columns stack on phones (inc adds data-label); pros/cons pairs */
.entry .wp-block-table{margin:1.5em 0;overflow-x:auto;border:2px solid var(--ink);border-radius:12px;background:#FFF}
.entry .wp-block-table.is-style-stripes{border-bottom:2px solid var(--ink)}   /* core's stripes CSS loads later and swaps it for 1px #f0f0f0 */
.entry .wp-block-table table{width:100%;margin:0;border-collapse:collapse;font-size:16px;line-height:1.45}
.entry .wp-block-table :is(th,td){padding:10px 12px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.entry .wp-block-table thead{border:0}
.entry .wp-block-table thead th{background:var(--dk);color:#FFF;font:800 13px/1.3 var(--fd);font-stretch:125%;letter-spacing:.04em;text-transform:uppercase}
.entry .wp-block-table tbody td{background:#FFF}
.entry .wp-block-table tbody tr:nth-child(even) td{background:#F1F3F6}
.entry .wp-block-table tbody td:first-child:not(:only-child){font-weight:700}
.entry .wp-block-table tbody tr:last-child td{border-bottom:0}
.entry .wp-block-table :is(figcaption,.wp-element-caption){margin:0;padding:8px 12px;font-size:14px;color:var(--ink-2);text-align:left}
.entry .wp-block-table.has-fixed-layout table,.entry .wp-block-table table.has-fixed-layout{table-layout:fixed}
.entry .wp-block-table td img{display:inline-block}
.entry .wp-block-table :is(td,th){word-break:normal;overflow-wrap:break-word;hyphens:auto}
@media (max-width:47.99em){.entry .wp-block-table table.has-fixed-layout,.entry .wp-block-table.has-fixed-layout table{table-layout:auto}
.entry .wp-block-table :is(th,td){padding:8px 10px}
.entry .wp-block-table thead th{font-size:12px;letter-spacing:.02em;hyphens:manual}}
@media (max-width:47.99em){
.entry .wp-block-table.rcg-stack{overflow:visible;border:0;border-radius:0;background:none}
.entry .rcg-stack :is(table,tbody,tr,td,th){display:block;width:auto}
.entry .rcg-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.entry .rcg-stack tbody tr{margin:0 0 10px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#FFF}
.entry .wp-block-table.rcg-stack tbody tr td{padding:6px 12px;border:0;background:#FFF}
.entry .wp-block-table.rcg-stack tbody tr td:first-child{padding:10px 12px;background:var(--dk);color:#FFF;font:800 15px/1.3 var(--fd);font-stretch:125%}
.entry .rcg-stack td:first-child a{color:#AEB4FF}
.entry .wp-block-table.rcg-stack tbody tr td:last-child{padding-bottom:12px}
.entry .rcg-stack td[data-label]::before{content:attr(data-label);display:block;font:700 12px/1.3 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.entry .rcg-stack td:first-child{--focus:#FFF}
.entry .rcg-stack .rcg-stack-buy{display:flex;margin:8px 0 4px;color:var(--cta-ink);text-decoration:none}}
/* the phone-only Amazon button that inc adds under an Amazon text link in a stacked cell (the table keeps the link) */
.entry .rcg-stack-buy{display:none}
.entry .rcg-pc{display:grid;gap:10px;margin:1.2em 0 1.5em}
@media (min-width:48em){.entry .rcg-pc{grid-template-columns:1fr 1fr;align-items:start}}
.entry .wp-block-table:is(.rcg-tbl-pros,.rcg-tbl-cons){margin:1em 0;overflow:visible;border:0;border-radius:12px;background:#EEF7F1}
.entry .wp-block-table.rcg-tbl-cons{background:#FDF1F1}
.entry .rcg-pc>.wp-block-table{margin:0}
.entry .wp-block-table:is(.rcg-tbl-pros,.rcg-tbl-cons) table tr :is(th,td){position:relative;padding:3px 14px 3px 38px;border:0;background:none;font-weight:400}
.entry .wp-block-table:is(.rcg-tbl-pros,.rcg-tbl-cons) table thead tr th{padding:12px 14px 4px;color:var(--ok);font:800 14px/1.2 var(--fd);font-stretch:125%;text-transform:uppercase}
.entry .wp-block-table.rcg-tbl-cons table thead tr th{color:var(--brand-dk)}
.entry .wp-block-table:is(.rcg-tbl-pros,.rcg-tbl-cons) table tbody tr:last-child td{padding-bottom:12px}
.entry :is(.rcg-tbl-pros,.rcg-tbl-cons) tbody td::before{content:"+";position:absolute;left:14px;top:3px;font:900 18px/1.35 var(--fd);color:var(--ok)}
.entry .rcg-tbl-cons tbody td::before{content:"–";color:var(--brand-dk)}

/* 7. YouTube: the original iframe (loading="lazy") in a 16:9 box (inc adds .rcg-yt; the click-to-play facade is gone) */
.entry .rcg-yt{margin:1.5em 0}
.entry figure.rcg-yt .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000}
.entry figure.rcg-yt .wp-block-embed__wrapper::before{content:none;display:none}
.entry figure.rcg-yt .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.entry .rcg-yt :is(figcaption,.wp-element-caption){margin-top:8px;font-size:15px;color:var(--ink-2)}
.entry .wp-block-embed.wp-has-aspect-ratio iframe{width:100%;height:auto;aspect-ratio:16/9}

/* 8. core buttons (Amazon links get the yellow CTA), columns, social links */
.entry .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0}
.entry .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border:0;border-radius:12px;background:var(--ink);color:#FFF;font:800 16px/1.15 var(--fd);font-stretch:125%;text-decoration:none}
.entry .wp-block-button__link:hover{background:var(--dk3);color:#FFF}
.entry :is(.wp-block-button.is-amz .wp-block-button__link,.wp-block-button__link[href*="amazon.com"],.wp-block-button__link[href*="amzn.to"]){background:var(--cta);color:var(--cta-ink);box-shadow:inset 0 -4px 0 #0002}
.entry :is(.wp-block-button.is-amz .wp-block-button__link,.wp-block-button__link[href*="amazon.com"],.wp-block-button__link[href*="amzn.to"]):hover{background:#FFD54D;color:var(--cta-ink)}
.entry :is(.wp-block-button.is-amz .wp-block-button__link,.wp-block-button__link[href*="amazon.com"],.wp-block-button__link[href*="amzn.to"])::after{content:"";flex:none;width:8px;height:8px;border:solid;border-width:3px 3px 0 0;transform:rotate(45deg)}
.entry .wp-block-columns{display:flex;flex-wrap:wrap;gap:16px 24px;margin:1.2em 0}
.entry .wp-block-column{flex:1 1 260px;min-width:0}
.entry ul.wp-block-social-links{display:flex;flex-wrap:wrap;gap:8px;margin:.6em 0 1.4em;padding:0;list-style:none;font-size:22px}
.entry ul.wp-block-social-links.aligncenter{justify-content:center}
.entry ul.wp-block-social-links li.wp-social-link{margin:0;border-radius:50%;background:var(--ink);color:#FFF;transform:none}
.entry ul.wp-block-social-links li.wp-social-link a{display:grid;place-items:center;width:44px;height:44px;padding:0;color:#FFF}
.entry ul.wp-block-social-links li.wp-social-link:hover{background:var(--dk3)}
.entry ul.wp-block-social-links svg{width:22px;height:22px;fill:currentColor}

/* 9. old Schema Pro FAQ blocks (plugin removed; the saved HTML + JSON-LD still print): the mockup's .faq, always open */
.entry .rcg-faq,.entry .rcg-faq .wpsp-faq__wrap{display:grid;gap:8px}
.entry .rcg-faq{margin:14px 0 18px}
.entry .wpsp-faq-child__outer-wrap{margin:0;border:2px solid var(--ink);border-radius:12px;background:var(--surface)}
.entry .wpsp-faq-icon-wrap{display:none}
.entry .wpsp-faq-questions{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 6px}
.entry .wpsp-faq-questions::before{content:"Q";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--ink);color:#FFF;font:900 14px/1 var(--fd)}
.entry .wpsp-question{padding-top:2px;font:800 17px/1.3 var(--fd);font-stretch:125%}
.entry .wpsp-faq-content{display:block;padding:0 14px 12px 52px}
.entry .wpsp-faq-content :is(p,ul,ol):last-child{margin-bottom:0}
@media (min-width:48em){.entry .wpsp-question{font-size:18px}}

/* 10. calculators (battery life, weight limit) */
.entry .calculator{margin:1.5em 0;padding:16px;border:2px solid var(--ink);border-radius:18px;background:var(--surface)}
.entry h2+.calculator{margin-top:.8em}
.entry .calculator>label:first-child{margin-top:0}
.entry .calculator label{display:block;margin:12px 0 4px;font-weight:700;font-size:15px}
.entry .calculator input{display:block;width:100%;max-width:340px;min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:#FFF;color:var(--ink);font-size:17px}
.entry .calculator button{display:inline-flex;align-items:center;min-height:48px;margin-top:16px;padding:10px 22px;border:0;border-radius:12px;background:var(--ink);color:#FFF;font:800 16px/1.15 var(--fd);font-stretch:125%;cursor:pointer}
.entry .calculator button:hover{background:var(--dk3)}
.entry .calculator .result:not(:empty){margin-top:14px;padding:10px 12px;border-left:5px solid var(--ok);border-radius:0 10px 10px 0;background:#EEF8F1;font-weight:700}
@media (min-width:48em){.entry .calculator{padding:20px 24px}}

/* 11. old cg-* boxes rebuilt by inc: pros/cons (.proscons) and "top pick" boxes (.product + real Amazon photo) */
.entry .proscons{margin:1em 0 1.4em}
.entry .proscons.only-cons>div{background:#FDF1F1}
.entry .proscons.only-cons p{color:var(--brand-dk)}
.entry .rcg-pick .pmedia{padding:6px;background:#FFF}
.entry .rcg-pick .pmedia a{display:block;width:100%;height:100%}
.entry .rcg-pick .pmedia img{width:100%;height:100%;object-fit:contain}
.entry .rcg-pick__buy{margin:0 0 12px}
.entry .rcg-pick .pbody>:last-child{margin-bottom:0}
/* phones: photo, then the yellow button right under it, then the text (Kevin 9/29); desktop: lead text + button by the photo */
@media (max-width:47.99em){.entry .rcg-pick__lead{order:4}}
@media (min-width:48em){.entry .rcg-pick__lead{margin:0 0 14px}}

/* 12. UAGB post grids (plugin inactive) rebuilt as archive cards */
.entry .rcg-postgrid{margin:1em 0 1.6em;padding:0;list-style:none}
.entry .rcg-postgrid:not(.wide){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pcard .pcard__t{margin:2px 0 8px;font:800 18px/1.25 var(--fd);font-stretch:125%}
.pcard .pcard__t a{color:var(--ink);text-decoration:none}
.pcard .pcard__t a:hover{text-decoration:underline}

/* ===== 03-plugins.css ===== */
/* 03-plugins.css · Plugin output (key "plg"): AAWP, Affiliatable, Easy TOC, the /search/ finder, WooCommerce,
   Complianz, a3 Lazy Load. Markup comes from inc/50-plugins.php and rcgarage/aawp/. Their own plugin CSS is not
   printed (50-plugins.php), so these rules do not have to out-shout it. Sunshine stays on Amazon links only. */

/* ---------- shared: photo frames (solid blue), empty plates ---------- */
.plate:empty{display:none}
.plate>span:only-child{padding:6px 10px 5px}
/* the frame keeps its aspect-ratio box; the photo is contained inside it whatever its shape */
:is(.rcg-aff,.rcg-aawp) .pmedia,.rcg-cmp .ph,.parts.rcg-aawp .ph,.cg-cb-img,.rcride-img-container{position:relative;display:block;overflow:hidden;background:#FFF}
:is(.rcg-aff,.rcg-aawp) .pmedia img,.rcg-cmp .ph img,.parts.rcg-aawp .ph img,.cg-cb-img img,.rcride-img-container img{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:inherit;object-fit:contain}
.btn-brand.rcg-ink{background:var(--ink);color:#FFF}
.btn-brand.rcg-ink:hover{background:var(--dk3)}

/* ---------- product box (AAWP box on buying guides, every Affiliatable box) ---------- */
.pmain>.rcg-name{order:1}
.rcg-name{margin:0 0 10px;font:800 18px/1.25 var(--fd)}
.rcg-name a{color:var(--ink);text-decoration:none}
.rcg-name a:hover{text-decoration:underline}
.rcg-buy{margin:0 0 12px}
.rcg-buy .btn-amz,.rcg-buy2 .btn-amz,.rcg-aff .rcg-buy .btn-brand,.rcg-aff .rcg-buy2 .btn-brand{display:flex;width:100%}
.rcg-buy2{margin:16px 0 0}
.rcg-aff .pmain>.verdict{margin:0 0 12px}
:is(.rcg-aff,.rcg-aawp) .pbody>:first-child{margin-top:0}
:is(.rcg-aff,.rcg-aawp) .pbody :is(h2,h3,h4){margin:1.1em 0 6px;font:800 13px/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rcg-aff .pbody h2::after{display:none}
.rcg-aff .pbody ul:not(.ul0),.rcg-desc ul{padding-left:20px;font-size:16px}
.rcg-aff .pbody ul:not(.ul0) li::marker,.rcg-desc li::marker{color:var(--frame);font-size:1.2em}
.rcg-aff .pbody .proscons{margin:16px 0 0}
.rcg-hl{padding:0 .15em;border-radius:3px;background:var(--band);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.verdict .rcg-hl{padding:0;background:none}
.proscons.only-cons>div{background:#FDF1F1}
.proscons.only-cons p{color:var(--brand-dk)}
@media (min-width:48em){.rcg-name{font-size:21px}}

/* ---------- parts bin (AAWP box on fix / mod / battery / gear posts) ---------- */
.parts.rcg-aawp .ph{padding:4px}
.rcg-aawp .pitem>div>p:first-child a{color:var(--ink);font-weight:700}
.parts.rcg-aawp .btn-amz{min-height:44px;padding:8px 14px;font-size:14px}
.parts.rcg-aawp .rcg-desc ul{margin:0 0 8px;font-size:15px}

/* ---------- AAWP comparison table: phone dashboards, desktop .cmp ---------- */
.rcg-cmp{margin:18px 0 22px}
.rcg-cmp .dash .tags:has(>.plate:empty:only-child){display:none}
.rcg-cmp .did .ph{padding:6px}
.rcg-cmp .did .rcg-name{margin:0;text-decoration:none}
.rcg-cmp .did .rcg-name:hover{text-decoration:underline}
.rcg-cmp .dash dd{overflow-wrap:anywhere}
@media (min-width:48em){.rcg-cmp .did .ph{aspect-ratio:1;padding:4px}}
.rcg-cmp .cmp thead :is(th,td){padding-top:10px}
.rcg-cmp .cmp thead td:first-child{width:140px}
.rcg-cmp .cmp .ph{aspect-ratio:1;padding:4px}
.rcg-cmp .cmp .rcg-title td{font-weight:700}
.rcg-cmp .cmp td{overflow-wrap:anywhere}
.rcg-cmp .cmp .buy .btn-amz{display:flex;gap:6px;padding:8px 6px}
.rcg-cmp .cmp .plate span{padding:6px 8px;white-space:normal}

/* ---------- Affiliatable leftovers: the "top 3" choice box, and raw boxes if a transform ever misses ---------- */
.cg-choice-box-two{margin:22px 0}
.cg-cb-row{display:grid;gap:12px}
.cg-cb-items{display:flex;flex-direction:column;gap:10px;padding:12px;border:2px solid var(--ink);border-radius:14px;background:var(--surface)}
.cg-cb-img{aspect-ratio:1;padding:6px;border:2px solid var(--frame);border-radius:10px;background:#FFF}
.cg-cb-title a{color:var(--ink);font:800 17px/1.25 var(--fd);text-decoration:none}
.cg-cb-content p{margin:0;font-size:15px}
.cg-cb-btn{margin-top:auto}
.cg-cb-btn .btn-amz,.cg-cb-btn .btn-brand{display:flex;width:100%;padding:8px 10px;font-size:14px}
@media (min-width:40em){.cg-cb-row{grid-template-columns:repeat(3,1fr)}}
.cg-box-layout-seven{margin:22px 0;padding:14px;border:2px solid var(--ink);border-radius:18px;background:var(--surface)}
.cg-layout-img img{max-width:320px;margin:0 auto 12px;padding:8px;border:2px solid var(--frame);border-radius:10px;background:#FFF}
.cg-our-top-pick{display:inline-block;margin:0 0 10px;padding:6px 10px;border-radius:8px;background:var(--ink);color:#FFF;font:900 12px/1 var(--fd);text-transform:uppercase}
.cg-bottom-arrow{display:none}
.cg-lc-button .btn-amz{display:flex;width:100%}
.cg-pc-box-four .cg-pc-row{display:grid;gap:10px;margin:0 0 14px}
.cg-pc-box-four .cg-pc-row>div{padding:10px 14px;border-radius:12px;background:#EEF7F1}
.cg-pc-box-four .cg-item-cons{background:#FDF1F1!important}
@media (min-width:48em){.cg-pc-box-four .cg-pc-row{grid-template-columns:1fr 1fr}}

/* ---------- Easy TOC -> <details class="toc"> ---------- */
#ez-toc-container.toc{margin:16px 0 20px}
#ez-toc-container.toc nav>ol{margin-top:2px}
#ez-toc-container:not(details){margin:16px 0 20px;padding:10px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--surface)}
#ez-toc-container:not(details) .ez-toc-title{margin:0;font:800 15px var(--fd);text-transform:uppercase}
#ez-toc-container:not(details) .ez-toc-title-toggle{display:none}

/* ---------- /search/ finder (plugin eknero_rcrideoncars): dark control panel + Garage result cards ---------- */
.flow>.entry>#rcrideoncars_container{margin-inline:calc(-1*clamp(0px,(100cqi - 720px)/2 - var(--g),200px))}
#rcrideoncars_container{margin-top:22px;margin-bottom:22px}
#rcrideoncars_container .fa{display:none}
#rcrideoncars_container>.d-flex{display:block}
#rcrideoncars_container>.d-flex h3{margin:0 0 10px;font-size:21px;text-transform:uppercase}
#search-form-wrapper{padding:16px;border-radius:16px;background:var(--dk);color:#FFF}
#power-wheels-search-form{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:12px 10px;margin:0}   /* stretch: the theme .row utility centres; a 2-line label must not push its field down */
#power-wheels-search-form>div{width:auto;max-width:none;min-width:0;margin:0;padding:0}
#power-wheels-search-form>div:first-child{grid-column:1/-1}
#power-wheels-search-form>div:not(:first-child):not(.rcride_sbutton){display:flex;flex-direction:column;justify-content:flex-end}
#power-wheels-search-form label{display:block;margin:0 0 4px;font-weight:700;font-size:15px;line-height:1.25;color:#FFF}
#power-wheels-search-form .rvs_required{color:var(--red2)}
#power-wheels-search-form :is(input,select){width:100%;max-width:none!important;min-height:48px;padding:0 12px!important;border:2px solid #FFF;border-radius:10px;background:#FFF;color:var(--ink);font:400 16px/1.2 var(--fb)}
#power-wheels-search-form :is(input,select):focus-visible{outline:3px solid #FFF;outline-offset:2px}
#power-wheels-search-form .rcride_sbutton{grid-column:1/-1}
.rcride_sbutton button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:10px 18px;border:0;border-radius:12px;background:#2F5BE0;color:#FFF!important;font:800 16px/1.15 var(--fd);cursor:pointer}   /* Kevin 9/30: blue button, white text (5.7:1) */
.rcride_sbutton button:hover{background:#2449C0}
@media (min-width:40em){#power-wheels-search-form{grid-template-columns:repeat(3,1fr)}}
@media (min-width:62em){#power-wheels-search-form{grid-template-columns:repeat(4,1fr)}.rcride_sbutton button{width:auto;min-width:240px;margin:4px auto 0}}
#rcrideoncars_container .my-4{margin:18px 0 0}
.rcride_products{display:grid;grid-template-columns:1fr;gap:14px;margin:0!important}
.rcride_products>*{width:auto;max-width:none;min-width:0;margin:0!important;padding:0!important}
.rcride_products>.col-12:not(.col-md-6){grid-column:1/-1}
@media (min-width:40em){.rcride_products{grid-template-columns:1fr 1fr}}
@media (min-width:62em){.rcride_products{grid-template-columns:repeat(3,1fr)}}
.rcride_products>.col-12>div[style]{padding:28px 16px!important;border-radius:14px;background:var(--band)!important;color:var(--ink-2)!important;font-size:17px!important;line-height:1.5}
.rcride_pagination:empty{display:none}
.rcride_pagination button{min-height:48px;padding:0 22px;border:2px solid var(--ink);border-radius:12px;background:#FFF;color:var(--ink);font:800 15px var(--fd);cursor:pointer}
.rcride_table{display:flex;flex-direction:column;height:100%;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--ink);box-shadow:none}
.rcride-img-container{aspect-ratio:4/3;height:auto;margin:12px 12px 0;padding:8px;border:2px solid var(--frame);border-radius:10px;background:#FFF}
.rcride_table .card-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:12px}
.rcride_table .card-body>div{text-align:left!important}
.rcride_table .card-title{height:auto;margin:0;padding:0;font:800 18px/1.25 var(--fd);text-transform:none;white-space:normal}
.rcride_table .card-title>span{display:block}
.rcride_table .ext-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:0;padding:10px 18px;border-radius:12px;background:var(--cta);color:var(--cta-ink)!important;font:800 16px/1.15 var(--fd);text-decoration:none;box-shadow:inset 0 -4px 0 #0002}
.rcride_table .ext-link:hover{background:#FFD54D}
.rcride_table{position:relative}
.rcride_table .ext-link::before{content:"";position:absolute;top:12px;left:12px;right:12px;aspect-ratio:4/3;border-radius:10px}   /* the photo opens Amazon too (same link) */
.rcride_table .ext-link::after{content:"";flex:none;width:8px;height:8px;border:solid;border-width:3px 3px 0 0;transform:rotate(45deg)}
.rcride_table .rv-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:#FFF;color:var(--ink)!important;font:800 15px/1.2 var(--fd);text-decoration:none}
.rcride_table .rv-link:hover{background:var(--ink);color:#FFF!important}
.rcride_table .card-body>div:last-child:empty{display:none}
.rcride_table table{width:100%;margin:0;border-collapse:collapse;font-size:15px;line-height:1.35}
.rcride_table :is(th,td){padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink)}
.rcride_table th{width:44%;background:#F4F5F7;font:700 12px/1.3 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.rcride_table tr:nth-child(even) td{background:#F1F3F6}
.rcride_table tr:nth-child(even) th{background:#E6E9EE}
.rcride_table :is(.ryes,.rno){display:inline-flex;align-items:center;gap:8px;font-weight:700}
.rcride_table .ryes::before{content:"";width:7px;height:14px;margin:0 3px 3px 4px;border:solid var(--ok);border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}
.rcride_table .ryes::after{content:"Yes"}
.rcride_table .rno::before{content:"\2715";color:#8A939D;font-weight:900}
.rcride_table .rno::after{content:"No"}
.rcride_table .rna{color:var(--ink-2)!important}
/* Amazon's content notice (IP License 2(k)) printed under the finder by inc/57-finder.php; the engine's CSS is not loaded on RC */
#rcrideoncars_container ~ .ks-pe-notice{margin:14px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2)}
/* In-stock finder (inc/57-finder.php, Kevin 9/29): the banner at the top of /search/ (only while the in-stock filter
   is on), the intro's live count, and the loading shimmer of a car being checked. The shimmer ends by CSS alone after
   6 s (the drawing comes back) even if the script never answers; the script normally resolves it within 4 s. */
.rcg-stock{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 18px;padding:12px 14px;border:2px solid var(--ok);border-radius:14px;background:#EEF7F1}
.rcg-stock[hidden]{display:none!important}
.rcg-stock>p{margin:0}
.rcg-stock__head{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:99px;background:var(--ok);color:#FFF;font:800 15px/1.15 var(--fd);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.rcg-stock__head .i{width:18px;height:18px;stroke-width:3}
.rcg-stock__small{flex:1 1 15em;font-size:14px;line-height:1.45;color:var(--ink-2)}
.rcg-stock__asof{flex:1 1 100%;font-size:13px;line-height:1.4;color:var(--ink-2)}   /* IP License 2(i): as-of stamp + Amazon's disclaimer */
.rcg-stock__asof summary{display:inline-block;min-height:24px;padding:3px 0;line-height:18px;list-style:none;cursor:pointer}
.rcg-stock__asof summary::-webkit-details-marker{display:none}
.rcg-stock__more{color:var(--link);text-decoration:underline;text-underline-offset:.16em}
.rcg-stock__asof p{margin:4px 0 0;font-size:12.5px}
@media (min-width:48em){.rcg-stock{padding:14px 18px}.rcg-stock__head{font-size:16px}}
/* phones under 360 px: the nowrap pill (~275 px at 15 px) ran past the banner's border at 320 px (review F4) */
@media (max-width:22.49em){.rcg-stock{padding:12px 10px}.rcg-stock__head{max-width:100%;font-size:13px;letter-spacing:.03em;white-space:normal}}
.rcg-count{white-space:nowrap}
.rcride-img-container.rcg-wait>img{visibility:hidden;animation:rcg-show 0s 6s forwards}
.rcride-img-container.rcg-wait::after{content:"";position:absolute;inset:8px;border-radius:6px;background:linear-gradient(100deg,#E8ECF0 35%,#F7F8FA 50%,#E8ECF0 65%) 0 0/300% 100%;animation:rcg-shim 1.2s linear 5,rcg-end 0s 6s forwards}
@keyframes rcg-shim{from{background-position:100% 0}to{background-position:0 0}}
@keyframes rcg-show{to{visibility:visible}}
@keyframes rcg-end{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.rcride-img-container.rcg-wait::after{animation:rcg-end 0s 6s forwards}}

/* ---------- WooCommerce (01-base has the red buttons + badge): undo the mockup .product box, shop cards ---------- */
.wrap.woo{padding-inline:var(--g)}   /* 01-base's .woo{padding:18px 0 10px} zeroes the phone gutter */
body:is(.woocommerce,.woocommerce-page) :is(div,li).product{margin:0;border:0;border-radius:0;overflow:visible;background:none}
body.woocommerce-page ul.products li.product{padding:0 12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
body.woocommerce-page ul.products li.product a img{width:calc(100% + 24px);max-width:none;margin:0 -12px 10px;background:#F1F3F5}
body.woocommerce-page ul.products li.product .button{min-height:44px;display:inline-flex;align-items:center}
body:is(.woocommerce,.woocommerce-page) .price ins{text-decoration:none}
body.woocommerce div.product .product_title{font-size:26px;line-height:1.15}
body.woocommerce div.product p.price{font:800 22px/1.2 var(--fd)}
body.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){width:20%;padding:3px}
body.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
body.woocommerce div.product form.cart.variations_form{display:block}
body.woocommerce div.product form.cart table.variations{width:100%;margin:0 0 12px}
body.woocommerce div.product form.cart table.variations :is(th,td){display:block;padding:0 0 4px;text-align:left;line-height:1.3}
body.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:10px}
body:is(.woocommerce,.woocommerce-page) :is(table.variations select,.quantity .qty,.woocommerce-ordering select,form .form-row :is(input.input-text,select,textarea)){min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:#FFF;color:var(--ink);font:400 16px/1.2 var(--fb)}
body:is(.woocommerce,.woocommerce-page) form .form-row textarea{padding:10px 12px}
body:is(.woocommerce,.woocommerce-page) .quantity .qty{width:5em;text-align:center}
body:is(.woocommerce,.woocommerce-page) form .form-row label{font-weight:700;font-size:15px}
body.woocommerce div.product form.cart .button,body:is(.woocommerce,.woocommerce-page) #place_order{min-height:48px;padding:10px 22px}
body:is(.woocommerce,.woocommerce-page) #place_order{width:100%;font-size:17px}
body.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:26px 0 16px}
body.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom:2px solid var(--line)}
body.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0 18px 0 0;padding:0;border:0;border-radius:0;background:none}
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,body.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:10px 0;color:var(--ink-2);font:800 15px var(--fd)}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:3px solid var(--ink)}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
body:is(.woocommerce,.woocommerce-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){margin:0 0 18px;padding:12px 16px;border:0;border-left:5px solid var(--ink);border-radius:0 12px 12px 0;background:var(--band);color:var(--ink);list-style:none}
body:is(.woocommerce,.woocommerce-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{display:none}
body:is(.woocommerce,.woocommerce-page) .woocommerce-error{border-left-color:var(--brand);background:#FDF1F1}
body:is(.woocommerce,.woocommerce-page) table.shop_table{border:2px solid var(--ink);border-radius:14px;border-collapse:separate;overflow:hidden;background:#FFF}
body:is(.woocommerce,.woocommerce-page) table.shop_table th{font:800 13px/1.3 var(--fd);letter-spacing:.04em;text-transform:uppercase}
body:is(.woocommerce,.woocommerce-page) #payment{border-radius:14px;background:#F1F3F5}
body:is(.woocommerce,.woocommerce-page) .cart-empty,body:is(.woocommerce,.woocommerce-page) .return-to-shop{margin-top:0}
/* 44px tap targets for every Woo button ("Return to shop" was 37px) */
body:is(.woocommerce,.woocommerce-page) :is(a,button,input).button{min-height:44px}
body:is(.woocommerce,.woocommerce-page) a.button.wc-backward{display:inline-flex;align-items:center;justify-content:center}
@media (min-width:48em){body.woocommerce div.product .product_title{font-size:34px}body.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){width:16.66%}}

/* ---------- Complianz banner (only prints for EU visitors; never Sunshine) ---------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner{--cmplz_banner_background_color:#FFF;--cmplz_banner_border_color:#1B1F24;--cmplz_banner_border_width:2px;--cmplz_banner_border_radius:14px;--cmplz_text_color:#1B1F24;--cmplz_hyperlink_color:#3A41C6;--cmplz_button_border_radius:10px;--cmplz_button_accept_background_color:#1B1F24;--cmplz_button_accept_border_color:#1B1F24;--cmplz_button_accept_text_color:#FFF;--cmplz_button_deny_background_color:#FFF;--cmplz_button_deny_border_color:#1B1F24;--cmplz_button_deny_text_color:#1B1F24;--cmplz_button_settings_background_color:#FFF;--cmplz_button_settings_border_color:#1B1F24;--cmplz_button_settings_text_color:#1B1F24;--cmplz_slider_active_color:#146C43;font-family:var(--fb)}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{font-family:var(--fd);font-weight:800}

/* ---------- a3 Lazy Load: a placeholder never collapses a product frame ---------- */
.entry img.lazy-hidden{min-height:1px;background-color:#F1F3F5}

/* ===== 04-home.css ===== */
/* 04-home.css · Home (key "home"). The mockup's home styles are already in 01-base.css; these are the WordPress
   additions: the "RC Ride On Cars" line inside the H1, the <picture> hero, the Gravatar in the trust band,
   and a few spacing fixes for sections that render without the mockup's exact wrappers. */
.home{display:block}
.hero-k{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:800 13px/1.2 var(--fd);letter-spacing:.08em;color:var(--muted)}
.hero-k::before{content:"";flex:none;width:22px;height:8px;background:repeating-conic-gradient(#FFF 0 25%,#0000 0 50%) 0 0/8px 8px}
.hero picture{display:block}
.hero .finder a{color:var(--link)}
.sec .more-link{margin:14px 0 0}
.trust .author-box{margin:22px 0}
.trust .author-box .avatar{border-color:#6B7580;background:#FFF}
.trust .author-box .bio{max-width:72ch;margin:0}
@media (min-width:48em){.trust .author-box>:first-child{grid-row:span 2}.trust .author-box .bio{grid-column:2}}
.home>.wrap>section:last-child{margin-bottom:8px}
@media (min-width:62em){.hero-k{font-size:14px}}

/* ===== 05-list.css ===== */
/* 05-list.css · List part (key "list"): /24v-ride-on-cars/ extras on top of 01-base.css.
   Product photos are AAWP [amazon fields=... value="thumb"] output (<a><img></a>) inside a .ph.pic box:
   white mat, SOLID blue --frame line (from .ph), photo contained, whole photo links to Amazon. */
.pic{position:relative;padding:6px;background:#FFF;overflow:hidden}
/* the box size comes from its aspect-ratio (4:3 phone, 1:1 desktop/table), never from the 500x500 image */
.pic>a{position:absolute;inset:6px;display:block}
.pic img{display:block;width:100%;height:100%;object-fit:contain}
@media (min-width:48em){.did .pic{aspect-ratio:1}}
.cmp .pic>a{inset:4px}

/* phone product card (Kevin): plate bar, name, chips, FULL-WIDTH photo, then the Amazon button right under it */
@media (max-width:47.99em){
.pmain>*{order:4}
.pmain>h3,.pmain>.tags{order:1}
.pin>.pmedia{order:2;margin-bottom:10px}
.pmain>.pcta{order:3}
.pbody{order:5}
}
.pcta{margin:0 0 10px}
.pbody>.btn-amz{margin-top:4px}

/* pick list: number plates never shrink; long names wrap beside them */
.pick-list .plate{flex:none}
.pick-list em{display:inline-block}

/* compare: each table group (#aawp-tb-11140 / #aawp-tb-11142, the live AAWP table ids) holds its phone dashboards
   and its desktop table, so a deep link lands on the right block at every width; clear the sticky #1-#8 jump row */
.cmp-grp{scroll-margin-top:58px}
@media (min-width:62em){.cmp-grp{scroll-margin-top:12px}}
/* compare: dashboard name link reads as a heading-sized link on dark */
.dash .did a{text-decoration-color:#FFF8}
.cmp td{vertical-align:middle}
.cmp .tags .badge{white-space:normal}

/* "Looking for more" box: its crosslink cards sit on the sky band */
.more .dsp{margin:0 0 6px;font-size:15px}
.more .xlinks{margin:12px 0 2px}

/* How to choose: factor cards keep the full live text */
.factor p+p{margin-top:.6em}

/* video: the live YouTube iframe in the theme's 16:9 box (.rcg-yt, 02-content.css); no facade (lead, review [15]) */

/* Pinterest image at the end (same upload path as before) */
.pin-img{margin:18px auto}
.pin-img img{width:100%;max-width:423px;margin:auto;border-radius:10px}

/* desktop: the review text under the photo+dashboard row keeps a readable line length */
@media (min-width:48em){.pbody>p:not(.k),.pbody>.kf{max-width:75ch}}

/* ===== 06-guide.css ===== */
/* 06-guide.css · Mod guide (key "guide"): extras for /how-to-modify-power-wheels-to-go-faster/ (post 8402) and any
   guide that reuses the mockup's guide pieces. 01-base.css already styles .short .safety .stages .steps .vs
   .figure-diagram .parts .pitem .tbl .faq .product; this file only adds what real WordPress output needs:
   AAWP [amazon fields value="thumb"] images inside the parts bins and product boxes, Kevin's phone photo order,
   striped guide tables, the Pinterest pin and a few spacing fixes. */

/* wide diagram mats: 02-content's ".entry figure{max-width:100%}" would pin a .wide figure to the 720px column
   and shove it left (its negative margins stay); wide/full figures size themselves from their margins */
.entry figure:is(.wide,.alignwide,.alignfull){max-width:none}

/* parts bins: the AAWP thumb (<a><img></a>, hotlinked API image) fills the blue-framed .ph */
.pitem .ph{position:relative;display:block;overflow:hidden;background:#FFF}
.pitem .ph>a{position:absolute;inset:6px;display:block}
.pitem .ph img{width:100%;height:100%;object-fit:contain}
.pitem .pn{margin:0 0 4px;font-weight:700;line-height:1.3}
.pitem .btn-amz{margin-top:2px}
/* Kevin 9/29 on phones: name, then the photo on its own full-width line, then the yellow button right under it */
@media (max-width:47.99em){
.pitem{display:flex;flex-direction:column;gap:8px}
.pitem>div:not(.ph){display:contents}
.pitem .pn{order:1;margin:0;font-size:17px}
.pitem .ph{order:2;width:100%;aspect-ratio:16/10;padding:8px}
.pitem .btn-amz{order:3;display:flex;width:100%;min-height:48px;margin:0;font-size:16px}
.pitem .pn~p{order:4;margin:4px 0 0}
.pitem small{order:5;margin:0}}
@media (min-width:48em){.pitem{grid-template-columns:112px 1fr;gap:16px}.pitem .ph{width:112px;height:112px}}

/* product boxes in guides: the photo box is .pmedia.ph.pic (05-list.css: white mat, SOLID blue frame, AAWP photo
   linked to Amazon) and the first button is .pcta, so phones get name > photo > button like the 24V list */
.rcg-guide .pbody>p,.rcg-guide .pbody>.kf{max-width:760px}

/* stage stepper: equal columns on desktop, long live labels ("Battery modification") stay inside them */
@media (min-width:48em){.stages{grid-template-columns:repeat(5,minmax(0,1fr))}.stages b{font-size:14px;overflow-wrap:anywhere;hyphens:auto}}

/* guide tables: rows alternate like the comparison table (desktop; phones get stacked cards from 01-base) */
@media (min-width:48em){.tbl tbody tr:nth-child(even) td{background:#F1F3F6}.tbl tbody tr:nth-child(even) th{background:#E6E9EE}}
.tbl td a{overflow-wrap:anywhere}

/* FAQ label + answers holding lists */
.faq-k{margin-top:1.6em}
.faq details>div>ul,.faq details>div>ol{padding-left:20px}
.faq details>div>ol li::marker{font-weight:700}
/* the live answers are long (lists, several paragraphs): give them the full card width on phones */
@media (max-width:47.99em){.faq details>div{padding-left:14px}}

/* Pinterest pin (existing /wp-content/uploads/ image, same URL) */
.entry .rcg-pin{max-width:240px;margin:8px auto 22px}
.rcg-pin img{width:100%;border-radius:8px;box-shadow:0 8px 18px -10px #1B1F2480}

/* the short answer reads a size up, as in the mockup (02-content resets .short text to body size) */
.entry .short>p.sa{font-size:18px;line-height:1.55}

/* safety callout: the live sentences as two bullets straight under the hazard-tape title */
.safety .dsp+ul{margin-top:8px}

/* "Series vs parallel" lead-in sits tight on its cards */
.vs{margin-top:6px}

/* ===== 07-signup.css ===== */
/* 07-signup.css · ebook signup (key "sgn"). The block itself is styled in 01-base.css (.signup, .cover, .field);
   this adds the real cover image (the mockup's inline styles) and the thank-you / error view.
   The button stays charcoal (never the Sunshine Amazon yellow). */
.signup .cover-img{padding:0;border-left:0;aspect-ratio:735/1069;overflow:hidden;background:#000;box-shadow:0 6px 14px #0003}
.signup .cover-img img{width:100%;height:100%;object-fit:cover}

/* thank-you / error view (templates/ebook-thanks.php) */
.ebook-ready .ebook-dl{grid-column:1/-1;margin:0}
.ebook-ready .btn-brand{width:100%}
@media (min-width:40em){.ebook-ready .ebook-dl{grid-column:2}.ebook-ready .btn-brand{width:auto}}
.signup-msg{margin:8px 0 0;padding:12px 14px;border-left:6px solid var(--warn);border-radius:10px;background:#FFF3EB;font-weight:700}

/* ===== 08-tile.css ===== */
/* 08-tile.css · "More detail" tile + "↑ Picks" (key "tile"; research/CONVERSION.md sections 2 and 4.4, Kevin approved
   9/29). Markup: inc/55-more-tile.php (tile), footer.php (pill). Both are links, never yellow, never filled, never
   shaped like the Amazon button: Sunshine stays on Amazon links only. The tile's down-chevron means "further down
   this page" (the Amazon button's › leaves the page). */

/* tile: the last slot of a dashboard card's spec grid. s1 = the 1 empty cell, s2 = 2 cells, s3 = full-width bar */
.dash dl>.rcg-more{position:relative;min-height:44px;border:1px dashed var(--gauge);background:none}
.dash dl>.rcg-more.s2{grid-column:span 2}
.dash dl>.rcg-more.s3{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:9px 12px}
.rcg-more.s3 dt{flex-direction:row;align-items:center;gap:8px}
.rcg-more.s3 dd{margin:0}
.rcg-more .i{width:24px;height:24px;color:var(--gauge);stroke-width:1.75}
.rcg-more a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.08em}
.rcg-more a::after{content:"";position:absolute;inset:0;border-radius:10px}   /* the whole tile is the link (>= 44px) */
.rcg-more:hover{border-style:solid}
.rcg-more:hover a{text-decoration-thickness:.14em}
.rcg-more a:focus-visible{outline:0}
.rcg-more a:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}

/* "↑ Picks": below the last card of a comparison block that has tiles, back-to-top (01-base) becomes a small pill,
   words + icon, same asphalt/white as back-to-top */
.to-top__t{display:none}
html.show-picks .to-top{opacity:1;visibility:visible;transform:none;grid-auto-flow:column;gap:6px;width:auto;padding:0 16px 0 12px;border-radius:22px;font:800 15px/1 var(--fd)}
html.show-picks .to-top__t{display:inline}