/* ========================================================================= Best Children Wagons Magazine: main stylesheet 1 Tokens 2 Base 3 Layout 4 Buttons 5 Header 6 Cards & grids 7 Tables 8 Article 9 Components 10 Hubs 11 Footer 12 Legacy content 13 Responsive ========================================================================= */ /* ---------- 1. Tokens ---------- */ :root{ --bcw-primary:#14406e; /* trust navy */ --bcw-primary-dark:#0e2f54; --bcw-navy-900:#0b2441; --bcw-cta:#f59425; /* the one warm accent: buttons */ --bcw-cta-dark:#e07f0f; --bcw-cta-ink:#1b1204; /* text on amber (9:1 contrast) */ --bcw-accent:#2f7d5b; /* muted green: positives, labels */ --bcw-accent-soft:#e8f2ed; --bcw-ink:#14202e; --bcw-muted:#566478; --bcw-bg:#fff; --bcw-warm:#fbf8f3; /* warm neutral bands */ --bcw-warm-2:#f3ede3; --bcw-line:#e7e0d4; --bcw-line-strong:#d4cab8; /* aliases used by the Wagon Size Finder stylesheet */ --bcw-secondary:var(--bcw-cta); --bcw-secondary-dark:var(--bcw-cta-dark); --bcw-cta-text:var(--bcw-cta-ink); --bcw-card:var(--bcw-warm); --bcw-brand-dark:var(--bcw-navy-900); --bcw-radius-sm:6px; --bcw-radius:10px; --bcw-radius-lg:14px; --bcw-shadow:0 1px 2px rgba(20,32,46,.05),0 10px 26px -14px rgba(20,32,46,.18); --bcw-shadow-lg:0 2px 4px rgba(20,32,46,.05),0 22px 44px -20px rgba(20,32,46,.28); --bcw-maxw:1200px; --bcw-prose:740px; --bcw-header-h:72px; --bcw-gutter:clamp(1rem,4vw,1.5rem); --bcw-font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --bcw-display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --bcw-fast:.16s; --bcw-ease:cubic-bezier(.22,.61,.36,1); } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bcw-header-h) + 16px)} body{margin:0;font-family:var(--bcw-font);font-size:1.0625rem;line-height:1.65;color:var(--bcw-ink);background:var(--bcw-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.bcw-lock{overflow:hidden} /* Safety net: legacy post content can contain oversized elements. Clip (not hidden) so position:sticky keeps working and no horizontal page scroll can occur. */ html,body{overflow-x:clip} h1,h2,h3,h4{font-family:var(--bcw-display);color:var(--bcw-ink);line-height:1.18;font-weight:800;letter-spacing:-.015em;margin:0 0 .5em} p{margin:0 0 1em} a{color:var(--bcw-primary);text-decoration:none} a:hover{color:var(--bcw-primary-dark);text-decoration:underline} img,svg,video{max-width:100%} img{height:auto;display:block} figure{margin:0} hr{border:0;border-top:1px solid var(--bcw-line);margin:2em 0} button{font:inherit} :focus-visible{outline:3px solid var(--bcw-primary);outline-offset:2px;border-radius:4px} .bcw-header :focus-visible,.bcw-footer :focus-visible{outline-color:var(--bcw-cta)} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .bcw-skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--bcw-primary);color:#fff;padding:.75rem 1rem;border-radius:0 0 10px 0;font-weight:700} .bcw-skip:focus{left:0;color:#fff} .bcw-img{width:100%;height:100%;object-fit:cover} .bcw-icon{flex:none;vertical-align:middle} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ---------- 3. Layout ---------- */ .bcw-container{width:100%;max-width:calc(var(--bcw-maxw) + 2*var(--bcw-gutter));margin-inline:auto;padding-inline:var(--bcw-gutter)} .bcw-container--narrow{max-width:calc(var(--bcw-prose) + 2*var(--bcw-gutter))} .bcw-main{display:block;min-height:50vh} .bcw-section{padding-block:clamp(2.5rem,6vw,4.5rem)} .bcw-section--tint{background:var(--bcw-warm);border-block:1px solid var(--bcw-line)} .bcw-section--navy{background:var(--bcw-navy-900);color:#e6edf6} .bcw-section--navy h2,.bcw-section--navy h3{color:#fff} .bcw-section--navy a{color:#ffd9a3} .bcw-eyebrow{font:800 .74rem/1.2 var(--bcw-display);letter-spacing:.09em;text-transform:uppercase;color:var(--bcw-accent);margin:0 0 .5rem} .bcw-eyebrow--light{color:#ffd9a3} .bcw-sechead{margin-bottom:1.5rem;max-width:62ch} .bcw-sechead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;max-width:none;flex-wrap:wrap} .bcw-sechead__title{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem);margin:0} .bcw-sechead__sub{color:var(--bcw-muted);max-width:68ch;margin:-.5rem 0 1.5rem} .bcw-sechead__link{font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;min-height:44px} .bcw-subhead{font-size:1.2rem;margin:2.2rem 0 .9rem} .bcw-grid{display:grid;gap:1.25rem} .bcw-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .bcw-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .bcw-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .bcw-note{color:var(--bcw-muted);font-size:.95rem} /* ---------- 4. Buttons ---------- */ .bcw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 .98rem/1.1 var(--bcw-display);padding:.85rem 1.3rem;border-radius:var(--bcw-radius);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--bcw-fast),border-color var(--bcw-fast),color var(--bcw-fast),transform var(--bcw-fast);min-height:44px;text-align:center} .bcw-btn:hover{text-decoration:none} .bcw-btn:active{transform:translateY(1px)} .bcw-btn--cta{background:var(--bcw-cta);color:var(--bcw-cta-ink)} .bcw-btn--cta:hover{background:var(--bcw-cta-dark);color:var(--bcw-cta-ink)} .bcw-btn--primary{background:var(--bcw-primary);color:#fff} .bcw-btn--primary:hover{background:var(--bcw-primary-dark);color:#fff} .bcw-btn--ghost{background:#fff;border-color:var(--bcw-line-strong);color:var(--bcw-ink)} .bcw-btn--ghost:hover{border-color:var(--bcw-primary);color:var(--bcw-primary)} .bcw-btn--sm{padding:.55rem .9rem;font-size:.88rem;min-height:38px;border-radius:8px} .bcw-btn--lg{padding:1rem 1.6rem;font-size:1.05rem;min-height:52px} .bcw-btn--block{display:flex;width:100%} /* ---------- 5. Header ---------- */ .bcw-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--bcw-line)} /* The blur lives on a pseudo-element: a backdrop-filter on the header itself would make it the containing block of the position:fixed mobile menu and shrink the menu to the header's height. */ .bcw-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px)} .bcw-header__inner{display:flex;align-items:center;gap:1rem;height:var(--bcw-header-h)} .bcw-brand{flex:0 0 auto;display:flex;align-items:center} .bcw-brand .custom-logo-link{display:flex;align-items:center} .bcw-brand .custom-logo{height:56px;width:auto;max-width:none;display:block} .bcw-brand__text{font:800 1.15rem var(--bcw-display);color:var(--bcw-ink)} .bcw-nav{flex:1 1 auto;min-width:0} .bcw-nav__list{display:flex;justify-content:center;gap:.05rem;list-style:none;margin:0;padding:0} .bcw-nav__item{position:relative} .bcw-nav__link{display:flex;align-items:center;gap:.3rem;padding:.55rem .6rem;font:700 .76rem/1 var(--bcw-display);letter-spacing:.04em;text-transform:uppercase;color:var(--bcw-ink);background:none;border:0;border-radius:8px;cursor:pointer;white-space:nowrap} .bcw-nav__link:hover,.bcw-nav__item.is-open>.bcw-nav__link,.bcw-nav__item:focus-within>.bcw-nav__link{background:var(--bcw-warm);color:var(--bcw-primary);text-decoration:none} .bcw-nav__item.is-current>.bcw-nav__link{box-shadow:inset 0 -2px 0 var(--bcw-cta);border-radius:8px 8px 0 0} .bcw-nav__toggle{display:none} .bcw-nav__btn .bcw-icon{transition:transform var(--bcw-fast)} .bcw-nav__item.is-open>.bcw-nav__btn .bcw-icon{transform:rotate(180deg)} .bcw-nav__panel{position:absolute;top:100%;left:0;min-width:260px;margin:0;padding:.45rem;list-style:none;background:#fff;border:1px solid var(--bcw-line);border-radius:12px;box-shadow:var(--bcw-shadow-lg);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--bcw-fast),transform var(--bcw-fast),visibility var(--bcw-fast);z-index:5} .bcw-nav__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .bcw-nav__item:nth-last-child(-n+2) .bcw-nav__panel{left:auto;right:0} .bcw-nav__item:hover>.bcw-nav__panel,.bcw-nav__item:focus-within>.bcw-nav__panel,.bcw-nav__item.is-open>.bcw-nav__panel{opacity:1;visibility:visible;transform:none} .bcw-nav__sub a{display:block;padding:.6rem .8rem;border-radius:8px;color:var(--bcw-ink);font-weight:500;font-size:.95rem;line-height:1.3} .bcw-nav__sub a:hover,.bcw-nav__sub.is-current a{background:var(--bcw-warm);color:var(--bcw-primary);text-decoration:none} .bcw-nav__extras{display:none} .bcw-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto} .bcw-iconbtn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--bcw-line);background:#fff;border-radius:10px;color:var(--bcw-ink);cursor:pointer;transition:background var(--bcw-fast),border-color var(--bcw-fast)} .bcw-iconbtn:hover{background:var(--bcw-warm);border-color:var(--bcw-line-strong)} .bcw-burger{display:none} .bcw-search-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--bcw-line);box-shadow:var(--bcw-shadow-lg);padding:1.1rem 0 1.25rem} .bcw-search-panel[hidden]{display:none} .bcw-searchform{display:flex;align-items:center;gap:.7rem;background:var(--bcw-warm);border:1.5px solid var(--bcw-line-strong);border-radius:12px;padding:.35rem .4rem .35rem .95rem} .bcw-searchform:focus-within{border-color:var(--bcw-primary);background:#fff} .bcw-searchform .bcw-icon{color:var(--bcw-muted)} .bcw-searchform__input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--bcw-ink);padding:.55rem 0;outline:none} .bcw-search-suggest{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin:.8rem 0 0;font-size:.9rem;color:var(--bcw-muted)} .bcw-search-suggest a{padding:.2rem .65rem;border:1px solid var(--bcw-line);border-radius:999px;color:var(--bcw-ink);background:#fff} .bcw-search-suggest a:hover{border-color:var(--bcw-primary);color:var(--bcw-primary);text-decoration:none} .bcw-search-results{margin-top:.6rem;display:grid;gap:.15rem} .bcw-search-results a{display:flex;align-items:center;gap:.8rem;padding:.55rem .6rem;border-radius:10px;color:var(--bcw-ink)} .bcw-search-results a:hover{background:var(--bcw-warm);text-decoration:none} .bcw-search-results img{width:52px;height:40px;object-fit:cover;border-radius:6px;flex:none} .bcw-search-results .t{font-weight:700;line-height:1.3;display:block} .bcw-search-results .y{font-size:.78rem;color:var(--bcw-muted);text-transform:uppercase;letter-spacing:.05em} .bcw-search-results .bcw-search-empty{padding:.6rem;color:var(--bcw-muted)} .bcw-search-results .bcw-search-all{font-weight:700;color:var(--bcw-primary)} .bcw-scrim{position:fixed;inset:0;background:rgba(11,36,65,.35);z-index:90} .bcw-scrim[hidden]{display:none} .bcw-readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none} .bcw-readbar span{display:block;height:100%;width:0;background:var(--bcw-cta)} /* ---------- 6. Cards & grids ---------- */ .bcw-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bcw-line);border-radius:var(--bcw-radius);overflow:hidden;transition:box-shadow var(--bcw-fast) var(--bcw-ease),border-color var(--bcw-fast)} .bcw-card:hover{box-shadow:var(--bcw-shadow);border-color:var(--bcw-line-strong)} .bcw-card__media{display:block;aspect-ratio:3/2;background:var(--bcw-warm-2);overflow:hidden} .bcw-card__media .bcw-img{transition:transform .5s var(--bcw-ease)} .bcw-card:hover .bcw-card__media .bcw-img{transform:scale(1.03)} .bcw-card__body{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem 1.1rem;flex:1} .bcw-card__title{font-size:1.08rem;line-height:1.28;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bcw-card__title a{color:var(--bcw-ink)} .bcw-card__title a::after{content:"";position:absolute;inset:0;z-index:1} .bcw-card__title a:hover{color:var(--bcw-primary);text-decoration:none} .bcw-card__excerpt{color:var(--bcw-muted);font-size:.94rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bcw-card__meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:auto 0 0;padding-top:.4rem;font-size:.82rem;color:var(--bcw-muted)} .bcw-card__meta span{display:inline-flex;align-items:center;gap:.3rem} .bcw-card--large .bcw-card__title{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);-webkit-line-clamp:4} .bcw-card--large .bcw-card__body{padding:1.25rem 1.35rem 1.35rem} .bcw-card--row{flex-direction:row;align-items:stretch} .bcw-card--row .bcw-card__media{flex:0 0 138px;aspect-ratio:auto;min-height:104px} .bcw-card--row .bcw-card__body{padding:.75rem .9rem} .bcw-card--row .bcw-card__title{font-size:.98rem;-webkit-line-clamp:3} /* chips */ .bcw-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0} .bcw-chips a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border:1px solid var(--bcw-line-strong);border-radius:999px;background:#fff;color:var(--bcw-ink);font-weight:600;font-size:.9rem} .bcw-chips a:hover{border-color:var(--bcw-primary);color:var(--bcw-primary);text-decoration:none} .bcw-chips__n{background:var(--bcw-warm-2);color:var(--bcw-muted);border-radius:999px;padding:0 .45rem;font-size:.78rem} /* ---------- 7. Tables ---------- */ .bcw-tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bcw-line);border-radius:12px;background:#fff;margin:1.25rem 0;max-width:100%} .bcw-tablewrap:focus-visible{outline-offset:-2px} .bcw-tablewrap.has-more-right{box-shadow:inset -14px 0 12px -12px rgba(20,32,46,.28)} .bcw-tablewrap.has-more-left{box-shadow:inset 14px 0 12px -12px rgba(20,32,46,.28)} .bcw-tablewrap.has-more-left.has-more-right{box-shadow:inset 14px 0 12px -12px rgba(20,32,46,.28),inset -14px 0 12px -12px rgba(20,32,46,.28)} .bcw-tablewrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;line-height:1.45;margin:0} .bcw-tablewrap th,.bcw-tablewrap td{padding:.7rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--bcw-line)} .bcw-tablewrap tr:last-child>td,.bcw-tablewrap tr:last-child>th{border-bottom:0} .bcw-tablewrap thead th{background:var(--bcw-warm);font:800 .74rem/1.2 var(--bcw-display);text-transform:uppercase;letter-spacing:.05em;color:var(--bcw-ink);white-space:nowrap} .bcw-tablewrap tbody tr:nth-child(even)>*{background:#fcfaf7} .bcw-compare table{min-width:940px} .bcw-compare thead th{background:var(--bcw-primary);color:#fff;border-bottom:0} .bcw-compare tbody th{position:sticky;left:0;z-index:1;background:#fff;font-weight:700;min-width:150px;box-shadow:1px 0 0 var(--bcw-line)} .bcw-compare tbody tr:nth-child(even)>th{background:#fcfaf7} .bcw-compare thead th:first-child{position:sticky;left:0;z-index:2} .bcw-compare td{min-width:96px} .bcw-compare tbody th a{display:inline-block;padding:.5rem 0} .bcw-compare td:nth-child(7),.bcw-compare td:nth-child(8){min-width:170px} .bcw-table__note{font-size:.85rem;color:var(--bcw-muted);margin:.6rem 0 0} /* ---------- 8. Article ---------- */ .bcw-crumbs{margin:0 0 .85rem;font-size:.85rem;color:var(--bcw-muted)} .bcw-crumbs ol{display:flex;flex-wrap:nowrap;gap:.2rem .55rem;list-style:none;margin:0;padding:0} .bcw-crumbs li{display:inline-flex;align-items:center;gap:.55rem;flex:none} .bcw-crumbs li:last-child{flex:0 1 auto;min-width:0} .bcw-crumbs li+li::before{content:"/";color:var(--bcw-line-strong)} .bcw-crumbs a{color:var(--bcw-muted);display:inline-block;padding:.4rem 0} .bcw-crumbs a:hover{color:var(--bcw-primary)} .bcw-crumbs [aria-current]{color:var(--bcw-ink);display:inline-block;max-width:min(100%,36ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} .bcw-article__head{padding:1.4rem 0 1.5rem;background:var(--bcw-warm);border-bottom:1px solid var(--bcw-line)} .bcw-article__title{font-size:clamp(1.85rem,1.35rem + 2.3vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:.2rem 0 .8rem;max-width:26ch;text-wrap:balance} .bcw-article__deck{font-size:1.18rem;color:var(--bcw-muted);max-width:62ch;margin:0 0 .9rem} .bcw-byline{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:0;font-size:.9rem;color:var(--bcw-muted)} .bcw-byline__item{display:inline-flex;align-items:center;gap:.4rem} .bcw-article__headgrid{display:grid;gap:1.4rem} .bcw-article__headtext{min-width:0} .bcw-article__hero{margin:0;min-width:0} .bcw-article__heroimg{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--bcw-radius-lg);background:var(--bcw-warm-2);box-shadow:var(--bcw-shadow)} @media (min-width:900px){ .bcw-article__head.has-hero .bcw-article__headgrid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,3.5rem);align-items:center} .bcw-article__head.has-hero .bcw-article__title{font-size:clamp(1.85rem,1.25rem + 1.6vw,2.7rem);max-width:none} .bcw-article__heroimg{aspect-ratio:3/2} } .bcw-article__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4vw,3.25rem);padding-block:2rem 3.5rem;align-items:start} .bcw-article__main{min-width:0;max-width:800px} .bcw-sticky{position:sticky;top:calc(var(--bcw-header-h) + 1rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;max-height:calc(100vh - var(--bcw-header-h) - 2rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .bcw-sticky>*{min-width:0} .bcw-disclosure{display:flex;gap:.7rem;align-items:flex-start;background:var(--bcw-warm);border:1px solid var(--bcw-line);border-radius:10px;padding:.8rem 1rem;margin:0 0 1.4rem;font-size:.9rem;color:var(--bcw-muted)} .bcw-disclosure .bcw-icon{margin-top:.15rem;color:var(--bcw-primary)} .bcw-disclosure p{margin:0} .bcw-disclosure strong{color:var(--bcw-ink)} /* prose */ .bcw-prose{font-size:1.125rem;line-height:1.75;overflow-wrap:break-word;word-break:normal} .bcw-prose>*{max-width:100%} .bcw-prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:2.2em 0 .6em;scroll-margin-top:calc(var(--bcw-header-h) + 16px)} .bcw-prose h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);margin:1.8em 0 .5em;scroll-margin-top:calc(var(--bcw-header-h) + 16px)} .bcw-prose h4{font-size:1.1rem;margin:1.5em 0 .4em} .bcw-prose p,.bcw-prose ul,.bcw-prose ol{margin:0 0 1.15em} .bcw-prose ul,.bcw-prose ol{padding-left:1.4em} .bcw-prose li{margin-bottom:.4em} .bcw-prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .bcw-prose a:hover{text-decoration-thickness:2px} .bcw-prose img{border-radius:10px;max-width:100%;height:auto} .bcw-prose figure{margin:1.6em 0} .bcw-prose figcaption{font-size:.85rem;color:var(--bcw-muted);text-align:center;margin-top:.5rem} .bcw-prose blockquote{margin:1.6em 0;padding:.9em 1.2em;border-left:4px solid var(--bcw-primary);background:var(--bcw-warm);border-radius:0 10px 10px 0;color:var(--bcw-ink)} .bcw-prose blockquote p:last-child{margin:0} .bcw-prose .aligncenter{margin-inline:auto} .bcw-prose pre,.bcw-prose code{font-size:.9em;background:var(--bcw-warm-2);border-radius:6px} .bcw-prose code{padding:.1em .35em} .bcw-prose pre{padding:1em;overflow:auto} .bcw-prose iframe,.bcw-prose video{max-width:100%} .bcw-pagelinks{margin:1.5rem 0;font-weight:700} /* ---------- 9. Components ---------- */ /* Table of contents */ .bcw-toc{background:#fff;border:1px solid var(--bcw-line);border-radius:12px;padding:1rem 1.1rem} .bcw-toc__title{font:800 .72rem/1 var(--bcw-display);text-transform:uppercase;letter-spacing:.09em;color:var(--bcw-muted);margin:0 0 .7rem} .bcw-toc__list{list-style:none;margin:0;padding:0;display:grid;gap:.05rem;counter-reset:toc} .bcw-toc__item a{display:block;padding:.38rem .55rem;border-left:2px solid var(--bcw-line);color:var(--bcw-muted);font-size:.9rem;line-height:1.35} .bcw-toc__item a:hover{color:var(--bcw-primary);border-left-color:var(--bcw-primary);text-decoration:none} .bcw-toc__item a.is-active{color:var(--bcw-primary);border-left-color:var(--bcw-cta);font-weight:700;background:var(--bcw-warm)} .bcw-toc__item--l3 a{padding-left:1.2rem;font-size:.85rem} .bcw-toc--side .bcw-toc__list{max-height:46vh;overflow-y:auto;scrollbar-width:thin} .bcw-toc--mobile{display:none;margin:0 0 1.4rem} .bcw-toc--mobile summary{cursor:pointer;display:flex;align-items:center;gap:.5rem;font:800 .95rem var(--bcw-display);list-style:none;min-height:44px;margin:-.6rem 0} .bcw-toc--mobile .bcw-toc__item a{padding:.6rem .55rem} .bcw-toc--mobile summary::-webkit-details-marker{display:none} .bcw-toc--mobile[open] summary{margin-bottom:.7rem} /* Quick answer + At a glance */ .bcw-quick{border-left:4px solid var(--bcw-accent);background:var(--bcw-accent-soft);border-radius:0 12px 12px 0;padding:1rem 1.25rem;margin:0 0 1.5rem} .bcw-quick__label{font:800 .72rem/1 var(--bcw-display);text-transform:uppercase;letter-spacing:.09em;color:var(--bcw-accent);margin:0 0 .45rem} .bcw-quick p:last-child{margin:0} .bcw-glance{border:1px solid var(--bcw-line);border-radius:12px;background:#fff;margin:0 0 1.5rem;overflow:hidden} .bcw-glance__title{font-size:1.05rem;margin:0;padding:.85rem 1.1rem;background:var(--bcw-warm);border-bottom:1px solid var(--bcw-line)} .bcw-glance__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:0} .bcw-glance__list>div{padding:.75rem 1.1rem;border-bottom:1px solid var(--bcw-line);border-right:1px solid var(--bcw-line)} .bcw-glance__list dt{font:800 .68rem/1.2 var(--bcw-display);text-transform:uppercase;letter-spacing:.07em;color:var(--bcw-muted);margin:0 0 .15rem} .bcw-glance__list dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.4} .bcw-glance__note{margin:0;padding:.65rem 1.1rem;font-size:.82rem;color:var(--bcw-muted);background:var(--bcw-warm)} /* Pros & cons */ .bcw-proscons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0 0 1.75rem} .bcw-proscons:has(> :only-child){grid-template-columns:1fr} .bcw-proscons__col{border:1px solid var(--bcw-line);border-radius:12px;padding:1rem 1.15rem;background:#fff} .bcw-proscons__col--pro{border-top:4px solid var(--bcw-accent)} .bcw-proscons__col--con{border-top:4px solid #b4572a} .bcw-proscons__h{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;margin:0 0 .7rem} .bcw-proscons__col--pro .bcw-proscons__h{color:var(--bcw-accent)} .bcw-proscons__col--con .bcw-proscons__h{color:#9a4620} .bcw-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.97rem} .bcw-list li{position:relative;padding-left:1.45rem;margin:0} .bcw-list li::before{position:absolute;left:0;top:0;font-weight:900} .bcw-list--pro li::before{content:"+";color:var(--bcw-accent)} .bcw-list--con li::before{content:"\2212";color:#9a4620} /* Takeaway + CTA */ .bcw-takeaway{background:var(--bcw-navy-900);color:#e6edf6;border-radius:14px;padding:1.4rem 1.6rem;margin:2.2rem 0} .bcw-takeaway h2{color:#fff;font-size:1.25rem;margin:0 0 .5rem} .bcw-takeaway p{margin:0;font-size:1.05rem;line-height:1.65} .bcw-takeaway a{color:#ffd9a3} .bcw-cta{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;background:var(--bcw-warm);border:1px solid var(--bcw-line-strong);border-left:5px solid var(--bcw-cta);border-radius:12px;padding:1.25rem 1.5rem;margin:2.2rem 0} .bcw-cta__title{font-size:1.25rem;margin:0 0 .25rem} .bcw-cta__copy p{margin:0;color:var(--bcw-muted)} .bcw-cta__action{display:grid;gap:.4rem;justify-items:start} .bcw-cta__note{margin:0;font-size:.78rem;color:var(--bcw-muted);max-width:30ch;line-height:1.35} /* FAQ */ .bcw-faq{margin:2.4rem 0;scroll-margin-top:calc(var(--bcw-header-h) + 16px)} .bcw-faq__title{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);margin:0 0 1rem} .bcw-faq__list{display:grid;gap:.6rem} .bcw-faq__item{border:1px solid var(--bcw-line);border-radius:12px;background:#fff;overflow:hidden} .bcw-faq__item[open]{border-color:var(--bcw-line-strong);box-shadow:var(--bcw-shadow)} .bcw-faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;cursor:pointer;font:700 1.02rem/1.35 var(--bcw-display);list-style:none} .bcw-faq__item summary::-webkit-details-marker{display:none} .bcw-faq__item summary .bcw-icon{color:var(--bcw-primary);transition:transform var(--bcw-fast)} .bcw-faq__item[open] summary .bcw-icon{transform:rotate(180deg)} .bcw-faq__a{padding:0 1.15rem 1.05rem;color:#2a3748} .bcw-faq__a p{margin:0} /* Related */ .bcw-related{margin:2.8rem 0 0} .bcw-related__title{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);margin:0 0 1rem} /* Author */ .bcw-author{display:flex;gap:1rem;align-items:flex-start;background:var(--bcw-warm);border:1px solid var(--bcw-line);border-radius:12px;padding:1.1rem 1.25rem;margin:2.5rem 0 0} .bcw-author__avatar{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bcw-primary);color:#fff;font:800 1.2rem var(--bcw-display)} .bcw-author__name{font:800 1rem var(--bcw-display);margin:0 0 .15rem} .bcw-author__bio{font-size:.92rem;color:var(--bcw-muted);margin:0 0 .4rem;line-height:1.55} .bcw-author__links{font-size:.85rem;margin:0} /* Product card (rail) */ .bcw-rail{position:relative;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.25rem .25rem 1rem;margin-inline:-.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .bcw-rail:focus-visible{outline-offset:2px} .bcw-rail__item{flex:0 0 min(290px,80vw);scroll-snap-align:start} .bcw-pcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--bcw-line);border-radius:var(--bcw-radius);overflow:hidden} .bcw-pcard__media{display:block;aspect-ratio:3/2;background:var(--bcw-warm-2);overflow:hidden} .bcw-pcard__body{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.05rem 1.1rem;flex:1} .bcw-pcard__name{font-size:1.08rem;line-height:1.28;margin:0} .bcw-pcard__name a{color:var(--bcw-ink)} .bcw-pcard__best{margin:0;font-size:.9rem;color:var(--bcw-muted);line-height:1.45} .bcw-pcard__best span{font-weight:700;color:var(--bcw-ink)} .bcw-pcard__specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.1rem 0 0} .bcw-pcard__specs>div{background:var(--bcw-warm);border-radius:8px;padding:.4rem .5rem;min-width:0} .bcw-pcard__specs dt{font:800 .62rem/1.2 var(--bcw-display);text-transform:uppercase;letter-spacing:.06em;color:var(--bcw-muted);margin:0} .bcw-pcard__specs dd{margin:0;font-weight:700;font-size:.82rem;line-height:1.25;overflow-wrap:anywhere} .bcw-pcard__cta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.4rem} /* Product box (inside articles) */ .bcw-pbox{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.4rem;background:#fff;border:1px solid var(--bcw-line);border-radius:14px;padding:1.25rem;margin:1.8rem 0;box-shadow:var(--bcw-shadow)} .bcw-pbox__media{border-radius:10px;overflow:hidden;align-self:start;aspect-ratio:3/2;background:var(--bcw-warm-2)} .bcw-pbox__name{font-size:1.3rem;margin:0 0 .4rem} .bcw-pbox__best{margin:0 0 .8rem;color:var(--bcw-muted)} .bcw-pbox__specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin:0 0 1rem} .bcw-pbox__specs>div{background:var(--bcw-warm);border-radius:8px;padding:.5rem .65rem} .bcw-pbox__specs dt{font:800 .64rem/1.2 var(--bcw-display);text-transform:uppercase;letter-spacing:.06em;color:var(--bcw-muted);margin:0} .bcw-pbox__specs dd{margin:0;font-weight:600;font-size:.88rem} .bcw-pbox__cta{display:flex;flex-wrap:wrap;gap:.6rem} .bcw-pbox__note{font-size:.78rem;color:var(--bcw-muted);margin:.6rem 0 0} .bcw-pbox .bcw-proscons{margin-bottom:1rem} /* Sidebar widgets */ .bcw-widget{background:#fff;border:1px solid var(--bcw-line);border-radius:12px;padding:1.1rem 1.15rem} .bcw-widget--finder{background:var(--bcw-navy-900);border-color:var(--bcw-navy-900);color:#e6edf6} .bcw-widget--finder .bcw-widget__title{color:#fff} .bcw-widget--finder p{font-size:.92rem;margin:0 0 .9rem} .bcw-widget__title{font-size:.95rem;margin:0 0 .7rem} .bcw-widget__list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .bcw-widget__list a{display:block;padding:.45rem 0;color:var(--bcw-ink);font-size:.92rem;line-height:1.35;border-bottom:1px solid var(--bcw-line)} .bcw-widget__list li:last-child a{border-bottom:0} .bcw-widget__list a:hover{color:var(--bcw-primary);text-decoration:none} /* Comments */ .bcw-comments{margin-top:2.5rem} .bcw-comments__list{list-style:none;padding:0} .bcw-comments .comment-body{padding:1rem 0;border-bottom:1px solid var(--bcw-line)} .bcw-comments input[type=text],.bcw-comments input[type=email],.bcw-comments input[type=url],.bcw-comments textarea{width:100%;border:1.5px solid var(--bcw-line-strong);border-radius:10px;padding:.7rem .85rem;font:inherit} /* ---------- 10. Hubs, archives, search, 404, pages ---------- */ .bcw-hubhero{background:var(--bcw-warm);border-bottom:1px solid var(--bcw-line);padding:1.6rem 0 2rem} .bcw-hubhero__title{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:.2rem 0 .6rem;max-width:24ch;text-wrap:balance} .bcw-hubhero__count{color:var(--bcw-muted);margin:0;font-weight:600} .bcw-hubhero__desc{color:var(--bcw-muted);max-width:62ch;font-size:1.1rem} .bcw-hubhero__desc p{margin:0} .bcw-searchpage__form{margin-top:1.1rem;max-width:640px} .bcw-hub__body,.bcw-archive{padding-block:2rem 3.5rem} .bcw-hub__intro{max-width:var(--bcw-prose);margin-bottom:2.2rem} .bcw-hubsec{margin:2.6rem 0} .bcw-hubsec__title{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin:0 0 1.1rem} .bcw-hubfeature{max-width:760px} .bcw-hubfeature .bcw-card--large{flex-direction:row} .bcw-hubfeature .bcw-card--large .bcw-card__media{flex:0 0 46%;aspect-ratio:auto;min-height:260px} .bcw-more{margin-top:1.2rem;border:1px solid var(--bcw-line);border-radius:12px;background:#fff} .bcw-more summary{padding:.9rem 1.1rem;cursor:pointer;font-weight:700} .bcw-more__list{margin:0;padding:0 1.1rem 1rem 2.3rem;columns:2;column-gap:2rem} .bcw-more__list li{margin-bottom:.45rem;break-inside:avoid} .bcw-explore{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem} .bcw-explore a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:#fff;border:1px solid var(--bcw-line);border-radius:10px;color:var(--bcw-ink);font-weight:600} .bcw-explore a:hover{border-color:var(--bcw-primary);color:var(--bcw-primary);text-decoration:none} .bcw-hubfinder{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:var(--bcw-navy-900);color:#e6edf6;border-radius:14px;padding:1.5rem 1.75rem;margin:2.6rem 0 0} .bcw-hubfinder h2{color:#fff;font-size:1.3rem;margin:0 0 .25rem} .bcw-hubfinder p{margin:0} .bcw-brandsec{scroll-margin-top:calc(var(--bcw-header-h) + 16px)} .bcw-noresults{background:var(--bcw-warm);border:1px solid var(--bcw-line);border-radius:14px;padding:1.5rem;margin-bottom:2rem} .bcw-404{padding-block:3rem 4rem;text-align:center} .bcw-404 .bcw-grid{text-align:left} .bcw-404__search{max-width:560px;margin:1.2rem auto} .bcw-page__head{background:var(--bcw-warm);border-bottom:1px solid var(--bcw-line);padding:1.5rem 0 1.8rem} .bcw-page__title{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.8rem);line-height:1.1;letter-spacing:-.025em;margin:.2rem 0 0;max-width:24ch} .bcw-page__lede{color:var(--bcw-muted);max-width:60ch;margin:.6rem 0 0;font-size:1.1rem} .bcw-page__hero{margin-top:1.5rem} .bcw-page__heroimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--bcw-radius-lg)} .bcw-page__body{padding-block:2rem 3.5rem} .bcw-pagination,.navigation.pagination{margin-top:2rem} .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center} .nav-links .page-numbers{min-width:42px;height:42px;display:inline-grid;place-items:center;padding:0 .8rem;border:1px solid var(--bcw-line-strong);border-radius:10px;color:var(--bcw-ink);font-weight:700;background:#fff} .nav-links .page-numbers.current{background:var(--bcw-primary);border-color:var(--bcw-primary);color:#fff} .nav-links a.page-numbers:hover{border-color:var(--bcw-primary);text-decoration:none} /* ---------- 11. Footer ---------- */ .bcw-footer{background:var(--bcw-navy-900);color:#c9d5e4;margin-top:0} .bcw-footer a{color:#e3ebf5} .bcw-footer a:hover{color:#fff} .bcw-footer__top{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:2.2rem;padding-block:3rem 2rem} .bcw-footer__name{display:inline-block;font:800 1.3rem var(--bcw-display);color:#fff;margin-bottom:.7rem} .bcw-footer__name:hover{text-decoration:none} .bcw-footer__tag{color:#aebed1;max-width:36ch;margin:0 0 1rem} .bcw-footer__disclosure{font-size:.85rem;line-height:1.55;color:#b5c3d4;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.8rem 1rem;max-width:44ch;margin:0} .bcw-footer__disclosure a{text-decoration:underline} .bcw-footer__h{font:800 .76rem/1 var(--bcw-display);text-transform:uppercase;letter-spacing:.1em;color:#fff;margin:0 0 1rem} .bcw-flinks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem} @media (max-width:900px),(pointer:coarse){ .bcw-flinks{gap:0} .bcw-flinks a{display:flex;align-items:center;min-height:44px} .bcw-footer__name{padding:.35rem 0} } .bcw-footer__bar{border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0;font-size:.85rem;color:#9fb0c6} .bcw-footer__barinner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem} .bcw-footer__bar p{margin:0} .bcw-newsletter{background:var(--bcw-primary);color:#fff} .bcw-newsletter__inner{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem;align-items:center;padding-block:2.5rem} .bcw-newsletter h2{color:#fff;margin:0 0 .3rem;font-size:1.6rem} .bcw-newsletter p{margin:0;opacity:.92} .bcw-newsletter__form{display:flex;gap:.6rem;flex-wrap:wrap} .bcw-newsletter__form input{flex:1;min-width:210px;border:0;border-radius:10px;padding:.9rem 1rem;font:inherit} .bcw-totop{position:fixed;right:1rem;bottom:1rem;z-index:80;width:46px;height:46px;border-radius:50%;border:0;background:var(--bcw-primary);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--bcw-shadow-lg)} .bcw-totop[hidden]{display:none} .bcw-totop:hover{background:var(--bcw-primary-dark)} /* ---------- 12. Legacy content normalisation ---------- Existing articles contain hand-coded product boxes, inline-styled buttons and