/*
 * Front-end and editor styles. Ported from the shared clickable prototype (design/).
 * Colours and fonts come from theme.json, so a brand is a style variation, not a CSS fork.
 * Proof type (Measured or Method) is a site setting, printed as data-proof on <html>.
 */
:root{
  --bg:var(--wp--preset--color--bg); --surface:var(--wp--preset--color--surface); --ink:var(--wp--preset--color--ink);
  --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --star:var(--wp--preset--color--star);
  --accent:var(--wp--preset--color--accent); --accent-soft:var(--wp--preset--color--accent-soft);
  --pop:var(--wp--preset--color--pop); --pop-soft:var(--wp--preset--color--pop-soft);
  --delta-better:var(--wp--preset--color--better); --delta-worse:var(--wp--preset--color--worse);
  --chrome-bg:#2a2d30; --chrome-fg:#f2f2ef; --chrome-line:#45494d;
  --f-display:var(--wp--preset--font-family--display); --f-body:var(--wp--preset--font-family--body); --f-hand:var(--f-display);
  --radius:4px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
/* Dark: values per brand live in theme.json settings.custom.dark */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:var(--wp--custom--dark--bg); --surface:var(--wp--custom--dark--surface); --ink:var(--wp--custom--dark--ink); --muted:var(--wp--custom--dark--muted);
  --line:var(--wp--custom--dark--line); --star:var(--wp--custom--dark--star); --accent:var(--wp--custom--dark--accent); --accent-soft:var(--wp--custom--dark--accent-soft);
  --pop:var(--wp--custom--dark--pop); --pop-soft:var(--wp--custom--dark--pop-soft); --delta-better:var(--wp--custom--dark--better); --delta-worse:var(--wp--custom--dark--worse);
  --chrome-bg:#0f1011; --chrome-line:#2e3134; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:var(--wp--custom--dark--bg); --surface:var(--wp--custom--dark--surface); --ink:var(--wp--custom--dark--ink); --muted:var(--wp--custom--dark--muted);
  --line:var(--wp--custom--dark--line); --star:var(--wp--custom--dark--star); --accent:var(--wp--custom--dark--accent); --accent-soft:var(--wp--custom--dark--accent-soft);
  --pop:var(--wp--custom--dark--pop); --pop-soft:var(--wp--custom--dark--pop-soft); --delta-better:var(--wp--custom--dark--better); --delta-worse:var(--wp--custom--dark--worse);
  --chrome-bg:#0f1011; --chrome-line:#2e3134; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.65 var(--f-body);letter-spacing:.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.005em}
b,strong{font-weight:500}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:28px}}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.hand{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--accent)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* Placeholder images: gradient tiles with grain, as in Jodi's prototype */
.ph{background:linear-gradient(135deg,var(--a,#e4e6e7),var(--b,#aeb4b8));border-radius:var(--radius);aspect-ratio:var(--r,4/3);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.45),transparent 55%)}
.ph::before{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.t1{--a:#ecebe7;--b:#c9c6bf}.t2{--a:#e4e6e7;--b:#aeb4b8}.t3{--a:#f0eee9;--b:#d3cdc2}
.t4{--a:#e8ebe5;--b:#b9c3b2}.t5{--a:#e9e7e3;--b:#bdb7ad}.t6{--a:#f2f2f0;--b:#cfd1d0}
:root[data-theme="dark"] .ph{filter:brightness(.7) saturate(.9)}
:root[data-theme="dark"] .ph.photo{filter:brightness(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph{filter:brightness(.7) saturate(.9)}:root:not([data-theme="light"]) .ph.photo{filter:brightness(.9)}}


/* Real images. Photo: our own photography fills the frame. Product: manufacturer shot on white, contained. */
.ph.photo,.ph.product{background-repeat:no-repeat;background-position:center}
.ph.photo{background-size:cover;background-color:var(--line)}
.ph.photo::before,.ph.photo::after,.ph.product::before,.ph.product::after{display:none}
.ph.product{background-color:#fff;background-size:contain;background-origin:content-box;padding:6%}
:root[data-theme="dark"] .ph.product{filter:brightness(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph.product{filter:brightness(.9)}}
.img-note{font-size:13px;color:var(--muted);margin:-28px 0 28px}

/* Lately strip (Measured) */
.ticker{background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px;overflow:hidden;white-space:nowrap}
.ticker .wrap{display:flex;gap:14px;align-items:center;height:36px}
.ticker b{background:var(--pop);color:var(--bg);padding:2px 8px;border-radius:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none;position:relative;z-index:1}
.ticker-lane{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent)}
.ticker-track{display:flex;width:max-content;animation:tick var(--tick-dur,40s) linear infinite}
.ticker-track span{padding-right:40px;white-space:nowrap}
.ticker-track span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* Data strip (Method) */
.datastrip{background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px}
.datastrip .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;min-height:36px;padding-block:6px}
.datastrip span{color:var(--muted)}
.datastrip b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{font-family:var(--f-display);font-size:30px;font-style:italic;letter-spacing:.01em;white-space:nowrap}
.logo i{color:var(--pop);font-style:normal}
.nav{display:flex;gap:22px;font-size:15px;font-weight:500}
.nav a{color:var(--muted)}.nav a:hover{color:var(--ink)}
.head-tools{margin-left:auto;display:flex;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (max-width:860px){.nav{display:none}}


/* Top note: the affiliate disclosure, first thing on the page */
.topnote{background:color-mix(in srgb,var(--ink) 4%,var(--bg));border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;text-align:center}
.topnote .wrap{padding-block:11px}
.topnote a{font-weight:600;white-space:nowrap;margin-left:4px}
.topnote a:hover{color:var(--accent)}

/* Header: one row. Categories open from a labelled button next to the logo */
.cat-toggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;flex:none}
.cat-toggle:hover,.cat-toggle[aria-expanded="true"]{border-color:var(--ink)}
.cat-toggle .gi{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.6}
.cat-toggle .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.cat-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Main menu: spaced caps like the Categories button, centred between logo group and tools */
.site-head .nav{flex:1;justify-content:center;gap:26px}
.site-head .nav a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-head .nav a:hover,.site-head .nav a[aria-current="page"]{color:var(--ink)}
.site-head .head-tools{margin-left:0}
@media (max-width:1140px){.site-head .nav{gap:16px}.site-head .nav a{letter-spacing:.07em}}
/* Menu items never wrap. Between phones and wide screens the Categories button shrinks to its round icon, so the
   logo, button, menu and tools fit one line (the menu itself moves into the Categories panel below 980px). */
.site-head .nav a{white-space:nowrap}
@media (max-width:1180px){.site-head .cat-toggle{width:38px;padding:0;justify-content:center;border-radius:50%}.site-head .cat-toggle > span,.site-head .cat-toggle .chev{display:none}}
@media (max-width:980px){.site-head .nav{display:none}.site-head .head-tools{margin-left:auto}.catnav .more-links{display:flex;flex-wrap:wrap;gap:6px 20px;grid-column:1/-1;padding-top:14px}.catnav .more-links a{border:0;padding:4px 0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}}

@media (max-width:600px){.site-head > .wrap{gap:12px}.site-head .logo{font-size:24px}}
@media (max-width:440px){:root[data-proof="method"] .cat-toggle > span{display:none}:root[data-proof="method"] .cat-toggle{padding:0 11px}}
@media (max-width:420px){.cat-toggle{padding:0 10px}.cat-toggle .chev{display:none}}
.catnav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-block:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s linear .18s;z-index:30}
:root.cats-open .catnav{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.site-head .catnav .wrap{display:grid;height:auto;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 32px;padding-block:18px 22px}
@media (max-width:860px){.site-head .catnav .wrap{grid-template-columns:1fr 1fr;gap:0 16px}}
@media (max-width:420px){.site-head .catnav .wrap{grid-template-columns:1fr}}
.catnav a{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding-block:12px;border-bottom:1px solid var(--line)}
.catnav a:hover,.catnav a[aria-current="page"]{color:var(--accent)}
.ci{width:24px;height:24px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ci .f{fill:var(--pop);fill-opacity:.32}
.catnav a.all{color:var(--accent)}
.catnav a .chev{display:none}
.catnav .more-links{display:none}
@media (max-width:860px){.catnav .more-links{display:flex;flex-wrap:wrap;gap:6px 20px;grid-column:1/-1;padding-top:14px}.catnav .more-links a{border:0;padding:4px 0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}}
@media (prefers-reduced-motion:reduce){.catnav,:root.cats-open .catnav,.cat-toggle .chev{transition:none}}
/* Cards: nothing sits on the photo. Label under the frame, score or price on the same line */
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.card-top .tag{margin-top:0}
.card-top .score{width:40px;height:40px;box-shadow:none}
.card-top .score span{font-size:15px}
.card-top .price-chip{background:none;box-shadow:none;padding:0;font-size:19px}

/* Statement hero: text left, a visual from this month's work right */
.st-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:56px;align-items:center}
@media (max-width:900px){.st-grid{grid-template-columns:1fr;gap:32px}}
.st-text{display:grid;gap:18px}
.hero-note{font-size:14px;line-height:1.55;color:var(--muted);border-left:3px solid var(--pop);padding-left:14px;max-width:56ch;margin-top:4px}
.hero-note a{color:var(--ink);font-weight:600;white-space:nowrap;margin-left:4px}
.hero-visual{margin:0;position:relative;padding:0 0 44px 0}
.hero-visual .ph{--r:1/1;border-radius:0}
.hero-visual.product .ph{--r:1/1;border:1px solid var(--line)}
.hv-card{position:absolute;left:-28px;bottom:0;width:min(290px,86%);background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.22);padding:16px 18px;display:grid;gap:6px}
@media (max-width:900px){.hv-card{left:12px}}
.hv-card .kicker{margin:0;font-size:11px}
.hv-card b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.15}
.hv-card .hv-line{font-size:14px;color:var(--muted)}
.hv-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}
.hv-bar i{display:block;height:100%;width:var(--w,50%);background:var(--pop)}
.hv-spark{width:100%;height:44px;margin-top:4px}
.hv-spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hv-spark circle{fill:var(--pop)}
.hero-visual figcaption{position:absolute;right:0;bottom:12px;font-size:12px;color:var(--muted)}
@media (max-width:900px){.hero-visual{padding-bottom:0}.hv-card{position:relative;left:auto;bottom:auto;width:auto;margin:-40px 12px 0}.hero-visual figcaption{position:static;text-align:right;margin-top:8px}}

/* Statement hero */
.statement{padding-block:40px 28px;display:grid;gap:18px}
.hello{font-size:22px;line-height:1.3}
.statement h1{font-size:clamp(34px,4.8vw,58px);line-height:1.05;max-width:22ch}
.not-tested{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--accent);max-width:30ch}
.lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:58ch}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:2px;font:500 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--bg)}
.link-more{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* Hero category proof cards: the one bold element */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:8px 40px}
@media (max-width:860px){.cats{grid-template-columns:1fr}}
.cat{display:grid;border-top:1px solid var(--line)}
.cat .ph{--r:3/2;border-radius:0;transition:transform .4s ease}
.cat:hover .ph{transform:scale(1.015)}
.cat-body{display:grid;gap:12px;padding:16px 0 0;align-content:start}
.cat-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cat-name{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}
@media (prefers-reduced-motion:reduce){.cat .ph{transition:none}}
.fact{display:grid;gap:4px;border-left:3px solid var(--fact-rule,var(--pop));padding-left:14px}
.fact-label{font-size:13px;color:var(--muted)}
.fact-num{font-family:var(--f-display);font-size:clamp(40px,4.4vw,54px);line-height:1;font-variant-numeric:lining-nums;letter-spacing:-.01em}
.fact-num small{font-size:.42em;margin-left:4px;color:var(--muted);font-family:var(--f-body);font-weight:400;letter-spacing:0}
.fact-vs{font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.delta{font-weight:500;font-variant-numeric:tabular-nums}
.delta.worse{color:var(--delta-worse)}.delta.better{color:var(--delta-better)}
:root[data-proof="method"] .fact{--fact-rule:var(--muted)}
.cat-foot{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
/* What we measured: question, icon + answer, claim against result, one-line verdict */
.fact-q{font-family:var(--f-display);font-size:21px;line-height:1.25;color:var(--ink);max-width:24ch}
.fact-main{display:flex;align-items:center;gap:14px}
.fact-ico{width:48px;height:48px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.cmp{display:grid;border-top:1px solid var(--line)}
.cmp-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.cmp-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.fact-verdict{font-size:14px;font-weight:500}
.fact-verdict.worse{color:var(--delta-worse)}.fact-verdict.better{color:var(--delta-better)}
.cats .cat-foot{border-top:0;padding-top:0}


/* Evidence badge: dot plus label, readable in both themes */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ev,var(--pop))}
.badge.tracking{--ev:var(--muted)}
.badge.researched{--ev:var(--star)}

/* Disclosure */
.disclosure{border-block:1px solid var(--line);padding-block:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:baseline}
.disclosure b{font-size:13px;letter-spacing:.06em}
.disclosure p{font-size:16px;max-width:90ch}
@media (max-width:600px){.disclosure{grid-template-columns:1fr}}

/* Section heads */
.sec{padding-block:56px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-head h2{font-size:clamp(26px,3vw,34px)}
.sec-head a{font-size:14px;font-weight:500;color:var(--accent)}
/* Centred editorial head: serif title with an arrow that is the "see all" link */
.sec-head.center{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:36px}
.sec-head.center h2{font-size:clamp(32px,4vw,48px)}
.sec-head.center h2 a{font-size:inherit;font-weight:inherit;color:var(--ink);display:inline-flex;align-items:center;gap:14px}
.sec-head .arr{width:.62em;height:.62em;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex:none}
.sec-head h2 a:hover .arr{transform:translateX(4px)}
.sec-head.center .filters{justify-content:center}
/* Card labels: spaced caps sitting between image and headline */
.kicker{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.4}
.byline{font-size:14px;color:var(--muted)}

/* Picks: numbered because the order is the editor's ranking */
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:760px){.picks{grid-template-columns:1fr}}
.pick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.pick .n{font-size:30px;font-weight:300;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.pick h3{font-family:var(--f-body);font-size:17px;line-height:1.3;font-weight:500;margin-top:2px}
.pick:hover h3{color:var(--accent)}
.pick:has(.pick-thumb){grid-template-columns:44px 64px minmax(0,1fr) auto}
.pick-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px}
@media (max-width:480px){.pick:has(.pick-thumb){grid-template-columns:36px 52px minmax(0,1fr) auto}.pick-thumb{width:52px;height:52px}}
.price{font-family:var(--f-display);font-size:24px;white-space:nowrap;font-variant-numeric:lining-nums}

/* Score ring */
.score{--s:80;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--s)*1%),var(--line) 0);position:relative;flex:none}
.score::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.score span{position:relative;font-family:var(--f-display);font-size:17px}

/* Letter + desk (Measured) */
.letter{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start}
.letter-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:start}
.letter-body > .letter-text:first-child{grid-column:1/-1} /* no editor photo yet: the text takes the full width instead of the 96px photo column */
.letter-body .ph{--r:3/4;border:6px solid var(--surface);border-bottom-width:22px;box-shadow:0 6px 18px rgba(43,31,23,.18);transform:rotate(-3deg);border-radius:2px}
.letter-body p{font-family:var(--f-display);font-size:21px;line-height:1.5;margin:0 0 14px;max-width:56ch}
.sig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--muted)}
.sig .hand{font-size:32px;font-weight:400;display:inline-block;transform:rotate(-4deg)}
.desk{position:relative;background:var(--surface);border:1px solid var(--line);padding:24px 26px 18px;transform:rotate(.8deg);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.desk h3{font-family:var(--f-hand);font-style:italic;font-size:22px;color:var(--accent);margin-bottom:6px}
.desk ul{list-style:none;margin:0;padding:0}
.desk li{padding-block:10px;border-bottom:1px dashed var(--line);display:grid;gap:2px}
.desk li:last-child{border-bottom:0}
.desk li b{font-size:15px}
.desk li .hand{color:var(--muted);font-size:16px}
@media (max-width:860px){.letter{grid-template-columns:1fr;gap:32px}.desk{transform:none}}
@media (max-width:520px){.letter-body{grid-template-columns:1fr}.letter-body .ph{width:88px}}

/* Method card (Method) */
.method-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:860px){.method-card{grid-template-columns:1fr;gap:32px}}
.steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding-block:14px;border-top:1px solid var(--line);font-size:17px}
.steps li::before{content:counter(s);font-family:var(--f-display);font-size:26px;line-height:1;color:var(--accent)}
.who{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:10px}
.who h3{font-size:24px}
.who p{color:var(--muted);font-size:15px}
.who .ph-line{color:var(--ink);font-weight:500}

/* Latest grid */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font:400 14px/1.4 var(--f-body);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.card{display:flex;flex-direction:column;gap:10px}
.card .ph{transition:transform .4s ease}
.card:hover .ph{transform:scale(1.02)}
.card .ph .score,.card .ph .price-chip{position:absolute;right:12px;bottom:12px;z-index:1;box-shadow:var(--shadow)}
.price-chip{background:var(--surface);border-radius:999px;padding:6px 12px;font-family:var(--f-display);font-size:18px;line-height:1.2}
.card h3{font-size:25px;line-height:1.18}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card .ph{border-radius:0}
.card .tag{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted)}
.feature{grid-column:span 2}
.feature .ph{--r:16/9}
.feature h3{font-size:28px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}.feature{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.card .ph{transition:none}}

/* Long read (Measured) */
.long{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.long .ph{--r:5/4}
.long h2{font-size:clamp(32px,4.2vw,52px);margin:14px 0 18px}
.long p{font-size:18px;color:var(--muted);margin:0 0 22px;max-width:46ch}
@media (max-width:860px){.long{grid-template-columns:1fr;gap:28px}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;text-align:center}
.stats .num{font-family:var(--f-display);font-size:clamp(40px,4.6vw,56px);line-height:1;color:var(--accent);font-variant-numeric:lining-nums}
.stats p{margin:10px auto 0;font-size:14px;color:var(--muted);max-width:24ch}
.stats-src{margin-top:24px;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* Fresh row: a compact, image-led strip between the category bar and the statement */
.fresh{padding-block:32px 0}
.fresh-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fr{display:flex;flex-direction:column;gap:6px;min-width:0}
.fr .ph{--r:16/9;border-radius:0;transition:transform .4s ease}
.fr:hover .ph{transform:scale(1.02)}
.fr .kicker{margin-top:6px;font-size:11px}
.fr h3{font-size:21px;line-height:1.22}
.fr:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fr .byline{font-size:13px}
/* Phones and small tablets: a sideways strip that runs to the screen edge, so the next card clearly peeks in.
   Proximity snapping (not mandatory) keeps a light flick from fighting the finger; overflow-y:hidden and
   overscroll-behavior-x keep up and down swipes on the page and stop the browser's back-swipe at the ends.
   --g matches the .wrap side padding so the first card lines up with the text above and below. */
.fresh-dots{display:none}
@media (max-width:860px){
  .fresh-row{--g:16px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 64px);gap:16px;margin-inline:calc(var(--g) * -1);padding-inline:var(--g);scroll-padding-inline:var(--g);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:4px}
  .fr{scroll-snap-align:start}
  .fresh-row::-webkit-scrollbar{display:none}
  .fresh-dots{display:flex;justify-content:center;margin-top:10px}
  .fresh-dots[hidden]{display:none}
  .fresh-dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .fresh-dots button::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--muted);opacity:.4;transition:width .2s ease,opacity .2s ease}
  .fresh-dots button[aria-current="true"]::before{width:20px;background:var(--ink);opacity:1}
  .fresh-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}
}
@media (min-width:600px) and (max-width:860px){.fresh-row{grid-auto-columns:calc(50% - 40px)}}
@media (min-width:700px) and (max-width:860px){.fresh-row{--g:28px}}
@media (prefers-reduced-motion:reduce){.fr .ph,.fresh-dots button::before{transition:none}}
.fresh + .statement{border-top:1px solid var(--line);margin-top:30px}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-block:48px 96px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-family:var(--f-body);color:var(--ink);font-size:14px;font-weight:500;margin:0 0 12px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-grid .logo{color:var(--ink);font-size:26px}
.foot-disc{margin-top:12px;max-width:52ch}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
/* Footer menu bar: the header menu again, plus "Published" (/all/), which is linked from here only (Jodi, 2026-11-09) */
.foot-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.foot-menu a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot-menu a:hover{color:var(--ink)}
@media (max-width:600px){.foot-menu{justify-content:flex-start;gap:10px 20px}.foot-menu a{letter-spacing:.07em}}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}
/* Footer on phones: the first two link groups side by side (the first narrower, its links are short), the third
   group (Legal) full width with its links flowing in rows, so it never sits alone beside an empty half. A link
   that wraps keeps its lines tight so it reads as one link; groups sit further apart than links (Omer, 2026-11-09). */
@media (max-width:700px){
	.foot-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px 20px}
	.foot-grid h4{margin-bottom:8px}
	.foot-grid ul{gap:4px}
	.foot-grid ul a{display:inline-block;padding-block:3px;line-height:1.35;text-wrap:balance}
	.foot-grid>div:nth-child(4):last-child{grid-column:1/-1}
	.foot-grid>div:nth-child(4):last-child ul{display:flex;flex-wrap:wrap;gap:4px 22px}
}


/* Latest articles strip */
.arts{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:1000px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;gap:8px;min-width:0}
.art .ph{aspect-ratio:auto;height:clamp(180px,17vw,230px)}
.art-type{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.art h3{font-size:24px;line-height:1.18}
.art.lead h3{font-size:30px}
.art .ph{border-radius:0}
.art p{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pinned{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pinned::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pop)}

/* Featured pick: one reusable box for homepage, articles and reviews */
.fpick{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,auto);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--pop);border-radius:var(--radius);padding:24px}
.fpick .ph{--r:1/1}
.fp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fp-label{font-family:var(--f-display);font-style:italic;font-size:20px;color:var(--accent)}
.fpick h3{font-size:30px;margin:8px 0 8px}
.fp-why{font-size:16px;max-width:52ch}
.fp-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px;font-size:14px;color:var(--muted)}
.fp-fact b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--ink);font-variant-numeric:lining-nums}
.fp-buy{display:grid;gap:10px;justify-items:start;min-width:200px}
.fp-buy .price{font-size:30px}
.fp-note{font-size:12px;color:var(--muted)}
.stars{color:var(--star);letter-spacing:2px;font-size:15px}
@media (max-width:860px){.fpick{grid-template-columns:120px minmax(0,1fr)}.fp-buy{grid-column:1/-1;min-width:0}}
@media (max-width:520px){.fpick{grid-template-columns:1fr}.fpick .ph{max-width:200px}}

/* Anchored products pill and drawer (Jodi's component, tokenised) */
.love-tab{position:fixed;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:12px 20px 12px 16px;font:500 13px/1 var(--f-body);letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform .2s,opacity .2s}
.love-tab .dot{width:9px;height:9px;border-radius:50%;background:var(--pop)}
.love-tab:hover{transform:translate(-50%,-2px)}
.love-scrim{position:fixed;inset:0;z-index:45;background:rgba(20,21,22,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.love-panel{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(400px,100%);background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s;display:flex;flex-direction:column;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px))}
:root.love-open .love-scrim{opacity:1;pointer-events:auto}
:root.love-open .love-panel{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
:root.love-open .love-tab{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.love-panel,.love-scrim,.love-tab{transition:none}}
.love-head{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.love-head h2{font-size:30px;margin-top:4px}
.love-head p{margin-top:6px;font-size:14px;color:var(--muted)}
.love-list{overflow-y:auto;flex:1;display:grid;align-content:start}
.love-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding-block:16px;border-bottom:1px solid var(--line);align-items:center}
.love-item .ph{--r:1/1}
.love-item b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.2}
.love-item .hand{display:block;font-size:16px;color:var(--muted);margin-top:2px}
.love-item .meta2{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.love-item .row2{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px}
.love-item .row2 a{color:var(--accent);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.love-foot{padding-top:16px;font-size:12px;color:var(--muted)}
/* Products pill on phones: a small round button in the corner, shown only after the first screen and hidden near the footer */
.love-tab .lt-ico{display:none}
@media (max-width:700px){
  .love-tab{left:auto;right:16px;width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;transform:translateY(16px);opacity:0;pointer-events:none}
  .love-tab:hover{transform:none}
  .love-tab .lt-ico{display:block}
  .love-tab .lt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .love-tab .dot{position:absolute;top:11px;right:11px;width:8px;height:8px;box-shadow:0 0 0 2px var(--ink)}
  :root.pill-ready .love-tab{opacity:1;transform:none;pointer-events:auto}
  :root.love-open .love-tab{opacity:0;pointer-events:none}
}




/* ===== Inner pages ===== */
.crumbs{font-size:13px;color:var(--muted);padding-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.page-head{max-width:900px;padding-block:20px 32px;display:grid;gap:14px}
/* Posts: one centered reading column, the title lined up with the text under it (the best-of mockup layout) */
.review-page .page-head{max-width:720px;margin-inline:auto}
.page-head h1{font-size:clamp(34px,5vw,56px);line-height:1.06}
.deck{font-family:var(--f-display);font-style:italic;font-size:21px;color:var(--muted);max-width:60ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:14px;color:var(--muted)}
.byline a{color:var(--ink);font-weight:500}
.hero-img{border-radius:var(--radius);background:var(--line) center/cover no-repeat;aspect-ratio:21/9;max-width:100%}
.caption{font-size:13px;color:var(--muted);margin-top:8px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-block:32px 72px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:32px}}
.side{position:sticky;top:130px;display:grid;gap:24px}
@media (max-width:960px){.side{position:static}}
.prose{font-size:18px;line-height:1.75;max-width:68ch;display:grid;gap:20px}
.prose h2{font-size:30px;margin-top:16px}
.prose.dropcap > p:first-of-type::first-letter{font-family:var(--f-display);float:left;font-size:72px;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.prose blockquote{margin:12px 0;padding-left:24px;border-left:2px solid var(--pop);font-family:var(--f-display);font-size:27px;line-height:1.35}
.prose figure{margin:8px 0}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.box{border-top:2px solid var(--ink);padding-top:14px}
.box h3{font-family:var(--f-body);font-size:14px;font-weight:500;margin-bottom:10px}
.box ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
.next{display:grid;gap:14px}
.next a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.next .ph{--r:1/1}
.next b{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.25;display:block}
.next small{font-size:12px;color:var(--muted)}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;font-size:13px;color:var(--muted)}
tr:last-child td{border-bottom:0}
.listing-head{display:grid;gap:14px;padding-block:20px 8px;max-width:820px}
.listing-head h1{font-size:clamp(34px,5vw,54px)}
.listing-head p{font-size:18px;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sort select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.pager{display:flex;gap:8px;justify-content:center;padding-block:40px 72px}
.pager a,.pager span{min-width:38px;height:38px;padding-inline:10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--surface)}
.pager span[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.avatar{border-radius:50%;background:var(--pop-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--f-display);flex:none}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;background:var(--surface)}
.note-ph{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:10px 14px}
.inner-main{padding-bottom:24px}



/* ===== WordPress additions ===== */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph.product > img{object-fit:contain;padding:6%;background:#fff}
.ph.photo::before,.ph.photo::after,.ph.product::before,.ph.product::after{z-index:1}
.ph[data-source="ai"]::after{content:"AI illustration";display:block;position:absolute;inset:8px auto auto 8px;background:rgba(20,21,22,.72);color:#f2f2ef;font:600 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:3px;z-index:2}
:root[data-proof="method"] .ph[data-source="ai"]::after{content:"Mit KI erstellt"}
.hb-ai-label{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wp-site-blocks > main{display:block}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Template parts render their children straight into the page, so the header stays sticky */
.hb-header-part{display:contents}
.wp-site-blocks > *{margin-block-start:0}
.wp-site-blocks{padding:0}
/* Archive grids built from core blocks */
.hb-archive .grid{list-style:none;margin:0;padding:0}
.hb-archive .grid > li{display:grid;gap:8px;align-content:start}
.hb-archive .wp-block-post-featured-image{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.hb-archive .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.hb-archive .wp-block-post-title{font-size:21px;line-height:1.25}
.hb-archive .tag a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hb-archive .card-meta{font-size:13px;color:var(--muted);gap:12px}
.author-head{display:grid;gap:14px}
.author-card{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.author-card-name{margin:0}
.author-card-role{margin:6px 0 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.author-card-bio{margin-top:12px;max-width:62ch;font-size:17px;line-height:1.6}
.author-card-bio p{margin:0 0 .8em}.author-card-bio p:last-child{margin:0}
.hb-author-photo{display:block;flex:none;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--line)}
.hb-author-initials{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display,inherit);font-weight:600;letter-spacing:.04em;color:var(--ink);background:var(--line)}
@media (max-width:600px){.author-card{grid-template-columns:1fr;gap:14px}.author-card-photo .hb-author-photo{width:96px!important;height:96px!important}}
.sec-title{font-size:clamp(26px,3vw,34px);margin:40px 0 20px}
/* Core blocks inside the prototype's sections */
.hero-links.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.hero-links .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:2px;font:500 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--bg)}
.hero-links .is-style-link .wp-block-button__link{background:none;color:var(--ink);padding:0 0 3px;border-radius:0;font-size:12px;letter-spacing:.18em;border-bottom:1px solid var(--ink)}
.letter-body .is-style-polaroid{margin:0}
.letter-body .is-style-polaroid img{aspect-ratio:3/4;object-fit:cover;border:6px solid var(--surface);border-bottom-width:22px;box-shadow:0 6px 18px rgba(43,31,23,.18);transform:rotate(-3deg);border-radius:2px}
.letter-body .eyebrow + p{margin-top:12px}
.method-card ol.steps{margin:0}
.statement h1.wp-block-heading{font-size:clamp(34px,4.8vw,58px);line-height:1.05;max-width:22ch}
.prose > * + *{margin-top:1em}
.method-card h2{font-size:clamp(26px,3vw,34px)}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
/* Under 600px WordPress lets its admin bar scroll away, so the header sticks at the very top for logged-in staff too. */
@media (max-width:600px){.admin-bar .site-head{top:0}}
/* Preferred source on Google: official badge, swapped for the dark version in dark mode */
.pref-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:18px 22px;margin:40px 0 8px;max-width:820px}
.pref-source p{font-size:15px;line-height:1.5;color:var(--muted);flex:1 1 280px}
.pref-source a{flex:none;line-height:0}
.pref-source img{width:225px;height:auto}
.pref-source .gps-dark{display:none}
:root[data-theme="dark"] .pref-source .gps-light{display:none}
:root[data-theme="dark"] .pref-source .gps-dark{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pref-source .gps-light{display:none}:root:not([data-theme="light"]) .pref-source .gps-dark{display:inline}}

/* Uploaded logo image, with an optional dark-mode version (Settings > Site profile).
   OneClearWinner's flag sits above the wordmark, so the image is nudged up 3px to centre the wordmark on the menu */
.logo{display:inline-flex;align-items:center;line-height:1}
.logo-img{display:block;height:40px;width:auto;position:relative;top:-3px}
.site-foot .logo-img{height:36px;top:0}
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-dark{display:block}
:root[data-theme="dark"] .logo-on-light:has(+ .logo-on-dark){display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-on-dark{display:block}:root:not([data-theme="light"]) .logo-on-light:has(+ .logo-on-dark){display:none}}
@media (max-width:600px){.site-head .logo-img{height:32px;top:-2px}}
/* Link from a review to the live comparison page */
.compare-live{display:block;margin-top:12px;font-size:14px;font-weight:500;color:var(--accent)}

/* Pick card and Trending now (homepage, picks and trends first) */
.pk .cat-body{gap:10px}
.pk-kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pk-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pk-name{font-family:var(--f-display);font-size:30px;line-height:1.1}
.pk-why{font-size:16px;line-height:1.55}
.pk-how{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.pk-how b{font-weight:600;color:var(--ink)}
.pk-links{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:4px}
.pk-compare{font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.trend-sub{font-size:16px;color:var(--muted)}
#trending .pick h3{font-family:var(--f-display);font-weight:400;font-size:20px}

/* About page (pattern hb/page-about): the site's own page header, prose, photo frame and stats row */
.prose .about-photo{margin:8px 0}
.prose .about-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius,4px)}
.prose .about-stats{border-block:1px solid var(--line);padding-block:32px}
.stats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.prose .about-stats .stats{grid-template-columns:1fr;gap:24px}}
.prose .about-links{list-style:none;padding:0;display:grid;gap:0}
.prose .about-links li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.prose .about-links a{color:var(--ink);font-weight:600}

/* Contact page and hb/contact-form */
.contact-banner{margin:24px 0 40px}
.contact-banner img{width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;object-position:50% 30%}
.contact-cols{gap:48px;margin-bottom:64px}
.contact-cols h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin-bottom:12px}
.contact-cols p{font-size:17px;line-height:1.6;color:var(--muted)}
.contact-form form{display:grid;gap:14px}
.contact-form .cf-field{display:grid;gap:6px;margin:0}
.contact-form label{font-size:14px;font-weight:500;color:var(--ink)}
.contact-form input,.contact-form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,6px);padding:10px 12px;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.contact-form .cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .cf-note{padding:14px 16px;border-radius:var(--radius,6px);font-size:16px}
.contact-form .cf-ok{background:var(--pop-soft);color:var(--better)}
.contact-form .cf-err{background:var(--accent-soft);color:var(--worse)}
@media (max-width:781px){.contact-cols{gap:20px}.contact-banner img{aspect-ratio:16/7}}

/* Site pages: team cards, cookie tables */
.prose .lede{font-size:20px;line-height:1.6;color:var(--muted)}
.prose .muted{font-size:14px;color:var(--muted)}
.prose .team-grid{gap:16px;margin:0}
.prose .team-card{border:1px solid var(--line);border-radius:var(--radius,6px);background:var(--surface);padding:18px 20px;display:grid;align-content:start;gap:6px}
.prose .team-card h3{font-size:20px;margin:0}
.prose .team-card p{font-size:15px;line-height:1.55;margin:0}
.prose .team-editor{border-left:2px solid var(--pop);padding-left:22px;display:grid;gap:12px}
.prose .team-editor h3{font-size:26px;margin:0}
/* Team photos: round head-and-shoulders portraits, the same size on every card */
/* Photos: one fixed size per role, whatever size was picked or dragged in the editor (!important beats the
   inline width WordPress saves on a resized image). A card with no photo yet keeps the same space, so the names
   in a row still line up. */
.prose .team-photo{margin:0 0 4px;width:72px!important;max-width:none!important;height:72px}
.prose .team-photo img{display:block;width:72px!important;height:72px!important;max-width:none!important;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--line)}
.prose .team-photo-editor{width:112px!important;height:112px}
.prose .team-photo-editor img{width:112px!important;height:112px!important}
.prose .team-grid:has(.team-photo) .team-card > :first-child:not(.team-photo){margin-top:76px}
/* The team page uses the full content width: three cards side by side need it. */
.prose:has(.team-grid){max-width:none}
.prose:has(.team-grid) > :not(.team-grid):not(.team-editor){max-width:68ch}
.prose .cookie-table{margin:0;overflow-x:auto}
.prose .cookie-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose .cookie-table th,.prose .cookie-table td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.prose .cookie-table th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.prose .cookie-table td:first-child{font-family:ui-monospace,Menlo,monospace;font-size:14px;white-space:nowrap}


/* Icon sets per design (hb_icon() picks the set) */
svg.ic-lucide{fill:none!important;stroke-width:1.75}
svg.fact-ico.ic-lucide{stroke-width:1.4}
svg.ic-ph{stroke:none!important}
svg.ci.ic-ph,svg.gi.ic-ph{fill:var(--accent)!important}
svg.fact-ico.ic-ph{fill:var(--ink)!important}
.prose .cookie-table thead{border:0}
.prose .cookie-table :is(th,td){border-width:0 0 1px;border-style:solid;border-color:var(--line)}

/* Cookie consent banner (inc/consent.php): Accept and Reject look the same */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius,6px);box-shadow:0 18px 40px -16px rgba(0,0,0,.35)}
.consent[hidden]{display:none}
.consent p{flex:1 1 320px;margin:0;font-size:15px;line-height:1.5}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.consent-btns{display:flex;gap:10px;flex:none}
.consent-btn{background:var(--accent);color:var(--bg);min-width:112px}

/* Image block option "Amazon button" (inc/image-buy.php): the image in a frame, a full-width button under it */
.wp-block-image.has-buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,4px);padding:10px;display:grid;gap:10px}
.wp-block-image.has-buy img{border-radius:calc(var(--radius,4px) - 2px);width:100%;height:auto}
.wp-block-image.has-buy .img-buy-btn{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;padding:13px 18px;background:var(--accent);color:var(--bg);border-radius:var(--radius,4px);font:600 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.wp-block-image.has-buy .img-buy-btn:hover{filter:brightness(1.08)}
.wp-block-image.has-buy .img-buy-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.img-buy-note{font-size:12px;color:var(--muted);text-align:center;margin-top:-4px}
.wp-block-image.has-buy figcaption{margin:0;padding:0 2px}
/* Product picks row (Columns block with class hb-product-row, e.g. "Our Amazon beach picks"): on desktop every
   card is the same height and each image, H3 and text block starts on the same line, even when one caption wraps.
   Images sit in a square frame, uncropped. Any number of columns; phones stack as before (Jodi, 2026-11-08). */
@media (min-width:782px){
	.hb-product-row{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
	.hb-product-row>.wp-block-column{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
	.hb-product-row>.wp-block-column>figure{height:100%;box-sizing:border-box}
	.hb-product-row>.wp-block-column>figure.has-buy{align-content:start;grid-template-rows:auto auto auto 1fr}
	.hb-product-row figure.has-buy>img{aspect-ratio:1/1;object-fit:contain;width:100%;height:auto}
	.hb-product-row>.wp-block-column>h3{margin-top:28px}
}

/* Header tools: Google preferred-source badge and the disclosure "i" (blocks/site-header) */
.site-head .head-tools{align-items:center;gap:8px}
.pref-mini{flex:none;line-height:0;display:inline-block}
.pref-mini img{height:auto}
.pref-mini .gps-dark{display:none}
:root[data-theme="dark"] .pref-mini .gps-light{display:none}
:root[data-theme="dark"] .pref-mini .gps-dark{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pref-mini .gps-light{display:none}:root:not([data-theme="light"]) .pref-mini .gps-dark{display:inline}}
.site-head .pref-mini.in-head{margin-right:6px}
.site-head .pref-mini.in-head img{width:112px}
.info-btn[aria-expanded="true"],.info-btn:hover{border-color:var(--ink)}
.disc-pop{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--pop);border-radius:var(--radius,4px);box-shadow:0 14px 30px -12px rgba(0,0,0,.28);padding:14px 16px;font:400 14px/1.55 var(--f-body);text-align:left}
.disc-pop b{font-weight:600}
.disc-pop a{font-weight:600;white-space:nowrap;color:var(--accent)}
.disc-pop:not(:popover-open):not(.open){display:none}
@media (max-width:600px){.site-head .head-tools{gap:6px}.site-head .icon-btn{width:34px;height:34px}.site-head .pref-mini.in-head{margin-right:2px}.site-head .pref-mini.in-head img{width:86px}.site-head .cat-toggle > span{display:none}.site-head .cat-toggle{padding:0 10px;height:34px}}
@media (max-width:480px){.site-head > .wrap{gap:8px}.site-head #theme{display:none}}
@media (max-width:400px){.site-head .cat-toggle .chev{display:none}.site-head .pref-mini.in-head img{width:80px}}
@media (max-width:360px){.site-head .head-tools a.icon-btn[href*="?s="]{display:none}}
/* Phones: logo on the left, every button together on the right with the menu (Categories) button last, all
   the same 34px circle. The footer menu bar repeats the footer columns on a phone, so it stays desktop only,
   and the footer ends without the tall empty strip (Omer, 2026-11-09). */
@media (max-width:600px){
	.site-head .head-tools{margin-left:auto}
	.site-head .cat-toggle{order:3;width:34px;height:34px;padding:0;justify-content:center;border-radius:50%;margin-left:-6px}
	.site-head .cat-toggle .chev{display:none}
	.site-foot{padding-bottom:40px}
	.foot-menu{display:none}
}

/* Proof cards section with no card left (all still [placeholders]): hide the empty section. */
.cats:not(:has(.cat)){display:none}

/* ---------- Category hub (blocks/category-hub, from the mockup's category-hub.html) ---------- */
.hub-head{display:grid;gap:14px;padding-block:18px 26px;border-bottom:1px solid var(--line)}
.hub-head .kicker{margin:0}
.hub-head h1{font-size:clamp(40px,6vw,72px);line-height:1}
.hub-head h1 .hub-page{font-size:.4em;color:var(--muted);font-weight:400}
.hub-head .deck{font-size:19px;color:var(--muted);max-width:62ch;margin:0}
.hub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hub-tabs a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--ink)}
.hub-tabs a:hover{border-color:var(--ink)}
.hub-tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:36px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.hub-lead{grid-template-columns:1fr;gap:22px}}
.hub-lead .ph{--r:4/3;border-radius:var(--radius)}
.hub-lead-body{display:grid;gap:14px}
.hub-lead-body .award{font-family:var(--f-display);font-style:italic;font-size:20px;color:var(--accent)}
.hub-lead-body h2{font-size:clamp(32px,4vw,48px);line-height:1.05;margin:0}
.hub-lead-body h2 a{color:inherit}
.hub-lead-body .why{font-size:18px;line-height:1.55;margin:0}
.hub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--muted)}
.hub-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border-left:3px solid var(--pop);padding-left:14px}
.hub-fact b{font-family:var(--f-display);font-weight:400;font-size:30px}
.hub-fact span{font-size:14px;color:var(--muted)}
.hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px}
.hub-sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:20px}
.hub-sec-head h2{margin:0}
.hub-sec-head a{font-size:14px;font-weight:500;color:var(--accent)}
.hub-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.hub-awards{grid-template-columns:1fr}}
.hub-aw{display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--ink);padding-top:14px}
.hub-aw .label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hub-aw .ph{--r:3/2;border-radius:var(--radius)}
.hub-aw h3{font-size:24px;margin:0}
.hub-aw h3 a{color:inherit}
.hub-aw p{font-size:15px;color:var(--muted);margin:0}
.hub-aw .links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;margin-top:auto}
.hub-aw .links a{color:var(--accent);font-weight:500}
.hub-guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
@media (max-width:1000px){.hub-guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hub-guides{grid-template-columns:1fr}}
.hub-guide{display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.hub-guide .ph{--r:4/3;border-radius:var(--radius)}
.hub-guide .kicker{margin-top:6px}
.hub-guide h3{font-size:20px;line-height:1.25;margin:0}
.hub-guide:hover h3,.hub-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hub-guide .by{font-size:13px;color:var(--muted)}
.hub-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
.hub-split-solo{grid-template-columns:1fr}
@media (max-width:900px){.hub-split{grid-template-columns:1fr}}
.hub-latest{display:grid}
.hub-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;padding-block:20px;border-top:1px solid var(--line);align-items:start;color:var(--ink)}
@media (max-width:560px){.hub-row{grid-template-columns:110px minmax(0,1fr);gap:14px}}
.hub-row .ph{--r:4/3;border-radius:var(--radius)}
.hub-row h3{font-size:22px;line-height:1.2;margin:4px 0 6px}
.hub-row p{font-size:15px;color:var(--muted);margin:0}
.hub-row .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--muted);margin-top:8px}
.hub-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:15px}
.hub-pager a,.hub-pager span{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.hub-pager .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-side{display:grid;gap:26px;position:sticky;top:92px}
@media (max-width:900px){.hub-side{position:static}}
.hub-tester{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:20px;display:grid;gap:10px}
.hub-tester .kicker{margin:0}
.hub-tester .hub-who{display:flex;gap:14px;align-items:center}
.hub-tester .hub-avatar{border-radius:50%;width:56px;height:56px}
.hub-tester b{font-size:17px}
.hub-tester .role{font-size:14px;color:var(--muted)}
.hub-tester p{font-size:15px;margin:0}
.hub-tester .stat{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);border-left:3px solid var(--pop);padding-left:12px}
.hub-tester .stat b{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--ink)}
.hub-tester a,.hub-method a{color:var(--accent);font-weight:500;font-size:14px}
.hub-method{background:var(--pop-soft,var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:10px}
.hub-method h3{font-size:20px;margin:0}
.hub-method ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}

/* Button blocks linking to Amazon (inc/amazon-links.php): the same buy button as the image "Amazon button" */
.hb-amazon-row{display:block!important;margin-block:1rem 1.75rem}
.wp-block-button.hb-amazon-btn{display:grid;gap:8px;width:100%}
.wp-block-button.hb-amazon-btn .wp-block-button__link{display:flex;align-items:center;justify-content:center;width:100%;padding:13px 18px;background:var(--accent);color:var(--bg);border-radius:var(--radius,4px);font:600 13px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.wp-block-button.hb-amazon-btn .wp-block-button__link::after{content:"\00a0\203A"}
.wp-block-button.hb-amazon-btn .wp-block-button__link:hover{filter:brightness(1.08)}
.wp-block-button.hb-amazon-btn .wp-block-button__link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wp-block-button.hb-amazon-btn .img-buy-note{margin-top:0}

/* Mockup sections added October 2026 (inc/sections.php): on this page, jump bar, the whole list, read next,
   more lists, photo mosaic, products panel in the editor, 404. */
.toc{margin-block:1.5rem}
.toc h3{font-family:var(--f-body);font-size:14px;font-weight:500;margin:0 0 8px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:14px}
.toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--muted);text-decoration:none}
.toc a:hover,.toc a.on{border-left-color:var(--pop);color:var(--ink)}
.jump{position:sticky;top:var(--head-h,68px);z-index:15;border-block:1px solid var(--line);background:var(--bg);margin-block:1.5rem}
.jump-in{display:flex;align-items:center;gap:8px;height:48px;overflow-x:auto;scrollbar-width:none}
.jump-in::-webkit-scrollbar{display:none}
.jump span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px;white-space:nowrap}
.jump a{font-size:14px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 14px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.jump a:hover,.jump a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
h2[id],h3[id]{scroll-margin-top:calc(var(--head-h,68px) + 64px)}
.glance{margin-block:2rem;background:var(--surface);border:1px solid var(--line);padding:22px 26px}
.glance h2{font-size:24px;margin:0 0 8px}
.glance ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.glance li{break-inside:avoid;margin:0}
.glance a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;text-decoration:none;color:var(--ink)}
.glance a:hover .g-name{text-decoration:underline;text-underline-offset:3px}
.g-n{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
@media (max-width:700px){.glance ol{columns:1}}
.read-next{margin-block:2rem}
.read-next .next a{text-decoration:none;color:var(--ink)}
.more{margin-top:72px;padding-top:44px;border-top:1px solid var(--line)}
.more-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.more-row .fr{text-decoration:none;color:var(--ink)}
@media (max-width:760px){.more-row{grid-template-columns:1fr}}
.wp-block-gallery.hb-mosaic{display:grid!important;grid-template-columns:2fr 1fr 1fr;gap:10px}
.wp-block-gallery.hb-mosaic > .wp-block-image{width:auto!important;margin:0!important}
.wp-block-gallery.hb-mosaic img{height:clamp(180px,24vw,300px)!important;width:100%;object-fit:cover}
.wp-block-gallery.hb-mosaic > figcaption{grid-column:1/-1;font-size:13px;color:var(--muted);text-align:left;margin-top:8px}
@media (max-width:700px){.wp-block-gallery.hb-mosaic{grid-template-columns:1.4fr 1fr}.wp-block-gallery.hb-mosaic > .wp-block-image:nth-of-type(3){display:none}}
.love .love-item .row2{gap:16px;justify-content:flex-start}
.love-close{flex:none}
/* In the editor the panel shows open, in place, so it can be checked */
.love-preview .love-tab,.love-preview .love-scrim{display:none}
.love-preview .love-panel{position:static;transform:none;visibility:visible;width:auto;max-width:400px;border:1px solid var(--line)}
.nf{display:grid;gap:16px;max-width:680px;padding-block:56px 32px}
.nf .hand{font-size:24px}
.nf h1{font-size:clamp(40px,6vw,72px)}
.nf p{font-size:19px;color:var(--muted);margin:0}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:8px}

/* Top list product (blocks/top-item): the WordPress version of the old /product/ ranked cards.
   Manufacturer images sit contained on a white tile (design system 2.7); no prices, scores or discounts. */
.top-item{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,4px);padding:22px 24px 24px;margin-block:0 20px;scroll-margin-top:140px}
.top-item.is-first{border-color:var(--pop)}
.ti-media{position:relative}
.ti-rank{position:absolute;top:-10px;left:-10px;z-index:1;display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font:400 19px/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums}
.is-first .ti-rank{background:var(--pop);border-color:var(--pop);color:#1f2224}
.ti-img{margin:0}
.ti-img img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:6%;background:#fff;border:1px solid var(--line);border-radius:var(--radius,4px)}
.ti-img figcaption{margin-top:6px;font-size:11px;line-height:1.3;color:var(--muted)}
.ti-main{min-width:0}
.ti-label{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:var(--pop-soft);color:var(--ink);font:500 12px/1.2 var(--f-body);letter-spacing:.04em}
.ti-name{font-size:clamp(20px,2.2vw,24px);line-height:1.2;margin:0}
.ti-brand{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ti-why{margin:12px 0 0;font-size:16px;line-height:1.55}
.ti-high{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.5}
.ti-high li{position:relative;padding-left:18px}
.ti-high li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pop)}
.ti-high strong{font-weight:600}
.ti-more{margin-top:12px}
.ti-more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:var(--accent)}
.ti-more summary:hover{text-decoration:underline;text-underline-offset:3px}
.ti-more summary::-webkit-details-marker{display:none}
.ti-more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease-out}
.ti-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ti-more summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.ti-count{color:var(--muted);font-weight:400}
.ti-buy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ti-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;background:var(--accent);color:var(--bg);border-radius:2px;font:600 13px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:filter .15s ease-out}
.ti-btn:hover{filter:brightness(1.1);color:var(--bg)}
.ti-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ti-note{font-size:12px;color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ti-img img{filter:brightness(.9)}}
:root[data-theme="dark"] .ti-img img{filter:brightness(.9)}
@media (max-width:600px){
  .top-item{grid-template-columns:92px minmax(0,1fr);gap:0 16px;padding:18px 16px 16px;align-items:start}
  .ti-main{display:contents}
  .ti-media{grid-column:1;grid-row:1/span 3}
  .ti-label,.ti-name,.ti-brand{grid-column:2;justify-self:start}
  .ti-label{margin-bottom:8px}
  .ti-name{font-size:19px}
  .ti-why,.ti-high,.ti-more,.ti-buy,.top-item>.hb-missing{grid-column:1/-1}
  .ti-why{margin-top:16px}
  .ti-rank{min-width:30px;height:30px;font-size:16px;top:-8px;left:-8px}
  .ti-img figcaption{font-size:10px}
  .ti-high{font-size:15px}
  .ti-btn{flex:1 1 100%}
  .ti-note{flex:1 1 100%;text-align:center}
}