/* enhance.css — progressive interactivity + product-photo slots.
   Loaded AFTER each page's inline <style>. Self-hosted, same-origin (GDPR-safe).
   Everything here degrades gracefully: with JS off, nothing is hidden. */

/* smooth in-page scrolling for anchor links (#top-picks etc.) — but not for people
   who asked the OS for less motion; instant jumps are the accessible fallback */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

/* nicer line breaks: balanced headings, no single-word orphans in running text.
   Progressive enhancement — browsers without text-wrap support just ignore it. */
h1,h2,h3{text-wrap:balance}
.prose p,.lead,.why{text-wrap:pretty}
/* hub-page category headings are h2 for correct document outline (h1 -> h2),
   but keep the compact card-heading look they had as h3 */
.card h2.card-title{font-size:1.2rem;letter-spacing:0;margin-bottom:8px}

/* ---- product photo slot ----
   Cards stay clean until a real file exists in images/products/.
   If the image 404s, enhance.js/onerror removes .media and the card
   looks exactly as before — no broken-image icon, no empty block. */
.card{overflow:hidden}
.media{background:#EDECE6;aspect-ratio:4/3;overflow:hidden;line-height:0}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.card:hover .media img{transform:scale(1.045)}

/* ---- scroll reveal (class is added by JS, so no-JS = always visible) ---- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---- back-to-top button (created by JS) ---- */
.to-top{position:fixed;inset-inline-end:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s,background .15s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-hover)}
.to-top:focus-visible{outline:3px solid var(--accent-hover);outline-offset:2px}

/* ---- sortable compare tables (headers made interactive by JS) ---- */
.tablewrap table th[aria-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.tablewrap table th[aria-sort]:hover{color:var(--accent)}
.tablewrap table th[aria-sort]::after{content:'\2195';font-size:.82em;opacity:.35;margin-inline-start:6px}
.tablewrap table th[aria-sort="ascending"]::after{content:'\2191';opacity:1;color:var(--accent)}
.tablewrap table th[aria-sort="descending"]::after{content:'\2193';opacity:1;color:var(--accent)}

/* ---- bigger, bolder headlines site-wide ---- */
h1{font-size:clamp(2.2rem,6.6vw,3.35rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,4.6vw,2.15rem);letter-spacing:-.02em}
.lead{font-size:1.18rem}
/* accent bar under section headings (highlight) — targets section/prose h2s,
   not the centered signup or the trust-strip heading */
main .wrap>h2{position:relative;padding-bottom:.4rem}
main .wrap>h2::after{content:'';position:absolute;inset-inline-start:0;bottom:0;width:46px;height:4px;
  border-radius:2px;background:var(--accent)}
/* highlight key text + prices */
.prose strong,.lead strong{color:var(--accent);font-weight:600}
.price{color:var(--accent);font-size:1.1rem}
.price span{color:var(--muted)}
.price [data-price]{color:var(--accent);font-weight:600;font-size:1.05rem} /* price / "See price on Amazon" stays prominent */
.price-asof{display:block;color:var(--muted);font-size:.72rem;font-weight:400;margin-top:3px} /* Amazon "as of" disclaimer */
.price-asof:empty{display:none} /* hidden until amazon-prices.mjs stamps it */
.chip-tag{font-size:.82rem;padding:4px 12px}
.chip-tag.line{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} /* extra-pick tags (Ultralight/Premium/etc.) */

/* ---- landing hero: self-hosted photo + legibility scrim, now taller ----
   Only index.html has .hero, so this targets the landing page only. */
/* image-set lets WebP-capable browsers take the small file and everyone else fall back to
   the JPEG. The url() line stays first as the fallback for browsers that ignore image-set. */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;
  background:#201f1b url('images/hero.jpg') center 38% / cover no-repeat;
  background-image:image-set(url('images/hero.webp') type('image/webp'), url('images/hero.jpg') type('image/jpeg'));
  padding-top:120px;padding-bottom:120px}
.hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,20,16,.85),rgba(18,20,16,.5) 48%,rgba(18,20,16,.15))}
.hero .wrap{position:relative;width:100%}   /* content sits above the scrim */
.hero h1{color:#fff;font-size:clamp(2.6rem,7.2vw,4.1rem)}
.hero .lead{color:rgba(255,255,255,.94);font-size:1.28rem;max-width:40rem}
.hero .trust{color:rgba(255,255,255,.82)}
@media(max-width:820px){
  .hero{min-height:74vh;padding-top:72px;padding-bottom:64px}
  .hero h1{font-size:clamp(2.2rem,9vw,2.9rem)}
  .hero::before{background:linear-gradient(90deg,rgba(18,20,16,.82),rgba(18,20,16,.62))}
  /* phones were downloading the 1920px hero for a 412px screen */
  .hero{background-image:url('images/hero-mobile.jpg')}
  .hero{background-image:image-set(url('images/hero-mobile.webp') type('image/webp'), url('images/hero-mobile.jpg') type('image/jpeg'))}
}

/* ---- more generous vertical rhythm ---- */
main section{padding-bottom:80px}
.grid{gap:26px}

/* ---- category cards become photo tiles (injected by the build script) ---- */
.cat-card{overflow:hidden}
.cat-thumb{aspect-ratio:16/10;overflow:hidden;background:#EDECE6;line-height:0}
.cat-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cat-card:hover .cat-thumb img{transform:scale(1.05)}
.cat-card .body{padding:20px}

/* ---- full-width lifestyle photo band ---- */
.photoband{position:relative;background:#20241d center/cover no-repeat;color:#fff;text-align:center;
  padding:110px 0;margin:8px 0}
.photoband::before{content:'';position:absolute;inset:0;background:rgba(18,20,16,.55)}
.photoband .wrap{position:relative}
.photoband h2{color:#fff;font-size:clamp(2rem,4.8vw,2.9rem)}
.photoband .wrap>h2::after{left:50%;transform:translateX(-50%)}
.photoband p{max-width:40rem;margin:14px auto 22px;color:rgba(255,255,255,.93);font-size:1.2rem}
@media(max-width:820px){.photoband{padding:72px 0}}
/* Moved off an inline style on index.html so the band can serve WebP + a phone-sized crop. */
.photoband--home{background-image:url('images/band-home.jpg')}
.photoband--home{background-image:image-set(url('images/band-home.webp') type('image/webp'), url('images/band-home.jpg') type('image/jpeg'))}
@media(max-width:820px){
  .photoband--home{background-image:url('images/band-home-mobile.jpg')}
  .photoband--home{background-image:image-set(url('images/band-home-mobile.webp') type('image/webp'), url('images/band-home-mobile.jpg') type('image/jpeg'))}
}

/* ---- back arrow — compact button injected into the sticky header (subpages only) ---- */
.navbar .backlink{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;padding:0;border-radius:10px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,transform .15s ease}
.navbar .backlink span{font-size:1.25rem;line-height:1}
.navbar .backlink:hover{color:var(--accent);border-color:var(--accent);transform:translateX(-2px)}
.navbar .backlink:focus-visible{outline:3px solid var(--accent-hover);outline-offset:2px}

/* ---- category header banner ----
   EN pages carry this banner statically in the HTML (see the <picture> after the
   breadcrumb): injecting it from JS after first paint cost 0.22 CLS and put the
   image outside the preload scanner's reach. enhance.js still injects it on the
   language builds, which have not been rebuilt with the static markup yet. */
.cat-banner{height:clamp(190px,26vw,280px);margin:18px 0 6px;border-radius:16px;overflow:hidden;
  background:#20241d center 45%/cover no-repeat;box-shadow:var(--shadow);position:relative}
.cat-banner img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.cat-banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,18,0) 55%,rgba(20,24,18,.3))}

/* ---- "how we pick" photo (injected by enhance.js on the homepage) ---- */
.trust-strip.has-photo{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center}
.trust-strip .tp-photo{width:100%;height:100%;min-height:160px;max-height:220px;
  border-radius:12px;object-fit:cover;display:block}
@media(max-width:820px){.trust-strip.has-photo{grid-template-columns:1fr}
  .trust-strip .tp-photo{max-height:180px}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover .media img{transform:none}
  .media img,.to-top{transition:none}
}


/* ---- accessibility: skip link (WCAG 2.4.1) + consistent link focus (2.4.7) ---- */
.skip-link{position:absolute;inset-inline-start:8px;top:-56px;z-index:100;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0;outline:3px solid var(--accent-hover);outline-offset:2px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent-hover);outline-offset:2px;border-radius:3px}
#main:focus{outline:none}
@media (prefers-reduced-motion: reduce){.skip-link{transition:none}}

/* === language switcher (dropdown + flags) === */
.langsw{position:relative;font-size:.82rem}
.langsw>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;background:var(--surface);
  color:var(--muted);font-weight:600;white-space:nowrap;user-select:none}
.langsw>summary::-webkit-details-marker{display:none}
.langsw>summary::marker{content:""}
.langsw>summary:hover{color:var(--accent);border-color:var(--accent)}
.langsw .chev{width:10px;height:10px;flex:0 0 auto;transition:transform .15s ease;opacity:.7}
.langsw[open] .chev{transform:rotate(180deg)}
.langsw .cur-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis}

.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  display:grid;grid-template-columns:repeat(2,minmax(9.5rem,1fr));gap:1px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:0 14px 38px rgba(0,0,0,.17);max-height:min(70vh,26rem);overflow:auto}
.lang-menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
  color:var(--ink);font-weight:500;line-height:1.3;white-space:nowrap}
.lang-menu a:hover{background:var(--bg);text-decoration:none;color:var(--accent)}
.lang-menu a[aria-current]{background:var(--accent);color:#fff;font-weight:700}
.lang-menu a[aria-current]:hover{color:#fff}

.flag{width:20px;height:14px;flex:0 0 auto;border-radius:2.5px;background-size:cover;
  background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.16) inset}
.flag-en{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23012169'/><path d='M0 0l6 4M6 0L0 4' stroke='%23fff' stroke-width='.9'/><path d='M0 0l6 4M6 0L0 4' stroke='%23C8102E' stroke-width='.5'/><path d='M3 0v4M0 2h6' stroke='%23fff' stroke-width='1.4'/><path d='M3 0v4M0 2h6' stroke='%23C8102E' stroke-width='.85'/></svg>")}
.flag-de{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23000'/><rect y='1.333' width='6' height='1.334' fill='%23DD0000'/><rect y='2.667' width='6' height='1.333' fill='%23FFCE00'/></svg>")}
.flag-pl{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='2' width='6' height='2' fill='%23DC143C'/></svg>")}
.flag-tr{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23E30A17'/><circle cx='2.3' cy='2' r='1' fill='%23fff'/><circle cx='2.62' cy='2' r='.8' fill='%23E30A17'/><polygon points='3.72,1.44 3.85,1.84 4.27,1.84 3.93,2.09 4.06,2.49 3.72,2.24 3.38,2.49 3.51,2.09 3.17,1.84 3.59,1.84' fill='%23fff'/></svg>")}
.flag-fr{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='2' height='4' fill='%23002395'/><rect x='4' width='2' height='4' fill='%23ED2939'/></svg>")}
.flag-nl{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.333' fill='%23AE1C28'/><rect y='2.667' width='6' height='1.333' fill='%2321468B'/></svg>")}
.flag-cs{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='2' width='6' height='2' fill='%23D7141A'/><path d='M0 0l3 2-3 2z' fill='%2311457E'/></svg>")}
.flag-ru{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='1.333' width='6' height='1.334' fill='%230039A6'/><rect y='2.667' width='6' height='1.333' fill='%23D52B1E'/></svg>")}
.flag-uk{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%230057B7'/><rect y='2' width='6' height='2' fill='%23FFD700'/></svg>")}
.flag-it{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='2' height='4' fill='%23009246'/><rect x='4' width='2' height='4' fill='%23CE2B37'/></svg>")}
.flag-ro{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23FCD116'/><rect width='2' height='4' fill='%23002B7F'/><rect x='4' width='2' height='4' fill='%23CE1126'/></svg>")}
.flag-es{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23AA151B'/><rect y='1' width='6' height='2' fill='%23F1BF00'/></svg>")}
.flag-hu{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.333' fill='%23CE2939'/><rect y='2.667' width='6' height='1.333' fill='%23477050'/></svg>")}
.flag-hr{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.333' fill='%23FF0000'/><rect y='2.667' width='6' height='1.333' fill='%23171796'/><rect x='2.35' y='1.15' width='1.3' height='1.3' fill='%23fff' stroke='%23FF0000' stroke-width='.14'/><rect x='2.35' y='1.15' width='.65' height='.65' fill='%23FF0000'/><rect x='3' y='1.8' width='.65' height='.65' fill='%23FF0000'/></svg>")}
.flag-el{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='0' width='6' height='.444' fill='%230D5EAF'/><rect y='.889' width='6' height='.444' fill='%230D5EAF'/><rect y='1.778' width='6' height='.444' fill='%230D5EAF'/><rect y='2.667' width='6' height='.444' fill='%230D5EAF'/><rect y='3.556' width='6' height='.444' fill='%230D5EAF'/><rect width='2.222' height='2.222' fill='%230D5EAF'/><rect x='.889' width='.444' height='2.222' fill='%23fff'/><rect y='.889' width='2.222' height='.444' fill='%23fff'/></svg>")}
.flag-bg{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='1.333' width='6' height='1.334' fill='%2300966E'/><rect y='2.667' width='6' height='1.333' fill='%23D62612'/></svg>")}
.flag-sk{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='1.333' width='6' height='1.334' fill='%230B4EA2'/><rect y='2.667' width='6' height='1.333' fill='%23EE1C25'/><path d='M1.05 1.05h1.6v1.35c0 .55-.8.95-.8.95s-.8-.4-.8-.95z' fill='%23fff' stroke='%23EE1C25' stroke-width='.16'/><path d='M1.6 1.45h.5v1.4h-.5z' fill='%23EE1C25'/><path d='M1.35 1.85h1v.42h-1z' fill='%23EE1C25'/></svg>")}
.flag-pt{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23FF0000'/><rect width='2.4' height='4' fill='%23046A38'/><circle cx='2.4' cy='2' r='.7' fill='%23FFCC00' stroke='%23fff' stroke-width='.06'/></svg>")}
.flag-da{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23C8102E'/><rect x='2.1' width='.6' height='4' fill='%23fff'/><rect y='1.7' width='6' height='.6' fill='%23fff'/></svg>")}
.flag-vi{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23DA251D'/><polygon points='3,1.1 3.28,1.95 4.18,1.95 3.45,2.48 3.73,3.33 3,2.8 2.27,3.33 2.55,2.48 1.82,1.95 2.72,1.95' fill='%23FFFF00'/></svg>")}
.flag-id{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='2' fill='%23FF0000'/><rect y='2' width='6' height='2' fill='%23fff'/></svg>")}
.flag-zh{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23DE2910'/><polygon points='1.1,.7 1.28,1.24 1.85,1.24 1.39,1.58 1.57,2.12 1.1,1.78 .63,2.12 .81,1.58 .35,1.24 .92,1.24' fill='%23FFDE00'/><circle cx='2.1' cy='.5' r='.13' fill='%23FFDE00'/><circle cx='2.35' cy='.9' r='.13' fill='%23FFDE00'/><circle cx='2.3' cy='1.35' r='.13' fill='%23FFDE00'/><circle cx='2.0' cy='1.55' r='.13' fill='%23FFDE00'/></svg>")}
.flag-ja{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><circle cx='3' cy='2' r='1.1' fill='%23BC002D'/></svg>")}
.flag-ko{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><circle cx='3' cy='2' r='1.1' fill='%230047A0'/><path d='M1.9 2a1.1 1.1 0 0 1 2.2 0z' fill='%23CD2E3A'/></svg>")}
.flag-sv{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23006AA7'/><rect y='1.7' width='6' height='0.7' fill='%23FECC02'/><rect x='1.8' width='0.7' height='4' fill='%23FECC02'/></svg>")}
.flag-th{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23A51931'/><rect y='0.67' width='6' height='2.66' fill='%23F4F5F8'/><rect y='1.33' width='6' height='1.34' fill='%232D2A4A'/></svg>")}
.flag-hi{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23FF9933'/><rect y='1.33' width='6' height='1.34' fill='%23fff'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='0.5' fill='none' stroke='%23000088' stroke-width='0.14'/></svg>")}
.flag-no{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23BA0C2F'/><rect x='1.5' width='1.2' height='4' fill='%23fff'/><rect y='1.4' width='6' height='1.2' fill='%23fff'/><rect x='1.75' width='0.7' height='4' fill='%2300205B'/><rect y='1.65' width='6' height='0.7' fill='%2300205B'/></svg>")}
.flag-ar{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.333' fill='%23000'/><rect y='2.667' width='6' height='1.333' fill='%23007A3D'/></svg>")}
.flag-ur{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%2301411C'/><rect width='1.5' height='4' fill='%23fff'/><circle cx='3.9' cy='2' r='.9' fill='%23fff'/><circle cx='4.15' cy='2' r='.72' fill='%2301411C'/><polygon points='4.6,1.35 4.72,1.7 5.09,1.7 4.79,1.92 4.9,2.27 4.6,2.05 4.3,2.27 4.41,1.92 4.11,1.7 4.48,1.7' fill='%23fff'/></svg>")}
/* .flag-he is deliberately NOT Israel's flag, for the same reason .flag-ar is not a national
   flag below: this is a neutral gear-review site, and the Star of David carries live political
   weight far beyond language identification. A plain diagonal in the site's own earthy palette
   matches no real flag; the autonym does the labelling, as it does for every flag here. */
.flag-he{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23F4EFE6'/><path d='M0 0L6 4V0Z' fill='%234B5D3A'/></svg>")}
.flag-fil{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='2' fill='%23003F87'/><rect y='2' width='6' height='2' fill='%23CE1126'/><path d='M0 0l3 2-3 2z' fill='%23fff'/><circle cx='.85' cy='2' r='.34' fill='%23FCD116'/></svg>")}
.flag-bn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23006A4E'/><circle cx='2.7' cy='2' r='1.05' fill='%23F42A41'/></svg>")}
.flag-ms{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><path d='M0 .57h6M0 1.71h6M0 2.86h6M0 4h6' stroke='%23CC0001' stroke-width='.57'/><rect width='3' height='2.29' fill='%23010066'/><circle cx='1.25' cy='1.14' r='.7' fill='%23FFCC00'/><circle cx='1.5' cy='1.14' r='.58' fill='%23010066'/></svg>")}
.flag-fa{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23239F40'/><rect y='2.67' width='6' height='1.33' fill='%23DA0000'/></svg>")}
.flag-sw{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%231EB53A'/><path d='M0 4L6 0' stroke='%23FCD116' stroke-width='1.4'/><path d='M0 4L6 0' stroke='%23000' stroke-width='.8'/><path d='M3.5 4L6 2.33V4Z' fill='%2300A3DD'/></svg>")}
.flag-ta{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-te{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-mr{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-gu{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-kn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-ml{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-pa{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23FF9933'/><rect y='2.67' width='6' height='1.33' fill='%23138808'/><circle cx='3' cy='2' r='.45' fill='none' stroke='%23000088' stroke-width='.13'/></svg>")}
.flag-ne{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23003393'/><path d='M.25 .25h4L2.1 1.8h2.35L.25 3.75z' fill='%23DC143C' stroke='%23fff' stroke-width='.16'/></svg>")}
.flag-fi{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect x='1.65' width='.65' height='4' fill='%23003380'/><rect y='1.65' width='6' height='.65' fill='%23003380'/></svg>")}
.flag-sr{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect width='6' height='1.33' fill='%23C6363C'/><rect y='1.33' width='6' height='1.34' fill='%230C4076'/></svg>")}
.flag-sl{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%23fff'/><rect y='1.33' width='6' height='1.34' fill='%230052B4'/><rect y='2.67' width='6' height='1.33' fill='%23D50000'/></svg>")}
.flag-lt{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='1.33' fill='%23FDB913'/><rect y='1.33' width='6' height='1.34' fill='%230068A8'/><rect y='2.67' width='6' height='1.33' fill='%23C1272D'/></svg>")}
.flag-lv{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='4' fill='%239E3039'/><rect y='1.6' width='6' height='.8' fill='%23fff'/></svg>")}
.flag-et{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='1.33' fill='%230078CE'/><rect y='1.33' width='6' height='1.34' fill='%23000'/><rect y='2.67' width='6' height='1.33' fill='%23fff'/></svg>")}

@media (max-width:560px){
  .langsw .cur-name{display:none}
  .lang-menu{grid-template-columns:1fr;min-width:11rem}
}
@media (prefers-reduced-motion: reduce){.langsw .chev{transition:none}}

.byline{margin:10px 0 0;font-size:.88rem;color:var(--muted)}
.byline span{color:var(--ink);font-weight:600}

/* ---- RTL (Arabic) ----
   Layout itself is direction-agnostic: the rules above use logical properties
   (inset-inline-*, margin-inline-*), so they mirror on their own under dir="rtl".
   Only things CSS logic cannot infer are listed here.
   .flag-ar is deliberately NOT a national flag. No single state represents Arabic, and every
   candidate is a specific country (adding a red hoist triangle to these colours makes it the
   flag of Palestine, which is not a neutral choice for a site read across eight Arab markets).
   It is a plain black/white/green pan-Arab tricolour, which matches no national flag, and the
   autonym does the real labelling — the same rule stated for every flag in this file. */

/* The hero scrim is a directional gradient: dark under the text, fading away from it.
   In RTL the text sits on the right, so the dark end has to move with it. */
[dir="rtl"] .hero::before{
  background:linear-gradient(270deg,rgba(18,20,16,.85),rgba(18,20,16,.5) 48%,rgba(18,20,16,.15))}
@media(max-width:820px){
  [dir="rtl"] .hero::before{background:linear-gradient(270deg,rgba(18,20,16,.82),rgba(18,20,16,.62))}
}

/* The back button nudges along the reading direction on hover (enhance.js flips the
   arrow glyph itself), so the nudge has to flip with it. */
[dir="rtl"] .navbar .backlink:hover{transform:translateX(2px)}

/* Latin numerals, units and brand names inside Arabic prose are LTR runs; the bidi
   algorithm handles them, but tabular figures still read better forced to LTR so a
   column of "1,500 mm" values stays aligned the same way in every language. */
[dir="rtl"] .tablewrap td{unicode-bidi:plaintext}

/* Spec chips ("2-person", "1.5 kg", "~1.1 kg") are pure Latin/among the passthrough strings
   that are never translated. Under dir="rtl" the bidi algorithm treats the hyphen and space
   as neutrals, splits each chip into separate runs and reorders them — "2-person" renders as
   "person-2" and "1.5 kg" as "kg 1.5". Isolating each chip keeps it in its own LTR run. */
[dir="rtl"] .chip,[dir="rtl"] .chip-tag{unicode-bidi:isolate;direction:ltr}

/* ---- round 16: in-body internal-link modules ----------------------------------------
   Five small components that spread a page's ~30 internal links through the body instead
   of dumping them in one block at the bottom. All of them use logical properties so they
   mirror correctly under dir="rtl" (ar/he/ur) with no extra rules, and all inherit the
   page's existing --accent/--line/--surface tokens rather than introducing new colour. */

/* topic chips, directly under the breadcrumb */
.relchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.relchip{display:inline-block;font-size:.82rem;line-height:1.3;padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.relchip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.relchip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* "Related reading" callout, sitting between two sections of prose */
.relbox{margin:26px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);border-radius:12px}
/* h2 or h3 depending on the page outline (see relbox in link-density-pass.mjs) — both must
   render as the same small label, and must not inherit the section-heading underline. */
.relbox h2,.relbox h3{margin:0 0 8px;font-size:1rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);border:0;padding:0}
.relbox h2::after,.relbox h3::after{display:none}
.relbox ul{margin:0;padding-inline-start:1.1em;columns:2;column-gap:26px}
.relbox li{margin:3px 0;break-inside:avoid}
@media (max-width:620px){.relbox ul{columns:1}}

/* small button row after a section — "the obvious next question" */
.btn-sm{padding:7px 14px;font-size:.86rem;border-radius:10px}
.relnext{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}

/* "More links" block appended by seo-pipeline/outbound-fill.mjs to guarantee every page offers
   at least 12 ways onward. It closes the page, so it reads as a footer-ish index rather than a
   mid-article callout: no accent bar, a rule above it, and multi-column so a dozen entries stay
   compact. Logical properties throughout — this block ships in the RTL trees too. */
.morelinks{margin:34px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.morelinks h2{margin:0 0 10px;font-size:1rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);border:0;padding:0}
.morelinks h2::after{display:none}
/* Two columns, not three: the block sits in the 42rem .prose column with the article text, so a
   third column would leave every entry wrapping after two words. */
.morelinks ul{margin:0;padding-inline-start:1.1em;columns:2;column-gap:26px}
.morelinks li{margin:4px 0;break-inside:avoid}
@media (max-width:560px){.morelinks ul{columns:1}}

/* cluster strip, just above the closing call-to-action */
.relstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:28px 0 6px;
  padding-top:16px;border-top:1px solid var(--line);font-size:.9rem}
.relstrip-l{color:var(--muted);font-weight:600}
.relstrip a{color:var(--accent)}

/* injected in-prose anchors are styled exactly like the hand-written ones — no marker class
   in the visual layer, so a reader cannot tell the two apart. data-r16 exists only so the
   pass can find and strip its own output. */