/*
Theme Name: BPS Toybox
Theme URI: https://bestplaygroundsets.com/
Author: Kevinsmak LLC
Author URI: https://bestplaygroundsets.com/about-us/
Description: Toybox design for Best Playground Sets. 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: bpstoybox
*/

/* ===== 01-base.css ===== */
/* 01-base.css · Foundation (key "fnd"). The Toybox design system (rcrideoncars-site/design/toybox/styles.css), ported to
   Best Playground Sets with Kevin's later rules: the yellow --cta is ONLY the Amazon button ("Check at Amazon" + arrow,
   centred); less red (photo frames solid blue, key-feature bullets blue, verdict boxes + "Our Pick" green, primary
   buttons navy); comparison tables with alternating rows; body 17px phone / 18px desktop; no horizontal scroll.
   Seasons are server-side (html[data-season]); Christmas is subtle on BPS (2 token swaps + the small season bar).
   AdSense: nothing here targets ins.adsbygoogle or .google-auto-placed, and no article container gets overflow:hidden,
   contain or container-type (auto ads must never be clipped).
   Section 1 = design system (components the build parts map content/plugin output onto).
   Section 2 (bottom) = WordPress layer: header/nav/footer, .entry column, templates, archive cards, pagination, 404. */

/* ================= 1. Toybox design system ================= */
:root{
--bg:#FFF8EF;--surface:#fff;--ink:#1D2A44;--ink-2:#4A5570;--line:#1D2A44;--hair:#EADFCF;
--brand:#D63A2F;--brand-ink:#B8322A;--cta:#FFD66B;--cta-hover:#FFCB45;--cta-ink:#1D2A44;
--accent:#7ED6B5;--ok:#1B7F4E;--pick:#1B7F4E;--pick-bg:#E3F4EA;--warn:#FFB38A;--link:#1D5FA3;--frame:#1D5FA3;
--sky:#9CCBFF;--lilac:#E7DDF3;--pink:#FFC6DA;--moss:#CFE9D9;--tire:#AF9BB1;
--band:#E4F6EE;--band-2:#E6F1FF;--hl:#BFEBD9;--shadow:#1D2A44;--season:#1F6F43;--zebra:#FFFCF7;--th:#FCF7EF;
--sh:4px 4px 0 var(--shadow);--sh-s:2px 2px 0 var(--shadow);--b:2px solid var(--line);--r:16px;
--fd:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
--fb:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--g:16px;--col:720px;--wide:1120px;--hdr:60px}
/* Christmas on BPS: two token swaps only (evergreen block shadows + band), plus the season bar. No wreath, no candy. */
html[data-season=christmas]{--shadow:#1F6F43;--band:#DDEFE3}
@media(min-width:900px){:root{--hdr:72px}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@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}
@media(min-width:900px){body{font-size:18px}}
img{max-width:100%;height:auto}
svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);font-weight:700}
h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem)}
h3{font-size:clamp(1.2rem,1.1rem + .6vw,1.45rem)}
h4{font-size:1.1rem}
h5,h6{font:800 1rem/1.3 var(--fb);margin:0 0 .5em}
p,ul,ol,dl,figure{margin:0 0 1em}
ul,ol{padding-left:1.3em}
li{margin:.3em 0}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
b,strong{font-weight:800}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.i{width:1.15em;height:1.15em;flex:none;fill:currentColor;vertical-align:-.2em}
.vh,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-80px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:800}
.skip:focus{top:8px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--g)}
.small{font-size:15px}
.muted{color:var(--ink-2)}
html:not([data-season=christmas]) .xmas{display:none!important}
html[data-season=christmas] .off-xmas{display:none!important}

/* layout helpers (a few RC-era utility names kept so forked PHP parts keep working) */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctr{display:grid;place-items:center;text-align:center}
.ul0{list-style:none;margin:0;padding:0}
.ul0>li{margin:0}
.brand,.nav>summary,.hsearch>summary,.toc>summary,.pick-list a,.rows a,.faq>summary,.safety__h{display:flex;align-items:center}
.pill,.btn,.btn-amz,.ribbon,.badge,.yn,.morelink{display:inline-flex;align-items:center}
.ph,.tile{display:grid;place-items:center}

/* shared pieces: toy blocks, pills, labels */
.blk,.blk-s,.card{background:var(--surface);border:var(--b);border-radius:var(--r);box-shadow:var(--sh);color:var(--ink)}
.blk-s{border-radius:14px;box-shadow:var(--sh-s)}
.pill{gap:6px;min-height:44px;padding:0 14px;border:var(--b);border-radius:99px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;line-height:1.2}
.lbl,.k,.specs dt,.facts dt,.ctable td::before{display:block;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);line-height:1.3}
.k{margin:0 0 6px}
.td{font:600 1.15rem/1.2 var(--fd);margin:0 0 6px}
.kicker{font:600 .95rem/1.2 var(--fd);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .4em}
.hov:hover,.pill:hover{background:var(--band)}
main h2:not(.plain){text-decoration:underline var(--hl);text-decoration-thickness:.36em;text-underline-offset:-.18em;text-decoration-skip-ink:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li,.xlinks li,.pick-list li,.rows li,.social li,.ft-nav li,.ft-legal li,.crumbs li,.cards>li{margin:0}

/* buttons. .btn-amz (yellow) is ONLY ever an Amazon link; every other button is white or navy. */
.btn,.btn-amz,.btn-brand{background:#fff;color:var(--ink);justify-content:center;gap:.45em;min-height:44px;padding:.5em 1.15em;border:var(--b);border-radius:99px;font:800 1rem/1.15 var(--fb);text-decoration:none;cursor:pointer;text-align:center;box-shadow:var(--sh-s)}
.btn-brand{display:inline-flex;align-items:center}
.btn--brand,.btn-brand{background:var(--ink);color:#fff}
.btn--brand:hover,.btn-brand:hover{background:#2C3D60}
.btn:active,.btn-amz:active,.btn-brand:active{transform:translate(2px,2px);box-shadow:none}
.btn-amz{width:100%;min-height:48px;font-size:1.05rem;background:var(--cta);color:var(--cta-ink);box-shadow:3px 3px 0 #1D2A44}
.btn-amz:hover{background:var(--cta-hover);text-decoration:underline}
/* the arrow after "Check at Amazon" (markup must not add its own arrow icon) */
.btn-amz::after{content:"";flex:none;width:.5em;height:.5em;margin-left:.15em;border:solid currentColor;border-width:3px 3px 0 0;transform:rotate(45deg)}
.btn-amz--sm{width:auto;min-height:44px;font-size:.95rem;padding:.45em .9em}

/* number blocks, ribbons, badges, chips */
.num{display:inline-grid;place-items:center;flex:none;min-width:40px;height:40px;padding:0 6px;border:var(--b);border-radius:10px;background:#fff;font:700 1.1rem/1 var(--fd);box-shadow:2px 2px 0 var(--line)}
.num--pick{background:var(--pick);color:#fff}
.ribbon{gap:.35em;padding:.32em 1.2em .32em .75em;background:var(--ink);color:#fff;font:600 .95rem/1.1 var(--fd);border-radius:6px 0 0 6px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
.ribbon--pick{background:var(--pick)}
.badge{gap:.35em;padding:.28em .7em;border:var(--b);border-radius:99px;background:#fff;font:800 .85rem/1.15 var(--fb);box-shadow:var(--sh-s);transform:rotate(-2deg)}
.badge+.badge{transform:rotate(2deg)}
.badge--ok .i,.checked .i{color:var(--ok)}
.chip{padding:.12em .6em;border:1.5px solid var(--line);border-radius:99px;background:var(--lilac);font-weight:800;font-size:14px;line-height:1.5;white-space:nowrap}
.t-a{background:var(--accent)}.t-b{background:var(--sky)}.t-c{background:var(--lilac)}.t-d{background:var(--pink)}.t-e{background:var(--warn)}.t-f{background:var(--moss)}
.stock{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
/* key-feature bullets: blue spoked hubs (Kevin: blue, not red) */
.hubs{list-style:none;padding:0}
.hubs li{position:relative;padding-left:1.75em}
.hubs li::before{content:"";position:absolute;left:0;top:.28em;width:1.1em;height:1.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Ccircle r='9.5' fill='%231D2A44'/%3E%3Ccircle r='7.8' fill='%239CCBFF'/%3E%3Ccircle r='5.2' fill='%231D5FA3'/%3E%3Cpath d='M0-5v10M-5 0h10M-3.5-3.5l7 7M3.5-3.5l-7 7' stroke='%23fff' stroke-width='1.2'/%3E%3Ccircle r='1.7' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}

/* product photo frame: solid blue line, white mat; the photo links to Amazon (rel="sponsored nofollow noopener") */
.pframe{display:block;aspect-ratio:1;padding:8px;background:#fff;border:2px solid var(--frame);border-radius:12px}
.pframe img{display:block;width:100%;height:100%;object-fit:contain}
.ph{text-align:center;aspect-ratio:1;padding:8px;border:2px dashed #9A8C76;border-radius:12px;background:repeating-linear-gradient(45deg,#F6EFE4 0 10px,#F1E8DA 10px 20px);color:var(--ink-2);font:800 13px/1.25 var(--fb)}

/* pick list, rows (jump links) */
.pick-list,.rows{list-style:none;padding:0;display:grid;gap:8px;margin:0 0 20px}
.pick-list a,.rows a{gap:10px;min-height:52px;padding:6px 12px 6px 6px;color:var(--ink);text-decoration:none;font-weight:800;line-height:1.25;font-size:15.5px}
.rows a{padding-left:14px}
.pick-list .num{min-width:36px;height:36px;font-size:1rem}
.pick-list .lbl{display:inline;margin-right:7px;color:var(--pick)}
.pick-list .i,.rows .i{margin-left:auto;color:var(--ink-2)}
@media(min-width:700px){.pick-list{grid-template-columns:1fr 1fr}}

/* hurry box, "looking for more" box, quick picks */
.hurry,.more-box{padding:12px 14px 0;margin:0 0 22px;background:var(--band-2);border:var(--b);border-radius:var(--r)}
.more-box{background:var(--band)}
.hurry p{font-size:15.5px;margin-bottom:8px}
.quick-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;list-style:none;margin:0;padding:4px 0 14px}
.qp{position:relative;margin:0;padding:10px 12px 12px}
.qp .td{font-size:1rem;margin-bottom:4px}

/* comparison: phone = swipe cards / stacked cards, desktop = a real table with alternating rows */
.compare{margin:0 0 26px}
.specs{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1.5px solid var(--hair)}
.specs>div{padding:7px 0;border-bottom:1.5px solid var(--hair)}
.specs>div:nth-child(odd){padding-right:10px;border-right:1.5px solid var(--hair)}
.specs>div:nth-child(even){padding-left:10px}
.specs dd,.facts dd{margin:0;font-weight:800;font-size:15.5px;line-height:1.3;font-variant-numeric:tabular-nums}
.yn{gap:5px}
.yn .i{width:20px;height:20px}
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:var(--b);border-radius:var(--r);box-shadow:var(--sh);font-variant-numeric:tabular-nums;font-size:16px}
.spec-table :is(th,td){padding:9px 12px;border-top:1.5px solid var(--hair);line-height:1.3;vertical-align:top}
.spec-table thead th{border-top:0;background:var(--band);padding:12px 10px}
.spec-table thead th:first-child{border-top-left-radius:14px}
.spec-table thead th:last-child{border-top-right-radius:14px}
.spec-table tbody th{text-align:left;color:var(--ink-2);font-size:14.5px;background:var(--th)}
.spec-table tbody tr:nth-child(even)>*{background:var(--zebra)}

/* crosslink cards ("Keep reading", hub tiles) */
.xlinks{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));list-style:none;margin:0 0 24px;padding:0}
.xcard{position:relative;display:flex;flex-direction:column;height:100%;padding:14px 16px 16px}
.xcard .lbl{align-self:flex-start;padding:2px 8px;border-radius:6px;background:var(--lilac);color:var(--ink);margin-bottom:8px}
.xcard .td a{color:var(--ink);text-decoration:none}
.xcard .td a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.xcard:focus-within{outline:3px solid var(--link);outline-offset:3px}
.xcard .td a:focus-visible{outline:0}
.xcard:hover{background:var(--zebra)}
.xcard p{font-size:15.5px;margin:0;color:var(--ink-2)}
.xcard p.td{color:var(--ink);margin-bottom:6px;font:600 1.15rem/1.2 var(--fd)}
.tile{aspect-ratio:4/1;margin:-4px -6px 12px;border:var(--b);border-radius:12px;font:700 1.6rem/1 var(--fd)}
@media(min-width:700px){.tile{aspect-ratio:2.4/1}}

/* product box */
.product{padding:14px 14px 16px;margin:0 0 30px;border-radius:20px}
.product__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.product__name{margin:0 0 12px;font-size:1.35rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;align-content:start}
.facts>div{padding:5px 8px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.facts dt{font-size:12px;color:var(--ink)}
.facts dd{font-size:15px}
.checked{font-size:13.5px;color:var(--ink-2);margin:8px 0 12px;display:flex;align-items:center;gap:6px}
/* verdict: green (Kevin) */
.verdict{padding:12px 14px;margin:0 0 14px;background:var(--pick-bg);border:var(--b);border-color:var(--pick);border-radius:14px}
.verdict b:first-child{font-family:var(--fd);font-weight:600;color:var(--pick)}
.proscons{display:grid;gap:10px;margin:0 0 14px}
.proscons>div{border:var(--b);border-radius:14px;overflow:hidden;background:#fff}
.pc-h{margin:0;padding:6px 12px;font:600 1rem/1.2 var(--fd);border-bottom:var(--b);background:var(--accent)}
.cons .pc-h{background:var(--warn)}
.proscons ul{list-style:none;margin:0;padding:8px 12px 10px;font-size:16px}
.proscons li{position:relative;padding-left:26px}
.proscons .i{position:absolute;left:0;top:.2em;width:18px;height:18px}
@media(min-width:700px){.product{padding:22px 24px 24px}.facts{grid-template-columns:repeat(3,1fr)}.proscons{grid-template-columns:1fr 1fr}}

/* FAQ (<details>), table of contents */
.faq{margin:0 0 12px}
.faq>summary{gap:12px;min-height:56px;padding:10px 14px;cursor:pointer;list-style:none}
.faq>summary>:first-child{margin:0;flex:1;font-size:1.15rem}
.faq>summary::after{content:"";flex:none;width:30px;height:30px;border:var(--b);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/12px 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 12px no-repeat,var(--accent)}
.faq[open]>summary::after{background:linear-gradient(var(--ink),var(--ink)) center/12px 2.5px no-repeat,#fff}
.faq__a{padding:0 16px 6px}
.nav>summary::-webkit-details-marker,.hsearch>summary::-webkit-details-marker,.toc>summary::-webkit-details-marker,.faq>summary::-webkit-details-marker{display:none}
.toc{margin:0 0 16px;background:#fff;border:var(--b);border-radius:14px}
.toc>summary{min-height:48px;padding:0 14px;font:600 1.05rem var(--fd);cursor:pointer;list-style:none}
.toc>summary::after{content:"";margin-left:auto;width:10px;height:10px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:translateY(-3px) rotate(45deg)}
.toc[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.toc ol,.toc ul{margin:0;padding:0 16px 14px 34px;font-size:16px}
.toc li{margin:0}
.toc a{display:block;padding:11px 0;line-height:1.4}

/* guide pieces */
.shortans{padding:14px 16px 2px;margin:0 0 16px}
.shortans .kicker{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--accent);color:var(--ink)}
.safety{margin:0 0 16px;background:#fff;border:3px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--line);overflow:hidden}
.safety__h{gap:8px;margin:0;padding:8px 14px;background:var(--ink);color:#fff;font:600 1.2rem/1.2 var(--fd);border-bottom:3px solid var(--line)}
.safety>div{padding:12px 16px 4px}
.steps{list-style:none;padding:0;counter-reset:s}
.steps>li{position:relative;counter-increment:s;padding-left:46px;margin:0 0 12px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border:var(--b);border-radius:10px;font:700 1rem/1 var(--fd);background:#fff;box-shadow:var(--sh-s)}

/* author box: a plain block (anything injected into it spans its full width); avatar | text sit in their own row */
.author-box{display:block;padding:16px;margin:26px 0 14px}
.author-box__row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;margin:0 0 12px}
.author-box__row>*{min-width:0}
.author-box p{font-size:16px}
.author-box__row p:last-child{margin-bottom:0}
.author-box .dsp{font:600 1.2rem/1.2 var(--fd);margin:0 0 2px}
.author-box .avatar{width:72px;height:72px;border-radius:50%;border:var(--b);background:#fff}
.author-box .pills{gap:8px}
.social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}

/* home sections (the home part builds on these) */
.sec{padding:34px 0}
.band{background:var(--band)}
.band-2{background:var(--band-2)}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.sec-h h2{margin:0}
.lede{font-size:18px;line-height:1.5;margin-bottom:16px}
.morelink{gap:6px;font-weight:800;min-height:44px}

/* ================= 2. WordPress layer (Foundation) ================= */
.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 (Christmas only): 38px, evergreen, white/green stripe (no red on BPS) */
.season-bar{position:relative;display:flex;align-items:center;justify-content:center;gap:.45em;min-height:38px;padding:5px var(--g) 10px;background:var(--season);color:#fff;font-size:14.5px;font-weight:800;line-height:1.25;text-align:center}
.season-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(-45deg,#fff 0 6px,#3E9F68 6px 12px)}
.season-bar a{color:#fff}
.season-bar :focus-visible{outline-color:#fff}
.season-bar .sb-long{display:none}
@media(min-width:40em){.season-bar .sb-long{display:inline}.season-bar .sb-short{display:none}}

/* header: static (not sticky: AdSense anchor/vignette ads and the consent message own the viewport edges) */
.site-header{position:relative;z-index:30;background:var(--bg);border-bottom:var(--b)}
.hdr{position:relative;display:flex;align-items:center;gap:8px;height:var(--hdr)}
.brand{min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none}
.brand__logo{display:block;width:auto;height:52px}
.quick{display:none}
.nav>summary,.hsearch>summary{justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 10px;border:var(--b);border-radius:12px;background:#fff;box-shadow:var(--sh-s);cursor:pointer;list-style:none;font-weight:800;line-height:1}
.nav>summary .i,.hsearch>summary .i{width:22px;height:22px}
.nav[open]>summary,.hsearch[open]>summary{background:var(--ink);color:#fff}
.nav .ic-x,.nav[open] .ic-menu{display:none}
.nav[open] .ic-x{display:block}
.nav__label{display:none}
.nav:not([open])>.nav__panel,.hsearch:not([open])>.hsearch__panel{display:none}
.nav__panel{position:absolute;left:0;right:0;top:100%;z-index:31;max-height:calc(100dvh - var(--hdr));overflow:auto;overscroll-behavior:contain;padding:6px var(--g) 22px;background:var(--bg);border-bottom:var(--b)}
.nav__panel .lbl{margin:14px 0 8px}
.nav__panel .chips .pill{min-height:44px;font-size:15.5px}
.nav__panel a[aria-current] {background:var(--ink);color:#fff}
/* the ~30 idea topics: a nested <details> under "All backyard ideas" (open by default in the desktop dropdown) */
.nav__wide:has(>.nav__more){display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 6px}
.nav__wide>.lbl,.nav__more[open]{flex-basis:100%}
.nav__wide>.chips+.nav__more[open]{margin-top:6px}
.nav__more>summary{cursor:pointer;list-style:none;font-size:15.5px;box-shadow:var(--sh-s)}
.nav__more>summary::-webkit-details-marker{display:none}
.nav__more>summary .i{color:var(--pick)}
.nav__more>summary::after{content:"";width:8px;height:8px;margin:0 2px 3px 4px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.nav__more[open]>summary{margin-bottom:10px;background:var(--ink);color:#fff}
.nav__more[open]>summary .i{color:var(--accent)}
.nav__more[open]>summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.nav__n{font-weight:700;opacity:.8}
.nav__end{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:12px;border-top:2px dashed var(--hair)}
.hsearch__panel{position:absolute;left:0;right:0;top:100%;z-index:31;padding:14px var(--g);background:var(--bg);border-bottom:var(--b)}
.hsearch__panel .search-form{margin:0}
@media(min-width:900px){
.brand__logo{height:62px}
.hdr{gap:12px}
.nav__label{display:inline}
.nav>summary,.hsearch>summary{padding:0 14px}
.nav__panel{left:auto;right:var(--g);top:calc(100% + 8px);width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - var(--hdr) - 24px);display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;padding:8px 22px 22px;border:var(--b);border-radius:var(--r);box-shadow:var(--sh)}
.nav__panel>.nav__wide,.nav__panel>.nav__end{grid-column:1/-1}
.hsearch__panel{left:auto;right:var(--g);top:calc(100% + 8px);width:min(460px,calc(100vw - 32px));border:var(--b);border-radius:var(--r);box-shadow:var(--sh)}}
@media(min-width:1100px){
.quick{display:flex;gap:2px;margin:0 4px 0 0;padding:0;list-style:none}
.quick li{margin:0}
.quick .pill{border-color:transparent;background:none;padding:0 11px}
.quick .pill:hover,.quick .pill[aria-current]{border-color:var(--line);background:#fff}}
/* small phones (320-360px): logo shrinks a little, the Search label goes (the icon stays) */
@media(max-width:359.98px){.brand__logo{height:42px}.hsearch .hs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* crumbs, post head, byline, disclosure */
.crumbs{margin:0 0 10px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none;font-size:14.5px;font-weight:700}
/* the "/" trails each item (never starts a wrapped line); phones: Home + the nearest parent (li.up) only, one line */
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--ink-2)}
.crumbs a{display:inline-block;padding:11px 0;color:var(--ink-2)}
.crumbs .here{display:none}
@media(max-width:47.99em){.crumbs li:not(:first-child):not(.up):not(.here){display:none}.crumbs li.up::after{content:none}}
@media(min-width:48em){.crumbs .here{display:list-item;flex:1 1 10ch;min-width:10ch;max-width:40ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}}
.post-head h1 small,.h1-sub{display:block;font-size:.56em;font-weight:600;line-height:1.25;margin-top:.25em;color:var(--ink-2)}
.byline{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:15px;color:var(--ink-2);margin:0 0 12px}
.byline a{color:var(--ink);font-weight:800}
.byline time{white-space:nowrap}
.disclosure{font-size:14.5px;line-height:1.4;padding:6px 10px;border:1.5px dashed var(--line);border-radius:12px;background:#fff;margin:0 0 16px}
.page-head{padding-top:18px}
.page-head h1{margin-bottom:.6em}

/* the article. main.flow = a 720px reading column inside a 1120px wide band (Toybox .flow grid).
   .entry (the_content) spans the full grid and repeats the same columns, so every content child sits in the 720px
   column, .wide/.alignwide reach 1120px and .alignfull goes edge to edge; no container queries, no containment,
   nothing clipped (auto ads that AdSense injects between paragraphs land in the column like any other child). */
.flow,.flow>.entry{display:grid;grid-template-columns:[full-start] minmax(var(--g),1fr) [wide-start] minmax(0,200px) [col-start] min(var(--col),calc(100% - 2*var(--g))) [col-end] minmax(0,200px) [wide-end] minmax(var(--g),1fr) [full-end]}
.flow{padding:14px 0 48px}
.flow>*,.flow>.entry>*{grid-column:col;min-width:0}
.flow>.wide,.flow>.entry>.wide,.flow>.entry>.alignwide{grid-column:wide}
.flow>.entry{grid-column:full;align-content:start}
.flow>.entry>.alignfull{grid-column:full}
.flow>h2{margin-top:1.5em}
.entry>:first-child{margin-top:0}
.aligncenter{margin-inline:auto;text-align:center}
img.aligncenter,.aligncenter>img{display:block;margin-inline:auto}
.alignleft,.alignright{margin:0 0 14px}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:15px;line-height:1.5;color:var(--ink-2)}
iframe,video,embed,object{max-width:100%}
table{max-width:100%}
.xl-h{margin:1.4em 0 .5em}
.flow>.xlinks{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.post-foot{margin-top:8px}
.post-nav{display:grid;gap:12px;margin:8px 0 10px}
.post-nav a{display:block;padding:12px 14px;color:var(--ink);font-weight:800;line-height:1.3;text-decoration:none}
.post-nav a:hover{background:var(--band)}
.post-nav .lbl{margin-bottom:4px}
.post-nav__next{text-align:right}
@media(min-width:700px){.post-nav{grid-template-columns:1fr 1fr}.post-nav__next:only-child{grid-column:2}}

/* archives + search: toy-block card grid */
.arch{padding-bottom:24px}
.arch-head{padding:18px 0 10px}
.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}
.arch-sub{margin:0 0 20px}
.arch-sub>summary{cursor:pointer;list-style:none;box-shadow:var(--sh-s)}
.arch-sub>summary::-webkit-details-marker{display:none}
.arch-sub[open]>summary{background:var(--ink);color:#fff;margin-bottom:12px}
.cards{display:grid;gap:18px;margin:0 0 8px;padding:0;list-style:none}
.pcard{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.pcard__img{display:block;aspect-ratio:16/10;background:var(--band);border-bottom:var(--b)}
.pcard__img img{display:block;width:100%;height:100%;object-fit:cover}
.pcard__img--ph{display:grid;place-items:center;aspect-ratio:auto;height:64px}
.pcard__img--ph img{width:auto;height:44px;object-fit:contain}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.pcard .lbl{align-self:flex-start;padding:2px 8px;border-radius:6px;background:var(--lilac);color:var(--ink);margin:0 0 8px}
.pcard h2{margin:0 0 6px;font-size:1.2rem;line-height:1.25;text-decoration:none!important}
.pcard h2 a{color:var(--ink);text-decoration:none}
.pcard h2 a::after{content:"";position:absolute;inset:0}
.pcard:hover{background:var(--zebra)}
.pcard:focus-within{outline:3px solid var(--link);outline-offset:3px}
.pcard h2 a:focus-visible{outline:0}
.pcard p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
@media(min-width:40em){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:62em){.cards{grid-template-columns:repeat(3,1fr)}}
.pagination{margin:26px 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:var(--b);border-radius:12px;background:#fff;color:var(--ink);font:700 16px/1 var(--fd);text-decoration:none;box-shadow:var(--sh-s)}
a.page-numbers:hover{background:var(--band)}
.page-numbers.current{background:var(--ink);color:#fff}
.page-numbers.dots{border:0;background:none;box-shadow:none;min-width:24px;padding:0}
.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;min-height:48px;padding:0 14px;border:var(--b);border-radius:12px;background:#fff;color:var(--ink);font:inherit}
.search-form .btn-brand{flex:none;min-height:48px;border-radius:12px}
.none{margin:10px 0 18px;padding:14px 16px;border:var(--b);border-radius:14px;background:var(--band)}
.none p:last-child{margin:0}

/* 404 */
.e404{padding-top:22px;padding-bottom:10px}
.e404 .num{min-width:88px;height:56px;font-size:1.8rem;margin-bottom:14px;transform:rotate(-2deg)}
.e404 h1{max-width:20ch}
.e404 .lede{max-width:60ch;color:var(--ink-2)}
@media(min-width:48em){.e404 .xlinks{grid-template-columns:repeat(4,1fr)}}

/* full-width page template (page-fullwidth.php) + front page fallback */
.page-full{padding-bottom:24px}
.page-full>.wrap>.entry{max-width:none}
.home-hero{padding:26px 0 30px;background:var(--band);border-bottom:var(--b)}
.home-hero h1{max-width:22ch}
.home-hero .lede{max-width:62ch}
.home-hubs{padding-block:30px 6px}
.home-latest{padding-block:10px 24px}

/* footer: navy with the scalloped "toy-store awning" edge */
.site-footer{position:relative;margin-top:30px;padding:30px 0 22px;background:var(--ink);color:var(--bg)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;background:radial-gradient(circle at 12px 14px,var(--ink) 11px,transparent 11.5px) 0 0/24px 14px repeat-x}
.site-footer a{color:var(--bg)}
.site-footer :focus-visible{outline-color:var(--sky)}
.ft-brand{display:inline-block;margin:0 0 12px;padding:6px 12px;background:#fff;border:2px solid #C9D3E6;border-radius:14px}
.ft-brand img{display:block;width:auto;height:52px}
.ft-blurb{max-width:60ch;color:#E6EAF3}
.ft-disc{display:inline-block;margin:0 0 6px;padding:8px 12px;border:1.5px dashed #C9D3E6;border-radius:10px;font-weight:800}
.ft-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px 20px;margin:12px 0 8px}
.ft-nav .lbl{color:var(--accent);margin:12px 0 2px}
.ft-nav ul,.ft-legal{list-style:none;padding:0;margin:0}
.ft-nav a,.ft-legal a{display:inline-block;padding:11px 0;font-weight:700;line-height:1.3}
/* "New on the site" (the 5 newest posts): a full-width row of titles on phones/tablets, the first, wider column from 900px */
.ft-new{grid-column:1/-1}
.ft-new li+li{border-top:1px solid #34456A}
.ft-new a{padding:9px 0}
@media(min-width:900px){.ft-nav{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}.ft-new{grid-column:auto;padding-right:8px}}
.site-footer .pill{background:none;color:var(--bg);border-color:#C9D3E6;box-shadow:none}
.site-footer .pill:hover{background:#2C3D60}
.ft-legal{display:flex;flex-wrap:wrap;gap:0 16px;margin:16px 0 6px}
.copy{color:#C9D3E6;font-size:15px;margin:16px 0 0}

/* post hero (featured image under the byline; uncropped) */
.post-hero{margin:4px 0 18px}
.post-hero__img{display:block;width:100%;height:auto;border:2px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--line);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, while focused, or while Search/Menu is open */
.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:80px}
/* back to top: after ~2 screens; raised above AdSense's bottom anchor ad */
.to-top{position:fixed;right:12px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--line);border-radius:50%;background:#FFF;color:var(--ink);box-shadow:3px 3px 0 var(--line);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}
@media (prefers-reduced-motion:reduce){.site-header,.to-top{transition:none}}
@media print{.to-top{display:none}}

/* ===== 02-content.css ===== */
/* 02-content.css · Content (key "cnt"). The existing Best Playground Sets post content (core blocks, old popcorn2 presets,
   UAGB/Spectra images, FAQs and post grids, the classic AI-image galleries, YouTube, the old "View On Amazon" buttons,
   tables) in the Toybox look. Pairs with inc/40-content.php (which adds the classes named here).
   Scoped to .entry (the_content). WordPress prints block CSS, global presets (with !important) and plugin CSS AFTER this
   file, so rules carry .entry for specificity and core presets are remapped through their CSS variables.
   Colour rules (Kevin): yellow (--cta) is ONLY the Amazon button; little red (none here); key bullets blue; verdicts and
   picks green; tables zebra. AdSense: nothing here clips, hides or targets ads; no overflow/contain on .entry itself. */

/* 1. presets: the core palette + font sizes resolve to Toybox values inside the article; popcorn2 classes (its palette
      is gone under bpstoybox) get Toybox values too. Nothing resolves to yellow or red. */
.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.15em;--wp--preset--font-size--x-large:1.25em;--wp--preset--font-size--huge:1.25em;
--wp--preset--color--black:var(--ink);--wp--preset--color--white:#fff;--wp--preset--color--vivid-red:var(--ink);--wp--preset--color--luminous-vivid-amber:#FFEDE3;--wp--preset--color--luminous-vivid-orange:#FFEDE3;
--wp--preset--color--pale-cyan-blue:var(--band-2);--wp--preset--color--vivid-cyan-blue:var(--link);--wp--preset--color--cyan-bluish-gray:var(--band);--wp--preset--color--pale-pink:#FFF0F5;--wp--preset--color--light-green-cyan:var(--band);--wp--preset--color--vivid-green-cyan:var(--pick);--wp--preset--color--vivid-purple:var(--ink)}
.entry :is(.has-medium-font-size,.has-normal-font-size,.has-regular-font-size,[class*="has-popcorn-font-"]){font-size:1em}
.entry :is(.has-small-font-size,.has-popcorn-font-s-font-size){font-size:15px;line-height:1.5}
.entry :is(.has-large-font-size,.has-x-large-font-size){font-size:1.15em;line-height:1.45}
.entry :is(.has-popcorn-primary-color-color,.has-custom-color-1-color,.has-vivid-red-color){color:var(--ink)}
.entry :is(.has-popcorn-secondary-color-color,.has-popcorn-info-text-color,.has-vivid-cyan-blue-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-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){background-color:var(--band-2)}
.entry :is(.has-popcorn-quaternary-color-background-color,.has-popcorn-element-background-background-color,.has-popcorn-success-background-background-color){background-color:var(--band)}
.entry :is(.has-popcorn-warning-background-background-color,.has-popcorn-error-background-background-color){background-color:#FFEDE3}
.entry :is(.has-popcorn-primary-color-background-color,.has-custom-color-1-background-color,.has-vivid-red-background-color,.has-popcorn-tertiary-color-background-color,.has-popcorn-senary-color-background-color){background-color:var(--ink);color:#fff}
.entry .has-popcorn-quinary-color-background-color{background-color:#fff}
.entry .popcorn-box-shadow{border:var(--b);border-radius:var(--r);box-shadow:var(--sh-s)}
/* pasted inline colours: the yellow highlight goes mint (yellow = Amazon only), red text goes navy */
.entry [style*="fbeeb8" i]{background-color:var(--hl)!important}
.entry [style*="color:#ff0000" i]:not(hr),.entry [style*="color: #ff0000" i]:not(hr),.entry [style*="color:#fe0000" i]:not(hr){color:var(--ink)!important}
.entry :is(h1,h2,h3,h4,h5,h6) [style*="color"]{color:inherit!important}
.entry mark{background:var(--hl);color:inherit}
.entry mark.has-inline-color,.entry blockquote mark{background:none}

/* 2. type: headings, lists, links */
.entry>:is(h2,h3,h4,h5,h6){margin-top:1.4em}
.entry>:is(h2,h3):first-child{margin-top:0}
.entry :is(h2,h3,h4) a{color:inherit}
.entry :is(h2,h3,h4) :is(strong,b){font-weight:inherit}
.entry>h4{font:600 1.12rem/1.25 var(--fd);margin-bottom:.4em}
.entry>:is(h5,h6){font:800 14.5px/1.35 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.3em}
.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(--link);font-size:1.15em}
.entry ol:where(:not([class]),.wp-block-list)>li::marker{color:var(--link);font-weight:800;font-family:var(--fd)}
.entry li>:is(ul,ol){margin:.3em 0 .4em}
.entry p:empty{display:none}
.entry pre{overflow-x:auto;max-width:100%;padding:12px;border-radius:10px;background:#fff;border:1.5px solid var(--hair);font-size:15px}
.entry a:not([class]){overflow-wrap:anywhere}
/* popcorn2 icon list styles (61 check, 10 chevron, 7 arrow, 4 star, 2 heart, 2 plus, 1 play): drawn as Toybox markers.
   Star becomes the blue hub (a star next to products could read like a rating). */
.entry ul[class*="is-style-popcorn-icon-"]{list-style:none;padding-left:0}
.entry ul[class*="is-style-popcorn-icon-"]>li{position:relative;padding-left:1.9em}
.entry ul[class*="is-style-popcorn-icon-"]>li::before{content:"";position:absolute;left:0;top:.22em;width:1.25em;height:1.25em;border-radius:50%;background:var(--accent) center/62% no-repeat;border:1.5px solid var(--line)}
.entry ul.is-style-popcorn-icon-check>li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231D2A44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.entry ul:is(.is-style-popcorn-icon-chevron,.is-style-popcorn-icon-arrow,.is-style-popcorn-icon-play)>li::before{background-color:var(--sky);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%231D2A44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.entry ul.is-style-popcorn-icon-plus>li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%231D2A44' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.entry ul.is-style-popcorn-icon-heart>li::before{background-color:var(--pink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.5S2.5 10 2.5 6.3A2.8 2.8 0 0 1 8 5a2.8 2.8 0 0 1 5.5 1.3C13.5 10 8 13.5 8 13.5z' fill='%231D2A44'/%3E%3C/svg%3E")}
.entry ul.is-style-popcorn-icon-star>li::before{border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Ccircle r='9.5' fill='%231D2A44'/%3E%3Ccircle r='7.8' fill='%239CCBFF'/%3E%3Ccircle r='5.2' fill='%231D5FA3'/%3E%3Cpath d='M0-5v10M-5 0h10M-3.5-3.5l7 7M3.5-3.5l-7 7' stroke='%23fff' stroke-width='1.2'/%3E%3Ccircle r='1.7' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}

/* 3. callouts */
/* .note: pale-cyan highlights (762), grey #e9e9e9 intros, popcorn info, amber: a calm blue rail */
.entry .note{margin:1.2em 0;padding:12px 16px 13px 16px;border-left:5px solid var(--link);border-radius:0 14px 14px 0;background:var(--band-2)}
.entry :is(ul,ol).note{padding:12px 16px 12px 2.2em}
.entry :is(ul,ol).note>li:first-child{margin-top:0}
.entry .note>:last-child,.entry .note>.wp-block-group__inner-container>:last-child{margin-bottom:0}
.entry .note.has-text-align-center{text-align:left}
/* back-to-back highlighted paragraphs read as one box */
.entry .note:has(+.note){margin-bottom:0;padding-bottom:6px;border-bottom-right-radius:0}
.entry .note+.note{margin-top:0;padding-top:6px;border-top-right-radius:0}
/* .bpt-hurry: "In a hurry?" / "Looking for a ...?" (grey #e1e6e9, 31 posts): the Toybox hurry box, lead words as a tag */
.entry .bpt-hurry{margin:1.2em 0;padding:12px 16px 13px;border:var(--b);border-radius:var(--r);background:var(--band-2);font-size:16px;line-height:1.5}
.entry .bpt-hurry>strong:first-child,.entry .bpt-hurry>b:first-child{display:table;margin:0 0 6px;padding:3px 10px 2px;border-radius:99px;background:var(--ink);color:#fff;font:600 13.5px/1.3 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.entry .bpt-hurry>:is(strong,b):first-child+br{display:none}
.entry .bpt-hurry a u{text-decoration:none}
/* .bpt-also: "Related Article : ..." (cyan-bluish-gray) */
.entry .bpt-also{margin:1.2em 0;padding:10px 14px;border:2px dashed var(--line);border-radius:12px;background:#fff;font-weight:700}
/* .bpt-tip: popcorn "alert" groups (info blue, quaternary grey, element): a mint toy block */
.entry .wp-block-group.bpt-tip{margin:1.4em 0;padding:14px 16px;border:var(--b);border-radius:var(--r);background:var(--band);box-shadow:var(--sh-s)}
.entry .wp-block-group.bpt-tip--warn{background:#FFEDE3}
.entry .bpt-tip :is(p,li){font-weight:inherit}
.entry .bpt-tip p strong em,.entry .bpt-tip p em strong{font-style:normal}
.entry .bpt-tip>.wp-block-group__inner-container>:last-child,.entry .bpt-tip>:last-child{margin-bottom:0}
.entry .wp-block-group{margin:1.2em 0}
.entry :is(.wp-block-group,.wp-block-group__inner-container)>:last-child{margin-bottom:0}
.entry div.has-background:not(.bpt-tip){padding:14px 16px;border-radius:14px}
.entry p.has-background:not(.note):not(.bpt-hurry):not(.bpt-also){padding:12px 16px;border-radius:14px}
/* "use at your own risk" (reusable block 7023): a small grey note */
.entry p.risk{margin:1.6em 0 20px;padding-top:12px;border-top:2px dashed var(--hair);font-size:14.5px!important;line-height:1.5;color:var(--ink-2)}
.entry p.risk strong{display:block;color:var(--ink)}
.entry p.risk br{display:none}
.entry hr+p.risk{padding-top:0;border-top:0}
/* verdict (green) */
.entry p.verdict{margin:1em 0 1.3em}
.entry .verdict>:is(strong,b):first-child{display:inline-block;margin-right:6px;padding:3px 9px 2px;border-radius:99px;background:var(--pick);color:#fff;font:600 13px/1.3 var(--fd);letter-spacing:.05em;text-transform:uppercase}
/* "Best For:" lines in the AI buying guides: a lilac sticker label + the sentence */
.entry .bpt-bestfor{padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.entry .bpt-bestfor>strong:first-child{display:inline-block;margin-right:6px;padding:2px 9px 1px;border:1.5px solid var(--line);border-radius:99px;background:var(--lilac);font:600 13px/1.3 var(--fd);letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}

/* 4. separators, spacers, quotes */
.entry hr,.entry hr.wp-block-separator{width:auto;height:0;margin:2em 0;border:0;border-top:2px dashed var(--hair);background:none;color:inherit;opacity:1}
.entry hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:96px;margin-inline:auto;border-top:3px solid var(--ink);border-radius:3px}
.entry .wp-block-spacer{max-height:36px}
@media(min-width:900px){.entry .wp-block-spacer{max-height:56px}}
.entry blockquote{position:relative;margin:1.5em 0;padding:16px 18px 16px 58px;border:var(--b);border-radius:var(--r);background:#fff;box-shadow:var(--sh-s);font-size:1.02em}
.entry blockquote::before{content:"\201C";position:absolute;left:12px;top:14px;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--line);border-radius:10px;background:var(--accent);font:700 30px/1 var(--fd);padding-top:12px}
.entry blockquote p{font-style:normal}
.entry blockquote>:last-child{margin-bottom:0}
.entry blockquote cite{display:block;margin-top:6px;font-size:14.5px;font-style:normal;color:var(--ink-2)}
.entry blockquote :is(.note,.has-background,[style*="fbeeb8" i]){margin:0 0 1em;padding:0;border:0;border-radius:0;background:none!important}

/* 5. images. Content photos (core image, UAGB image, the classic gallery wrappers) sit on a white mat in a navy frame,
      centred at their own size; tall Pinterest-style gallery images (575x1025) are capped so one photo never fills
      more than a screen. Amazon product photos get the solid blue frame (Kevin). Images are never modified. */
.entry :is(.wp-block-image,.wp-block-uagb-image,.bpt-photo){margin:1.5em 0}
.entry :is(.wp-block-image,.wp-block-uagb-image__figure,.bpt-photo) img{display:block;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-uagb-image__figure{margin:0}
.entry .bpt-photo,.entry .wp-block-image:not(.is-resized):not(.size-thumbnail):not(:has(a[href*="amazon."])),.entry .wp-block-uagb-image__figure{justify-self:center;width:fit-content;max-width:100%;margin-inline:auto;padding:6px;border:var(--b);border-radius:var(--r);background:#fff;box-shadow:var(--sh-s)}
.entry .bpt-photo{margin-block:1.3em 1.6em}
.entry .bpt-photo img{width:auto;max-height:min(82vh,820px);margin:0 auto}
.bpt-idea .entry .wp-block-image img{width:auto;max-height:min(82vh,820px)}
.entry .wp-block-uagb-image{display:grid}
.entry .wp-block-image.aligncenter,.entry .wp-block-image .aligncenter{margin-inline:auto}
.entry .wp-block-image.is-resized{display:table;margin-inline:auto}
.entry .wp-block-image.is-resized img{border:var(--b);border-radius:var(--r);box-shadow:var(--sh-s)}
.entry :is(.wp-block-image,.wp-block-uagb-image) :is(figcaption,.wp-element-caption,.uagb-image-caption){margin:8px 4px 2px;text-align:center;font-size:15px;line-height:1.45;color:var(--ink-2)}
.entry .wp-block-image:is(.alignleft,.alignright){max-width:50%}
@media(max-width:39.99em){.entry .wp-block-image:is(.alignleft,.alignright){float:none;max-width:100%;margin-inline:auto}}
.entry :is(.wp-block-table td,.wp-block-image,.entry>p,.bpt-photo) a:is([href*="amazon.com"],[href*="amzn.to"])>img{padding:6px;border:2px solid var(--frame);border-radius:12px;background:#fff}
.entry .bpt-photo:has(>a[href*="amazon."]){padding:0;border:0;box-shadow:none;background:none}
.entry img.aligncenter{margin-inline:auto}

/* 6. tables (block + classic, see inc): framed toy block, mint header, zebra rows; 3+ columns stack on phones */
.entry .wp-block-table{margin:1.5em 0;overflow-x:auto;border:var(--b);border-radius:var(--r);background:#fff;box-shadow:var(--sh-s)}
.entry .wp-block-table.is-style-stripes{border-bottom:var(--b)}
.entry .wp-block-table table{width:100%;margin:0;border-collapse:collapse;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}
.entry .wp-block-table :is(th,td){padding:10px 12px;border:0;border-top:1.5px solid var(--hair);text-align:left;vertical-align:top;word-break:normal;overflow-wrap:break-word;hyphens:auto}
.entry .wp-block-table thead{border:0}
.entry .wp-block-table :is(thead th,tr.bpt-hrow th){border-top:0;background:var(--band);color:var(--ink);font:600 15px/1.3 var(--fd);letter-spacing:.02em}
.entry .wp-block-table tbody td{background:#fff}
.entry .wp-block-table tbody tr:nth-child(even)>*{background:var(--tbl-zebra,#F8F1E5)}
.entry .wp-block-table tbody td:first-child:not(:only-child){font-weight:800}
.entry .wp-block-table tbody th{font-weight:800}
.entry .wp-block-table tbody tr:first-child>*{border-top:0}
.entry .wp-block-table thead+tbody tr:first-child>*{border-top:1.5px solid var(--hair)}
.entry .wp-block-table :is(figcaption,.wp-element-caption){margin:0;padding:8px 12px;border-top:1.5px solid var(--hair);font-size:14.5px;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 td :last-child{margin-bottom:0}
@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:9px 10px}
.entry .wp-block-table.bpt-stack{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.entry .bpt-stack :is(table,tbody,tr,td,th){display:block;width:auto}
.entry .bpt-stack :is(thead,tr.bpt-hrow){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.entry .bpt-stack tbody tr{margin:0 0 12px;border:var(--b);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-s)}
.entry .wp-block-table.bpt-stack tbody tr>*{padding:7px 14px;border:0;background:#fff}
.entry .wp-block-table.bpt-stack tbody tr>*+*{border-top:1.5px solid var(--hair)}
.entry .wp-block-table.bpt-stack tbody tr>:is(td,th):first-child{padding:10px 14px;background:var(--band);font:600 17px/1.3 var(--fd)}
.entry .wp-block-table.bpt-stack tbody tr>:last-child{padding-bottom:11px}
.entry .bpt-stack [data-label]::before{content:attr(data-label);display:block;margin-bottom:1px;font:800 12px/1.3 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.entry .bpt-stack .bpt-stack-buy{display:flex;margin:8px 0 4px;text-decoration:none}}
.entry .bpt-stack-buy{display:none}

/* 7. YouTube: the original iframes (loading="lazy"), rounded 16:9 frames. The classic div.embed-youtube keeps its own
      padding-bottom:56.25% box; block embeds keep core's aspect-ratio box. */
.entry .embed-youtube{margin-block:1.3em 1.6em!important;border:var(--b);border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--sh-s)}
.entry .embed-youtube iframe{display:block}
.entry figure.bpt-yt{margin:1.5em 0}
.entry figure.bpt-yt .wp-block-embed__wrapper{border:var(--b);border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--sh-s)}
.entry .wp-block-embed.wp-has-aspect-ratio:not(.bpt-yt) .wp-block-embed__wrapper{border-radius:var(--r);overflow:hidden}
.entry .wp-block-embed :is(figcaption,.wp-element-caption){margin-top:8px;font-size:15px;color:var(--ink-2)}

/* 8. buttons. Amazon links = the yellow "Check at Amazon" button; everything else navy. */
.entry .bpt-cta{margin:18px 0 28px;text-align:center}
.entry .bpt-cta .btn-amz{max-width:440px}
.entry .bpt-cta .btn-brand{min-height:48px}
.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:.45em;min-height:48px;padding:.55em 1.2em;border:var(--b);border-radius:99px;background:var(--ink);color:#fff;font:800 1rem/1.15 var(--fb);text-decoration:none;box-shadow:var(--sh-s)}
.entry .wp-block-button__link:hover{background:#2C3D60;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"]){width:100%;background:var(--cta);color:var(--cta-ink);box-shadow:3px 3px 0 #1D2A44}
.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:var(--cta-hover);color:var(--cta-ink);text-decoration:underline}
.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:.5em;height:.5em;margin-left:.15em;border:solid currentColor;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}

/* 9. pros/cons (the AI buying guides' "Pros:"/"Cons:" lists, rebuilt by inc), Key Takeaways box, FAQ cards */
.entry .bpt-pc{margin:1em 0 1.2em}
.entry .bpt-pc .pros .pc-h{background:var(--accent)}
.entry .bpt-pc ul{font-size:16px}
.entry .bpt-pc li{position:relative;margin:.35em 0;padding-left:28px}
.entry .bpt-pc li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border:1.5px solid var(--line);border-radius:50%;background:var(--accent) center/70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231D2A44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.entry .bpt-pc .cons li::before{background-color:var(--warn);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' stroke='%231D2A44' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.entry .bpt-pc li strong{font-weight:800}
.entry .bpt-keys{margin:0 0 1.6em;padding:14px 16px 4px;border:var(--b);border-radius:var(--r);background:var(--band);box-shadow:var(--sh)}
.entry .bpt-keys h2{margin:0 0 .45em;font-size:1.3rem;text-decoration:none}
.entry .bpt-keys .hubs{margin:0 0 10px}
.entry .bpt-keys :is(.wp-block-uagb-image,.wp-block-image,.bpt-photo){margin:4px 0 12px}
.entry .bpt-keys .hubs li{margin:.45em 0}
@media(max-width:699.98px){.entry .bpt-keys{padding:12px 14px 2px}.entry .bpt-keys .hubs{font-size:16px;line-height:1.5}.entry .bpt-keys .hubs li{margin:.3em 0}}
.entry .bpt-qa{margin:0 0 14px;padding:14px 16px 4px;border:var(--b);border-radius:14px;background:#fff;box-shadow:var(--sh-s)}
.entry .bpt-qa>h3{display:flex;gap:10px;align-items:flex-start;margin:0 0 .5em;font-size:1.15rem;line-height:1.3}
.entry .bpt-qa>h3::before{content:"Q";flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:-2px;border-radius:9px;background:var(--ink);color:#fff;font:900 15px/1 var(--fb)}
.entry .bpt-qa>:not(h3){margin-left:40px}
.entry .bpt-qa>:last-child{margin-bottom:10px}
@media(max-width:479.98px){.entry .bpt-qa>:not(h3){margin-left:0}}
.entry h2+.bpt-qa{margin-top:.2em}
@media(min-width:900px){.entry .bpt-qa>h3{font-size:1.2rem}}

/* 10. inspiration posts: number blocks before the numbered idea H2s (inc adds data-n when the title count matches) */
.entry h2.bpt-num::before{content:attr(data-n);display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin:0 .4em .12em 0;padding:0 .2em;border:var(--b);border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--line);font:700 .78em/1 var(--fd);vertical-align:middle;text-decoration:none}
.entry h2.bpt-num[data-c="1"]::before{background:var(--accent)}
.entry h2.bpt-num[data-c="2"]::before{background:var(--sky)}
.entry h2.bpt-num[data-c="3"]::before{background:var(--lilac)}

/* 11. UAGB/Spectra FAQ (2 posts): the plugin's accordion keeps working; the items look like Toybox FAQ rows */
.entry .wp-block-uagb-faq{margin:1em 0 1.6em}
.entry .wp-block-uagb-faq .uagb-faq__wrap,.entry .wp-block-uagb-faq.uagb-faq__wrap{display:grid;gap:10px}
.entry .wp-block-uagb-faq .uagb-faq-child__outer-wrap.uagb-faq-item{margin:0;border:var(--b)!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--sh-s);overflow:hidden}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-faq-questions-button{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px!important;background:#fff!important;cursor:pointer}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-question{flex:1;order:1;color:var(--ink)!important;font:600 1.08rem/1.3 var(--fd)!important}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-question strong{font-weight:inherit}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-faq-icon-wrap{order:2;flex:none;align-items:center;justify-content:center;width:30px!important;height:30px!important;margin:0!important;border:var(--b);border-radius:50%;background:var(--accent)}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-faq-icon-wrap svg{width:12px!important;height:12px!important;fill:var(--ink)!important}
.entry .wp-block-uagb-faq .uagb-faq-item.uagb-faq-item-active .uagb-faq-icon-wrap{background:#fff}
.entry .wp-block-uagb-faq .uagb-faq-item .uagb-faq-content{padding:0 16px 12px!important;background:#fff!important;color:var(--ink)!important;font-size:1em}
.entry .wp-block-uagb-faq .uagb-faq-content p:last-child{margin-bottom:0}

/* 12. UAGB/Spectra post grids on the hub pages (/playground-info/ ...): Toybox archive cards, navy "Read More" (their
       yellow/red plugin colours go: yellow is Amazon-only). The grid reaches the 1120px band. */
.flow>.entry>.wp-block-uagb-post-grid{grid-column:wide}
.entry .wp-block-uagb-post-grid.uagb-post-grid{gap:18px!important;margin:1.4em 0 1em}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__inner-wrap{display:flex;flex-direction:column;padding:0!important;border:var(--b);border-radius:var(--r);background:#fff!important;box-shadow:var(--sh)!important;overflow:hidden;text-align:left}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__inner-wrap:hover{background:var(--zebra)!important}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__inner-wrap .uagb-post__image{margin:0!important;padding:0!important;border-bottom:var(--b)}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__image::before{content:none}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__inner-wrap>.uagb-post__text{margin:0 16px!important;padding:0!important}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__text.uagb-post__title{margin-top:14px!important;margin-bottom:4px!important;font:600 1.18rem/1.25 var(--fd);color:var(--ink)}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__text.uagb-post__title a{color:var(--ink);text-decoration:none}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__text.uagb-post__title a:hover{text-decoration:underline}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post-grid-byline{margin-bottom:6px!important;font-size:14px;color:var(--ink-2)}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post-grid-byline .dashicons{display:none}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__excerpt{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__excerpt p{margin:0 0 12px}
.entry .wp-block-uagb-post-grid.uagb-post-grid .uagb-post__inner-wrap>.uagb-post__cta{margin-top:auto!important;margin-bottom:16px!important}
.entry .wp-block-uagb-post-grid.uagb-post-grid .wp-block-button.uagb-post__text.uagb-post__cta .uagb-text-link.wp-block-button__link{display:inline-flex;min-height:44px;padding:.45em 1.1em;border:var(--b)!important;border-radius:99px;background:var(--ink)!important;color:#fff!important;font:800 15.5px/1.15 var(--fb);box-shadow:var(--sh-s)}
.entry .wp-block-uagb-post-grid.uagb-post-grid .wp-block-button.uagb-post__text.uagb-post__cta .uagb-text-link.wp-block-button__link:hover{background:#2C3D60!important}
.entry .uagb-post-pagination-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center!important;margin:18px 0 0!important}
.entry .uagb-post-pagination-wrap .page-numbers{border:var(--b)!important;background:#fff!important;color:var(--ink)!important}
.entry .uagb-post-pagination-wrap .page-numbers.current{background:var(--ink)!important;color:#fff!important}
.entry .uagb-post-pagination-wrap .page-numbers.dots{border:0!important;background:none!important}

/* ===== 03-plugins.css ===== */
/* 03-plugins.css · Plugins (key "plg"): KS Product Engine boxes + comparison tables + keyword lists + notice, Affiliatable
   boxes (product box, pros/cons, top 3, versus), Easy TOC, WPForms. Markup: inc/50-plugins.php and
   ks-product-engine/{box,table}.php. The engine's, Affiliatable's and ez-toc's own CSS is not printed (50-plugins.php);
   WPForms' CSS stays (contact page only) and is overridden here. Yellow (--cta) is ONLY on Amazon links. Amazon photos
   are only contained (object-fit), never cropped, filtered or overlaid.
   AdSense: nothing here targets ins.adsbygoogle / .google-auto-placed, and no box, card or table wrapper gets
   overflow:hidden, contain or container-type (only a photo frame clips its own photo; the desktop table scrolls sideways
   inside its own wrapper if it ever has to). Unknown children of the product-box grid span its full width. */

/* ---------- the engine's "Check at Amazon" anchors (a.ks-btn keeps the engine's classes): same look as .btn-amz ---------- */
.ks-pe a.ks-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;width:100%;min-height:48px;padding:.5em 1.15em;border:var(--b);border-radius:99px;background:var(--cta);color:var(--cta-ink);font:800 1.05rem/1.15 var(--fb);text-align:center;text-decoration:none;box-shadow:3px 3px 0 #1D2A44;cursor:pointer}
.ks-pe a.ks-btn:hover{background:var(--cta-hover);text-decoration:underline}
.ks-pe a.ks-btn:active{transform:translate(2px,2px);box-shadow:none}
.ks-pe a.ks-btn::after{content:"";flex:none;width:.5em;height:.5em;margin-left:.15em;border:solid currentColor;border-width:3px 3px 0 0;transform:rotate(45deg)}
.amazon_wrapper:empty{display:none}

/* ---------- product box: engine [amazon box] (.bpt-pe) and Affiliatable (.bpt-aff) ----------
   phone (Kevin): number/label + badges, name, FULL-WIDTH photo on its own line, yellow button right under it.
   from 700px: photo left (240px), name + button (+ verdict) right. */
.product{position:relative}
.product>.product__top{margin-bottom:10px}
.bpt-pm{display:grid;gap:12px}
.bpt-pm>*{min-width:0;margin:0}
.product .product__name{font:600 1.25rem/1.25 var(--fd);margin:0}
.product__name a{color:var(--ink);text-decoration:none}
.product__name a:hover{text-decoration:underline}
.product .pframe{width:100%}
.pframe>a,.pframe>.ks-tb__thumb{display:block;width:100%;height:100%}
.bpt-buy{margin:0}
.bpt-buy .btn-amz{display:flex;width:100%}
.bpt-pm>.verdict{margin:0}
.bpt-pb{margin-top:16px}
.bpt-pb>:first-child{margin-top:0}
.bpt-pb>:last-child{margin-bottom:0}
.product .bpt-pb :is(h2,h3,h4){margin:1.1em 0 .4em;font-size:1.15rem;text-decoration:none}
.bpt-pb ul:not(.hubs):not(.ul0) li::marker{color:var(--frame)}
.bpt-pb .hubs{margin-bottom:1em}
.bpt-pb .proscons{margin:16px 0}
.bpt-kf{margin:1.1em 0 6px}
.bpt-buy2{margin-top:16px}
.bpt-hl{padding:0 .15em;border-radius:3px;background:var(--band);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.verdict .bpt-hl,.note .bpt-hl,.bpt-bestfor .bpt-hl{padding:0;background:none}
.bpt-pb>.bpt-bestfor,.bpt-pb>.note{margin:1em 0}
.bpt-pc-one{grid-template-columns:1fr!important}
/* phones: the photo stays full width but its frame is capped at 230px tall (the photo is contained, never cropped), so
   the first yellow button of a buyer's guide sits no lower than on popcorn2 */
@media(max-width:699.98px){.product .pframe{aspect-ratio:auto;height:230px}}
@media(min-width:700px){
.bpt-pm{grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:22px;row-gap:12px;align-items:start}
.bpt-pm>.pframe{grid-column:1;grid-row:1/span 3}
.bpt-pm>.product__name{grid-column:2;grid-row:1}
.bpt-pm>.bpt-buy{grid-column:2;grid-row:2;max-width:380px}
.bpt-pm>.verdict{grid-column:2;grid-row:3}
.bpt-pm>:not(.pframe,.product__name,.bpt-buy,.verdict){grid-column:1/-1}
.bpt-pm:not(:has(>.pframe))>*{grid-column:1/-1;grid-row:auto}
.product .product__name{font-size:1.4rem}}

/* engine badges: stickers ("Popular on Amazon" pink, "Only a few left" peach, "On sale" moss, "Limited-time deal" sky).
   The offer badges keep the engine's "(as of ..., Details)" stamp, on its own line; they are not tilted. */
.ks-box__badges,.ks-tb__badges{display:contents}
.ks-badge{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;max-width:100%;padding:.3em .75em;border:var(--b);border-radius:14px;background:#fff;color:var(--ink);font:800 .85rem/1.3 var(--fb);box-shadow:var(--sh-s)}
.ks-badge--editorial{transform:rotate(-2deg);border-radius:99px}
.ks-badge--popular{background:var(--pink)}
.ks-badge--reader{background:var(--lilac)}
.ks-badge--top{background:var(--accent)}
.ks-badge--scarce{background:var(--warn)}
.ks-badge--sale{background:var(--moss)}
.ks-badge--deal{background:var(--sky)}
.ks-asof{flex-basis:100%;font-weight:600;font-size:.78rem;text-transform:none}
/* "Details": a 24px+ tall tap target; the negative margin keeps the badge's own line height unchanged */
.ks-asof a{display:inline-block;min-height:26px;padding:5px 4px;margin:-5px -4px;color:inherit;line-height:16px;vertical-align:baseline}
.ks-price{font-weight:800}
.ks-price__basis{color:var(--ink-2);font-weight:600}

/* degraded engine box (no API data): label + button */
.bpt-pe--plain .product__name{margin:0 0 12px}
.bpt-pe--plain .bpt-buy{max-width:380px}

/* ---------- engine comparison table: phone/tablet "toy shelf" (swipe cards, the next one peeks in; Toybox pattern b),
   desktop .spec-table from 900px. A card: number + ribbon + "n of N", badges, name, full-width photo frame, yellow
   button, then every spec as a 2-column grid. ---------- */
.bpt-cmp{margin:18px 0 28px}
.bpt-shelf-hint{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--ink-2);font-size:14.5px;font-weight:800}
.bpt-shelf-hint .i{color:var(--ink)}
.bpt-cards{display:grid;gap:18px}
.bpt-shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--g));padding:4px var(--g) 14px;scroll-padding-inline:var(--g);overscroll-behavior-x:contain}
.bpt-shelf:focus-visible{outline:3px solid var(--link);outline-offset:-3px}
.bpt-shelf>.bpt-card{flex:0 0 min(86%,340px);scroll-snap-align:start}
.bpt-shelf>:not(.bpt-card),.bpt-picks>:not(.bpt-pick):not(.bpt-vs){flex:0 0 100%;grid-column:1/-1;min-width:0}   /* anything else that lands in a shelf or picks row (never shrunk to 0) */
.bpt-card{display:flex;flex-direction:column;padding:12px 14px 14px;scroll-margin-top:12px}
.bpt-card>.product__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.bpt-card .bpt-count{margin-left:auto;color:var(--ink-2);font-size:13px;font-weight:800;white-space:nowrap}
.bpt-card .ks-tb__badges{display:flex;flex-wrap:wrap;gap:6px 8px;flex-basis:100%;padding-top:2px}
.bpt-card__name{margin:0 0 10px;font:600 1.1rem/1.25 var(--fd)}
.bpt-card__name a{color:var(--ink);text-decoration:none}
.bpt-card__ph{display:grid;place-items:center;height:190px;margin:0 0 10px;padding:8px;border:2px solid var(--frame);border-radius:12px;background:#fff}
.bpt-card__ph .ks-tb__thumb,.bpt-card__ph .ks-tb__thumb>a{display:grid;place-items:center;width:100%;height:100%}
.bpt-card__ph img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.bpt-card>.bpt-buy{margin:0 0 12px}
.bpt-specs{margin:0}
.bpt-specs dd{overflow-wrap:anywhere}
.bpt-specs>div.hl{background:var(--band-2)}
.bpt-specs>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.bpt-na{color:var(--ink-2);font-weight:600}
/* yes / no: the engine's role="img" spans get the theme's icons + a visible word (their aria-label stays the name) */
.ks-yes,.ks-no{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.ks-yes::before,.ks-no::before{content:"";flex:none;width:20px;height:20px;background:no-repeat center/20px}
.ks-yes::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%231B7F4E'/%3E%3Cpath d='m7.3 12.4 3.1 3.1 6.3-6.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ks-no::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.8' fill='%23fff' stroke='%234A5570' stroke-width='2'/%3E%3Cpath d='m8.6 8.6 6.8 6.8m0-6.8-6.8 6.8' stroke='%234A5570' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.ks-yes::after{content:"Yes"}
.ks-no::after{content:"No";color:var(--ink-2)}
.bpt-tbl{display:none;margin:0}
@media(min-width:900px){
.bpt-cards,.bpt-shelf-hint{display:none}
.bpt-tbl{display:block;overflow-x:auto;padding:0 4px 6px 0}
.flow>.entry>.bpt-cmp--wide,.flow>.entry>.amazon_wrapper:has(>.bpt-cmp--wide){grid-column:wide}
.bpt-tbl .spec-table{table-layout:fixed;min-width:640px;font-size:15.5px}
.bpt-tbl .spec-table :is(th,td){padding:10px 10px;text-align:center;vertical-align:middle;overflow-wrap:anywhere}
/* header: the number always on its own line above the ribbon, every column top-aligned. Photo cells are top-aligned
   too: the frames (all the same square) line up across the row and the badges sit in the space reserved under them */
.bpt-tbl .spec-table thead th{vertical-align:top;padding:12px 8px}
.bpt-tbl .spec-table thead th .num{display:grid;width:fit-content;margin:0 auto 8px}
.bpt-tbl .spec-table thead .ribbon{white-space:normal;text-align:left;font-size:.9rem}
.bpt-tbl .bpt-r--thumb td{vertical-align:top}
.bpt-tbl .ks-tb__thumb+.ks-tb__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.bpt-tbl .spec-table tbody th{width:150px;text-align:left}
.bpt-tbl .spec-table td{font-weight:700}
.bpt-tbl .spec-table tbody tr:nth-child(even)>*{background:#F7F0E4}
.bpt-tbl .spec-table tbody tr:nth-child(odd)>td{background:#fff}
.bpt-tbl .spec-table tbody tr.hl>*{background:var(--band-2)}
.bpt-tbl .bpt-r--title td{font-size:14.5px;line-height:1.35}
.bpt-tbl .bpt-r--title a{color:var(--ink)}
.bpt-tbl .ks-tb__thumb{display:block}
.bpt-tbl .ks-tb__thumb>a{display:grid;place-items:center;aspect-ratio:1;max-width:170px;margin:0 auto;padding:6px;border:2px solid var(--frame);border-radius:10px;background:#fff}
.bpt-tbl .ks-tb__thumb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bpt-tbl .ks-badge{margin:8px 2px 0;font-size:.78rem}
.bpt-tbl .ks-pe a.ks-btn,.bpt-tbl a.ks-btn{min-height:44px;padding:.4em .55em;font-size:.95rem}}

/* ---------- engine keyword list (not used on BPS yet) + the notice the "Details" links point to ---------- */
.ks-list{display:grid;gap:10px;margin:18px 0 24px}
.ks-list .ks-box{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 12px;align-items:center;padding:10px 12px;border:var(--b);border-radius:14px;background:#fff;box-shadow:var(--sh-s)}
.ks-list .ks-box__thumb{grid-row:span 2;aspect-ratio:1;padding:4px;border:2px solid var(--frame);border-radius:10px;background:#fff}
.ks-list .ks-box__thumb a{display:block;height:100%}
.ks-list .ks-box__img{display:block;width:100%;height:100%;object-fit:contain}
.ks-list .ks-box__title{color:var(--ink);font-weight:800;line-height:1.3}
.ks-list a.ks-btn{width:auto;min-height:44px;font-size:.95rem;padding:.4em .9em}
.ks-pe-notice{margin:28px 0 10px;padding:10px 14px;border:1.5px dashed var(--line);border-radius:12px;background:#fff;color:var(--ink-2);font-size:13.5px;line-height:1.5;scroll-margin-top:16px}
.ks-pe-notice:target{outline:3px solid var(--link);outline-offset:3px}
.ks-pe-disclosure{font-size:14.5px;font-style:normal;color:var(--ink-2)}

/* ---------- Affiliatable "top 3" + versus boxes -> .bpt-picks (label, name, photo, yellow button) ---------- */
.bpt-picks{display:grid;gap:14px;margin:18px 0 28px}
.bpt-pick{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px 14px}
.bpt-pick>*{margin:0}
.bpt-pick>.product__top{display:flex;flex-wrap:wrap;gap:8px}
.bpt-pick__name{font:600 1.1rem/1.25 var(--fd)}
.bpt-pick__name a{color:var(--ink);text-decoration:none}
.bpt-pick__name a:hover{text-decoration:underline}
.bpt-pick .pframe{aspect-ratio:auto;height:210px}
.bpt-pick>.bpt-buy{margin-top:auto}
.bpt-pick .btn-amz{padding:.45em .7em;font-size:.98rem}
.bpt-pick__txt{font-size:15px;text-align:center}
.bpt-pick__txt p{margin:0}
.bpt-vs{display:grid;place-items:center;justify-self:center;align-self:center;width:46px;height:46px;border:var(--b);border-radius:50%;background:var(--accent);font:700 1rem/1 var(--fd);text-transform:uppercase;box-shadow:var(--sh-s)}
@media(max-width:699.98px){.bpt-picks--n3{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--g));padding:4px var(--g) 14px;scroll-padding-inline:var(--g);overscroll-behavior-x:contain}.bpt-picks--n3>.bpt-pick{flex:0 0 min(80%,300px);scroll-snap-align:start}.bpt-picks--n3 .pframe{height:170px}}
@media(min-width:540px){.bpt-picks--n2{grid-template-columns:repeat(2,minmax(0,1fr))}.bpt-picks--vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}}
@media(min-width:700px){.bpt-picks--n3{grid-template-columns:repeat(3,minmax(0,1fr))}.bpt-pick .pframe{height:190px}}

/* ---------- Affiliatable leftovers (a shape the transform did not recognise is restyled in place) ---------- */
.cg-bottom-arrow,.cg-versus-icon{display:none}
:is(.cg-box-layout-seven,.cg-choice-box-two,.cg-versus-box-two,.cg-table-six){margin:20px 0;padding:14px;border:var(--b);border-radius:var(--r);background:#fff}
:is(.cg-box-layout-seven,.cg-choice-box-two,.cg-versus-box-two,.cg-table-six) img{display:block;max-height:260px;margin:0 auto 10px;object-fit:contain}
:is(.cg-our-top-pick,.cg-cb-top-pick,.cg-top-pick){display:inline-block;margin:0 0 10px;padding:.32em .9em;border-radius:6px;background:var(--ink);color:#fff;font:600 .95rem/1.1 var(--fd)}

/* ---------- Easy TOC -> <details class="toc"> "On this page" (01-base styles .toc) ---------- */
#ez-toc-container.toc{margin:4px 0 22px}
.toc nav>ol{padding-top:2px}
.toc li>ol{padding:0 0 4px 20px;list-style:lower-alpha;font-size:15.5px}
.toc li>ol>li>ol{list-style:lower-roman}
.toc a{text-underline-offset:3px}
#ez-toc-container:not(details){margin:16px 0 20px;padding:10px 14px;border:var(--b);border-radius:14px;background:#fff}
#ez-toc-container:not(details) .ez-toc-title{margin:0;font:600 1.05rem var(--fd)}
#ez-toc-container:not(details) .ez-toc-title-toggle{display:none}

/* ---------- WPForms (Contact us): Toybox inputs, navy submit (never yellow). Beats wpforms-full.css (0,2,x) ---------- */
.entry div.wpforms-container-full{margin:6px 0 26px}
.entry div.wpforms-container-full .wpforms-form .wpforms-field{padding:0 0 18px;clear:both}
.entry div.wpforms-container-full .wpforms-form .wpforms-field-label{margin:0 0 6px;color:var(--ink);font:800 16px/1.3 var(--fb)}
.entry div.wpforms-container-full .wpforms-form .wpforms-required-label{color:var(--ink-2);font-weight:800}
.entry div.wpforms-container-full .wpforms-form .wpforms-field-sublabel{margin:5px 0 0;color:var(--ink-2);font-size:14px}
.entry div.wpforms-container-full .wpforms-form :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],select,textarea){display:block;width:100%;max-width:100%;height:auto;min-height:48px;padding:10px 14px;border:var(--b);border-radius:12px;background:#fff;color:var(--ink);font:400 17px/1.4 var(--fb);box-shadow:none}
.entry div.wpforms-container-full .wpforms-form textarea[name]{min-height:170px;resize:vertical}
.entry div.wpforms-container-full .wpforms-form :is(input,select,textarea):focus{border-color:var(--ink);outline:3px solid var(--link);outline-offset:2px;box-shadow:none}
.entry div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium{max-width:100%}
.entry div.wpforms-container-full .wpforms-form :is(button[type=submit],input[type=submit]){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.55em 1.6em;border:var(--b);border-radius:99px;background:var(--ink);color:#fff;font:800 1.05rem/1.15 var(--fb);box-shadow:var(--sh-s);cursor:pointer}
.entry div.wpforms-container-full .wpforms-form :is(button[type=submit],input[type=submit]):hover{background:#2C3D60;border-color:var(--ink)}
.entry div.wpforms-container-full .wpforms-form :is(button[type=submit],input[type=submit]):focus-visible{outline:3px solid var(--link);outline-offset:3px}
.entry div.wpforms-container-full .wpforms-form :is(button[type=submit],input[type=submit]):active{transform:translate(2px,2px);box-shadow:none}
.entry div.wpforms-container-full .wpforms-form label.wpforms-error,.entry div.wpforms-container-full .wpforms-form em.wpforms-error{margin-top:6px;color:var(--brand-ink);font-size:15px;font-weight:700}
.entry div.wpforms-container-full .wpforms-form :is(input,select,textarea).wpforms-error{border-color:var(--brand-ink)}
.entry .wpforms-confirmation-container-full{margin:0 0 24px;padding:14px 16px;border:var(--b);border-color:var(--pick);border-radius:14px;background:var(--pick-bg);color:var(--ink)}
@media(max-width:599.98px){.entry div.wpforms-container-full .wpforms-form .wpforms-field-row-block{width:100%;margin:0 0 10px;float:none}}

/* ===== 04-home.css ===== */
/* 04-home.css · Home, archives, search, hub pages (key "home"). Built on the Toybox pieces in 01-base.css (.blk,
   .pill, .chips, .rows, .sec/.band/.sec-h, .morelink, .cards/.pcard). Mockup: rcrideoncars-site/design/toybox/home.html,
   adapted to playgrounds and backyards. No yellow here (--cta is the Amazon button only), almost no red.
   AdSense: nothing here targets ins.adsbygoogle / .google-auto-placed; no clipping on main or the sections. */

/* ================= home (front-page.php, inc/60-home.php) ================= */
.home{display:block}

/* hero: photo first on phones, text | photo from 900px, the finder block full width underneath */
.hero{padding:16px 0 30px}
.hero__grid{display:grid;gap:14px}
.hero__text>:last-child{margin-bottom:0}
.hero h1{margin:0 0 .45em;max-width:21ch}
.hero-k{display:block;margin:0 0 .45em;font:600 .95rem/1.2 var(--fd);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.hero .lede{max-width:60ch}
.hero__photo{position:relative;order:-1;margin:0 6px 12px 0;transform:rotate(-1.2deg)}
.hero__photo img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 40%;border:var(--b);border-radius:20px;box-shadow:var(--sh);background:var(--band)}
.hero__photo .badge{position:absolute;right:12px;bottom:-14px}
.hero__photo .badge .i{color:var(--link)}
.hero--type .hero__grid{max-width:760px}
@media(min-width:600px) and (max-width:899.98px){.hero__photo img{aspect-ratio:5/2}}

/* "Find a guide": grouped chips to the main buying guides */
.finder{margin:22px 0 0;padding:14px 16px 16px;border-radius:20px}
.finder__h{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:1.3rem}
.finder__h .i{width:22px;height:22px;color:var(--link)}
.finder__g{padding-top:10px}
.finder__g+.finder__g{margin-top:12px;padding-top:12px;border-top:2px dashed var(--hair)}
.finder__g .lbl{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.finder__g .lbl .i{width:18px;height:18px;color:var(--link)}
.finder .chips{gap:8px}
.finder .pill{font-size:15.5px;box-shadow:var(--sh-s)}
.finder .pill:hover{background:var(--band-2)}
@media(min-width:900px){
.hero{padding:34px 0 40px}
.hero__grid{grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero__photo{order:0;margin:0 6px 0 0}
.hero__photo img{aspect-ratio:16/10}
.finder{margin-top:30px;padding:18px 24px 22px}
.finder__groups{display:grid;grid-template-columns:1.25fr 1fr 1fr}
.finder__g+.finder__g{margin-top:0;padding:10px 0 0 22px;border-top:0;border-left:2px dashed var(--hair)}
.finder__g:not(:last-child){padding-right:22px}}

/* shared section bits */
.sec-lede{max-width:62ch;margin:-4px 0 16px;color:var(--ink-2)}
.sec-more{margin:20px 0 0}
.sec-more .lbl{margin:0 0 8px}
.sec-more .chips{gap:8px}
.sec-more .pill{font-size:15.5px;box-shadow:var(--sh-s)}

/* top buying guides: phone = compact photo | text rows, 700px+ = photo cards (2 then 3 columns) */
.gcards{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.gcards>li{margin:0}
.gcard{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);height:100%;overflow:hidden}
.gcard__img{min-height:108px;border-right:var(--b);background:var(--band)}
.gcard__img img{display:block;width:100%;height:100%;object-fit:cover}
.gcard__img--ph{background:repeating-linear-gradient(45deg,#F6EFE4 0 10px,#F1E8DA 10px 20px)}
.gcard__body{padding:10px 12px 12px}
.gcard .lbl{display:inline-block;margin:0 0 6px;padding:2px 8px;border-radius:6px;background:var(--sky);color:var(--ink)}
.gcard h3{margin:0 0 4px;font-size:1.1rem;line-height:1.25}
.gcard h3 a{color:var(--ink);text-decoration:none}
.gcard h3 a::after{content:"";position:absolute;inset:0}
.gcard h3 a:focus-visible{outline:0}
.gcard:focus-within{outline:3px solid var(--link);outline-offset:3px}
.gcard:hover{background:var(--zebra)}
.gcard:hover h3 a{text-decoration:underline;text-decoration-thickness:2px}
.gcard__body>p:last-child{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
@media(min-width:700px){
.gcards{grid-template-columns:1fr 1fr;gap:18px}
.gcard{grid-template-columns:none;grid-template-rows:auto 1fr}
.gcard__img{min-height:0;aspect-ratio:2/1;border-right:0;border-bottom:var(--b)}
.gcard__body{padding:12px 16px 16px}
.gcard h3{font-size:1.2rem}
.gcard__body>p:last-child{font-size:15.5px}}
@media(min-width:900px){.gcards{grid-template-columns:repeat(3,1fr)}}

/* backyard ideas: picture tiles (2 columns on phones, 4 from 700px) + every topic as chips in a <details> */
.ideas{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;margin:0 0 18px;padding:0}
.ideas>li{margin:0}
.idea{display:flex;flex-direction:column;height:100%;overflow:hidden;color:var(--ink);text-decoration:none}
.idea__img{display:block;aspect-ratio:16/10;border-bottom:var(--b);background:var(--band-2)}
.idea__img img{display:block;width:100%;height:100%;object-fit:cover}
.idea__img--ph{display:grid;place-items:center;color:var(--pick)}
.idea__img--ph .i{width:40px;height:40px}
.idea__t{display:block;padding:8px 10px 10px;font:600 1.02rem/1.2 var(--fd)}
.idea:hover{background:var(--zebra)}
.idea:hover .idea__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media(min-width:700px){.ideas{grid-template-columns:repeat(4,1fr);gap:16px}.idea__t{padding:10px 12px 12px;font-size:1.1rem}}
.idea-more>summary{cursor:pointer;list-style:none;box-shadow:var(--sh-s)}
.idea-more>summary::-webkit-details-marker{display:none}
.idea-more>summary .i{color:var(--pick)}
.idea-more[open]>summary{margin-bottom:12px;background:var(--ink);color:#fff}
.idea-more[open]>summary .i{color:var(--accent)}
.idea-more .chips{gap:8px}
.idea-more .pill{font-size:15px}

/* playground how-tos: "Set it up" (feature card + rows) | "Keep it safe" (rows) */
.howto{display:grid;gap:10px}
.howto__h{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.howto__h .i{width:26px;height:26px;color:var(--link)}
.howto .rows{margin-bottom:12px}
.fix-hero{position:relative;display:grid;gap:12px;padding:12px;margin:0 0 10px}
.fix-hero__img img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border:1.5px solid var(--hair);border-radius:10px}
.fix-hero .td{margin:0 0 4px}
.fix-hero .td a{color:var(--ink)}
.fix-hero .td a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.fix-hero .td a:focus-visible{outline:0}
.fix-hero:focus-within{outline:3px solid var(--link);outline-offset:3px}
.fix-hero:hover{background:var(--zebra)}
.fix-hero p{margin:0}
@media(min-width:900px){.howto{grid-template-columns:1fr 1fr;gap:32px}.fix-hero{grid-template-columns:200px 1fr;align-items:center}}

/* who writes it (no photo: a "K" monogram). Phones: monogram | heading, then the text full width. */
.trust{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px 14px;align-items:center;padding:18px 16px}
.trust__txt{display:contents}
.trust__txt>p{grid-column:1/-1}
.trust__mono{display:grid;place-items:center;width:56px;height:56px;border:var(--b);border-radius:50%;background:var(--accent);box-shadow:var(--sh-s);font:700 1.7rem/1 var(--fd)}
.trust h2{margin:0;font-size:1.3rem}
.trust__q{margin:0 0 10px;font:500 1.12rem/1.45 var(--fd)}
.trust .small{margin:0}
.trust__links{grid-column:1/-1;gap:8px}
.trust__links .pill{box-shadow:var(--sh-s)}
@media(min-width:700px){.trust{grid-template-columns:80px minmax(0,1fr);gap:18px;align-items:start;padding:22px 26px}.trust__txt{display:block}.trust h2{margin:0 0 6px}.trust__mono{width:80px;height:80px;font-size:2.3rem}.trust__links{grid-column:2}}

/* latest posts: compact rows, 2 columns from 700px */
.rows a>span{flex:1;min-width:0}
.latest>li{display:grid}
.latest a{min-height:0;padding:11px 12px 11px 14px;line-height:1.3}
.latest small{display:block;margin-top:3px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
@media(min-width:700px){.latest{grid-template-columns:1fr 1fr}}

/* ================= archives, search, hub pages ================= */
/* The card photo keeps the featured images' own shape: the playground guides' images are 1005x489 (about 2:1), the
   inspiration galleries' 1025x575 (16:9), so almost nothing is cropped. */
.pcard__img{aspect-ratio:2/1}
.bpt-archive-ideas .pcard__img{aspect-ratio:16/9}
/* no featured image: the same-shaped striped Toybox panel with the logo on a white tag (grid rows stay even) */
.pcard__img--ph,.bpt-archive-ideas .pcard__img--ph{height:auto;aspect-ratio:2/1;background:repeating-linear-gradient(45deg,#F6EFE4 0 10px,#F1E8DA 10px 20px)}
.pcard__img--ph img{width:auto;height:auto;max-width:58%;max-height:64%;padding:6px 12px;border:var(--b);border-radius:12px;background:#fff;object-fit:contain;box-shadow:var(--sh-s)}
.pcard__body>p:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* hub pages (/playground-info/ ...): the UAGB grid rendered as .hub-grid.wide > .cards, inside the article */
.hub-grid{margin:8px 0 18px}
.hub-grid .cards{list-style:none;margin:0 0 8px;padding:0}
.hub-grid .cards>li{margin:0;padding:0}
.hub-grid .cards>li::before{content:none}
.hub-grid .pcard .lbl{display:none}
.hub-grid .pcard img{margin:0;border:0;border-radius:0;box-shadow:none}
.hub-grid .pcard__img--ph img{border:var(--b);border-radius:12px;box-shadow:var(--sh-s)}
.hub-grid .pagination{margin:24px 0 4px}