/* ProductDome — shared site styles. Mirrors HTML HEADER DESIGN.html with
   additions for category + product pages. Single source of truth so the
   three pages stay visually consistent.

   Design tokens. 2026-08-03 (UX audit §5.2): the warm cream/tan surface set was
   retired for a neutral one. The audit's finding was that a page-wide cream
   panel plus repeated tan borders and several nearly-identical warm greys was
   the main thing making the site read as an older affiliate template. The
   brand green is unchanged and stays the primary — only the greys moved.
   Extend these; do not reintroduce warm hexes inline. */

:root {
  --bg:        #f5f7fa;   /* page background      (was #f7f3ec cream) */
  --card:      #ffffff;
  --text:      #0f172a;   /* slightly cooler ink  (was #101820)       */
  --muted:     #52606d;   /* higher contrast      (was #66737d)       */
  --border:    #dde3e9;   /* neutral hairline     (was #ded6ca tan)   */
  /* WCAG 2.2 AA 1.4.11 wants 3:1 for boundaries that IDENTIFY a control.
     The hairline above is decorative and exempt; a form field's edge is not.
     #878e96 clears 3:1 on BOTH the white card and the page background — used on inputs and outlined buttons only. */
  --border-control: #878e96;
  --nav:       #f8fafc;
  --surface-subtle: #f8fafc;
  --green:     #287a50;
  --green-soft:#e7f4eb;
  --cta:       #287a50;
  --cta-hover: #1f6040;
  --gold:      #f6b21a;
  --red:       #b42318;
  --soft:      #f8fafc;
  --blue:      #1f5c82;
  --amber-bg:  #fdf3e1;
  --amber-tx:  #9a5419;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: #ffffff;     /* outer page is white */
  color: var(--text);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ---------- Site chrome (header / nav / footer) ---------- */

/* Sticky chrome wrapper — topbar + nav stick to the top of the viewport
   on scroll. White background prevents content showing through. The
   `top: 0` + `z-index: 50` combo wins against any in-page sticky filter
   sidebars on category pages (which use `top: 16px`). */
.site-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
}

/* Sticky CTA slot in the topbar — populated by product pages via JS when
   the in-page CTA scrolls out of view. Hidden until JS removes [hidden]
   AND adds .visible (animation hook). */
.topbar-cta-slot {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
/* Honor the [hidden] attribute even though .topbar-cta-slot sets
   display: flex. Without this override, the empty slot still claims
   layout space (and its margin-left:auto distorts the topbar). */
.topbar-cta-slot[hidden] { display: none !important; }
.topbar-cta-slot.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topbar-cta-slot .tcta-img {
  width: 38px; height: 38px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
}
.topbar-cta-slot .tcta-info {
  display: flex; flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.topbar-cta-slot .tcta-name {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-cta-slot .tcta-price {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--green);
  letter-spacing: 0.01em;
}
.topbar-cta-slot .tcta-btn {
  background: var(--cta);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.04), 0 6px 14px rgba(40, 122, 80, 0.18);
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.topbar-cta-slot .tcta-btn:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.04), 0 8px 18px rgba(40, 122, 80, 0.22);
}
@media (max-width: 720px) {
  .topbar-cta-slot .tcta-info { display: none; }   /* keep just the button on mobile */
}


/* Site-wide content cap. Wirecutter (~1240), RTINGS (~1320), Consumer
   Reports (~1280), The Verge (~1200). 1280 is the sweet spot for a
   directory: 4-up product grids fit, the search bar isn't lost in
   whitespace on a 4K monitor. Backgrounds stay full-bleed; only the
   content INSIDE the chrome is capped via dynamic side padding. */
/* --site-max is the page shell; --content-w is the reading column used by
   long-form blocks (PDP prose, spec table, FAQ). Measure-limited text is far
   easier to read than full-shell-width paragraphs. */
:root { --site-max: 1180px; --site-pad: 28px; --content-w: 760px; }

/* Type scale (UX audit §5.1). The page previously ran a 15.5px body with 19px
   section headings — only 3.5px of separation, which is why the hierarchy read
   as flat and the page looked like fine print. --fs-min is a floor: no label
   that carries meaning should sit below it. */
:root {
  --fs-h1:    40px;
  --fs-h2:    28px;
  --fs-h3:    21px;
  --fs-body:  17px;
  --fs-meta:  14.5px;
  --fs-label: 12.5px;
  --fs-min:   12px;
  --lh-body:  1.62;
}
@media (max-width: 700px) {
  :root {
    --fs-h1:   29px;
    --fs-h2:   24px;
    --fs-h3:   19.5px;
    --fs-body: 16px;
  }
}

.topbar {
  background: #fff;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 14px var(--site-pad);
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}
.logo span { color: var(--green); }

.search {
  margin-left: auto;
  /* Compact by default so the topbar always has room for the sticky-CTA
     slot. Expands on focus / when the dropdown opens. */
  width: 280px;
  max-width: 56vw;
  height: 42px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  position: relative;   /* anchor for the search-results dropdown */
  transition: width 0.22s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.search:focus-within,
.search.is-active {
  width: min(560px, 56vw);
  border-color: #b8ad92;
  box-shadow: 0 4px 14px rgba(16, 24, 32, 0.06);
}
/* When the sticky product CTA is in the topbar, the search hugs the logo
   (left) and the CTA pushes to the right. Search keeps its compact width;
   on focus expands modestly so it doesn't crowd the CTA. */
body.has-sticky-cta .search { margin-left: 16px; }
body.has-sticky-cta .search:focus-within,
body.has-sticky-cta .search.is-active {
  width: min(360px, 32vw);
}
.search input,
.search > button { z-index: 1; }
.search input { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.search > button { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* Dropdown — anchored to the .search pill, full-width, soft elevation. */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 64vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d8d0c4;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 24, 32, 0.12);
  z-index: 60;
  padding: 6px 0;
}
.search-results__group-label {
  padding: 8px 14px 4px;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.search-results__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text);
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.search-results__row:hover {
  background: #fdfaf3;
  border-left-color: var(--green);
}
.search-results__row-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-results__row-meta {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.search-results__empty {
  padding: 14px 14px;
  font-size: 13px;
  color: var(--muted);
}
/* typeahead v2 (10-19) */
.search-results__row { position: relative; padding-right: 44px; }
.search-results__fill {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 30px; cursor: pointer;
}
.search-results__fill:hover { background: #f1ebdf; color: var(--text); }
.search-results__row--muted .search-results__row-name { font-weight: 500; color: var(--muted); }
.search-results__row--ai .search-results__row-name { color: var(--green); }
@media (max-width: 700px) {
  .search-results { left: 8px; right: 8px; top: calc(100% + 8px); }
}
.search input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 18px;
  font-size: 15px;
  color: var(--muted);
  min-width: 0;
}
.search button {
  height: 100%;
  border: 0;
  background: var(--green);
  color: #fff;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.search button:hover { background: var(--cta-hover); }

/* Country picker — native <details> dropdown. Summary is the trigger pill
   (flag + code + caret). Menu drops down anchored to the right of the
   trigger so it stays inside the topbar's right edge. */
.country-pick {
  position: relative;
}
.country-pick > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.country-pick > summary::-webkit-details-marker { display: none; }
.country-pick > summary:hover { border-color: #6e7884; background: #f8fafc; }
.country-pick[open] > summary {
  border-color: var(--text);
  background: #f8fafc;
}
.country-pick .cp-flag {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.country-pick .cp-code {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.country-pick .cp-caret {
  transition: transform 0.15s;
  color: var(--muted);
}
.country-pick[open] .cp-caret { transform: rotate(180deg); color: var(--text); }

.country-pick .cp-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.12), 0 2px 6px rgba(16, 24, 32, 0.06);
  padding: 6px;
  z-index: 60;
  overflow: hidden;
  animation: cpFade 0.12s ease-out;
}
@keyframes cpFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.country-pick .cp-menu-head {
  padding: 8px 12px 10px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.country-pick .cp-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.1s;
}
.country-pick .cp-item:hover { background: #f8fafc; }
.country-pick .cp-row-flag {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.country-pick .cp-row-name {
  flex: 1;
  white-space: nowrap;
}
.country-pick .cp-row-current {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: #fff;
  border: 1px solid #bfe1ca;
  padding: 3px 7px;
  border-radius: 4px;
}
.country-pick .cp-soon {
  padding: 10px 14px 12px;
  font-size: var(--fs-caption);
  color: var(--muted);
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.country-pick .cp-active {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 650;
}
.country-pick .cp-active:hover { background: var(--green-soft); }
@media (max-width: 720px) {
  .country-pick .cp-menu { min-width: 220px; }
}

.nav {
  position: relative;          /* anchor for the absolutely-positioned mega panel */
  background: var(--nav);
  max-width: var(--site-max);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  padding: 10px var(--site-pad);
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
.nav .nav-link, .nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

/* ---- Mega-menu (Appliances category dropdown) ----
   Hover OR keyboard-focus on .nav-mega opens .mega-panel below the nav
   bar. Panel spans the full nav width (1280px) but stays anchored under
   the trigger via the .nav being position:relative. */
.nav-mega {
  position: static;            /* trigger sits inline with other nav links */
  display: inline-flex;
  align-items: center;
}
.nav-mega__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 0;
}
.nav-mega__caret {
  color: var(--muted);
  transition: transform 0.15s, color 0.15s;
}
.nav-mega:hover .nav-mega__caret,
.nav-mega:focus-within .nav-mega__caret {
  color: var(--text);
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--green);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px rgba(16, 24, 32, 0.12), 0 4px 10px rgba(16, 24, 32, 0.06);
  padding: 28px 32px 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0s linear 0.16s;
  z-index: 60;
}
.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.16s, transform 0.16s, visibility 0s linear 0s;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 280px;
  gap: 32px;
}
.mega-col .mega-col__h {
  margin: 0 0 12px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mega-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color 0.1s;
}
.mega-col a:hover { color: var(--green); }
.mega-col a span {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.mega-col a:hover span { color: var(--green); border-color: #bfe1ca; background: var(--green-soft); }

/* Editor's-pick feature card on the right of the mega panel */
.mega-feature {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mega-feature__tag {
  display: inline-block;
  align-self: start;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c6210;
  background: #fff5dc;
  border: 1px solid #f0d896;
  padding: 4px 9px;
  border-radius: 4px;
}
.mega-feature img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 10px;
}
.mega-feature strong {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
}
.mega-feature p {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: 1.5;
}
.mega-feature__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.mega-feature__cta span { transition: transform 0.15s; }
.mega-feature__cta:hover span { transform: translateX(3px); }

/* Footer row inside the mega panel — "view all" + curated count */
.mega-foot {
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mega-foot__all {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mega-foot__all span { transition: transform 0.15s; }
.mega-foot__all:hover span { transform: translateX(4px); }
.mega-foot__count { font-size: var(--fs-caption); color: var(--muted); }

@media (max-width: 1080px) {
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
  .mega-feature { grid-column: span 3; flex-direction: row; align-items: center; }
  .mega-feature img { width: 100px; height: 100px; }
}
@media (max-width: 720px) {
  .mega-panel { display: none; }   /* mobile gets a full-page nav drawer later */
}

.wrap {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 28px var(--site-pad) 54px;
  background: #f8fafc;     /* cream content panel; white body bg shows as margin on wide screens */
}

/* ---------- Footer ----------
   Warm-dark footer with a thin gold accent line at the top. Three link
   columns (Company / Browse / Connect) plus a brand block on the left.
   Bottom row holds legal links + copyright. Stacks on mobile. */
.footer {
  position: relative;
  background: #171410;
  color: #c8c0ac;
  margin-top: 48px;
}
.footer__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 36px var(--site-pad) 28px;
  display: flex;
  justify-content: space-between;
  gap: 44px;
}
.footer__brand {
  max-width: 300px;
  flex-shrink: 0;
  padding-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__logo {
  display: inline-block;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
  color: #fff;
  text-decoration: none;
  margin-bottom: 8px;
}
.footer__logo-accent { color: var(--green); }
.footer__motto {
  font-size: 13px;
  font-weight: 600;
  color: #e8e3d6;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.footer__tagline {
  font-size: 13px;
  color: #948c79;
  line-height: 1.55;
  margin: 0;
}
/* Right side: link groups spread evenly across the available width
   instead of bunching against the right edge. `space-between` keeps the
   first group flush after the brand divider and the last flush right. */
.footer__links {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 40px;
  padding-left: 8px;
}
.footer__group { min-width: 0; }
.footer__heading {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: #948c79;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 10px;
  white-space: nowrap;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer__link {
  font-size: 13.5px;
  color: #b5ad9a;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.footer__link:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__bottom-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 14px var(--site-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--fs-caption);
  color: #948c79;
}
.footer__copyright { margin: 0; }
.footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.footer__legal-link {
  font-size: var(--fs-caption);
  color: #948c79;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s;
}
.footer__legal-link:hover { color: #fff; }

/* ---------- Doc / static pages (legal, about, contact, partnerships, etc.)
   Shared template: centered hero with eyebrow + h1 + meta line, then a
   capped-width article body with numbered sections, lists, and inline
   links. Used by every page under /privacy-policy, /about, /contact, etc. */
.doc-page__hero {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 56px 0 48px;
  text-align: center;
}
.doc-page__hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--site-pad);
}
.doc-page__eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.doc-page__hero h1 {
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--text);
}
.doc-page__hero .lead {
  font-size: 16px;
  color: #3a4651;
  line-height: 1.6;
  margin: 8px 0 0;
}
.doc-page__updated {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.doc-page {
  max-width: 760px;
  margin: 48px auto 64px;
  padding: 0 var(--site-pad);
}
.doc-page__intro {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.doc-page__intro p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
}
.doc-page__section { margin: 36px 0; }
.doc-page__section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.doc-page__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #bfe1ca;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 650;
  flex-shrink: 0;
}
.doc-page__section h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.doc-page p {
  font-size: 15px;
  line-height: 1.65;
  color: #3a4651;
  margin: 0 0 14px;
}
.doc-page__list {
  margin: 0 0 14px 8px;
  padding: 0 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: #3a4651;
}
.doc-page__list li { margin-bottom: 6px; }
.doc-page a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-page a:hover { color: var(--cta-hover); }
.doc-page strong { color: var(--text); font-weight: 650; }
.doc-page h3 {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  margin: 24px 0 8px;
  letter-spacing: 0;
}
.doc-page__callout {
  font-size: 16px;
  font-weight: 650;
  color: var(--text) !important;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}
.doc-page__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.doc-page__pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  padding: 7px 12px;
  border-radius: 999px;
}
.doc-page__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.doc-page__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.doc-page__tile-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 50%;
  font-weight: 650;
  flex-shrink: 0;
}
.doc-page__final {
  margin-top: 40px;
  padding: 28px 28px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 12px;
  text-align: center;
}
.doc-page__final-label {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.doc-page__final-lead {
  font-size: 18px !important;
  font-weight: 650;
  color: var(--text) !important;
  margin: 0 0 8px !important;
}
@media (max-width: 600px) {
  .doc-page__tiles { grid-template-columns: 1fr; }
}

/* Contact page extras: email cards + basic form */
.doc-page__contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.doc-page__contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.doc-page__contact-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.doc-page__contact-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.doc-page__contact-email {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}
.doc-page__contact-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.doc-page__form {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.doc-page__field { display: flex; flex-direction: column; gap: 6px; }
.doc-page__label {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-page__input,
.doc-page__textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-page__input:focus,
.doc-page__textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.doc-page__textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.doc-page__form .btn { align-self: flex-start; padding: 11px 22px; font-size: 14px; }
@media (max-width: 600px) {
  .doc-page__contact-grid { grid-template-columns: 1fr; }
}

/* Steps + simple inline subscribe form for the Newsletter page */
.doc-page__steps {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-page__steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ece5d6;
  border-radius: 10px;
}
.doc-page__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #bfe1ca;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 650;
  flex-shrink: 0;
}
.doc-page__step-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.doc-page__subscribe {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 18px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.doc-page__subscribe input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-page__subscribe input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.doc-page__subscribe .btn {
  height: 48px;
  padding: 0 22px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .doc-page__subscribe { flex-direction: column; gap: 10px; }
  .doc-page__subscribe .btn { width: 100%; }
}

@media (max-width: 720px) {
  .doc-page__hero { padding: 40px 0 32px; }
  .doc-page__hero h1 { font-size: 30px; letter-spacing: 0; }
  .doc-page { margin: 32px auto 48px; }
  .doc-page__section h2 { font-size: 19px; }
}

/* ---------- Cookie Settings page (toggles UI) ---------- */
.cp-page {
  max-width: 640px;
  margin: 40px auto 64px;
  padding: 0 var(--site-pad);
}
.cp-card {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  overflow: hidden;
}
.cp-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #eef2f6;
}
.cp-category:last-child { border-bottom: 0; }
.cp-category__info { min-width: 0; flex: 1; }
.cp-category__label {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: 0;
}
.cp-category__desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.cp-always {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid #bfe1ca;
  padding: 5px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cp-toggle {
  position: relative;
  width: 44px; height: 24px;
  flex-shrink: 0;
  background: #d8cfba;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.cp-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: left 0.18s;
}
.cp-toggle.is-on { background: var(--green); }
.cp-toggle.is-on .cp-toggle__thumb { left: 22px; }
.cp-actions {
  display: flex;
  gap: 8px;
  padding: 16px 22px;
  background: #f8fafc;
  border-top: 1px solid #eef2f6;
  flex-wrap: wrap;
}
.cp-actions .btn,
.cp-actions .outline-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  font-size: 13.5px;
  text-align: center;
}
.cp-saved {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--green-soft);
  border: 1px solid #bfe1ca;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 650;
  border-radius: 8px;
  text-align: center;
}
.cp-footer-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 0;
}
.cp-footer-note a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .footer__inner {
    flex-direction: column;
    gap: 22px;
    padding: 30px var(--site-pad) 24px;
  }
  .footer__brand {
    max-width: 100%;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    justify-content: stretch;
  }
  .footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer__legal { justify-content: center; gap: 8px 18px; }
}
@media (max-width: 600px) {
  .footer__links { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
}

/* ---------- Cookie consent banner ----------
   Fixed at viewport bottom, slides up on first visit. Three buttons:
   primary Accept / secondary Reject / ghost Manage. State stored in
   localStorage; banner script lives in Layout.astro. */
/* Consent panel. Was a heavy near-black bar that dominated the viewport and
   sat on top of the purchase controls — on a product page that means the
   consent UI covers the one action the page exists for. Now a light neutral
   surface, and `body.pd-consent-open` reserves matching space at the bottom of
   the document so it displaces content rather than covering it. */
.pd-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  /* DevDome's consent bar (owner 10-09): full-width dark bar, copy left, actions right. */
  background: #111827;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.pd-cookie.is-visible { transform: translateY(0); }
/* Reserve the bar's height so page-end content can scroll above it; with a
   full-width bar the reserve sits under the bar, so no gap shows. Overridden
   with a measured pixel value from JS. */
body.pd-consent-open { padding-bottom: var(--pd-consent-h, 132px); }
.pd-cookie__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 20px var(--site-pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
.pd-cookie__copy { flex: 1; min-width: 0; }
.pd-cookie__title { font-size: 14px; font-weight: 650; color: #f1f5f9; margin: 0 0 4px; }
.pd-cookie__body { font-size: 13px; color: #94a3b8; line-height: 1.6; margin: 0; }
.pd-cookie__link { color: #e2e8f0; text-decoration: underline; text-underline-offset: 2px; }
.pd-cookie__link:hover { color: #fff; }
.pd-cookie__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pd-cookie__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px; min-height: 44px;            /* WCAG 2.2 touch target (audit §15) */
  font-size: 13.5px; font-weight: 600; font-family: inherit; line-height: 1;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-cookie__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pd-cookie__btn--primary { background: var(--green); color: #fff; }
.pd-cookie__btn--primary:hover { background: var(--cta-hover); }
.pd-cookie .pd-cookie__btn--secondary { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.12); }
.pd-cookie .pd-cookie__btn--secondary:hover { background: rgba(255, 255, 255, 0.14); }
.pd-cookie .pd-cookie__btn--ghost { background: rgba(255, 255, 255, 0.05); color: #94a3b8; border-color: rgba(255, 255, 255, 0.1); }
.pd-cookie .pd-cookie__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }

/* Phone: copy on top, Reject + Accept share a row (equal weight), Manage below. */
@media (max-width: 640px) {
  .pd-cookie__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 20px; }
  .pd-cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-cookie__btn--ghost { grid-column: 1 / -1; }
}

/* ---------- Shared atoms (badges, scores, buttons) ---------- */

.btn {
  background: var(--cta);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--cta-hover); }

.outline-btn {
  border: 1px solid #cbbba8;
  color: var(--text);
  background: #fff;
  border-radius: 7px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  background: var(--amber-bg);
  color: var(--amber-tx);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: var(--fs-caption);
  font-weight: 500;
  margin-bottom: 12px;
}

/* Status badge — sits ABOVE the product title (wiki: trust-conversion §1) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #bfe1ca;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.status-badge.gold { background: #fff5dc; color: #8c6210; border-color: #f0d896; }
.status-badge.cool { background: #eaf2fa; color: var(--blue); border-color: #c8d9e8; }

.score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #bfe1ca;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}
.score.big { font-size: 20px; padding: 10px 16px; }

.stars { color: var(--gold); letter-spacing: 1px; }
.reviews { color: var(--muted); font-size: 14px; }

/* "🔥 500+ sold this week" near the buy button (wiki §3) */
.social-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff5dc;
  color: #8c6210;
  border: 1px solid #f0d896;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

/* Trust row of icons + labels */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 560px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.trust-item strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 3px;
}
.icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f2ede5;
  border: 1px solid #e3d9ca;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 17px;
  flex: 0 0 auto;
}

/* ---------- Section headings ---------- */

.section { margin-top: 34px; }
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin: 0 0 18px;
}
.section-head h2 {
  margin: 0 0 5px;
  font-size: 24px;
  font-weight: 600;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.section-head a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Breadcrumbs (category + product) ---------- */
.crumb {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.crumb a { color: var(--blue); text-decoration: none; }
.crumb span.sep { opacity: 0.6; }

/* ---------- Product card (used on home + category) ---------- */

.product-card {
  background: var(--card);
  border: 1px solid #d8cfba;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 16px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.product-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.product-card .product-img {
  position: relative;
  height: 175px;
  background: #ffffff;
  border-radius: 9px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Status badge overlaid on the product image (top-left). Replaces the
   old in-line badge that fought the category label for horizontal space. */
.product-card .product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  margin: 0;
  font-size: var(--fs-caption);
  padding: 4px 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.04), 0 4px 10px rgba(16, 24, 32, 0.06);
  backdrop-filter: saturate(140%) blur(2px);
}
.product-card .product-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.product-card__cat {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: 0;
}
/* Small model line under the title — e.g., "Model: 75U6SF-PRO". Greyed
   metadata, monospaced for the model code so the alphanumeric reads
   cleanly. Only renders when p.model exists. */
.product-card__model {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.product-card__model::after { content: ""; }
.product-card .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.product-card .meta strong { color: var(--text); font-weight: 650; }
.product-card__verdict {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #3a4651;
}
.product-card .specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  grid-column: 1 / -1;
  border-top: 1px solid #eef2f6;
  padding-top: 12px;
  margin-top: 4px;
}
.product-card .spec {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px;
  border-left: 1px solid #eef2f6;
}
.product-card .spec:first-child { border-left: 0; padding-left: 0; }
.product-card .specs { margin: 4px 0 0; }
.product-card .spec dt { margin: 0 0 3px; }
.product-card .spec dd {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.product-card .spec .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.product-card .card-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
}
/* Whole-card link overlay (industry standard for product grids — Wirecutter,
   Best Buy, Target). Sits behind the card content; only the explicit Amazon
   CTA below is raised above it via z-index so it captures its own clicks. */
.product-card { position: relative; }
.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
  /* Subtle hover-affordance — lifts the whole card on hover. */
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 12px 28px rgba(16, 24, 32, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card .card-bottom__amz {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: var(--fs-caption);
  font-weight: 650;
  white-space: nowrap;
}
.product-card .card-bottom__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.product-card .card-bottom__price strong {
  font-size: 22px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}
.product-card .card-bottom__proof {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.product-card .card-bottom .btn {
  padding: 10px 16px;
  font-size: 13px;
}

/* ---------- Category page layout ---------- */

.cat-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  margin-top: 24px;
}
.filters {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  padding: 20px 18px;
  align-self: start;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.filters__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f6;
}
.filters__title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  margin: 0;
}
.filters__clear {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--green);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filters__clear:hover { color: var(--cta-hover); }
.filters__search {
  position: relative;
  margin-bottom: 14px;
}
.filters__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.filters__search-input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.filters__search-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  background: #fff;
}
.filters__search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Filter-search hides non-matching options site-wide. The block-level
   .is-empty-search guards the heading from staying visible when every
   option in the group is hidden. */
.filter-block__opt.is-hidden-by-search { display: none !important; }
.is-searching .filter-block__opt--hidden:not(.is-hidden-by-search) { display: flex; }
.is-searching .filter-block.is-empty-search { display: none; }
.is-searching .filter-block__more { display: none; }

.filter-block { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef2f6; }
.filter-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.filter-block h4 {
  margin: 0 0 8px;
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.filter-block label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  cursor: pointer;
  min-height: 20px;
}
.filter-block label:last-child { margin-bottom: 0; }
.filter-block label .ct { color: var(--muted); margin-left: auto; font-size: var(--fs-caption); font-weight: 600; }
.filter-block input[type="checkbox"], .filter-block input[type="radio"] {
  accent-color: var(--green);
  width: 15px; height: 15px;
  cursor: pointer;
}
/* Dual-handle drag slider. Two <input type="range">s overlap on the same
   track; the gap between their values is painted as the coloured highlight.
   Pointer events on the inputs themselves are disabled, except for the thumb
   pseudo-elements — so each handle stays draggable independently. */
.filter-range { padding: 4px 4px 0; }
.filter-range__values {
  display: flex; justify-content: space-between;
  font-size: var(--fs-caption); font-weight: 650; color: var(--text);
  margin-bottom: 12px;
}
.filter-range__val { background: #f8fafc; border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; }
.filter-range__slider {
  position: relative;
  height: 28px;
}
.filter-range__track,
.filter-range__highlight {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}
.filter-range__track {
  left: 0; right: 0;
  background: var(--border);
}
.filter-range__highlight {
  background: var(--green);
  /* left/right set inline by JS */
  left: 0; right: 0;
}
.filter-range__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none; /* track ignores clicks; only the thumb captures */
  margin: 0;
  outline: none;
}
.filter-range__input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.18);
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.1s;
}
.filter-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.18);
  cursor: grab;
}
.filter-range__input::-webkit-slider-thumb:hover { transform: scale(1.1); }
.filter-range__input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); box-shadow: 0 0 0 4px var(--green-soft); }
.filter-range__input::-moz-range-thumb:hover { transform: scale(1.1); }
.filter-range__input::-moz-range-thumb:active { cursor: grabbing; box-shadow: 0 0 0 4px var(--green-soft); }
/* Hide the native track look on Firefox so it doesn't clash with our coloured one. */
.filter-range__input::-moz-range-track { background: transparent; border: 0; }
/* The bare class loses specificity to `.filter-block label { display: flex }`,
   so qualify with the parent class to force display: none on the hidden ones. */
.filter-block .filter-block__opt--hidden { display: none; }
.filter-block.is-expanded .filter-block__opt--hidden { display: flex; }
.filter-block__more {
  display: inline-block;
  margin-top: 2px;
  color: var(--green);
  font-size: var(--fs-caption);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.filter-block__more:hover { text-decoration: underline; }

.cat-results { min-width: 0; }

.cat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-toolbar .count { font-size: 13.5px; color: var(--muted); }
.cat-toolbar .count strong { color: var(--text); font-weight: 650; }
.cat-toolbar__right { display: flex; align-items: center; gap: 10px; }
.sort-pill {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02);
}
.sort-pill:hover { border-color: #b8ad92; }
.sort-pill:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.sort-pill__label {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border);
  background: #f8fafc;
}
.sort-pill__select {
  border: 0;
  padding: 0 36px 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.cat-toolbar__filter-btn {
  display: none;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  align-items: center;
  gap: 6px;
}
.cat-toolbar__filter-btn:hover { background: #f8fafc; }
.cat-toolbar__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--green);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 650;
  border-radius: 999px;
}

.applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
}
.applied-filters__label {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.applied-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-caption);
  color: var(--text);
  font-weight: 600;
}
.applied-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}
.applied-filter button:hover { background: #f8fafc; color: var(--text); }
.applied-filters__clear {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--green);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Active filter chips above the catalog grid. JS-populated; one chip per
   active filter value with an ✕ to remove just that one, plus a final
   "Clear all" chip. Hidden when no filters are active. */
.cat-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.cat-active-filters[hidden] { display: none; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cat-chip:hover {
  border-color: var(--green);
  background: var(--green-soft);
}
.cat-chip__text { white-space: nowrap; }
.cat-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.06);
  color: #55626d;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.cat-chip:hover .cat-chip__x {
  background: var(--green);
  color: #fff;
}
.cat-chip--clear {
  border-style: dashed;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--fs-caption);
  padding: 0 14px;
}
.cat-chip--clear:hover {
  color: var(--green);
  border-color: var(--green);
  background: transparent;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* Tablet / narrower-desktop: drop to 2-up while the sidebar is still
   visible. Mobile (<900) and phone (<700) drop further via the
   existing media queries below. */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Catalog product cards: 3-up compact (BestBuy-style) ======
   Override the default horizontal product-card layout. Inside .cat-grid
   the card becomes a vertical stack — image on top, body below, no
   internal 2-column split. Tighter paddings/fonts so 3 fit per row
   without feeling cramped. */
.cat-grid .product-card {
  grid-template-columns: 1fr;
  padding: 12px;
  gap: 10px;
}
.cat-grid .product-card .product-img {
  height: 200px;
  padding: 6px;
}
.cat-grid .product-card .product-card__body {
  gap: 5px;
  min-width: 0;
}
.cat-grid .product-card h3 {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  /* Clamp long Amazon titles to 2 lines so card heights stay even. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-grid .product-card .meta { font-size: var(--fs-caption); gap: 6px; }
.cat-grid .product-card__cat { font-size: var(--fs-caption); }
.cat-grid .product-card__verdict {
  font-size: var(--fs-caption);
  line-height: 1.4;
  /* Hide the verdict in compact mode — it eats too much vertical space at
     3-up density. The PDP page still has the full editorial copy. */
  display: none;
}
.cat-grid .product-card .specs {
  grid-template-columns: repeat(2, 1fr);
  padding-top: 8px;
  margin-top: 0;
}
.cat-grid .product-card .spec {
  font-size: var(--fs-caption);
  padding: 4px 8px;
  border-top: 1px solid #eef2f6;
  border-left: 0;
}
.cat-grid .product-card .spec:nth-child(odd) { padding-left: 0; }
.cat-grid .product-card .spec dd {
  font-size: var(--fs-caption);
  margin-bottom: 1px;
}
.cat-grid .product-card .card-bottom {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 10px;
}
.cat-grid .product-card .card-bottom__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cat-grid .product-card .card-bottom__price strong {
  font-size: 16px;
  letter-spacing: 0;
}
.cat-grid .product-card .card-bottom__proof {
  font-size: var(--fs-caption);
  color: var(--muted);
}
.cat-grid .product-card .card-bottom__amz {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 13px;
}
.cat-grid .product-card__badge {
  font-size: var(--fs-caption);
  padding: 3px 7px;
  top: 8px;
  left: 8px;
}

/* Pagination */
.cat-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cat-pagination__meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.cat-pagination__meta strong { color: var(--text); font-weight: 650; }
.cat-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cat-pagination a, .cat-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cat-pagination a:hover, .cat-pagination button:hover { border-color: #b8ad92; background: #f8fafc; }
.cat-pagination .is-active {
  background: var(--green); color: #fff; border-color: var(--green);
}
.cat-pagination .is-active:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.cat-pagination [disabled] { opacity: 0.4; cursor: default; }
.cat-pagination [disabled]:hover { background: #fff; border-color: var(--border); }
.cat-pagination__ellipsis { color: var(--muted); padding: 0 4px; }

/* ---------- Category page SEO blocks ---------- */

.cat-page__hero {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  margin-top: 14px;
}
.cat-page__crumb {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: 14px;
}
.cat-page__crumb a { color: var(--green); text-decoration: none; font-weight: 600; }
.cat-page__crumb a:hover { text-decoration: underline; }
.cat-page__crumb .sep { margin: 0 8px; color: #c4baa6; }
.cat-page__crumb strong { color: var(--text); font-weight: 650; }
.cat-page__title {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--text);
}
.cat-page__lead {
  font-size: 15.5px;
  color: #3a4651;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 820px;
}
/* Collapsible lead: two sentences by default so products clear the fold, the
   rest one native <details> click away (still in the HTML, still indexed). */
.cat-page__lead-wrap > summary.cat-page__lead {
  cursor: pointer;
  list-style: none;
  margin-bottom: 12px;
}
.cat-page__lead-wrap > summary.cat-page__lead::-webkit-details-marker { display: none; }
.cat-page__lead-more {
  display: inline;
  margin-left: 6px;
  color: #1f6feb;
  font-weight: 600;
  white-space: nowrap;
}
.cat-page__lead-more::after { content: ' ▾'; }
.cat-page__lead-wrap[open] > summary .cat-page__lead-more::after { content: ' ▴'; }
.cat-page__lead-wrap[open] > summary .cat-page__lead-more { color: #5a6673; }
.cat-page__lead--rest { margin-top: 0; }
.cat-page__hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid #eef2f6;
}
.cat-page__hero-stat { display: flex; flex-direction: column; gap: 2px; }
.cat-page__hero-stat strong {
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}
.cat-page__hero-stat span {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cat-page__intro {
  margin-top: 28px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__intro h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.cat-page__intro p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #3a4651;
  max-width: 820px;
}
.cat-page__intro p:last-child { margin-bottom: 0; }
.cat-page__intro strong { color: var(--text); font-weight: 650; }

.cat-page__brands {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__brands h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.cat-page__brand:hover { background: #fff; border-color: #b8ad92; }
.cat-page__brand-count {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 650;
}

.cat-page__variants {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__variants h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__variants-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-page__variant {
  display: inline-block;
  padding: 7px 13px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.cat-page__variant:hover { background: #fff; border-color: #b8ad92; }

/* Sub Hub navigation cards. Renders on Main Hub and Sub Hub pages to let
   users move between cluster siblings (e.g. Built-in / Freestanding wine
   cellars). Mirrors brand-cards visually but tile-shaped, with a clear
   active state for the current Sub Hub. */
.cat-page__subhubs {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__subhubs__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
}
.cat-page__subhubs h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__subhubs__sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 640px;
}
.cat-page__subhub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-page__subhub-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 12px;
  padding: 18px 18px 16px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  min-height: 92px;
}
.cat-page__subhub-card:hover {
  background: #fff;
  border-color: #b8ad92;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 24, 32, 0.06);
}
.cat-page__subhub-card.is-current {
  background: #fff;
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  cursor: default;
  pointer-events: none;
  transform: none;
}
.cat-page__subhub-name {
  grid-column: 1;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
}
.cat-page__subhub-count {
  grid-column: 1;
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.cat-page__subhub-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 18px;
  color: var(--muted);
  transition: color 0.15s, transform 0.15s;
}
.cat-page__subhub-card:hover .cat-page__subhub-arrow {
  color: var(--green);
  transform: translateX(2px);
}
.cat-page__subhub-card.is-current .cat-page__subhub-arrow {
  color: var(--green);
}
@media (max-width: 900px) {
  .cat-page__subhub-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cat-page__subhub-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-page__subhubs { padding: 18px; }
}

/* Hub strips: Buying guides + Popular comparisons. Renders below the
   product grid on /appliances/[category]/, scoped to listicles/compares
   whose nearest publishable ancestor matches this page. */
.cat-page__strip {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__strip-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
}
.cat-page__strip h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__strip-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 640px;
}
.cat-page__strip-grid {
  display: grid;
  gap: 12px;
}
.cat-page__strip-grid--guides   { grid-template-columns: repeat(2, 1fr); }
.cat-page__strip-grid--compares { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .cat-page__strip-grid--guides   { grid-template-columns: 1fr; }
  .cat-page__strip-grid--compares { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cat-page__strip-grid--compares { grid-template-columns: 1fr; }
  .cat-page__strip { padding: 18px; }
}

/* Guide card */
.guide-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  padding: 14px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.guide-card:hover {
  background: #fff;
  border-color: #b8ad92;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 24, 32, 0.06);
}
.guide-card__imgs {
  position: relative;
  height: 100%;
  min-height: 110px;
  display: grid;
  align-items: center;
  justify-items: center;
}
.guide-card__imgs img {
  position: absolute;
  width: 78px;
  height: 78px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ece5d6;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(16, 24, 32, 0.06);
}
.guide-card__imgs img:nth-child(1) { transform: translate(-22px, -8px) rotate(-4deg); }
.guide-card__imgs img:nth-child(2) { transform: translate(0, 4px); }
.guide-card__imgs img:nth-child(3) { transform: translate(22px, -8px) rotate(4deg); }
.guide-card__imgs-empty {
  font-size: 36px;
  opacity: 0.4;
}
.guide-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.guide-card__body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-card__body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.guide-card__meta strong { color: var(--text); font-weight: 650; }
.guide-card__arrow {
  margin-left: auto;
  color: var(--green);
  font-weight: 650;
  transition: transform 0.15s;
}
.guide-card:hover .guide-card__arrow { transform: translateX(2px); }

/* Compare card */
.compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.compare-card:hover {
  background: #fff;
  border-color: #b8ad92;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 24, 32, 0.06);
}
.compare-card__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  background: #fff;
  border: 1px solid #ece5d6;
  border-radius: 8px;
}
.compare-card__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.compare-card__side img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.compare-card__side span {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.compare-card__vs {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border: 1px solid #ece5d6;
  border-radius: 999px;
  background: #fdfaf3;
}
.compare-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compare-card__body h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
}
.compare-card__arrow {
  font-size: var(--fs-caption);
  color: var(--green);
  font-weight: 650;
  transition: transform 0.15s;
}
.compare-card:hover .compare-card__arrow { transform: translateX(2px); }

/* Brand cards: replaces flat chip row. Each card links to /brand/[slug]/. */
.cat-page__brand-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-page__brand-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.cat-page__brand-card:hover {
  background: #fff;
  border-color: #b8ad92;
  transform: translateY(-1px);
}
.cat-page__brand-card-name {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__brand-card-meta {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.cat-page__brand-card-price {
  font-size: var(--fs-caption);
  color: var(--text);
  font-weight: 650;
  margin-top: 2px;
}

/* Grouped specs: replaces flat chip wall. Each group is a labeled column. */
.cat-page__variants-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 28px;
}
.cat-page__variants-group h3 {
  margin: 0 0 8px;
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid #ece5d6;
  padding-bottom: 6px;
}
.cat-page__variants-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-page__variants-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
.cat-page__variants-group a:hover { background: #fdfaf3; }
.cat-page__variants-group a span {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 650;
}

@media (max-width: 900px) {
  .cat-page__brand-cards { grid-template-columns: repeat(3, 1fr); }
  .cat-page__variants-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cat-page__brand-cards { grid-template-columns: repeat(2, 1fr); }
  .cat-page__variants-groups { grid-template-columns: 1fr; }
}

/* Collapsible header for brand + variants sections (native <details>) */
.cat-page__brands > details,
.cat-page__variants > details { margin: 0; }
.cat-page__brands > details > summary,
.cat-page__variants > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cat-page__brands > details > summary::-webkit-details-marker,
.cat-page__variants > details > summary::-webkit-details-marker { display: none; }
.cat-page__brands > details > summary::marker,
.cat-page__variants > details > summary::marker { content: ''; }
.cat-page__brands > details > summary h2,
.cat-page__variants > details > summary h2 { margin: 0; }
.cat-page__brands > details[open] > summary,
.cat-page__variants > details[open] > summary { margin-bottom: 14px; }
.cat-page__collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  color: var(--muted);
  font-size: var(--fs-caption);
  transition: transform 0.2s ease, background 0.15s, border-color 0.15s;
}
.cat-page__brands > details[open] > summary .cat-page__collapse-icon,
.cat-page__variants > details[open] > summary .cat-page__collapse-icon {
  transform: rotate(180deg);
}
.cat-page__brands > details > summary:hover .cat-page__collapse-icon,
.cat-page__variants > details > summary:hover .cat-page__collapse-icon {
  background: #fff;
  border-color: #b8ad92;
}

.cat-page__recent {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cat-page__recent h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__recent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid #bfe1ca;
  padding: 4px 9px;
  border-radius: 4px;
}
.cat-page__recent-tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(40, 122, 80, 0.18);
}
.cat-page__recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cat-page__recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.cat-page__recent-item:hover { background: #fff; border-color: #b8ad92; }
.cat-page__recent-item img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  flex-shrink: 0;
  border: 1px solid #ece5d6;
}
.cat-page__recent-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-page__recent-item-name {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-page__recent-item-meta {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}

.cat-page__faq {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 14px;
  padding: 26px 30px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.cat-page__faq h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.cat-page__faq details {
  border-top: 1px solid #eef2f6;
}
.cat-page__faq details:last-of-type { border-bottom: 1px solid #eef2f6; }
.cat-page__faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  position: relative;
  padding-right: 28px;
}
.cat-page__faq summary::-webkit-details-marker { display: none; }
.cat-page__faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}
.cat-page__faq details[open] summary::after { content: "\2212"; }
.cat-page__faq details p {
  margin: 0 0 16px;
  font-size: 14px;
  color: #3a4651;
  line-height: 1.65;
}

.cat-page__curation {
  margin-top: 24px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 14px;
  padding: 24px 28px;
}
.cat-page__curation h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.cat-page__curation p {
  margin: 0;
  color: #3a4651;
  font-size: 14px;
  line-height: 1.65;
  max-width: 920px;
}

/* Mobile filters drawer (slide-in from right) */
.cat-filters-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  /* Clip the off-screen panel: without this the translateX(100%) panel
     widens the scrollable document (~711px at a 390px viewport). */
  overflow: hidden;
}
.cat-filters-drawer[aria-hidden="false"] { pointer-events: auto; }
.cat-filters-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 32, 0);
  transition: background 0.25s ease;
}
.cat-filters-drawer[aria-hidden="false"] .cat-filters-drawer__backdrop {
  background: rgba(16, 24, 32, 0.45);
}
.cat-filters-drawer__panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(86vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -4px 0 30px rgba(16, 24, 32, 0.18);
  overflow-y: auto;
}
.cat-filters-drawer[aria-hidden="false"] .cat-filters-drawer__panel {
  transform: translateX(0);
}
.cat-filters-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.cat-filters-drawer__title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  margin: 0;
}
.cat-filters-drawer__close {
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}
.cat-filters-drawer__close:hover { background: #f8fafc; }
.cat-filters-drawer__body { padding: 18px; }
.cat-filters-drawer__foot {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  display: flex;
  gap: 10px;
}
.cat-filters-drawer__foot .btn,
.cat-filters-drawer__foot .outline-btn {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Category page mobile breakpoints */
@media (max-width: 1080px) {
  .cat-page__recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cat-shell { grid-template-columns: 1fr; gap: 0; }
  .filters { display: none; }
  .cat-filters-drawer { display: block; }
  .cat-toolbar__filter-btn { display: inline-flex; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-page__hero, .cat-page__intro, .cat-page__brands, .cat-page__variants, .cat-page__recent, .cat-page__faq, .cat-page__curation {
    padding: 20px 18px;
    border-radius: 12px;
    margin-top: 18px;
  }
  .cat-page__hero { margin-top: 14px; }
  .cat-page__title { font-size: 28px; letter-spacing: 0; }
  .cat-page__lead { font-size: 14.5px; }
  .cat-page__hero-stats { gap: 18px 24px; }
}
@media (max-width: 600px) {
  .cat-page__recent-grid { grid-template-columns: 1fr; }
  .cat-page__title { font-size: 24px; }
}

/* ---------- Product page layout ---------- */

.pdp {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;   /* info side gets a touch more room than image */
  gap: 44px;
  margin-top: 14px;
  align-items: start;
}
/* Gallery — Target-style: image speaks for itself, frame is invisible. */
.gallery {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  box-shadow: none;
}
.gallery .main-img {
  position: relative;
  height: 440px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 26px;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery .main-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.gallery .main-img:hover img { transform: scale(1.02); }

/* Prev / next arrows — appear on hover, sit centered on the L/R edges.
   Keyboard-focusable too (focus-visible ring). */
.gallery .g-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.08);
}
.gallery .main-img:hover .g-nav { opacity: 1; }
.gallery .g-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.gallery .g-prev { left: 12px; }
.gallery .g-next { right: 12px; }

/* Counter pill bottom-left, zoom button bottom-right */
.gallery .g-counter {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(16, 24, 32, 0.7);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.gallery .g-zoom {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.gallery .main-img:hover .g-zoom { opacity: 1; }
.gallery .g-zoom:hover { background: #fff; }

/* Lightbox — native <dialog> styled to fill the viewport with a dark
   backdrop. Image floats centered, controls overlay at the corners. */
.lightbox[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox::backdrop { background: rgba(16, 24, 32, 0.92); }
.lightbox .lb-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.4);
}
.lightbox .lb-close,
.lightbox .lb-nav {
  position: absolute;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.lightbox .lb-close:hover,
.lightbox .lb-nav:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.lightbox .lb-close { top: 24px; right: 24px; }
.lightbox .lb-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox .lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-counter {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.10);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 720px) {
  .lightbox .lb-prev { left: 12px; }
  .lightbox .lb-next { right: 12px; }
  .lightbox .lb-close { top: 14px; right: 14px; }
  .gallery .g-nav { opacity: 1; }   /* always visible on touch */
  .gallery .g-zoom { opacity: 1; }
}
.gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gallery .thumbs button {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  height: 76px;
  transition: border-color 0.12s;
}
.gallery .thumbs button:hover { border-color: #6e7884; }
.gallery .thumbs button.active {
  border: 2px solid var(--text);
  padding: 5px;
}
.gallery .thumbs button img { width: 100%; height: 100%; object-fit: contain; }

/* Product info column — Target sets the bar with title at ~24-26px /
   weight 500-600, NOT 32px-bold. Restraint reads "trusted shop". */
.pdp-main h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 4px 0 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pdp-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pdp-summary {
  color: #3a4651;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Quick verdict — Best for / Not for tags above the variants. Helps buyers
   self-select instantly. Pulled from review patterns + category fit, not
   our opinion. */
.verdict {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.verdict-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.verdict-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 0;
  border-radius: 5px;
}
.verdict-yes { background: var(--green-soft); color: var(--green); border: 1px solid #bfe1ca; }
.verdict-no  { background: #fdecea; color: var(--red); border: 1px solid #f4cfca; }

/* Variant swatches — Target style: chunky, clearly tappable, dark border
   on selection (no green tint background, that's too brand-loud). */
.variants {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.variant {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.1s;
}
.variant:hover { border-color: #6e7884; }
.variant.selected {
  border-color: var(--text);
  border-width: 2px;
  padding: 9px 13px;
}
.variant small { color: var(--muted); font-size: var(--fs-caption); font-weight: 500; }

/* Purchase block — Target keeps this UNFRAMED: just price + CTA + small
   reassurance line. No card, no shadow, no green accents. The page reads
   as content, not a checkout funnel. */
.purchase {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 0 0;
  margin: 0 0 24px;
  box-shadow: none;
}
.purchase .price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap; gap: 12px;
}
.purchase .price {
  font-size: 28px; font-weight: 650; letter-spacing: 0;
  color: var(--text); line-height: 1;
}
.purchase .price small {
  font-size: 14px; color: var(--text); font-weight: 650; margin-left: 1px;
}

.cta-row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
.cta-row .btn {
  font-size: 16px;
  padding: 17px 24px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* Category-specific trust badges below CTA (wiki: trust-conversion §5) */
.cat-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.cat-trust div {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
}
.cat-trust div span.t { color: var(--green); font-size: 16px; }

/* Shared section — Target uses subtle dividers + section headers, not
   floating cards. Keep white background but drop shadow and round only
   slightly. The flat look is what reads "trusted directory". */
.specs-table, .score-breakdown, .compare-strip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 32px 0 0;
  box-shadow: none;
}
.specs-table h2, .score-breakdown h2, .compare-strip h2 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.specs-table dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  margin: 0;
}
.specs-table dl > div { display: contents; }
.specs-table dt {
  font-size: 14.5px;
  color: #4d5862;
  padding: 12px 0;
  border-bottom: 1px solid #eee6db;
  font-weight: 500;
}
.specs-table dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  padding: 12px 0;
  border-bottom: 1px solid #eee6db;
  text-align: right;
  color: var(--text);
}

/* Tabbed deep-info widget (Highlights · Specs · What owners say). Pure-CSS
   toggle via three radio inputs at the top of the section. Visible tab bar
   highlights the selected label; only the matching panel shows. */
.info-tabs {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 18px 0 0;     /* tightened from 32px — less hero-to-tabs vertical gap */
  overflow: hidden;
}
.info-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.info-tabs__bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.info-tabs__bar label {
  flex: 1;
  text-align: center;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #3a4651;          /* darker than muted — still inactive but readable */
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.info-tabs__bar label:hover { color: var(--text); background: #fff; }

.info-tabs__panel {
  display: none;
  padding: 24px 28px;
}
/* Wire each radio to its label + panel. Selectors use general-sibling
   combinator since panels are siblings of the inputs at the same level. */
#ptab-1:checked ~ .info-tabs__bar label[for="ptab-1"],
#ptab-2:checked ~ .info-tabs__bar label[for="ptab-2"],
#ptab-3:checked ~ .info-tabs__bar label[for="ptab-3"] {
  color: var(--text);
  border-bottom-color: var(--text);
  background: #fff;
}
#ptab-1:checked ~ .info-tabs__panel[data-panel="1"],
#ptab-2:checked ~ .info-tabs__panel[data-panel="2"],
#ptab-3:checked ~ .info-tabs__panel[data-panel="3"] {
  display: block;
}

/* Specs <dl> — outer grid is 2 columns, each div is its own internal
   label/value pair. Halves the vertical real estate without breaking the
   right-aligned value alignment. Falls back to 1 column on narrow screens. */
.specs-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 0;
  margin: 0;
}
.specs-dl > div {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #eee6db;
}
.specs-dl dt {
  font-size: 14.5px;
  color: #4d5862;
  font-weight: 500;
  margin: 0;
}
.specs-dl dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  text-align: right;
  color: var(--text);
}
@media (max-width: 700px) {
  .specs-dl { grid-template-columns: 1fr; column-gap: 0; }
}

/* Highlights — labeled signal table. Left column = colored category tag,
   right column = bold proof statement + supporting one-liner. Reads as
   structured data, not a list of marketing bullets. */
.highlights {
  display: grid;
  gap: 0;
  margin: 0;
}
.highlights > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #eee6db;
  align-items: start;
}
.highlights > div:first-child { padding-top: 4px; }
.highlights > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.highlights dt { margin: 0; padding-top: 1px; }
.highlights dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.highlights dd strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 650;
}
.hl-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text);
}
.hl-quality { color: #1f6040; background: var(--green-soft); border-color: #bfe1ca; }
.hl-demand  { color: #8c6210; background: #fff5dc;          border-color: #f0d896; }
.hl-brand   { color: var(--blue); background: #eaf2fa;       border-color: #c8d9e8; }
.hl-perf    { color: #7c2d12; background: #fde8d6;          border-color: #f3c9a3; }
.hl-eff     { color: #1f6040; background: var(--green-soft); border-color: #bfe1ca; }
.hl-cover   { color: var(--text); background: #f1ede4;       border-color: var(--border); }
@media (max-width: 700px) {
  .highlights > div { grid-template-columns: 1fr; gap: 6px; }
}

/* About this product — editorial copy block. Two paragraphs of original
   prose between hero and tabs. Goal: kill the "thin affiliate page"
   penalty signal and give Google substantial original text to index. */
.about-product {
  margin: 32px 0 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.about-product h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.about-product p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #2c3640;
}
.about-product p:last-child { margin-bottom: 0; }
.about-product strong { color: var(--text); font-weight: 650; }

/* 3 takeaway cards at top of the "What owners say" tab */
.takeaways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}
.takeaway {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  border-top: 2px solid var(--text);
}
.tk-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.tk-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
@media (max-width: 720px) {
  .takeaways { grid-template-columns: 1fr; }
}

/* Sentiment chips arranged in two clear columns (love / complain) so the
   eye reads the split immediately instead of parsing color-coded chips. */
.sentiment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin: 0 0 24px;
}
.sentiment-h {
  margin: 0 0 10px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.sentiment-h::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
}
.sentiment-h-good { color: var(--green); }
.sentiment-h-good::before { background: var(--green); }
.sentiment-h-bad  { color: var(--red); }
.sentiment-h-bad::before  { background: var(--red); }
@media (max-width: 720px) {
  .sentiment-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* FAQ accordion — native <details>/<summary>. SEO-rich and AI-Overview
   friendly. JSON-LD FAQPage schema plugs in later from the same Q/A data. */
.faq {
  margin: 32px 0 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.faq h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.faq details {
  border-top: 1px solid #eee6db;
  padding: 14px 0;
}
.faq details:last-of-type { border-bottom: 1px solid #eee6db; }
.faq summary {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
  margin-left: 12px;
  transition: transform 0.15s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 12px 0 4px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #2c3640;
}

/* Owner consensus — 1-line editorial verdict at top of "What people say".
   Replaces the rating-distribution chart (Amazon owns that data). */
.owner-verdict {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.ov-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.ov-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

/* Specs grouped into 4 sections (Capacity / Performance / Build / Warranty).
   Each section has a small uppercase header and its own dl. Two-up on
   desktop, stacked on mobile. */
.specs-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
}
.specs-group h3 {
  margin: 0 0 8px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs-group .specs-dl { grid-template-columns: 1fr; column-gap: 0; }

/* Comparison pill next to a value: "vs avg 7.2", "25% below avg", etc.
   Plain neutral by default; .good shades it green for advantages. */
.vs-avg {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.vs-avg.good { color: var(--green); background: var(--green-soft); border-color: #bfe1ca; }
@media (max-width: 760px) {
  .specs-groups { grid-template-columns: 1fr; gap: 22px; }
}

/* Owner snapshot — big rating + 5-row distribution bar. Reads like an
   actual review aggregator, not "we made it up". */
.owners-snapshot {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  align-items: center;
}
.rating-summary { text-align: center; }
.rating-big {
  font-size: 56px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
  margin-bottom: 4px;
}
.rating-bars { display: grid; gap: 6px; }
.rating-row {
  display: grid;
  grid-template-columns: 28px 1fr 36px;
  gap: 12px;
  align-items: center;
}
.r-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.r-bar { height: 8px; background: #f2ede5; border-radius: 999px; overflow: hidden; }
.r-bar > i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.r-pct { font-size: var(--fs-caption); color: var(--muted); text-align: right; tabular-nums: true; }

/* Most-mentioned theme chips — quantified evidence the page isn't fiction. */
.themes { margin-bottom: 22px; }
.themes h3 {
  margin: 0 0 10px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.theme {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
}
.theme em { font-style: normal; font-weight: 500; color: var(--muted); font-size: var(--fs-caption); }
.theme.good { background: var(--green-soft); color: var(--green); border-color: #bfe1ca; }
.theme.good em { color: var(--green); opacity: 0.75; }
.theme.bad  { background: #fdecea; color: var(--red); border-color: #f4cfca; }
.theme.bad em  { color: var(--red); opacity: 0.75; }

/* Owner-themed pros/cons — reuse .proscons but allow the mention-count em */
.proscons li em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-left: 4px;
}

.owners-disclaimer {
  margin: 22px 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: 1.55;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .owners-snapshot { grid-template-columns: 1fr; gap: 18px; }
}

/* Pros / Cons grid inside "What owners say" tab. Two columns side by side
   on desktop, stacked on mobile. Headings carry tasteful colored accents. */
.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.proscons h3 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.proscons .pros h3 { color: var(--green); }
.proscons .cons h3 { color: var(--red); }
.proscons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.proscons li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}
.proscons .pros li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 650;
}
.proscons .cons li::before {
  content: "−";
  position: absolute;
  left: 1px;
  color: var(--red);
  font-weight: 650;
}
@media (max-width: 760px) {
  .proscons { grid-template-columns: 1fr; gap: 22px; }
}

/* Versus strip — single-rival cards. Big rival image up top with a small
   "VS" badge as the comparison cue (no awkward dual thumbs). Below: brand
   line, model name, price/rating, then a real ✓/× differentiator list
   that actually tells the user what the alternative trades off. */
.versus-strip {
  margin: 32px 0 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.versus-head { margin-bottom: 20px; }
.versus-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}
.versus-head p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 720px;
}
.versus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.versus-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.versus-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}

/* Big rival image + floating VS badge */
.vs-img {
  position: relative;
  height: 200px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid var(--border);
}
.vs-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.vs-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--text);
  color: #fff;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.18);
}

/* Body */
.vs-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.vs-brandline {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.vs-name {
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 6px;
}
.vs-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vs-price {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}
.vs-sep { color: var(--border); }
.vs-meta .stars { font-size: 13px; }
.vs-rating { color: var(--text); font-weight: 600; }
.vs-rev { color: var(--muted); font-size: var(--fs-caption); }

/* The real meat: ✓/× differentiator list */
.vs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 6px;
}
.vs-list li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.vs-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 650;
  font-size: 14px;
}
.vs-plus { color: var(--text); }
.vs-plus::before  { content: "+"; color: var(--green); }
.vs-minus::before { content: "−"; color: var(--red); }
.vs-list li strong { font-weight: 650; }

.vs-cta {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #eee6db;
}
.vs-cta span { transition: transform 0.15s; }
.versus-card:hover .vs-cta { color: var(--text); }
.versus-card:hover .vs-cta span { transform: translateX(4px); }

@media (max-width: 900px) {
  .versus-grid { grid-template-columns: 1fr; }
  .vs-img { height: 220px; }
}

/* "You may also like" — same visual language as .versus-strip (shared
   .vs-img / .vs-body), but 4-up grid, no VS badge, and a colored
   use-case tag instead. The blurb explains in 1 sentence why this
   alternative exists (RV use, commercial, bulk, energy). */
.suggest-strip {
  margin: 32px 0 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.suggest-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.suggest-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.suggest-card .vs-img { height: 170px; padding: 18px; }
.suggest-card .vs-name { font-size: 15px; }
.suggest-card .vs-meta { margin-bottom: 10px; }

.suggest-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: #3a4651;
  margin: 0 0 12px;
  flex: 1;
}

/* Use-case tag — colored chip at the top of the body. Tells users
   instantly which alternative applies to their situation. */
.suggest-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid;
  margin-bottom: 2px;
}
.tag-rv         { color: var(--blue); background: #eaf2fa; border-color: #c8d9e8; }
.tag-commercial { color: #7c2d12;     background: #fde8d6; border-color: #f3c9a3; }
.tag-bulk       { color: #8c6210;     background: #fff5dc; border-color: #f0d896; }
.tag-eco        { color: var(--green); background: var(--green-soft); border-color: #bfe1ca; }

@media (max-width: 1080px) { .suggest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .suggest-grid { grid-template-columns: 1fr; } }

/* "You may also like" — denser product strip than .compare-grid (4-up
   not 3-up, no per-card CTA — the whole card is the link). */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.related-card {
  border: 1px solid #d8cfba;
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  display: grid;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.related-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.related-card .img-mini {
  height: 110px;
  background: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.related-card .img-mini img { max-width: 90%; max-height: 90%; object-fit: contain; }
.related-card strong {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
}
.related-card .meta-line {
  font-size: var(--fs-caption);
  color: var(--muted);
}
@media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }

/* "Featured in these buying guides" — bigger, more substantive guide
   cards. Each shows: tag + last-updated, title, blurb, then 2-up stat
   block (total products in guide / where THIS product ranks). The rank
   stat doubles as a credibility signal — we ranked it, here's the spot. */
.guides-strip {
  margin: 32px 0 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.guide-card-pro {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  padding: 18px 20px;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.guide-card-pro:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.gc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.gc-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: #eaf2fa;
  border: 1px solid #c8d9e8;
  padding: 4px 9px;
  border-radius: 4px;
}
.gc-meta-date {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 500;
}
.gc-title {
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}
.gc-blurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}
.gc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.gc-stat {
  background: #f8fafc;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.gc-stat-num {
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1;
}
.gc-stat-label {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gc-rank { background: var(--green-soft); }
.gc-rank .gc-stat-num { color: var(--green); }
.gc-rank .gc-stat-label { color: var(--green); }
.gc-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gc-cta span { transition: transform 0.15s; }
.guide-card-pro:hover .gc-cta { color: var(--text); }
.guide-card-pro:hover .gc-cta span { transform: translateX(4px); }
@media (max-width: 900px) { .guides-grid { grid-template-columns: 1fr; } }


/* "Browse adjacent categories" — replaces the chip strip. Mini cards in
   a 4-up grid, each with a soft icon, name, and curated-count line.
   Reads as a real category index, not a tag cloud. */
.cats-strip {
  margin: 32px 0 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.cat-card:hover {
  border-color: #b8ad92;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 32, 0.05);
  transform: translateY(-1px);
}
.cat-ico {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
  filter: grayscale(0.15);
}
.cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.cat-count {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 500;
}
.cat-card-up {
  background: #fff;
  border-style: dashed;
}
.cat-card-up .cat-ico { font-size: 20px; }
@media (max-width: 900px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cats-grid { grid-template-columns: 1fr; } }
/* "Other <tree> categories" on phones (owner 10-10): 12 links in 2 compact columns, no icon */
@media (max-width: 480px) {
  .related-cats .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .related-cats .cat-card { padding: 10px 12px; }
  .related-cats .cat-ico { display: none; }
}


/* Buying-guide cards — listicle previews. Bigger title, paragraph hint,
   subtle CTA. Pill at top reinforces "this is a guide, not a product". */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.guide-card {
  border: 1px solid #d8cfba;
  border-radius: 10px;
  padding: 18px 20px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.guide-card:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.guide-card .pill { margin-bottom: 4px; align-self: start; }
.guide-card strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.guide-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.guide-card .link-cta {
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 760px) { .guide-grid { grid-template-columns: 1fr; } }

/* Related-categories block — text-link chips + a small "primary trail"
   under it. Cheap to render but pumps internal-link count and gives Google
   a clean topical neighborhood graph for this page. */
.related-cats {
  margin: 32px 0 0;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.related-cats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 14px;
}
.related-cats__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.related-cats__all:hover { text-decoration: underline; }
.related-cats h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.cat-chips a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.cat-chips a:hover { border-color: var(--green); background: #fff; }
.cat-trail {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.cat-trail a:hover { text-decoration: underline; }

/* Legacy bar-row kept (in case any score-breakdown still uses it) */
.bar-row { display: grid; grid-template-columns: 130px 1fr 38px; gap: 12px; align-items: center; margin-bottom: 10px; }
.bar-row span:first-child { font-size: 13px; color: var(--muted); }
.bar-row .bar { height: 8px; background: #f2ede5; border-radius: 999px; overflow: hidden; }
.bar-row .bar > i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.bar-row .num { font-size: 13px; font-weight: 600; text-align: right; }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.compare-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: grid; gap: 10px;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.compare-card:hover {
  border-color: #aab4bd;
  background: #f8fafc;
}
.compare-card .img-mini {
  height: 108px; background: #ffffff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.compare-card .img-mini img { max-width: 90%; max-height: 90%; object-fit: contain; }
.compare-card strong { font-size: 14.5px; color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pdp { grid-template-columns: 1fr; }
  .cat-shell { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; padding: 16px; }
  .search { width: 100%; margin-left: 0; }
  .nav { overflow-x: auto; padding: 11px 16px; }
  .wrap { padding: 22px 16px 40px; }
  .product-card { grid-template-columns: 130px 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .home-hero-gallery__thumbs { flex-wrap: wrap; }
  .home-hero-gallery__thumb { flex-basis: calc(50% - 4px); }
  .specs-table dl, .compare-grid, .cat-trust { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}


/* ============================================================
   HOMEPAGE — luxury / industry-standard layout. Editorial hero,
   authority stats, real-product category cards, magazine-light
   guides, social-proof newsletter, closing trust manifesto.
   ============================================================ */

.home-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

/* ---- 1. Hero ---- */
.home-hero {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 12px 0 22px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 22px;
}
.home-h1 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 650;
  color: var(--text);
}
.home-h1-accent { color: var(--green); font-weight: 650; }
.home-sub {
  color: #3a4651;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 480px;
}
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }


/* Inline status line appended to lead forms (newsletter / contact) by the
   Layout submit handler. */
.lead-form-status {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: 13px;
  color: var(--green);
}

/* HERO gallery — 1 featured editorial card on top, thumbnail strip
   below, prev/next + counter at the bottom (PDP-gallery pattern).
   All featured cards stack in the same grid cell so the container
   takes the tallest card's height — swapping never resizes the box. */
.home-hero-gallery {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.home-hero-gallery__featured {
  display: grid;
  margin-bottom: 8px;
}
/* `position: relative` (not static) is required so the absolutely-positioned
   `.home-feature__link` overlay is contained to the card. Static positioning
   would let the overlay leak up to the nearest positioned ancestor and turn
   the whole gallery into one big hover target. */
.home-hero-gallery__featured > .home-feature {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.home-hero-gallery__featured > .home-feature.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
/* Disable the card-lift hover effect inside the gallery — in a carousel
   context the lift + box-shadow expand makes the active card pulse on
   every cursor entry, which reads as a glitch. The link overlay still
   captures the click, just without the visual lift. */
.home-hero-gallery__featured > .home-feature:hover {
  transform: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(16, 24, 32, 0.04),
    0 10px 28px -6px rgba(16, 24, 32, 0.10),
    0 22px 48px -18px rgba(16, 24, 32, 0.08);
  border-color: rgba(196, 178, 138, 0.32);
}
.home-hero-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.home-hero-gallery__thumb {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  /* Thumbs are <a> links to the product pages now, not swap buttons. */
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* No transform on hover — translateY shifts the thumb away from the
   cursor; if the cursor was near the edge it falls outside the new
   bounding box, unhover triggers, thumb returns, hover re-fires →
   rapid hover/unhover loop ("bumping a million times a second"). */
.home-hero-gallery__thumb:hover {
  border-color: var(--green);
  box-shadow: 0 2px 12px rgba(40, 122, 80, 0.14);
}
.home-hero-gallery__thumb.is-hidden { display: none; }
.home-hero-gallery__thumb-img {
  display: block;
  width: 100%;
  height: 100px;
  background: var(--card);
  overflow: hidden;
  flex-shrink: 0;
}
.home-hero-gallery__thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.home-hero-gallery__thumb-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px 11px;
  flex: 1;
}
.home-hero-gallery__thumb-cat {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-hero-gallery__thumb-title {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text);
  line-height: 1.32;
}
.home-hero-gallery__thumb-price {
  margin-top: auto;
  font-size: 13px;
  font-weight: 650;
  color: var(--green);
  padding-top: 4px;
}
.home-hero-gallery__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.home-hero-gallery__nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.home-hero-gallery__nav-btn svg { width: 14px; height: 14px; }
.home-hero-gallery__nav-btn:hover {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.home-hero-gallery__counter {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
  min-width: 42px;
  text-align: center;
}

/* §3 + §4 homepage tiles (owner 10-09): popular categories and top picks share
   one compact card - 12 each, 4/3/2 columns so the grid never leaves an orphan. */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.home-tile {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-tile:hover {
  border-color: #cdc4b6; transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.08);
}
.home-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.home-tile__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 13px; }
.home-tile__eyebrow {
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-tile__name { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--text); }
.home-tile__name--clamp {
  font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.home-tile:hover .home-tile__name { color: var(--green); }
/* Articles have no image: a text tile, same footprint as the others. */
.home-tile--text .home-tile__body { padding: 16px 16px 18px; gap: 6px; min-height: 168px; }
.home-tile--text .home-tile__name { font-size: 15.5px; }
/* §8 Why tiles: text only, no hover lift (they are not links). */
.home-tile--why { padding: 16px 16px 18px; gap: 6px; }
.home-tile--why:hover { transform: none; box-shadow: none; border-color: var(--border); }
.home-tile--why .home-tile__desc { -webkit-line-clamp: unset; display: block; }
.home-tile--why .home-tile__desc a { color: var(--green); font-weight: 600; }
.home-disclaimer { margin-top: 14px; }
/* §7 Newsletter band: copy left, inline signup right; stacks under 760px. */
.home-brief {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px;
}
.home-brief__title { margin: 4px 0 8px; font-size: 20px; font-weight: 650; color: var(--text); }
.home-brief__list { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.home-brief__form { display: flex; gap: 8px; }
.home-brief__form input[type="email"] {
  flex: 1; min-width: 0; font-size: 16px; padding: 11px 14px;
  border: 1px solid #cdc4b6; border-radius: 9px; background: #fff; color: var(--text);
}
.home-brief__form input[type="email"]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.home-brief__form .btn { border-radius: 9px; padding: 11px 18px; white-space: nowrap; }
.home-brief__note { display: block; margin-top: 8px; font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 760px) { .home-brief { grid-template-columns: 1fr; gap: 14px; padding: 16px; } }
@media (max-width: 600px) { .home-brief__form { flex-direction: column; } }
.home-tile__desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-tile__body { padding: 9px 11px 11px; }
  .home-tile__name { font-size: 14px; }
  .home-tile__name--clamp { font-size: 13px; }
}

/* Popular comparisons in its own full-width row (after the §5 newsletter
   was removed, the sibling slot is gone — the card stretches the row). */
.home-compares.home-compares--wide { width: 100%; }
/* 2-column grid of compare rows so popular comparisons fit in fewer
   vertical rows. The compare row is its own grid item — gap controls
   the spacing between cells. */
.home-compares__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
@media (max-width: 760px) {
  .home-compares__grid { grid-template-columns: 1fr; }
}

/* Editor's pick of the week — compact editorial card. Same footprint
   as the original two-column hero card, with small premium touches:
   gold status badge, uppercase category eyebrow, price callout in the
   meta row. No magazine-style ribbon, stats strip, or dual CTAs. */
/* Editor's-pick carousel wrapper. All slides stack absolutely; the active
   one fades in. Dots sit below the card. */
.home-feature-carousel {
  position: relative;
  align-self: stretch;
}
.home-feature-carousel .home-feature {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.home-feature-carousel .home-feature.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.home-feature-carousel__dots {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.home-feature-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(16, 24, 32, 0.18);
  cursor: pointer;
  transition: background 0.15s, width 0.18s;
}
.home-feature-carousel__dot:hover { background: rgba(16, 24, 32, 0.4); }
.home-feature-carousel__dot.is-current {
  background: var(--green);
  width: 22px;
  border-radius: 4px;
}

.home-feature {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 100%);
  border: 1px solid rgba(196, 178, 138, 0.32);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 0.48fr 0.52fr;
  gap: 12px;
  align-self: stretch;
  align-items: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(16, 24, 32, 0.04),
    0 10px 28px -6px rgba(16, 24, 32, 0.10),
    0 22px 48px -18px rgba(16, 24, 32, 0.08);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
/* Whole-card link to the PDP. The Check on Amazon button below has a
   higher z-index so its click goes to Amazon, not the PDP. */
.home-feature__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}
.home-feature .home-feature__amz {
  position: relative;
  z-index: 2;
}
.home-feature:hover {
  border-color: rgba(196, 178, 138, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 16px 36px -6px rgba(16, 24, 32, 0.13),
    0 30px 60px -20px rgba(16, 24, 32, 0.10);
  transform: translateY(-1px);
}

.home-feature__img {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  height: 100%;
}
.home-feature__img img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.home-feature__body {
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.home-feature__group {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-feature__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
  transition: color 0.15s;
}
/* Whole card is a link — tint the title on hover so it reads as clickable. */
.home-feature:hover .home-feature__title { color: var(--green); }
.home-feature__copy {
  margin: 0;
  color: #3a4651;
  font-size: var(--fs-caption);
  line-height: 1.45;
}
.home-feature__copy strong { color: var(--text); font-weight: 650; }

.home-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.home-feature__meta .hf-sep { color: #c4baa6; font-weight: 600; }
.hf-price {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}

@media (max-width: 1080px) {
  .home-feature { grid-template-columns: 1fr; gap: 16px; }
  .home-feature__img img { max-height: 220px; }
  .hf-price { margin-left: 0; }
}


/* ---- 3. Category cards — single hero image + structured info.
   Replaces the earlier 3-image collage which read busy/uneven. */
.home-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.home-cat {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-cat:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.home-cat:hover .home-cat__cta { color: var(--text); }
.home-cat:hover .home-cat__cta span { transform: translateX(4px); }

.home-cat__hero {
  aspect-ratio: 4 / 3;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.home-cat__hero img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.home-cat:hover .home-cat__hero img { transform: scale(1.03); }

.home-cat__body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-cat__group {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-cat__name {
  margin: 4px 0 6px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.2;
}
.home-cat__meta {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 4px 0 14px;
  padding: 10px 0 0;
  border-top: 1px solid #eef2f6;
}
.home-cat__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-cat__stat + .home-cat__stat {
  padding-left: 14px;
  border-left: 1px solid #eef2f6;
}
.home-cat__stat strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.home-cat__stat span {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-cat__cta {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #eee6db;
  margin-top: 4px;
}
.home-cat__cta span { transition: transform 0.15s; }
@media (max-width: 900px) { .home-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .home-cats { grid-template-columns: 1fr; } }

/* ---- 5. Comparisons + newsletter row ---- */
.home-row-2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; }
.home-compares {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.home-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr 20px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  background: #fff;
  border: 1px solid #ece5d6;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.home-compare:hover {
  border-color: #b8ad92;
  background: #f8fafc;
}
.home-compare__a, .home-compare__b {
  font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0;
}
.home-compare__a { text-align: right; }
.home-compare__vs {
  font-size: var(--fs-caption); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid #ece5d6;
  padding: 2px 6px;
  border-radius: 4px;
}
.home-compare__arrow {
  color: var(--blue); font-weight: 650; font-size: 15px;
  transition: transform 0.18s ease;
  text-align: right;
}
.home-compare:hover .home-compare__arrow { transform: translateX(3px); }

.home-newsletter {
  background: linear-gradient(160deg, var(--green-soft) 0%, #ffffff 100%);
  border: 1px solid #bfe1ca;
  border-radius: 12px;
  padding: 24px 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.home-newsletter h3 {
  margin: 0 0 8px;
  font-size: 22px; font-weight: 650; letter-spacing: 0;
  color: var(--text);
}
.home-newsletter p {
  color: #3a4651;
  font-size: 14px; line-height: 1.55;
  margin: 0 0 12px;
}
.home-newsletter__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-newsletter__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}
.home-newsletter__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.home-newsletter__proof strong { color: var(--text); font-weight: 650; }
.home-newsletter__form { display: flex; gap: 8px; margin-bottom: 14px; }
.home-newsletter__form input {
  flex: 1; height: 44px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 14px; font-size: 14px;
  outline: 0; background: #fff;
}
.home-newsletter__form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.home-newsletter__form .btn {
  padding: 0 18px; height: 44px;
  font-size: 14px; white-space: nowrap;
}
.home-newsletter__proof {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-caption); color: var(--muted);
  margin-top: auto;
}
.home-newsletter__avatars { display: inline-flex; }
.home-newsletter__avatars span {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-size: var(--fs-caption); font-weight: 650;
  flex-shrink: 0;
}
.home-newsletter__avatars span:first-child { margin-left: 0; }
@media (max-width: 900px) { .home-row-2 { grid-template-columns: 1fr; } }

/* ---- 6. Buying guides ---- */
.home-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-guide {
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-guide:hover {
  border-color: #b8ad92;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.09);
  transform: translateY(-1px);
}
.home-guide__img {
  aspect-ratio: 4 / 3;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.home-guide__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Composite thumbnail: 2 product images side-by-side, each filling half
   the card. Used on the homepage buying-guide cards so the thumbnail
   actually represents what's inside the listicle. */
.home-guide__img.home-guide__img--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  background: var(--card);
  position: relative;
  gap: 0;
}
.home-guide__img.home-guide__img--split img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: #fff;
  padding: 18px;
}
.home-guide__img.home-guide__img--split img:first-child {
  border-right: 1px solid var(--border);
}
.home-guide__img.home-guide__img--split img:only-child {
  grid-column: 1 / -1;
  border-right: 0;
}
.home-guide__body {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-guide__tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  align-self: start;
}
.home-guide h3 {
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text);
}
.home-guide p {
  margin: 0;
  color: #55626d;
  font-size: 14px;
  line-height: 1.6;
}
.home-guide__meta {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef2f6;
}
.home-guide__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-guide__stat + .home-guide__stat {
  padding-left: 14px;
  border-left: 1px solid #eef2f6;
}
.home-guide__stat strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.home-guide__stat span {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) { .home-guides { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .home-h1 { font-size: 38px; }
  .home-hero { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   MOBILE SYSTEM
   Hamburger + slide-in drawer + mobile search toggle.
   Section grid reflows. Type/spacing scale.
   ============================================================ */

/* --- Hamburger button (hidden on desktop, shown < 900px) --- */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: #f8fafc; }
.nav-toggle__bar {
  position: absolute;
  left: 9px; right: 9px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle__bar:nth-child(1) { top: 13px; }
.nav-toggle__bar:nth-child(2) { top: 19px; }
.nav-toggle__bar:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* --- Mobile search toggle button (hidden on desktop) --- */
.search-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.search-toggle:hover { background: #f8fafc; }

/* --- Mobile slide-in drawer (hidden on desktop) --- */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden; /* clip the off-screen panel — no sideways document growth */
}
.mobile-drawer[aria-hidden="false"] { pointer-events: auto; }
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 32, 0);
  transition: background 0.25s ease;
  cursor: pointer;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__backdrop {
  background: rgba(16, 24, 32, 0.45);
}
.mobile-drawer__panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 0 30px rgba(16, 24, 32, 0.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__panel {
  transform: translateX(0);
}
.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.mobile-drawer__head .logo { font-size: 22px; }
/* .logo is a flex row with a 10px gap (mark + wordmark); here it would split "Product Dome". */
.mobile-drawer__head .logo.logo { gap: 0; }
.mobile-drawer__close {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.mobile-drawer__close:hover { background: #f8fafc; }
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer__nav a {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  min-height: 48px;
}
.mobile-drawer__nav a:hover, .mobile-drawer__nav a:active { background: #f8fafc; }
.mobile-drawer__section {
  padding: 12px 12px 24px;
}
.mobile-drawer__section .mega-col__h {
  margin: 8px 12px 8px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-drawer__country {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  min-height: 44px;
}
.mobile-drawer__country img {
  width: 22px; height: 16px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.mobile-drawer__country span:nth-child(2) { flex: 1; white-space: nowrap; }
.mobile-drawer__country:hover, .mobile-drawer__country:active { background: #f8fafc; }
.mobile-drawer__country--active {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 650;
}
.mobile-drawer__country--active:hover { background: var(--green-soft); }
.mobile-drawer__country-soon {
  padding: 10px 14px 4px;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.mobile-drawer__current {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: #fff;
  border: 1px solid #bfe1ca;
  padding: 3px 7px;
  border-radius: 4px;
}

body.is-drawer-open { overflow: hidden; }

/* ============================================================
   < 900px — TABLET / LARGE PHONE
   Show hamburger + search toggle, hide desktop nav + mega menu.
   Search collapses into a slide-down drawer triggered by icon.
   ============================================================ */
@media (max-width: 900px) {
  /* Topbar layout on mobile:  [country] Logo  ════  [search] [hamburger]
     Country + logo flush to the left edge, search + hamburger flush to
     the right edge. Achieved with margin-left:auto on the search icon
     which absorbs all free space to its left. */
  .topbar {
    position: relative;
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .nav-toggle { display: block; }
  .search-toggle { display: inline-flex; }
  .mobile-drawer { display: block; }

  .logo { font-size: 19px; }

  .topbar .country-pick  { order: 1 !important; margin: 0 !important; }
  .topbar .logo          { order: 2 !important; margin: 0 !important; }
  .topbar .search-toggle { order: 3 !important; margin-left: auto !important; margin-right: 0 !important; }
  .topbar .nav-toggle    { order: 4 !important; margin: 0 !important; }

  /* Search collapses to icon-only state until toggled, then slides down
     as a full-width row beneath the topbar. */
  .search {
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: auto;
    margin: 0;
    height: 0;
    border-radius: 0;
    border-left: 0; border-right: 0; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
    overflow: hidden;
    transition: height 0.22s ease, border-bottom-color 0.22s;
  }
  .search--mobile-open {
    height: 56px;
  }
  .search input {
    height: 100%;
    padding: 0 16px;
    font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  }
  .search button {
    padding: 0 18px;
    font-size: 14px;
  }

  /* Hide desktop nav + mega menu — the drawer carries them on mobile. */
  .nav { display: none; }

  /* Country picker on mobile: only the flag, no code or caret — drawer
     has the full country list. Keep it visible for at-a-glance market. */
  .country-pick > summary {
    padding: 7px 9px;
    gap: 4px;
  }
  .country-pick .cp-code, .country-pick .cp-caret { display: none; }
  /* Country trigger now sits at the left edge of the topbar, so anchor
     the dropdown to the left of the trigger and cap its width to the
     viewport so it can't overflow on narrow phones. */
  .country-pick .cp-menu {
    left: 0;
    right: auto;
    min-width: 260px;
    max-width: calc(100vw - 32px);
  }

  .topbar-cta-slot .tcta-img { display: none; }

  /* Site content padding */
  .wrap { padding: 16px 16px 32px; }

  /* ---- HOMEPAGE SECTIONS ---- */
  .home-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 12px 0 24px;
    margin-bottom: 24px;
  }
  .home-h1 { font-size: 32px; letter-spacing: 0; line-height: 1.08; }
  .home-sub { font-size: 15px; max-width: none; margin-bottom: 18px; }
  /* Mobile stack order: copy first, gallery below (source order). */
  .home-hero__copy { order: 1; }
  .home-hero-gallery { order: 2; }
  /* Featured product fully stacks (image top, body below). The 1080px rule
     already sets grid-template-columns: 1fr — don't override here, just
     refine the inner sizes for full-width display. */
  .home-feature {
    align-self: stretch;
    padding: 18px;
    gap: 16px;
  }
  .home-feature__img { padding: 10px; }
  .home-feature__img img { max-height: 240px; }
  .home-feature__title { font-size: 20px; }
  .home-feature__copy { font-size: 14px; }
  .home-feature__meta { font-size: 13px; }


  .home-cats { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Editor's picks: 1-col stacked, internal layout reflows to vertical */
  .section > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .product-card { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .product-card .product-img { height: 200px; }
  .product-card .specs { grid-column: 1; }
  .product-card .card-bottom { grid-column: 1; }

  .home-row-2 { grid-template-columns: 1fr; }
  .home-compares { padding: 16px; }
  .home-newsletter { padding: 20px; }
  .home-newsletter__form input {
    height: 48px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .home-newsletter__form .btn {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-guides { grid-template-columns: 1fr; gap: 16px; }
  .home-guide__body { padding: 16px 18px 18px; }
  .home-guide h3 { font-size: 19px; }


  /* Section heads wrap so the "All categories ›" link doesn't crowd the title */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 16px;
  }
  .section-head h2 { font-size: 22px; letter-spacing: 0; }
  .section-head p { font-size: 13.5px; line-height: 1.5; }
  .section-head > a { font-size: 13.5px; }

  /* Country picker on mobile: bigger tap target */
  .country-pick > summary {
    padding: 8px 10px;
    min-height: 40px;
  }

}

/* ============================================================
   < 600px — PHONE
   Tighter type, fully stacked grids, larger tap targets.
   ============================================================ */
@media (max-width: 600px) {
  .home-h1 { font-size: 30px; letter-spacing: 0; }
  .home-sub { font-size: 14.5px; }
  .home-hero-cta { flex-direction: column; align-items: stretch; }
  .home-hero-cta .btn, .home-hero-cta .outline-btn { text-align: center; }

  /* Featured product: stack image on top, body below */
  .home-feature { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .home-feature__img { padding: 8px; }
  .home-feature__img img { max-height: 200px; }


  .home-cats { grid-template-columns: 1fr; gap: 14px; }
  .home-cat__hero { aspect-ratio: 16 / 10; }

  /* Stat blocks reflow to fit on narrow screens */
  .home-cat__meta, .home-guide__meta, .product-card .specs {
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-cat__stat + .home-cat__stat,
  .home-guide__stat + .home-guide__stat {
    padding-left: 10px;
  }

  .product-card { padding: 12px; }
  .product-card .product-img { height: 180px; }
  .product-card .specs { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .product-card .spec { padding: 8px 10px; border-left: 0; border-top: 1px solid #eef2f6; }
  .product-card .spec:first-child { border-top: 0; padding-top: 0; }
  .product-card .spec:nth-child(2) { border-top: 0; padding-top: 0; }
  .product-card .card-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
  .product-card .card-bottom .btn { text-align: center; }

  /* Newsletter form fully stacks on phones; input + button each full-width.
     16px input font prevents iOS zoom-on-focus. Flex-centered button text
     so "Subscribe" sits true-center inside the 48px-tall pill. */
  .home-newsletter__form {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
  .home-newsletter__form input {
    width: 100%;
    height: 48px;
    font-size: 16px;
    padding: 0 16px;
  }
  .home-newsletter__form .btn {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* Bigger tap targets on the country-picker flag-only summary */
  .country-pick > summary { padding: 8px 10px; min-height: 40px; }
}

/* Reduce hover-only effects on touch (prevents stuck hover state) */
@media (hover: none) {
  .home-cat:hover,
  .product-card:hover,
  .home-guide:hover,
  .home-compare:hover,
  .versus-card:hover,
  .suggest-card:hover,
  .related-card:hover,
  .guide-card-pro:hover,
  .guide-card:hover,
  .cat-card:hover {
    transform: none;
  }
}

/* ============================================================
   PRODUCT PAGE — MOBILE PASS
   Outer card padding shrinks on mobile, gallery sizes down.
   ============================================================ */
@media (max-width: 900px) {
  .versus-strip, .suggest-strip, .guides-strip, .related-cats {
    padding: 18px 16px;
    margin-top: 24px;
  }
  .versus-head h2, .suggest-strip h2, .guides-strip h2 {
    font-size: 22px;
    letter-spacing: 0;
  }
  .versus-head p { font-size: 13.5px; line-height: 1.5; }

  /* Gallery shrinks proportionally */
  .gallery .main-img { height: 360px; padding: 18px; }
  .gallery .thumbs { gap: 8px; }
  .gallery .thumbs button { width: 56px; height: 56px; }

  /* Tabs scroll horizontally if labels overflow */
  .info-tabs__bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Specs groups + sentiment + proscons stack to 1 column */
  .specs-groups { grid-template-columns: 1fr; }
  .sentiment-grid { grid-template-columns: 1fr; gap: 16px; }
  .proscons { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 600px) {
  .versus-strip, .suggest-strip, .guides-strip, .related-cats {
    padding: 16px 14px;
    border-radius: 10px;
  }
  .gallery .main-img { height: 280px; padding: 14px; }
  .gallery .thumbs button { width: 48px; height: 48px; }
  .pdp { gap: 20px; }
  .pdp-main h1 { font-size: 22px; line-height: 1.25; }
  .vs-img { height: 200px; padding: 18px; }
  .suggest-card .vs-img { height: 160px; padding: 14px; }
}

/* Per-product interlinks: same-brand siblings + similar-in-category. */
.pdp-related h3 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.pdp-related__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.pdp-related__card:hover {
  border-color: #c9bfa8;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 12px 28px rgba(16, 24, 32, 0.08);
}
.pdp-related__card img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 9px;
  padding: 14px;
}
.pdp-related__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pdp-related__brand {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pdp-related__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0;
  /* Tight reserve so cards in a row stay aligned even with shorter titles. */
  min-height: calc(14px * 1.4 * 2);
}
.pdp-related__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #eef2f6;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pdp-related__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}
.pdp-related__rating .stars {
  font-size: 13px;
  color: #d4a017;
  letter-spacing: 1px;
}
.pdp-related__rating strong { color: var(--text); font-weight: 650; }
/* One-line "why this alternative" reason (compare-verdict.ts altReason). */
.pdp-related__why {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  font-weight: 600;
  color: var(--green);
}
.pdp-related__price {
  margin-left: auto;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}

/* Per-product interlinks: featured-in listicles + compared-with rows. */
.pdp-mentions h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.pdp-mentions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdp-mentions__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
  transition: border-color 0.15s, background 0.15s;
}
.pdp-mentions__list a:hover { background: #fff; border-color: #b8ad92; }
.pdp-mentions__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--green);
  background: #fff;
  border: 1px solid #ece5d6;
  border-radius: 999px;
}
.pdp-mentions__thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ece5d6;
  border-radius: 6px;
  padding: 2px;
}
.pdp-mentions__title { flex: 1; min-width: 0; font-weight: 600; }
.pdp-mentions__title strong { color: var(--muted); margin-right: 6px; }
.pdp-mentions__arrow { color: var(--green); font-weight: 650; transition: transform 0.15s; }
.pdp-mentions__list a:hover .pdp-mentions__arrow { transform: translateX(2px); }

@media (max-width: 900px) { .pdp-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pdp-related__grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================================
   Product page (PDP) — Target/Best Buy inspired layout.
   Override the older .pdp grid (kept for the legacy markup that's no longer
   used) and define the new BEM-namespaced sections.
   ============================================================================ */
/* The scorecard is the most distinctive thing on the page — a category
   benchmark nobody else publishes — and it used to sit below the descriptive
   prose. It has been moved in the MARKUP to sit directly under the hero
   (audit §9/§11) rather than repositioned with CSS `order`: visual order that
   disagrees with DOM order breaks screen-reader and keyboard sequence
   (WCAG 1.3.2) and is not what a crawler reads. */
.pdp {
  display: block;
  margin-top: 0;
  max-width: var(--site-max);
}
.pdp__crumb {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.pdp__crumb a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.pdp__crumb a:hover { color: var(--text); }
.pdp__crumb .sep { margin: 0 9px; color: #c9bfa8; }
.pdp__crumb strong { color: var(--text); font-weight: 600; }

/* Hero: gallery (left) + info pane (right). Stacks at <900px. Info column
   leans slightly wider so the buy decision (price + CTA + skip) reads
   comfortably without the title wrapping aggressively. */
.pdp__top {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 44px;
  align-items: start;
  margin-bottom: 48px;
}
/* A grid track written as `1fr` is really `minmax(auto, 1fr)`, and that `auto`
   floor is min-content — so ONE non-wrapping child (the evidence strip) could
   force the track wider than the phone and push the whole document into
   horizontal scroll. `minmax(0, …)` plus `min-width: 0` on the children lets
   the track shrink to the viewport and makes the content wrap instead. */
.pdp__top > *,
.pdp__gallery,
.pdp__info {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 900px) {
  .pdp__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Gallery — hero on top, thumbnail row under it, stepper below.
   (Owner 2026-09-16: thumbs under the image, Amazon style, never a left rail.) */
.pdp__gallery {
  display: grid;
  grid-template-areas:
    "hero"
    "thumbs"
    "herobar";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-items: start;
}
.pdp__gallery .pdp__thumbs-wrap { grid-area: thumbs; align-self: stretch; }
.pdp__gallery .pdp__hero-img    { grid-area: hero; }
.pdp__gallery .pdp__hero-bar    { grid-area: herobar; }

.pdp__hero-img {
  position: relative;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow:
    0 1px 0 rgba(16, 24, 32, 0.02),
    0 6px 24px rgba(16, 24, 32, 0.05);
}
.pdp__hero-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.pdp__hero-img:hover img { transform: scale(1.02); }

/* Zoom button — only overlay control on the hero (small, top-right). */
.pdp__hero-zoom {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e4e9ee;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(16, 24, 32, 0.08);
}
.pdp__hero-zoom:hover { background: #fff; transform: scale(1.06); box-shadow: 0 4px 14px rgba(16, 24, 32, 0.12); }

/* Hero control bar — sits BELOW the image (no overlay). Prev / counter / next. */
.pdp__hero-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 4px 0 0;
}
.pdp__hero-step {
  width: 38px; height: 38px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pdp__hero-step:hover {
  border-color: var(--text);
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 24, 32, 0.06);
}
.pdp__hero-counter {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.06em;
  min-width: 56px;
  text-align: center;
}

/* Horizontal thumbnail row under the hero; scrolls sideways past ~7. */
.pdp__thumbs-wrap {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.pdp__thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.pdp__thumbs-more { display: none; }
.pdp__thumb {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 9px;
  padding: 6px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: #c9bfa8; transform: translateY(-1px); }
.pdp__thumb.is-current {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text), 0 4px 12px rgba(16, 24, 32, 0.08);
}
.pdp__thumbs-more {
  align-self: center;
  width: 68px;
  height: 28px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  display: none; /* thumbs scroll sideways now; the chevron is retired */
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.pdp__thumbs-more:hover {
  background: #f8fafc;
  color: var(--text);
  border-color: #c9bfa8;
}
.pdp__thumbs-more svg { transition: transform 0.2s; }
.pdp__thumbs-more.is-rotated svg { transform: rotate(180deg); }

@media (max-width: 700px) {
  .pdp__gallery {
    grid-template-areas: "hero" "herobar" "thumbs";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  .pdp__thumbs-wrap { flex-direction: row; }
  .pdp__thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
  }
  .pdp__thumbs-more { display: none; }
}
.pdp__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.pdp__thumb {
  flex: 0 0 68px;
  height: 68px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 9px;
  padding: 6px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pdp__thumb:hover { border-color: #c9bfa8; transform: translateY(-1px); }
.pdp__thumb.is-current {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text), 0 4px 12px rgba(16, 24, 32, 0.08);
}

/* ---------- Info pane ------------------------------------------------------ */
.pdp__info { padding-top: 6px; }
.pdp__halo {
  display: inline-block;
  margin-bottom: 16px;
}
.pdp__brand-tag {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  text-decoration: none;
}
.pdp__brand-tag--link { color: var(--green); cursor: pointer; transition: color 0.15s; }
.pdp__brand-tag--link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pdp__title {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 600;
  text-wrap: pretty;
}
/* Editorial trust strip — rating / reviews / monthly demand. Three
   neutral tiles separated by hairlines instead of mid-line dots, so
   the page reads as a spec sheet, not a social-media feed. Locked to
   a single row (no wrap) — labels stay inline so the strip never
   breaks across two lines. */
.pdp__meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid #dde3e9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}
.pdp__meta > * + * {
  border-left: 1px solid #e4e9ee;
}
.pdp__meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  white-space: nowrap;
}
.pdp__meta-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1;
}
.pdp__meta-stars-empty { color: #d8dee5; }
.pdp__meta-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #d4a017;
  white-space: nowrap;
}
.pdp__meta-rating-num {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}
.pdp__meta-rating-out {
  font-size: var(--fs-caption);
  color: var(--muted);
  font-weight: 600;
}
.pdp__meta-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  white-space: nowrap;
}
.pdp__meta-tile-num {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}
.pdp__meta-tile-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}
.pdp__meta-tile--demand .pdp__meta-tile-num { color: var(--green, #287a50); }

/* Phone: the evidence strip becomes a wrapping two-column grid instead of one
   non-wrapping row. As inline-flex + nowrap it could not fit the rating and
   both tiles on a single line at 390px, and because it never tried to wrap it
   forced the whole document to roughly 554px and put the page into horizontal
   scroll. Must stay AFTER the base rules above — same specificity, so source
   order is what wins. */
@media (max-width: 700px) {
  .pdp__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  .pdp__meta-rating {
    grid-column: 1 / -1;
    border-bottom: 1px solid #e4e9ee;
    white-space: normal;
    justify-content: center;
  }
  .pdp__meta > * + * { border-left: 0; }
  .pdp__meta-tile + .pdp__meta-tile { border-left: 1px solid #e4e9ee; }
  .pdp__meta-tile {
    min-width: 0;
    white-space: normal;
    justify-content: center;
  }
}

.pdp__verdict {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 4px 0 22px;
}
/* Quick spec pills — sit directly under the title, scannable in <1 sec. */
.pdp__pills {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pdp__pill {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e4e9ee;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* Buy box — price + CTA + tiny disclosure as one premium block. */
.pdp__buybox {
  background: #fdfaf3;
  border: 1px solid #e4e9ee;
  border-radius: 12px;
  padding: 18px 20px 14px;
  margin: 22px 0 14px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 6px 18px rgba(16, 24, 32, 0.04);
}
.pdp__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.pdp__price {
  font-size: 34px;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 650;
  line-height: 1;
}
.pdp__avail {
  font-size: var(--fs-caption); color: var(--muted); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pdp__cta {
  display: block;
  text-align: center;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 0;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.04), 0 8px 18px rgba(40, 122, 80, 0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pdp__cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(16, 24, 32, 0.04), 0 12px 24px rgba(40, 122, 80, 0.22); }

/* Variant swatches — open & visible. */
/* "Available sizes/colors" panel — one row per axis, values as pills.
   Replaces the swatch grid (avoids thin-page-per-variant problem).
   Current PDP's value gets a green tick + filled style; siblings stay
   subtle so the curator-confirmed pick is the visual anchor. */
.pdp__variants {
  margin: 18px 0 24px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #fdfbf6 0%, #fff 100%);
  border: 1px solid #dde3e9;
  border-radius: 12px;
}
.pdp__variants-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dashed #e4e9ee;
}
.pdp__variants-row:first-child { border-top: 0; padding-top: 0; }
.pdp__variants-row:last-of-type { padding-bottom: 4px; }

.pdp__variants-axis {
  flex-shrink: 0;
  width: 140px;
  margin: 6px 0 0;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp__variants-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.pdp__variants-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #3a4651;
  background: #fff;
  border: 1px solid #d8cfba;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
}
.pdp__variants-pill.is-current {
  background: var(--green-soft, #e7f4ec);
  border-color: var(--green, #287a50);
  color: #1f5c3d;
  box-shadow: 0 0 0 1px var(--green, #287a50);
}
.pdp__variants-pill-tick { color: var(--green, #287a50); }

.pdp__variants-hint {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed #e4e9ee;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.pdp__variants-hint a {
  color: var(--green, #287a50);
  font-weight: 650;
  text-decoration: none;
}
.pdp__variants-hint a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .pdp__variants-row { flex-direction: column; gap: 6px; }
  .pdp__variants-axis { width: auto; margin: 0; }
}
.pdp__variants h4 {
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}
.pdp__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e4e9ee;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  min-width: 88px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.pdp__swatch:hover { border-color: #c9bfa8; transform: translateY(-1px); }
.pdp__swatch.is-current {
  border-color: var(--text);
  background: #fff;
  box-shadow: 0 0 0 1px var(--text);
}
.pdp__swatch-img {
  width: 44px; height: 44px; object-fit: contain;
  background: #f8fafc; border-radius: 7px; padding: 3px;
}
/* Placeholder used when a variant has no scraped image (typically the
   non-curated siblings that link out to Amazon). Same footprint as the
   real image so swatches all line up. The ↗ glyph hints "off-site". */
.pdp__swatch-img--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 650;
  color: var(--muted);
  font-family: var(--font-sans);
}
.pdp__swatch-label { color: var(--text); }
.pdp__swatch-price { color: var(--muted); font-weight: 650; font-size: var(--fs-caption); }
/* Off-site variants (links to Amazon for sizes/colors we don't curate).
   Slightly muted but still clearly clickable. */
.pdp__swatch--external {
  background: #faf7f0;
  border-style: dashed;
}
.pdp__swatch--external .pdp__swatch-label { color: #55626d; }
.pdp__swatch--external:hover {
  background: #fff;
  border-style: solid;
  border-color: var(--green);
}
/* The "current" swatch is no longer a link in the new render — make
   sure it doesn't get the pointer cursor or hover lift. */
.pdp__swatch.is-current { cursor: default; transform: none; }
.pdp__swatch.is-current:hover { border-color: var(--text); transform: none; }


/* ---------- Section blocks (about / specs / buyers / cross-links) ---------- */
.pdp__about,
.pdp__tabs,
.pdp-related,
.pdp-mentions {
  margin: 28px 0 0;
}

/* White-card surface for text-heavy sections so they read clean against the
   cream site background. */
.pdp__about,
.pdp__tabs,
.pdp__block {
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow:
    0 1px 0 rgba(16, 24, 32, 0.02),
    0 6px 24px rgba(16, 24, 32, 0.04);
}

.pdp__about h2,
.pdp__buyers h2 {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pdp__about-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 760px;
  font-weight: 400;
}
.pdp__about .pdp__highlights-list { margin-top: 4px; }

.pdp__disclaimer {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #e4e9ee;
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .pdp__hero-img { height: 320px; padding: 18px; }
  .pdp__title { font-size: 19px; }
  .pdp__price { font-size: 26px; }
  .pdp__buyers-grid { grid-template-columns: 1fr; }
}


/* Buyer-fit tagline. White card + thin coloured side bar — quiet but clear. */
.pdp__fit {
  display: grid;
  gap: 8px;
  margin: 10px 0 18px;
}
.pdp__fit-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 14px 10px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-left-width: 3px;
}
.pdp__fit-row--good { border-left-color: var(--green); }
.pdp__fit-row--bad  { border-left-color: #c8843a; }

/* "Skip if" — muted box below the buy box. Honest signal without competing
   with the CTA. Subtle warm-cream background, tiny amber side bar. */
.pdp__skip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 16px;
  padding: 12px 14px 12px 16px;
  background: #fdfaf3;
  border: 1px solid #e4e9ee;
  border-left: 3px solid #c8843a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.pdp__skip-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a14e3a;
  padding-top: 1px;
}
.pdp__skip-text { color: var(--text); }

/* Inline disclaimer — lives at the bottom of the buy-box so all purchase
   context (price + button + disclosure) is one block. */
.pdp__inline-disclaimer {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin: 10px 0 0;
  padding: 0;
  letter-spacing: 0.02em;
  text-align: left;
}
/* Our verdict - short editorial call under the key facts. */
.pdp__verdict-box {
  border-left: 3px solid var(--green);
  background: #f6faf7;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 14px 0 6px;
}
.pdp__verdict-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.pdp__verdict-box .pdp__verdict { margin: 0; font-size: 15px; }

/* Sidebar related products (owner 2026-09-17): two groups, image + title rows. */
.pdp__side-group + .pdp__side-group { margin-top: 26px; }
.pdp__side-cards { display: grid; gap: 8px; }
.pdp__side-card-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pdp__side-card-item:hover { border-color: #c9bfa8; box-shadow: 0 6px 18px rgba(16, 24, 32, 0.06); }
.pdp__side-card-item img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #f8fafc; padding: 6px; flex: 0 0 72px; }
.pdp__side-card-item span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Sidebar alternatives. */
.pdp__side-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pdp__side-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.pdp__side-alt img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; flex: 0 0 44px; }
.pdp__side-alt:hover span { text-decoration: underline; }
.pdp__side-more { display: inline-block; margin-top: 12px; font-size: var(--fs-meta); font-weight: 650; color: var(--green); text-decoration: none; }
.pdp__side-more:hover { text-decoration: underline; }

/* ASIN / model / category line under the disclosure. */
.pdp__ident {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 10px 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.pdp__ident strong { font-weight: 600; color: var(--text); }
.pdp__ident a { color: var(--text); font-weight: 600; text-decoration: underline; }

/* Hero key facts - 3-4 bold-led bullets, replaces the rating/score strip. */
.pdp__facts {
  list-style: disc;
  padding: 0 0 0 20px;
  margin: 14px 0 4px;
}
.pdp__fact {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 8px;
}
.pdp__fact strong { font-weight: 650; }

/* Brand-page link — standalone block in the info pane, separated from the
   above content by a hairline divider. Activates only when the brand has a
   published brand-in-category page. */
.pdp__brand-link {
  display: block;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e4e9ee;
  text-decoration: none;
  color: var(--text);
  transition: color 0.15s;
}
.pdp__brand-link:hover { color: var(--green); }
.pdp__brand-link-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.pdp__brand-link-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0;
}
.pdp__brand-link:hover .pdp__brand-link-title { color: var(--green); }
.pdp__brand-link-arrow {
  color: var(--green);
  font-weight: 650;
  transition: transform 0.15s;
}
.pdp__brand-link:hover .pdp__brand-link-arrow { transform: translateX(3px); }
.pdp__fit-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  flex-shrink: 0;
  padding-top: 1px;
}
.pdp__fit-row--good .pdp__fit-label { color: var(--green); }
.pdp__fit-row--bad  .pdp__fit-label { color: #a14e3a; }
.pdp__fit-text { color: var(--text); }


/* Detail sections — About / Strengths / Performance / Specs / What buyers say.
   These were tabs. Tabs hid two thirds of the page behind a click, which made a
   well-filled product read as thin and left the copy effectively invisible to a
   reader skimming down the page. Each is now a plain stacked section with a real
   heading, visible with scripting off and anchorable by id.
   Held to --content-w: full-shell paragraphs are tiring to read. */
.pdp__detail {
  margin: 40px 0 0;
  max-width: var(--content-w);
  display: grid;
  gap: 20px;
}
.pdp__block { scroll-margin-top: 90px; }   /* anchor jumps clear the sticky topbar */
.pdp__block-title {
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 650;
  color: var(--text);
}
.pdp__block-note {
  margin: -6px 0 16px;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.pdp__perf {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

/* Strengths and trade-offs. Spec-derived, never review-derived — the eyebrow
   wording and the section note both keep that distinction explicit. */
.pdp__proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.pdp__proscons-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  color: var(--muted);
}
.pdp__proscons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.pdp__proscons-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
}
.pdp__proscons-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 650;
}
.pdp__proscons-list--good li::before { content: '+'; color: var(--green); }
.pdp__proscons-list--bad  li::before { content: '!'; color: var(--amber-tx); }

@media (max-width: 700px) {
  .pdp__detail { gap: 16px; }
  .pdp__block { padding: 20px 18px; border-radius: 12px; }
  .pdp__block-title { font-size: 17.5px; }
  .pdp__proscons { grid-template-columns: 1fr; gap: 18px; }
}

/* Highlights — vertical list. Each row reads like a one-line buyer benefit. */
.pdp__highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.pdp__highlights-list li {
  padding: 14px 0 14px 38px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  position: relative;
  line-height: 1.55;
  border-bottom: 1px solid #eef2f6;
}
.pdp__highlights-list li:last-child { border-bottom: 0; }
.pdp__highlights-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: var(--green-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23287a50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Specs table — hairlines only, generous padding, no stripes. */
.pdp__specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 10px;
  overflow: hidden;
}
.pdp__specs-table td, .pdp__specs-table th { padding: 14px 20px; border-bottom: 1px solid #eef2f6; text-align: left; }
.pdp__specs-table tr:last-child td, .pdp__specs-table tr:last-child th { border-bottom: 0; }
.pdp__specs-table tr:hover td, .pdp__specs-table tr:hover th { background: #f8fafc; }
.pdp__specs-key { color: var(--muted); font-weight: 600; width: 40%; font-size: 14px; }
.pdp__specs-val { color: var(--text); font-weight: 600; }
/* Buyer-oriented spec group headers (spec-groups.ts) */
.pdp__specs-group-name {
  padding-top: 22px;
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green);
}
.pdp__specs-table tr:hover .pdp__specs-group-name { background: #fff; }

/* "What buyers say" panel — two columns: love (green) | complain (amber). */
.pdp__buyers-source {
  margin: 0 0 14px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}
.pdp__buyers-disclaimer {
  margin: 14px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
}
.pdp__buyers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pdp__buyers-col {
  background: #fff;
  border: 1px solid #e4e9ee;
  border-top: 3px solid;
  border-radius: 10px;
  padding: 22px 24px;
  position: relative;
}
.pdp__buyers-col--good { border-top-color: var(--green); }
.pdp__buyers-col--bad  { border-top-color: #c8843a; }
.pdp__buyers-col-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.pdp__buyers-col--good .pdp__buyers-col-eyebrow { color: var(--green); }
.pdp__buyers-col--bad  .pdp__buyers-col-eyebrow { color: #a14e3a; }
.pdp__buyers-col-summary {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e4e9ee;
}
.pdp__buyers-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp__buyers-col-list li {
  position: relative;
  padding: 7px 0 7px 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.pdp__buyers-col-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.pdp__buyers-col-list--good li::before {
  background-color: var(--green-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23287a50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>");
}
.pdp__buyers-col-list--bad li::before {
  background-color: #fbeae1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a14e3a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>");
}
@media (max-width: 700px) {
  .pdp__buyers-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ---------- Category-standing chips (computed percentiles) --------------- */
.pdp__pct {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.pdp__pct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid #cbe5d4;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.pdp__pct-chip::before {
  content: "";
  width: 13px; height: 13px;
  flex: 0 0 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287a50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 15l-6-6-6 6'/></svg>");
}

/* Touch targets (WCAG 2.5.8) — 44px minimum for standalone controls. */
.pdp__hero-step, .pdp__thumbs-more { min-width: 44px; min-height: 44px; }
.cat-pagination__num { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Compare tray + compare buttons (public/compare.js) ---------- */
.pd-compare-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--fs-caption);
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
  position: relative;
  z-index: 2; /* above the whole-card overlay link */
}
.pd-compare-btn:hover { border-color: var(--green); color: var(--green); }
.pd-compare-btn.is-on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.pd-compare-btn--pdp { margin-top: 10px; align-self: flex-start; min-height: 44px; padding: 10px 18px; font-size: 13.5px; }
/* WCAG 2.2 target size: primary card actions get 44px targets on touch layouts. */
@media (max-width: 700px) {
  .pd-compare-btn,
  .product-card .card-bottom__amz { min-height: 44px; }
}

#pd-compare-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--nav);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(16, 24, 32, 0.08);
}
.pd-tray__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 10px var(--site-pad);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pd-tray__label { font-size: 13px; font-weight: 650; white-space: nowrap; }
.pd-tray__items { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pd-tray__item {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 8px 3px 4px; font-size: var(--fs-caption); max-width: 220px;
}
.pd-tray__item img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #fff; }
.pd-tray__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tray__item-rm {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 6px; min-width: 28px; min-height: 28px;
}
.pd-tray__item-rm:hover { color: var(--red); }
.pd-tray__msg { font-size: var(--fs-caption); color: var(--muted); }
.pd-tray__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pd-tray__go.is-disabled { opacity: 0.5; cursor: not-allowed; }
.pd-tray__clear {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: var(--fs-caption); font-weight: 600; min-height: 44px; padding: 0 8px;
}
.pd-tray__clear:hover { color: var(--red); }
/* Keep the tray from covering page-end content when open. compare.js
   measures the real tray height (ResizeObserver) into --pd-tray-h and lifts
   the tray above the cookie banner via --pd-tray-off when both are visible. */
#pd-compare-tray { bottom: var(--pd-tray-off, 0px); }
body.has-compare-tray {
  padding-bottom: calc(var(--pd-tray-h, 74px) + var(--pd-tray-off, 0px) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 700px) {
  .pd-tray__item-name { max-width: 90px; }
}

/* "All guides →" style link in a homepage section head. */
.section-head__link { font-size: 13.5px; font-weight: 650; color: var(--green); white-space: nowrap; align-self: center; }

/* Prev/next ring within the primary category (bottom of PDP). */
.pdp__neighbors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 34px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pdp__neighbor { text-decoration: none; min-width: 0; }
.pdp__neighbor--next { text-align: right; margin-left: auto; }
.pdp__neighbor--up {
  font-size: 13px; font-weight: 650; color: var(--green); white-space: nowrap;
}
.pdp__neighbor-dir { display: block; font-size: var(--fs-caption); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pdp__neighbor-name {
  display: -webkit-box; font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1.4;
  max-width: 360px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pdp__neighbor:hover .pdp__neighbor-name { color: var(--green); }

/* Above-the-fold trust line: evidence confidence + real data freshness. */
.pdp__trustline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}
.pdp__trustline-date { font-size: var(--fs-caption); color: var(--muted); }

/* ---------- Scorecard (data-computed subscores vs the category) ---------- */
.pdp__score {
  margin: 36px 0 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.04);
}
.pdp__score-head { margin-bottom: 18px; }
.pdp__score-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.pdp__score-head h2 { margin: 0; font-size: 21px; letter-spacing: 0; }
.pdp__score-grid {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 26px;
  align-items: start;
}
.pdp__score-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--green-soft) 0%, #f2f9f4 100%);
  border: 1px solid #cbe5d4;
  border-radius: 12px;
  padding: 22px 12px 18px;
  text-align: center;
}
.pdp__score-overall-num {
  font-size: 46px;
  font-weight: 650;
  line-height: 1;
  color: var(--green);
  letter-spacing: 0;
}
.pdp__score-overall-out { font-size: 14px; font-weight: 650; color: var(--muted); margin-top: 3px; }
.pdp__score-overall-label {
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-top: 10px;
}
.pdp__score-rows { display: flex; flex-direction: column; gap: 14px; }
.pdp__score-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.pdp__score-row-label { font-size: 13.5px; font-weight: 650; }
.pdp__score-row-weight { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); white-space: nowrap; }
.pdp__score-row-num { font-size: 14px; color: var(--green); }
.pdp__score-bar {
  height: 8px;
  border-radius: 999px;
  background: #eee7da;
  overflow: hidden;
}
.pdp__score-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3f9a68 0%, var(--green) 100%);
}
.pdp__score-note { margin: 6px 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.pdp__score-method {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 700px) {
  .pdp__score { padding: 20px 18px 16px; }
  .pdp__score-grid { grid-template-columns: 1fr; gap: 18px; }
  .pdp__score-overall { flex-direction: row; gap: 10px; padding: 14px 16px; }
  .pdp__score-overall-num { font-size: 34px; }
  .pdp__score-overall-label { margin-top: 0; }
}


/* ---------- FAQ accordion ----------------------------------------------- */
.pdp__faq { margin: 40px 0 0; }
.pdp__faq .pdp__block-title { margin-bottom: 6px; }
.pdp__faq-list { border-top: 1px solid var(--border); }
.pdp__faq-item { border-bottom: 1px solid var(--border); }
.pdp__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  line-height: 1.4;
}
.pdp__faq-q::-webkit-details-marker { display: none; }
.pdp__faq-q-text { flex: 1; min-width: 0; }
.pdp__faq-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.pdp__faq-item[open] .pdp__faq-icon { transform: rotate(45deg); color: var(--text); }
.pdp__faq-a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  padding: 0 40px 18px 0;
  max-width: 760px;
}

/* ---------- Lightbox (full-screen image viewer) -------------------------- */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 32, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.pdp-lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
body.is-lightbox-open { overflow: hidden; }
.pdp-lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
.pdp-lightbox__close,
.pdp-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, transform 0.15s;
}
.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.pdp-lightbox__close { width: 44px; height: 44px; top: 24px; right: 24px; }
.pdp-lightbox__nav { width: 56px; height: 56px; top: 50%; transform: translateY(-50%); }
.pdp-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.pdp-lightbox__nav--prev { left: 24px; }
.pdp-lightbox__nav--next { right: 24px; }
.pdp-lightbox__counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (max-width: 700px) {
  .pdp-lightbox__nav { width: 44px; height: 44px; }
  .pdp-lightbox__nav--prev { left: 10px; }
  .pdp-lightbox__nav--next { right: 10px; }
}


/* ---------- Cross-tree hubs (/us/best/ /us/reviews/ /us/compare/) -------- */
.hub-page { max-width: var(--site-max); margin: 28px auto; padding: 0 var(--site-pad); }
.hub-page__head { margin: 6px 0 30px; max-width: 780px; }
.hub-page__eyebrow {
  display: block;
  font-size: var(--fs-caption); font-weight: 650;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--green); margin-bottom: 6px;
}
.hub-page__head h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: 0; }
.hub-page__sub { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.hub-page__empty { color: var(--muted); font-size: 15px; }

/* ---- /best/ leaderboards ---- */
.best-board {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 22px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.04);
  /* Clear the sticky .site-chrome when jumped to from the nav below. */
  scroll-margin-top: 96px;
}

/* Jump nav for the leaderboard stack — one chip per board. */
.best-jump {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 22px;
}
.best-jump__label {
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
.best-jump__list {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.best-jump__list a {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: #fbfaf7;
  font-size: var(--fs-caption); font-weight: 600; color: #3a4651; text-decoration: none;
}
.best-jump__list a:hover { border-color: var(--green); color: var(--green); }
.best-board__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
}
.best-board__head h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.best-board__head h2 a { color: var(--text); }
.best-board__head h2 a:hover { color: var(--green); }
.best-board__all { font-size: 13px; color: var(--muted); white-space: nowrap; }
.best-board__all:hover { color: var(--green); }
.best-board__rows { list-style: none; margin: 0; padding: 0; }
.best-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 8px; border-top: 1px solid var(--border);
}
.best-row:first-child { border-top: 0; }
.best-row__rank {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 14.5px;
  background: #f0ece3; color: var(--muted);
}
.best-row--m1 .best-row__rank { background: linear-gradient(180deg, #f9d976 0%, var(--gold) 100%); color: #6b4d00; }
.best-row--m2 .best-row__rank { background: linear-gradient(180deg, #e8e8ea 0%, #c7c9cd 100%); color: #4c4f54; }
.best-row--m3 .best-row__rank { background: linear-gradient(180deg, #e8c49c 0%, #cf9a62 100%); color: #5e3d17; }
.best-row__main {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; color: var(--text);
}
.best-row__img {
  width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 3px;
}
.best-row__body { display: flex; flex-direction: column; min-width: 0; }
.best-row__brand {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
}
.best-row__title {
  font-size: 14.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.best-row__main:hover .best-row__title { color: var(--green); }
.best-row__meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex: 0 0 auto; white-space: nowrap;
}
.best-row__rating { font-size: var(--fs-caption); color: var(--muted); }
.best-row__rating strong { color: var(--text); }
.best-row__price { font-size: 15px; font-weight: 650; }

/* ---- /reviews/ directory ---- */
.rev-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.rev-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; color: var(--text);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rev-card:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(16,24,32,0.02), 0 10px 24px rgba(16,24,32,0.08); }
.rev-card__montage {
  display: flex; align-items: center; justify-content: center;
  gap: 0; height: 130px; background: #fdfbf6; border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.rev-card__montage img {
  width: 92px; height: 100px; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; margin: 0 -10px;
  box-shadow: 0 3px 10px rgba(16, 24, 32, 0.07);
}
.rev-card__montage img:nth-child(1) { transform: rotate(-4deg); }
.rev-card__montage img:nth-child(3) { transform: rotate(4deg); }
.rev-card__montage-empty { width: 92px; height: 100px; border-radius: 10px; background: #f0ece3; }
.rev-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.rev-card__tree {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
}
.rev-card__body h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.rev-card:hover h2 { color: var(--green); }
.rev-card__stats { display: flex; gap: 12px; font-size: var(--fs-caption); color: var(--muted); flex-wrap: wrap; }
.rev-card__stats strong { color: var(--text); }
.rev-card__cta { font-size: 13px; font-weight: 650; color: var(--green); margin-top: 4px; }

/* ---- /compare/ matchups ---- */
.vs-published { margin-bottom: 26px; }
.vs-published__title { font-size: 18px; margin: 0 0 10px; }
.vs-published__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.vs-published__list a {
  display: inline-block; padding: 8px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; color: var(--text);
}
.vs-published__list a:hover { border-color: var(--green); color: var(--green); }
.vs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.vs-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.04);
}
.vs-card__cat { margin-bottom: 10px; }
.vs-card__cat a {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
}
.vs-card__cat a:hover { color: var(--green); }
.vs-card__pair {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.vs-card__side {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); background: #fdfbf6;
}
.vs-card__side:hover { border-color: var(--green); }
.vs-card__side img { width: 100%; height: 110px; object-fit: contain; background: #fff; border-radius: 8px; margin-bottom: 4px; }
.vs-card__brand {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
}
.vs-card__name {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.7em;
}
.vs-card__meta { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; }
.vs-card__price { font-size: 14px; font-weight: 650; color: var(--text); }
.vs-card__badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: var(--fs-caption);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.18);
}
@media (max-width: 700px) {
  .hub-page__head h1 { font-size: 26px; }
  .best-row__img { width: 44px; height: 44px; flex-basis: 44px; }
  .best-row__meta { flex-direction: row; gap: 8px; align-items: baseline; }
  .best-row { flex-wrap: wrap; }
}


/* ---------- Bylines + author boxes (E-E-A-T) ------------------------------ */
.byline {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; font-size: 13px; color: var(--muted);
}
.byline a { color: var(--text); font-weight: 650; }
.byline a:hover { color: var(--green); }
.byline__role {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--green);
  background: var(--green-soft); border-radius: 999px; padding: 2px 8px;
}
.byline__sep { color: #cdc5b8; }

.author-box {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; margin: 22px 0 0;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.04);
}
.author-box__avatar {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--green-soft) 0%, #d9eee0 100%);
  border: 1px solid #cbe5d4;
  color: var(--green); font-weight: 650; font-size: 17px; letter-spacing: 0.5px;
}
.author-box__body { min-width: 0; }
.author-box__eyebrow {
  display: block; font-size: var(--fs-caption); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  margin-bottom: 2px;
}
.author-box__name { margin: 0; font-size: 16px; }
.author-box__name a { color: var(--text); }
.author-box__name a:hover { color: var(--green); }
.author-box__role {
  display: inline-block; font-size: var(--fs-caption); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--green);
  margin: 3px 0 6px;
}
.author-box__creds { margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.author-box__bio { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Compact affiliate disclosure under category/brand grids. */
.cat-page__disclaimer { font-size: var(--fs-caption); color: var(--muted); margin: 14px 0 0; }

/* ---------------------------------------------------------------------------
   Accessibility + chrome polish (skip link, reduced motion, back-to-top,
   social share row). */

/* Skip-to-content — visually hidden until keyboard-focused, then drops in
   over the topbar so keyboard users can jump straight past the chrome. */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--green); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-weight: 650; font-size: 14px; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* Honor OS-level reduced-motion: kill animations/transitions site-wide
   (carousel auto-advance is throttled in JS via the same media query). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Back-to-top — bottom-right pill, appears after 600px scroll (JS). */
.back-to-top {
  position: fixed;
  right: 20px; bottom: 24px;
  z-index: 90;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--text);
  box-shadow: 0 4px 14px rgba(16, 24, 32, 0.14);
  cursor: pointer;
}
.back-to-top:hover { background: var(--green); border-color: var(--green); color: #fff; }
/* display:flex above beat the [hidden] attribute - the button showed at scroll 0. */
.back-to-top[hidden] { display: none; }

/* Social share row — sits under article bylines. */
.share {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 18px;
}
.share__label {
  font-size: var(--fs-caption); font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
}
.share__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--muted);
  cursor: pointer; text-decoration: none;
}
.share__btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.share__copied {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; font-size: var(--fs-caption); font-weight: 650;
  color: var(--green);
}

/* FAQ accordion — category / brand / compare pages (PDP has its own). */
.cat-page__faq { margin-top: 24px; }
.cat-page__faq h2 { font-size: 20px; margin: 0 0 12px; }
.cat-page__faq-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  margin: 0 0 8px; padding: 0 16px;
}
.cat-page__faq-item > summary {
  cursor: pointer; font-weight: 650; font-size: 14.5px;
  padding: 12px 0; list-style-position: inside;
}
.cat-page__faq-item[open] > summary { border-bottom: 1px solid var(--border); }
.cat-page__faq-item > p { margin: 10px 0 14px; font-size: 14px; line-height: 1.6; color: var(--text); }

/* "Full category statistics →" link under the category hero stats. */
.cat-page__stats-link {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 650; color: var(--green);
  text-decoration: none;
}
.cat-page__stats-link:hover { text-decoration: underline; }

/* Rendered-markdown body on /us/guides/ article pages. Global (not scoped)
   because the elements come out of the markdown renderer. */
.article-body { font-size: 15.5px; line-height: 1.7; }
.article-body h2 { font-size: 21px; margin: 30px 0 10px; line-height: 1.3; }
.article-body h3 { font-size: 17px; margin: 22px 0 8px; }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 24px; }
.article-body li { margin: 0 0 6px; }
.article-body a { color: var(--green); font-weight: 650; }
.article-body a:hover { text-decoration: underline; }
.article-body strong { font-weight: 650; }
.article-body blockquote {
  margin: 0 0 14px; padding: 10px 18px;
  border-left: 3px solid var(--green); background: var(--soft);
  border-radius: 0 10px 10px 0;
}

/* Brand standing blurb on brand pages. */
.cat-page__brand-about {
  margin-top: 24px; padding: 18px 20px;
  background: var(--soft); border: 1px solid var(--border); border-radius: 12px;
}
.cat-page__brand-about h2 { margin: 0 0 8px; font-size: 20px; }
.cat-page__brand-about p { margin: 0; font-size: 14.5px; line-height: 1.65; }

/* ---- Ranking confidence chips (Batch 2, src/lib/ranking.ts) ------------- */
.conf-chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap;
  background: #eef3ee; color: #3c6b4a; border: 1px solid #d4e4d8;
}
.conf-chip--limited { background: #fbf3e2; color: #8a6116; border: 1px solid #eeddb4; }
.pdp__conf-line { font-size: var(--fs-caption); color: var(--muted); margin: 8px 0 0; }

/* ---- Batch 3: search combobox a11y + drawer ------------------------------ */
/* Visible keyboard focus everywhere (WCAG 2.4.7) — outline only for
   keyboard/AT focus, not mouse clicks. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.search-results__row.is-active { background: #f4efe4; }

/* =========================================================================
   ProductDome Match — quick match page, result cards, kits (match.js).
   Extends the existing token palette; no new frameworks, no gradients.
   ========================================================================= */
.match-page { max-width: 900px; margin: 0 auto; padding: 26px 18px 40px; }
.match-h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.12; margin: 10px 0 12px; letter-spacing: 0; }
.match-sub { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 640px; margin: 0 0 18px; }

.match-form { display: flex; gap: 10px; flex-wrap: wrap; }
.match-form input {
  flex: 1 1 320px; min-width: 0; padding: 14px 16px; font-size: 15.5px;
  border: 2px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text);
}
.match-form input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.match-form__go { padding: 14px 22px; font-size: 15px; white-space: nowrap; }

.match-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 6px; }
.match-examples__label { color: var(--muted); font-size: 13px; }
.match-chip {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.match-chip:hover { border-color: var(--green); background: var(--green-soft); }
.match-alt { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
.match-alt a { color: var(--green); font-weight: 600; text-decoration: none; margin-left: 6px; }
.match-alt a:hover { text-decoration: underline; }
.match-alt__sep { margin: 0 4px; }

.match-status { min-height: 26px; margin-top: 18px; color: var(--text); font-size: 17px; font-weight: 650; }

/* Interpreted-filter chips */
.match-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.match-chips__label { color: var(--muted); font-size: 13px; }
.match-chip--filter { display: inline-flex; align-items: center; gap: 7px; background: var(--green-soft); border-color: var(--green); }
.match-chip__x { font-weight: 650; color: var(--green); }
.match-chip--relax { display: block; margin: 8px 0; }
.match-chips__edit { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; }

.match-unverifiable { color: var(--amber-tx); background: var(--amber-bg); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 14px; }
.match-disclosure { margin: 0 0 12px; }

/* Result cards — extend .product-card */
.match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.match-card { position: relative; padding-top: 34px; }
.match-card__label {
  position: absolute; top: 0; left: 0; right: 0; padding: 7px 14px;
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--soft); color: var(--muted); border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}
.match-card__label.is-best { background: var(--green); color: #fff; }
.match-card__count { font-size: 13px; font-weight: 600; color: var(--green); margin: 6px 0 0; }
.match-card__why { margin-top: 10px; }
.match-card__why h4 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 6px; }
.match-card__why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.match-reason { font-size: 13.5px; line-height: 1.45; }
.match-reason__ico { font-weight: 650; }
.match-reason--match .match-reason__ico { color: var(--green); }
.match-reason--unknown { color: var(--muted); }
.match-reason--tradeoff { color: var(--amber-tx); }
.match-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn--secondary {
  background: var(--card); color: var(--green); border: 1.5px solid var(--green);
}
.btn--secondary:hover { background: var(--green-soft); }

.match-nomatch { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-top: 6px; }
.match-nomatch h3 { margin: 0 0 8px; }
.match-nomatch p { color: var(--muted); margin: 0 0 10px; }
.match-nomatch__browse { display: inline-block; margin-top: 10px; color: var(--green); font-weight: 600; text-decoration: none; }
.match-nomatch__browse:hover { text-decoration: underline; }
.match-foot { margin-top: 16px; font-size: 14px; }
.match-foot a { color: var(--green); font-weight: 600; text-decoration: none; }
.match-foot a:hover { text-decoration: underline; }

/* Loading skeleton — respects reduced motion */
.match-skel { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.match-skel__img { width: 90px; height: 90px; border-radius: 8px; background: var(--bg); flex: none; }
.match-skel__body { flex: 1; display: grid; gap: 10px; align-content: start; padding-top: 8px; }
.match-skel__line { height: 14px; border-radius: 6px; background: var(--bg); }
.match-skel__line--short { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .match-skel__img, .match-skel__line { animation: match-pulse 1.4s ease-in-out infinite; }
}
@keyframes match-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* How-it-works + trust */
.match-how { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 24px; }
.match-how h2 { font-size: 20px; margin: 0 0 12px; }
.match-how ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.match-how ol strong { color: var(--text); }
.match-how__trust { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.match-how__trust a { color: var(--green); }

/* Kits */
.kit-tier { margin-top: 26px; }
.kit-tier__title { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin: 0 0 16px; }
.kit-slot { margin-bottom: 26px; }
.kit-slot__head h3 { margin: 0 0 4px; font-size: 19px; }
.kit-slot__head p { color: var(--muted); margin: 0 0 12px; font-size: 14px; }
.kit-slot__grid { grid-template-columns: repeat(auto-fit, minmax(250px, 340px)); }
.kit-slot__more { margin: 10px 0 0; font-size: 13.5px; }
.kit-slot__more a { color: var(--green); font-weight: 600; text-decoration: none; }
.kit-slot__more a:hover { text-decoration: underline; }

/* Advanced guided flow */
.match-q { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; max-width: 640px; }
.match-q fieldset { border: none; margin: 0; padding: 0; }
.match-q legend { font-size: 19px; font-weight: 650; margin-bottom: 4px; }
.match-q__help { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.match-q__answers { display: grid; gap: 10px; margin-top: 12px; }
.match-answer { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 15px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.match-answer:hover { border-color: var(--green); }
.match-answer:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.match-answer:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--green-soft); }
.match-answer input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; flex: none; }
.match-answer__label { font-weight: 600; display: block; }
.match-answer__desc { color: var(--muted); font-size: 13px; display: block; margin-top: 2px; }
.match-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; max-width: 640px; }
.match-progress__text { font-size: 13px; color: var(--muted); white-space: nowrap; }
.match-progress progress { flex: 1; height: 8px; accent-color: var(--green); }
.match-q__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.match-q__back { background: none; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 18px; cursor: pointer; color: var(--text); }
.match-q__back:hover { border-color: var(--text); }
.match-restart { background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; margin-top: 14px; }

@media (max-width: 480px) {
  .match-form__go { flex: 1 1 100%; }
  .match-card__actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Match nav entry + relocated newsletter (homepage) */
.nav-link--match {
  background: var(--green); color: #fff !important; border-radius: 999px;
  padding: 7px 16px !important; font-weight: 650; margin-left: auto;
}
.nav-link--match:hover { background: var(--cta-hover); }
@media (max-width: 860px) {
  .nav-link--match { margin-left: 0; }
}

/* =========================================================================
   Homepage Match hero — one full-viewport decision surface. The form is
   intentionally compact enough to keep its action and real guided finder
   visible without turning the input into a decorative empty box.
   ========================================================================= */
.hero-ws {
  min-height: calc(100svh - var(--chrome-height, 110px));
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0 30px;
  border-bottom: 1px solid rgba(222, 214, 202, 0.72);
}
.hero-ws__inner {
  width: min(100% - 48px, 1080px);
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-ws__h1 {
  max-width: 940px;
  font-size: clamp(40px, 4.6vw, 58px); line-height: 1.035;
  letter-spacing: 0; margin: 14px 0 9px;
}
.hero-ws__h1 span { color: var(--green); }
.hero-ws__sub {
  color: var(--muted); font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.52;
  max-width: 880px; margin: 0 0 16px;
}

/* After results return, keep the request editable without repeating the
   full landing composition. Guided results use their in-result edit link. */
.hero-ws.is-compact { min-height: 0; padding: 20px 0 12px; border-bottom: 0; }
.hero-ws.is-compact .hero-ws__eyebrow,
.hero-ws.is-compact .hero-ws__sub,
.hero-ws.is-compact .hero-ws__quick-grid,
.hero-ws.is-compact .hero-ws__trust { display: none; }
.hero-ws.is-compact .hero-ws__h1 {
  font-size: clamp(24px, 3vw, 32px); letter-spacing: 0; margin: 0 0 12px;
}
.hero-ws.is-compact .hero-ws__h1 span { display: inline; }
.hero-ws.is-compact .hero-ws__card { padding: 15px 18px; }
.hero-ws.is-compact .hero-ws__card-head,
.hero-ws.is-compact .hero-ws__input-meta { display: none; }
.hero-ws.is-compact .hero-ws__card textarea { min-height: 60px; max-height: 100px; font-size: 16px; }
.hero-ws.is-compact.is-guided .hero-ws__card { display: none; }
.hero-ws__err { color: var(--red); font-size: 13.5px; font-weight: 650; margin: 7px 0 0; }
.hero-ws__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  color: var(--muted); font-size: var(--fs-caption); margin-top: 14px;
}
.hero-ws__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-ws__trust b {
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: var(--fs-caption);
}

/* Guided preference mode */
.hero-ws.is-guided { min-height: 0; padding: 28px 0 34px; }
.hero-ws.is-guided .hero-ws__sub { display: none; }
.hero-ws.is-guided .hero-ws__h1 {
  font-size: clamp(28px, 3.7vw, 40px); letter-spacing: 0; margin: 12px 0 16px;
}
.hero-ws.is-guided .hero-ws__h1 span { display: inline; }
.hero-ws.is-guided .hero-ws__card { width: min(100%, 1040px); }
.hero-pref {
  min-width: 0; border: 1px solid var(--border); border-radius: 12px;
  background: #fdfcf9; margin: 0; padding: 14px;
}
.hero-pref legend {
  width: 100%; color: var(--text); font-size: 14px; font-weight: 650;
  line-height: 1.35; padding: 0; margin-bottom: 9px;
}
.hero-pref legend span {
  display: block; color: var(--green); font-size: var(--fs-caption); font-weight: 650;
  letter-spacing: 0.085em; text-transform: uppercase; margin-bottom: 3px;
}
.hero-pref__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.hero-pref__opt {
  position: relative; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 13px; border: 1.5px solid var(--border);
  border-radius: 999px; font-size: var(--fs-caption); line-height: 1.25; background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
.hero-pref__opt:hover { border-color: var(--green); }
.hero-pref__opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0;
  margin: 0; cursor: pointer;
}
.hero-pref__opt:has(input:checked) {
  border-color: var(--green); background: var(--green-soft); font-weight: 650;
}
.hero-pref__opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--green-soft); }
.match-results__h { font-size: 22px; margin: 0 0 12px; }

@media (max-width: 720px) {
  .hero-ws { align-items: flex-start; min-height: calc(100svh - 64px); padding: 22px 0 30px; }
  .hero-ws__inner { width: calc(100% - 32px); }
  .hero-ws__h1 {
    font-size: clamp(35px, 10.5vw, 45px); letter-spacing: 0; margin-top: 16px;
  }
  .hero-ws__sub { font-size: 15.5px; margin-bottom: 18px; }
  .hero-ws__trust { gap: 8px 14px; margin-top: 12px; }
}

@media (max-width: 390px) {
  .hero-ws__h1 { font-size: 34px; }
  .hero-ws__trust span:last-child { width: 100%; justify-content: center; }
}


/* Secondary one-line search */
.hero-search { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }

/* After results: collapse the big cards, keep the search line for edits. */
.hero-ws.is-compact .hero-cards { display: none; }
.hero-ws.is-compact .hero-search { margin-top: 0; border-top: 0; padding-top: 0; }



/* Hero v5 — search-only front door (owner direction 07-19). */
.hero-ws--clean .hero-ws__inner { max-width: 860px; }
.hero-ws--clean .hero-ws__h1 { font-size: clamp(34px, 5.2vw, 54px); }
.hero-clean__form { width: min(100%, 760px); margin-top: 6px; }
.hero-clean__row {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--border); border-radius: 999px; background: var(--card);
  padding: 7px 7px 7px 20px;
  box-shadow: 0 6px 24px rgba(16, 24, 32, 0.07);
}
.hero-clean__row:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft), 0 6px 24px rgba(16, 24, 32, 0.07); }
.hero-clean__icon { color: var(--muted); flex: none; }
.hero-clean__row input {
  flex: 1; min-width: 0; border: none; background: none; font-size: 18px;
  color: var(--text); padding: 13px 0;
}
.hero-clean__row input:focus { outline: none; }
.hero-clean__go {
  border-radius: 999px; padding: 14px 26px; font-size: 15.5px; font-weight: 650;
  white-space: nowrap; min-height: 52px;
}
.hero-clean__go:disabled { opacity: 0.7; cursor: default; }
.hero-ws--clean.is-compact .hero-ws__h1 { font-size: clamp(22px, 3vw, 28px); }
@media (max-width: 640px) {
  .hero-clean__row { flex-wrap: wrap; border-radius: 18px; padding: 10px 14px; }
  .hero-clean__row input { font-size: 16.5px; padding: 8px 0; }
  .hero-clean__go { width: 100%; }
}

/* Hero v5.1 — white hero (owner 07-19): the cream panel stays on the nav
   (category bar) and the sections below; the hero itself sits on white,
   full-bleed to the .wrap edges. */
.hero-ws--clean {
  background: #fff;
  margin: -28px calc(-1 * var(--site-pad)) 28px;
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) {
  .hero-ws--clean { margin: -22px -16px 22px; padding-left: 16px; padding-right: 16px; }
}

/* Hero v5.2 (owner 07-19): no eyebrow, no restated subline — just the
   promise, the search, and the assurances. The full-viewport white void
   read as "empty page", so the hero is sized by padding (the stats strip
   below now shows at the fold) and the search bar carries real depth. */
.hero-ws--clean {
  position: relative;
  min-height: 0;
  padding-top: clamp(52px, 9vh, 104px);
  padding-bottom: clamp(44px, 7vh, 80px);
  overflow: hidden;
}
/* Soft warm halo behind the search — depth without ornament. */
.hero-ws--clean::before {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: min(1100px, 130%); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(40, 122, 80, 0.07), rgba(246, 178, 26, 0.05) 42%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.hero-ws--clean .hero-ws__inner { position: relative; }
.hero-ws--clean .hero-ws__h1 {
  max-width: 780px;
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: 0;
  margin: 0 0 26px;
}
.hero-ws--clean .hero-clean__row {
  border-color: #d3cabb;
  box-shadow: 0 14px 38px rgba(16, 24, 32, 0.13), 0 2px 6px rgba(16, 24, 32, 0.05);
}
.hero-ws--clean .hero-clean__row:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft), 0 16px 42px rgba(16, 24, 32, 0.15);
}
.hero-ws--clean .hero-clean__go { box-shadow: 0 3px 10px rgba(40, 122, 80, 0.28); }
/* Assurances as light chips so the row reads as structure, not stray text. */
.hero-ws--clean .hero-ws__trust {
  gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px;
}
.hero-ws--clean .hero-ws__trust span {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 15px; font-size: var(--fs-caption); color: var(--muted);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.05);
}
.hero-ws--clean.is-compact { padding-top: 26px; padding-bottom: 22px; }
.hero-ws--clean.is-compact::before { display: none; }
.hero-ws--clean.is-compact .hero-ws__h1 { margin-bottom: 14px; }
@media (max-width: 700px) {
  .hero-ws--clean { padding-top: 36px; padding-bottom: 32px; }
  .hero-ws--clean .hero-ws__h1 { font-size: clamp(27px, 7.4vw, 36px); letter-spacing: 0; margin-bottom: 20px; }
}

/* Hero v5.3 — headline locked to exactly two rows (owner 07-19). nowrap
   still honours the explicit <br>, so the only break is the one we author;
   the size is fluid so the longer second line never drops a word, down to
   320px. Letter-spacing is em-based so it scales with the type. */
.hero-ws--clean .hero-ws__h1 {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(17px, 4.6vw, 46px);
  letter-spacing: 0;
  line-height: 1.08;
}
.hero-ws--clean.is-compact .hero-ws__h1 { font-size: clamp(16px, 3.4vw, 28px); }
@media (max-width: 700px) {
  .hero-ws--clean .hero-ws__h1 { font-size: clamp(17px, 4.9vw, 34px); letter-spacing: 0; }
}

/* Hero v5.4 (owner 07-19): the search reads as a professional control —
   squared-off field, precise 1px rules, restrained shadow, solid action
   button — instead of a soft consumer pill. Assurance chips lose the
   checkmarks and the affiliate wording. */
.hero-ws--clean .hero-clean__row,
.match-page__search .hero-clean__row {
  border-radius: 12px;
  border-width: 1px;
  border-color: #cdc4b6;
  padding: 6px 6px 6px 18px;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.10), 0 1px 2px rgba(16, 24, 32, 0.06);
}
.hero-ws--clean .hero-clean__row:focus-within,
.match-page__search .hero-clean__row:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft), 0 10px 26px rgba(16, 24, 32, 0.12);
}
.hero-ws--clean .hero-clean__row input,
.match-page__search .hero-clean__row input { font-size: 17px; padding: 14px 0; }
.hero-ws--clean .hero-clean__row input::placeholder,
.match-page__search .hero-clean__row input::placeholder { color: #97a1a9; }
.hero-ws--clean .hero-clean__go,
.match-page__search .hero-clean__go {
  border-radius: 9px; padding: 14px 24px; font-size: 15px; letter-spacing: 0.01em;
  box-shadow: none;
}
.hero-ws--clean .hero-clean__go:hover,
.match-page__search .hero-clean__go:hover { background: var(--cta-hover); }
/* Assurances: quiet, factual, no checkmark ornament. */
.hero-ws--clean .hero-ws__trust { gap: 0; margin-top: 24px; }
.hero-ws--clean .hero-ws__trust span {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 18px; font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--muted);
  border-left: 1px solid var(--border);
}
.hero-ws--clean .hero-ws__trust span:first-child { border-left: 0; padding-left: 0; }
.hero-ws--clean .hero-ws__trust span:last-child { padding-right: 0; }
.match-page__search { margin: 0 0 8px; width: min(100%, 760px); }
@media (max-width: 700px) {
  .hero-ws--clean .hero-ws__trust span {
    border-left: 0; padding: 0 10px; border-right: 1px solid var(--border);
  }
  .hero-ws--clean .hero-ws__trust span:last-child { border-right: 0; }
}

/* Hero v8 (owner 10-09): the assurances replace the stats strip, so they
   carry a little more weight - three labelled points, each with a one-line
   reason, the last one linking to the methodology. */
.hero-ws--clean .hero-ws__trust {
  list-style: none; padding: 22px 0 0; margin: 30px 0 0;
  width: min(100%, 720px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.hero-ws--clean .hero-ws__trust li,
.hero-ws--clean .hero-ws__trust a {
  display: flex; flex-direction: column; gap: 3px;
  position: relative; padding-left: 24px;
  color: inherit; text-decoration: none;
}
.hero-ws--clean .hero-ws__trust a { padding-left: 0; }
.hero-ws--clean .hero-ws__trust li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23287a50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.hero-ws--clean .hero-ws__trust b {
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--text); font-size: 13.5px; font-weight: 650; letter-spacing: 0;
}
.hero-ws--clean .hero-ws__trust span {
  border: 0; padding: 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--muted); letter-spacing: 0;
}
.hero-ws--clean .hero-ws__trust a:hover b,
.hero-ws--clean .hero-ws__trust a:hover span { color: var(--green); }
@media (max-width: 700px) {
  .hero-ws--clean .hero-ws__trust { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  /* an older <=390px rule centred the last span at full width */
  .hero-ws--clean .hero-ws__trust span { width: auto; justify-content: flex-start; text-align: left; }
}

/* Hero v7 — Ask box (owner mockup 07-21): the one-line bar becomes a roomy
   compose card with a hint + solid "Find my picks" action on its foot rail,
   plus "Try" starter chips that prefill the field. The results page keeps
   the one-line .hero-clean control. */
.hero-ws--clean .hero-ws__h1 { margin-bottom: 28px; }
.hero-ask {
  width: min(100%, 720px);
  background: var(--card);
  border: 1px solid #cdc4b6;
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.10), 0 1px 2px rgba(16, 24, 32, 0.06);
  text-align: left;
}
.hero-ask:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft), 0 12px 32px rgba(16, 24, 32, 0.12);
}
.hero-ask textarea {
  display: block; width: 100%; min-height: var(--ask-min, 112px); max-height: 420px; resize: none;
  overflow-y: auto;
  border: 0; background: none; font: inherit; font-size: 16.5px; line-height: 1.55;
  color: var(--text);
}
.hero-ask textarea:focus { outline: none; }
.hero-ask textarea::placeholder { color: #97a1a9; }
.hero-ask__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid #efeae1;
}
.hero-ask__hint { font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--muted); }
.hero-ask__go {
  border-radius: 10px; padding: 11px 20px; font-size: 14.5px; letter-spacing: 0.01em;
  white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(40, 122, 80, 0.26);
}
.hero-ask__go:hover { background: var(--cta-hover); }
.hero-starters {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 18px;
}
.hero-starters__lbl {
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.hero-starters button {
  font: inherit; font-size: 14px; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04); cursor: pointer;
  display: inline-flex; align-items: center;
}
.hero-starters button:hover { border-color: var(--green); }
@media (max-width: 640px) {
  .hero-ask__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ask__go { justify-content: center; }
}
/* Hero v7.1: the nowrap two-line lock shrank the headline to ~19px on a
   phone — smaller than the sub. Below 700px it wraps naturally instead. */
@media (max-width: 700px) {
  .hero-ws--clean .hero-ws__h1 {
    white-space: normal;
    font-size: clamp(28px, 7.6vw, 34px);
    letter-spacing: 0;
  }
}

/* Header v2 (owner 07-19): catalog search removed; the primary nav now
   lives in the header, right-aligned, with the trees collapsed into the
   "Product categories" dropdown. The mega panel anchors to the header row
   instead of the old nav strip. */
.topbar { position: relative; gap: 18px; }
.topbar .nav {
  position: static;            /* the panel anchors to .topbar */
  background: none;
  border: 0;
  margin: 0 0 0 auto;          /* push the whole set to the right */
  padding: 0;
  max-width: none;
  gap: 22px;
  font-size: 14px;
}
.topbar .mega-panel {
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  border-radius: 0 0 14px 14px;
}
/* The header is now the category bar — keep the cream tone the nav strip
   used to carry so the white hero reads as a separate surface. */
.topbar { background: var(--nav); }
@media (max-width: 1080px) {
  .topbar .nav { display: none; }   /* mobile uses the drawer */
  .topbar { gap: 14px; }
}
/* 901-1080px: the nav above is hidden but the phone block (<=900) never showed the
   hamburger, so the header had no menu at all (10-09). Burger first, drawer on. */
@media (min-width: 901px) and (max-width: 1080px) {
  .topbar .nav-toggle { display: block; order: -1; }
  .mobile-drawer { display: block; }
}

/* Once picks exist the hero is no longer the point — collapse the ask box to
   an editable one-liner and drop the starters, or the answer opens below the
   fold (measured: results started 504px down). The floor is a custom property
   so the inline grow() keeps working at the smaller size. */
.hero-ws--clean.is-compact .hero-starters { display: none; }
.hero-ws--clean.is-compact .hero-ask { --ask-min: 52px; padding: 12px 14px 8px; }
.hero-ws--clean.is-compact .hero-ask__bar { margin-top: 8px; padding-top: 9px; }

/* ===========================================================================
   Match results v2 (owner 07-25) — the answer is a LIST, not a card grid.
   Three side-by-side tiles read as "pick one of these"; one full-width row
   per pick reads as a ranked answer you scan top-to-bottom. Layout only —
   match.js builds the same DOM (label · image · body · actions), so the
   /us/match/ page and the homepage both get this.
   =========================================================================== */
.match-grid { grid-template-columns: 1fr; gap: 14px; }
.match-card {
  grid-template-columns: 200px minmax(0, 1fr) 208px;
  grid-template-areas:
    'label label label'
    'img   body  actions';
  column-gap: 22px;
  row-gap: 14px;
  padding: 0 22px 20px;
  align-items: start;
}
/* The rank badge was an absolute overlay sized for a narrow tile; as a real
   grid row it spans the full width and bleeds over the row padding. */
.match-card__label {
  position: static;
  grid-area: label;
  margin: 0 -22px;
  border-radius: 11px 11px 0 0;
}
.match-card > .product-img { grid-area: img; width: 200px; height: 200px; }
.match-card > .product-card__body { grid-area: body; gap: 6px; }
.match-card > .product-card__body > h3 { font-size: 18px; line-height: 1.3; }
/* Owner 10-14: the product's main specs under the reasons, same rows as the category cards. */
.match-card .specs { grid-template-columns: repeat(4, 1fr); margin-top: 10px; padding-top: 12px; }
.match-card .spec dd { font-size: 14px; }
.match-searched { font-size: 15px; }
.match-searched__q { color: var(--green); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.match-searched__q:hover { color: var(--text); }
/* Actions become a right-hand rail: primary Amazon CTA on top. */
.match-card > .match-card__actions {
  grid-area: actions;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}
.match-card > .match-card__actions > * { width: 100%; }
.match-card .card-bottom__amz { width: 100%; }
.match-card .pd-compare-btn { text-align: center; }
/* Reasons sit under the title rather than in a cramped column. */
.match-card__why ul { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

@media (max-width: 860px) {
  .match-card {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas:
      'label label'
      'img   body'
      'actions actions';
  }
  .match-card > .product-img { width: 140px; height: 140px; }
  .match-card .specs { grid-template-columns: repeat(2, 1fr); }
  .match-card .spec { padding: 6px 10px; border-left: 0; }
  .match-card .spec:nth-child(odd) { padding-left: 0; }
  .match-card > .match-card__actions { flex-direction: row; flex-wrap: wrap; }
  .match-card > .match-card__actions > * { width: auto; flex: 1 1 160px; }
}
@media (max-width: 520px) {
  .match-card {
    grid-template-columns: 1fr;
    grid-template-areas: 'label' 'img' 'body' 'actions';
    justify-items: start;
  }
  .match-card > .match-card__actions > * { flex: 1 1 100%; }
}

/* ============================================================================
   PDP legibility floor — UX audit §5.1 / §15
   ----------------------------------------------------------------------------
   The audit counted 39 text elements above the first heading, 24 of them under
   13px. That density of fine print is the main reason the page read as dated,
   and several of these carry real meaning (affiliate disclosure, confidence,
   Best for / Skip if labels), so they should never be the smallest text on the
   page. Applied as a trailing override block rather than by editing ~90
   scattered declarations, which would have risked unrelated components.
   ========================================================================== */
.pdp__brand-tag,
.pdp__score-eyebrow,
.pdp__proscons-eyebrow { font-size: var(--fs-label); }

.pdp__fit-label,
.pdp__skip-label,
.conf-chip {
  font-size: var(--fs-label);
  letter-spacing: 0.05em;          /* audit: avoid extreme tracking on labels */
}

/* Disclosure must stay readable — it is a legal notice, not decoration. */
.pdp__inline-disclaimer,
.aff-note { font-size: var(--fs-min); line-height: 1.5; }

/* Spec values were smaller than their own labels, which inverted the hierarchy. */
.pdp__specs-key { font-size: var(--fs-meta); }
.pdp__specs-val { font-size: var(--fs-meta); }

.pdp__about-lede,
.pdp__verdict { font-size: var(--fs-body); line-height: var(--lh-body); }

.pdp__buyers-source { font-size: var(--fs-min); }

/* Scorecard heading matches the other section headings (audit §11). */
.pdp__score-head h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: 0; }

/* Tabular figures for quantitative values (audit §5.1). */
.pdp__meta-rating-num,
.pdp__meta-tile-num,
.pdp__score-overall-num,
.pdp__specs-val { font-variant-numeric: tabular-nums; }

/* Primary CTA: 16px label, 10-12px radius, >=52px, visible focus (§7.5). */
.pdp__cta {
  font-size: 16px;
  border-radius: 11px;
  min-height: 52px;
}
.pdp__cta:focus-visible,
.pd-compare-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Every secondary control reaches the 44px touch target (§7.5 / §15). */
.pd-compare-btn--pdp { min-height: 44px; }

/* ============================================================================
   Specification table on phones — UX audit §12
   ----------------------------------------------------------------------------
   A two-column table at 390px squeezes values into a ~150px column and wraps
   them to three or four lines. Collapsing each row to a stacked label/value
   pair reads far better and removes any chance of the table forcing sideways
   scroll. Semantics are untouched: it stays a real <table> with <th scope>,
   so screen readers and the spec-group headers still work.
   ========================================================================== */
@media (max-width: 640px) {
  .pdp__specs-table,
  .pdp__specs-table tbody,
  .pdp__specs-table tr { display: block; width: 100%; }

  .pdp__specs-table tr { padding: 12px 16px; border-bottom: 1px solid #eef2f6; }
  .pdp__specs-table tr:last-child { border-bottom: 0; }

  .pdp__specs-table th,
  .pdp__specs-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .pdp__specs-key {
    width: auto;
    font-size: var(--fs-min);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .pdp__specs-val { font-size: var(--fs-meta); }

  /* Group headers stay full-width separators rather than becoming a stray row. */
  .pdp__specs-group { padding: 0; border-bottom: 0; }
  .pdp__specs-group-name { padding: 18px 16px 6px; }
}

/* Alternatives should read as decisions, not thumbnails (audit §13). */
.pdp-related__card { min-height: 44px; }
.pdp-related__card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pdp-related__brand { font-size: var(--fs-min); }

/* Section tab bar (owner 2026-09-17): sticky underline tabs, active follows scroll. */
.pdp__jump-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--border);
  margin: 28px 0 0;
}
.pdp__jump {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--content-w);
  scrollbar-width: none;
}
.pdp__jump::-webkit-scrollbar { display: none; }
.pdp__jump-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pdp__jump-link:hover { color: var(--text); }
.pdp__jump-link.is-active { color: var(--text); border-bottom-color: var(--green); font-weight: 650; }
.pdp__jump-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Visually-hidden live region for search announcements (audit §15). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header search sizing — UX audit §6. Wider and taller than the old compact
   pill: search is the primary directory affordance, not an afterthought. */
.search {
  width: 460px;
  height: 46px;
  margin-left: 24px;
  margin-right: auto;
}
.search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(40, 122, 80, 0.12); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 6px 0 18px;
  font: inherit;
  font-size: var(--fs-meta);
  color: var(--text);
  outline: none;
}
.search input::placeholder { color: var(--muted); }
.search > button {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search > button:hover { color: var(--text); }
.search > button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

@media (max-width: 1080px) { .search { width: 320px; margin-left: 16px; } }

/* Phone: the field takes its own full-width row under the logo, per §6 —
   search should outrank the locale picker in the hierarchy. */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .search {
    order: 10;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 2px;
    height: 44px;
  }
  .search-toggle { display: none; }
}

/* ============================================================================
   Layout stability — UX audit §16
   ----------------------------------------------------------------------------
   The hero image already ships explicit width/height plus fetchpriority, but
   the lazy-loaded thumbnails, related-product and comparison images carry no
   intrinsic size. Each one therefore occupies zero height until it decodes and
   then shoves the content below it down — visible CLS on exactly the sections
   a reader is scrolling through. Reserving a square box up front costs nothing
   and removes the shift.
   ========================================================================== */
.pdp__thumbs img,
.pdp-related__card img,
.pdp-mentions__thumb {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  background: var(--surface-subtle, #f8fafc);
}
.pdp-mentions__thumb { width: 56px; height: 56px; flex-shrink: 0; }

/* Honour reduced motion across the page's transitions (audit §15). */
@media (prefers-reduced-motion: reduce) {
  .pd-cookie,
  .search,
  .pdp__jump-link,
  .pdp-related__card { transition: none; }
}

/* ============================================================================
   Content + sidebar grid — UX audit §10
   ----------------------------------------------------------------------------
   The audit's measurement: 300px+ of unused space to the right of every
   section below the hero, which is what made the page look unfinished. Main
   column stays at the 760px reading width; the rail carries the purchase
   route, the score and the shortest paths onward. It collapses below 1100px,
   where the main column needs the full width and a rail would squeeze both.
   ========================================================================== */
.pdp__body {
  display: grid;
  grid-template-columns: minmax(0, var(--content-w)) minmax(0, 300px);
  gap: 38px;
  align-items: start;
}
.pdp__body > .pdp__detail { max-width: none; }   /* the track already bounds it */

.pdp__side { min-width: 0; }
.pdp__side-sticky { position: sticky; top: 88px; display: grid; gap: 16px; }

.pdp__side-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.pdp__side-card--buy { border-color: #cfe0d6; background: var(--green-soft); }
.pdp__side-title {
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 650;
  color: var(--text);
}
.pdp__side-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--text);
}
.pdp__side-score strong { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pdp__side-score span { font-size: var(--fs-label); color: var(--muted); font-weight: 650; }
.pdp__side-cta { width: 100%; }
.pdp__side-note { margin: 10px 0 0; }

.pdp__side-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.pdp__side-facts dt { font-size: var(--fs-min); color: var(--muted); font-weight: 650; }
.pdp__side-facts dd { margin: 0; font-size: var(--fs-meta); font-weight: 600; }

.pdp__side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pdp__side-links a {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
}
.pdp__side-links a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .pdp__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The rail's content is a duplicate of what the page already shows further
     down, so on narrow screens it is removed rather than stacked — repeating
     the CTA and the score twice in one scroll adds nothing. */
  .pdp__side { display: none; }
  .pdp__body > .pdp__detail { max-width: var(--content-w); }
}

/* Scorecard row: value plus its category benchmark (audit §11). */
.pdp__score-row-vals { display: inline-flex; align-items: baseline; gap: 10px; }
.pdp__score-row-median { font-size: var(--fs-min); color: var(--muted); font-weight: 600; white-space: nowrap; }
.pdp__meta-tile--score { text-decoration: none; color: inherit; }
.pdp__meta-tile--score .pdp__meta-tile-num { color: var(--green); }

/* Alternative cards — audit §13: a rating needs its sample size, and a score
   is only useful if it is on the card rather than a page away. */
.pdp-related__count { font-size: var(--fs-min); color: var(--muted); font-weight: 600; margin-left: 3px; }
.pdp-related__score {
  font-size: var(--fs-min);
  font-weight: 650;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Nav group labels. Were <h4>; changed to <p class="mega-col__h"> so the
   heading outline on every page starts at the real page <h1> instead of a
   nav label (WCAG 1.3.1). Reset the paragraph defaults the old tag didn't
   carry so the rendering is unchanged. */
.mega-col__h { margin: 0 0 8px; }

/* ============================================================================
   Head-to-head comparison table — UX audit §13
   ========================================================================== */
.pdp-compare {
  margin: 28px 0 0;
  max-width: var(--content-w);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 30px;
  scroll-margin-top: 90px;
}
/* Wide tables scroll inside their own box; the page body never does. */
.pdp-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdp-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
  min-width: 520px;
}
.pdp-compare__table th,
.pdp-compare__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.pdp-compare__table thead th {
  font-size: var(--fs-min);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}
.pdp-compare__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdp-compare__table tbody th { font-weight: 600; min-width: 200px; }
.pdp-compare__table tbody tr:last-child th,
.pdp-compare__table tbody tr:last-child td { border-bottom: 0; }
.pdp-compare__row--this { background: var(--green-soft); }
.pdp-compare__row--this th { font-weight: 650; }
.pdp-compare__name { display: block; }
.pdp-compare__tag {
  display: inline-block;
  margin-top: 3px;
  font-size: var(--fs-min);
  font-weight: 650;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pdp-compare__brand { display: block; font-size: var(--fs-min); color: var(--muted); margin-top: 2px; }
.pdp-compare__table tbody th a { color: var(--text); text-decoration: none; font-weight: 600; }
.pdp-compare__table tbody th a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .pdp-compare { padding: 20px 18px; border-radius: 12px; }
}

/* Provenance line beside the confidence chip (audit §14). */
.pdp__trustline-src { font-size: var(--fs-min); color: var(--muted); }
.pdp__trustline-src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.pdp__trustline-src a:hover { color: var(--text); }

/* ============================================================================
   Spacing + card system — UX audit §5.3 / §5.4
   ----------------------------------------------------------------------------
   The audit's point was that with everything boxed, nothing is prioritised.
   Three card treatments only: a standard content surface, a semantic
   positive/warning surface for Best-for / Skip-if, and an elevated surface
   reserved for the purchase panel. Border OR shadow, never both, except on the
   one elevated case.
   ========================================================================== */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px;
  --radius-card: 12px;
  --radius-control: 11px;
}

/* 1. Standard content card — border, no shadow. */
.pdp__block,
.pdp-compare,
.pdp__side-card,
.pdp__about {
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* 2. Semantic cards keep their tint and lose the extra chrome. */
.pdp__fit,
.pdp__skip { border-radius: var(--radius-card); box-shadow: none; }

/* 3. Elevated — the purchase panel only. This is the one place lift is earned. */
.pdp__buybox {
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(16, 24, 32, 0.05), 0 10px 28px rgba(16, 24, 32, 0.07);
}

/* Consistent control radius across buttons and inputs. */
.btn, .pdp__cta, .pd-compare-btn, .pd-cookie__btn, .search { border-radius: var(--radius-control); }
.search { border-radius: 999px; }   /* the pill is deliberate */

/* Section rhythm from the scale rather than ad-hoc values. */
.pdp__detail  { gap: var(--sp-5); }
.pdp-compare,
.pdp-related,
.pdp__faq     { margin-top: var(--sp-7); }
@media (max-width: 700px) {
  .pdp__detail { gap: var(--sp-4); }
  .pdp-compare, .pdp-related, .pdp__faq { margin-top: var(--sp-6); }
}

/* Outlined controls use the 3:1 boundary, not the decorative hairline (§15). */
.pd-cookie__btn--secondary,
.pd-cookie__btn--ghost { border-color: var(--border-control); }

/* Second overview paragraph — the editorial read that follows the factual lede. */
.pdp__about-body {
  margin: 14px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* Footer column labels: were <h4>, now <p> so they stay out of the heading
   outline (they are nav groups, not sections). Reset the paragraph defaults. */
.footer__heading { margin: 0 0 10px; }

/* Header v3 (owner 2026-08-23): Walmart/Amazon-style single row —
   [PD mark + wordmark + tagline] [Product categories] [search, grows]
   [quick links: Best of / Compare / Buying guides] [country]. About and
   Product profiles left the header (both remain in the footer). */
.topbar .nav { margin: 0; }
.topbar .nav--links { margin-left: 0; }
.topbar .search { margin-left: 0; flex: 1 1 auto; width: auto; max-width: 680px; }
.topbar .search:focus-within,
.topbar .search.is-active { width: auto; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--green); color: #fff;
  font-size: 16px; font-weight: 650; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.logo .logo-mark { color: #fff; }        /* .logo span paints green — keep the tile text white */
.logo-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.logo .logo-txt { color: var(--text); }  /* wordmark base stays ink; inner span keeps the green */
.logo-name { font-weight: 650; font-size: 21px; letter-spacing: 0; white-space: nowrap; }
.logo-tag {
  font-style: normal; font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: 0.2px; color: var(--muted, #8a8578);
  white-space: nowrap; margin-top: 3px;
}
@media (max-width: 1250px) { .logo-tag { display: none; } }
@media (max-width: 900px) {
  .logo-mark { width: 30px; height: 30px; border-radius: 7px; font-size: 13px; }
  .logo-name { font-size: 18px; }
}

/* Resources dropdown (right side) — same card language as the country picker,
   trigger styled as a plain nav link. */
.res-pick { position: relative; }
.res-pick > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 7px 4px;
}
.res-pick > summary::-webkit-details-marker { display: none; }
.res-pick > summary:hover { color: var(--green); }
.res-pick[open] .nav-mega__caret { transform: rotate(180deg); }
.res-pick .res-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.12), 0 2px 6px rgba(16, 24, 32, 0.06);
  padding: 6px;
  z-index: 60;
  animation: cpFade 0.12s ease-out;
}
.res-pick .res-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.res-pick .res-menu a:hover { background: #f4f6f3; color: var(--green); }

/* Header v4 (owner 2026-08-23): Walmart-style dropdown panels, matching
   trigger pills for Categories + Resources, and a clean search field
   (magnifier inside on the left, no visible button — Enter or icon click
   submits). */

/* Unified trigger pills */
.topbar .nav-mega__trigger,
.topbar .res-pick > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.topbar .nav-mega__trigger:hover,
.topbar .nav-mega:focus-within .nav-mega__trigger,
.topbar .res-pick > summary:hover,
.topbar .res-pick[open] > summary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.nav-mega__grid { color: var(--green); flex: none; }

/* Walmart-style floating panel for the category mega menu */
.topbar .mega-panel {
  left: var(--site-pad);
  right: auto;
  top: calc(100% + 8px);
  width: min(1080px, calc(100vw - (2 * var(--site-pad))));
  border-radius: 16px;
  border-top: 1px solid var(--border);
  padding: 26px 28px 6px;
  box-shadow: 0 24px 60px rgba(16, 24, 32, 0.16), 0 4px 12px rgba(16, 24, 32, 0.06);
}
.mega-col .mega-col__h { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.mega-col a {
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: background 0.1s, color 0.1s;
}
.mega-col a:hover { background: var(--green-soft); }
.mega-foot { margin-top: 20px; padding: 14px 0 16px; }

/* Resources menu — same panel language */
.res-pick .res-menu {
  min-width: 224px;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(16, 24, 32, 0.16), 0 4px 12px rgba(16, 24, 32, 0.06);
}
.res-pick .res-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
}
.res-pick .res-menu a:hover { background: var(--green-soft); color: var(--text); }
/* Hover bridge: the 10px gap above the panel counts as part of the menu, so moving
   the mouse from "Resources" down to the links does not close it (owner 10-09). */
.res-pick .res-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* Search: pill with the magnifier INSIDE on the left; the old right-corner
   icon button becomes that left icon (still clickable / Enter submits). */
.topbar .search { height: 46px; border-color: #cfd4c9; background: #fff; }
.topbar .search:focus-within,
.topbar .search.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.topbar .search > button {
  order: -1;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 2px 0 16px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.topbar .search > button:hover { color: var(--green); background: none; }
.topbar .search input {
  border-radius: 999px;
  padding-left: 10px;
  font-size: 14.5px;
}

/* Walmart-style departments grid inside the category panel */
.topbar .mega-panel { width: max-content; max-width: calc(100vw - (2 * var(--site-pad))); padding: 20px 20px 8px; }
.mega-grid--depts {
  display: grid;
  grid-template-columns: repeat(3, max-content); /* each column = its longest name (owner 10-20) */
  gap: 2px 4px;
}
.mega-dept {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; /* one row per name (owner 10-20) */
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.mega-dept svg { color: transparent; transition: color 0.1s, transform 0.1s; flex: none; }
.mega-dept:hover { background: var(--green-soft); color: var(--green); }
.mega-dept:hover svg { color: var(--green); transform: translateX(2px); }

/* ---- Hero search 09-16: category suggestions under the field + search
   result header lines (corrections / alternatives). ---- */
.hero-ask { position: relative; }
.hero-suggest {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30;
  background: var(--card); border: 1px solid #cdc4b6; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.14); padding: 6px; text-align: left;
}
.hero-suggest__list { list-style: none; margin: 0; padding: 0; }
.hero-suggest__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.hero-suggest__item:hover, .hero-suggest__item[aria-selected="true"] { background: var(--green-soft); }
.hero-suggest__name { font-weight: 650; color: var(--text); }
.hero-suggest__meta { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.match-searched, .match-alternatives { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.match-alternatives a { color: var(--green); font-weight: 600; text-decoration: none; }
.match-alternatives a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .hero-suggest__item { flex-direction: column; gap: 2px; }
}

/* Tree-wide brand page (/us/<tree>/brand/<brand>/). */
.brand-page { max-width: var(--site-max); }
.brand-page__title { font-size: 30px; font-weight: 650; margin: 0 0 6px; }
.brand-page__sub { color: var(--muted); margin: 0 0 28px; }
.brand-page__group { margin-bottom: 36px; }
.brand-page__group h3 a { color: inherit; text-decoration: none; }
.brand-page__group h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.brand-page__count { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.brand-page__tree { margin-bottom: 44px; }
.brand-page__tree-title { font-size: 21px; font-weight: 650; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e4e9ee; }
.brand-page__tree-title a { color: inherit; text-decoration: none; }
.brand-page__tree-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Brand line above the product title: obviously a link. */
.pdp__brand-tag--link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9bfa8; }
.pdp__brand-tag--link::after { content: " ›"; color: var(--muted); }

/* /us/brands/ - A-Z pills. */
.brands-page { max-width: var(--site-max); }
.brands-page__az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; }
.brands-page__az a { display: inline-block; min-width: 30px; text-align: center; padding: 5px 6px; border: 1px solid #e4e9ee; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; background: #fff; }
.brands-page__az a:hover { border-color: #c9bfa8; }
.brands-page__group { margin-bottom: 26px; scroll-margin-top: 80px; }
.brands-page__letter { font-size: 18px; font-weight: 650; margin: 0 0 10px; color: var(--muted); }
.brands-page__pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brands-page__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e4e9ee; border-radius: 999px; background: #f8fafc; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.brands-page__pill:hover { border-color: #c9bfa8; background: #fff; }
.brands-page__nums { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }


/* ---------- PDP layout pass (owner 2026-09-17): fill the width, no dead gaps ---------- */
.pdp__top { margin-bottom: 8px; }
.pdp__jump-wrap {
  top: 88px;
  margin: 8px 0 28px;
  background: var(--bg, #f6f7f9);
  border-bottom: 2px solid var(--border);
}
.pdp__jump-link {
  min-height: 54px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.pdp__jump-link.is-active { border-bottom-color: var(--green); }
.pdp__body {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
}
.pdp__detail { margin: 0; max-width: none; gap: 16px; }
.pdp__body > .pdp__detail { max-width: none; }
.pdp__block { padding: 26px 30px; }
.pdp__block-title { margin-top: 0; }
.pdp__faq {
  margin: 0;
  background: #fff;
  border: 1px solid #e4e9ee;
  border-radius: 14px;
  padding: 26px 30px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 6px 24px rgba(16, 24, 32, 0.04);
}
.pdp__side-sticky { top: 158px; gap: 0; }
.pdp__side-group + .pdp__side-group { margin-top: 28px; }
.pdp__side-title { font-size: 16px; margin: 0 0 12px; }
.pdp__neighbors { margin-top: 28px; }
@media (max-width: 1100px) {
  .pdp__body { grid-template-columns: minmax(0, 1fr); }
  .pdp__side-sticky { position: static; margin-top: 24px; }
}

/* Tab bar CTA (owner 2026-09-17): product name + Check on Amazon live in the section bar when scrolled. */
.pdp__jump-wrap { display: flex; align-items: center; gap: 16px; }
.pdp__jump { flex: 1 1 auto; min-width: 0; }
.pdp__jump-cta { display: flex; align-items: center; gap: 10px; flex: 0 1 46%; min-width: 0; justify-content: flex-end; }
.pdp__jump-cta[hidden] { display: none !important; }
.pdp__jump-cta .tcta-img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--border); flex: 0 0 36px; }
.pdp__jump-cta .tcta-info { min-width: 0; flex: 0 1 auto; }
.pdp__jump-cta .tcta-name { display: block; font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp__jump-cta .tcta-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  background: var(--green); color: #fff; border-radius: 8px; font-size: 13.5px; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.pdp__jump-cta .tcta-btn:hover { filter: brightness(1.05); }
@media (max-width: 900px) { .pdp__jump-cta .tcta-info, .pdp__jump-cta .tcta-img { display: none; } }

/* Previous / next (owner 2026-09-17): two cards + centered category pill. */
.pdp__neighbors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
}
.pdp__neighbor {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pdp__neighbor:hover { border-color: #c9bfa8; box-shadow: 0 6px 18px rgba(16, 24, 32, 0.06); }
.pdp__neighbor--next { text-align: right; margin-left: 0; justify-content: flex-end; }
.pdp__neighbor img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f8fafc; padding: 4px; flex: 0 0 56px; }
.pdp__neighbor-text { display: block; min-width: 0; }
.pdp__neighbor-dir { display: block; font-size: var(--fs-caption); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.pdp__neighbor-name { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.pdp__neighbor--up {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 650; color: var(--text); text-decoration: none; white-space: nowrap;
}
.pdp__neighbor--up:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 760px) {
  .pdp__neighbors { grid-template-columns: 1fr; }
  .pdp__neighbor--up { justify-self: center; }
}

/* Footer rebuild (owner 2026-09-17): light, readable, three short columns. */
.footer { background: #fff; color: var(--text); border-top: 1px solid var(--border); margin-top: 56px; }
.footer__inner { padding: 44px var(--site-pad) 36px; gap: 56px; }
.footer__brand { max-width: 320px; padding-right: 40px; border-right: 1px solid var(--border); }
.footer__logo { color: var(--text); font-size: 22px; }
.footer__motto { color: var(--text); font-size: 14px; }
.footer__tagline { color: var(--muted); font-size: 14px; line-height: 1.6; }
.footer__links { justify-content: flex-start; gap: 72px; padding-left: 0; }
.footer__heading { color: var(--text); font-size: var(--fs-caption); letter-spacing: 0.12em; margin-bottom: 14px; }
.footer__list { gap: 10px; }
.footer__link { color: var(--text); font-size: 14.5px; }
.footer__link:hover { color: var(--green); }
.footer__bottom { border-top: 1px solid var(--border); background: #f8fafc; }
.footer__bottom-inner { color: var(--muted); padding: 16px var(--site-pad); }
.footer__legal-link { color: var(--muted); font-size: 13px; }
.footer__legal-link:hover { color: var(--text); }
@media (max-width: 760px) {
  .footer__inner { flex-direction: column; gap: 28px; }
  .footer__brand { border-right: 0; padding-right: 0; max-width: none; }
  .footer__links { flex-wrap: wrap; gap: 28px 40px; }
}
/* Tab bar: tabs never lose a label to the CTA (owner 2026-09-17). */
.pdp__jump-link { padding: 0 16px; }
.pdp__jump-cta { flex: 0 0 auto; max-width: 42%; }
.pdp__jump-cta .tcta-name { max-width: 220px; }
@media (max-width: 1180px) { .pdp__jump-cta .tcta-info { display: none; } }

.pdp__jump { max-width: none; overflow: visible; flex-wrap: nowrap; }

.footer__links { justify-content: flex-end; }

/* Mobile topbar (owner 2026-09-17): [burger] [logo] ........ [search icon] [country].
   Overrides the two older, conflicting phone blocks above. */
@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; padding: 10px 14px; gap: 10px; }
  .topbar .nav-toggle    { order: 1 !important; margin: 0 !important; display: block; }
  .topbar .logo          { order: 2 !important; margin: 0 !important; min-width: 0; }
  .topbar .search-toggle { order: 3 !important; margin-left: auto !important; margin-right: 0 !important; display: inline-flex; }
  .topbar .country-pick  { order: 4 !important; margin: 0 !important; }
  .topbar .topbar-cta-slot { display: none !important; }
  .topbar .search {
    order: 5;
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: auto; max-width: none;
    margin: 0;
    height: 0;
    border-radius: 0;
    border-left: 0; border-right: 0; border-top: 0;
    border-bottom: 0 solid var(--border);
    background: #fff;
    overflow: hidden;
    z-index: 40;
    transition: height 0.22s ease;
  }
  .topbar .search.search--mobile-open { height: 56px; border-bottom-width: 1px; overflow: visible; } /* 10-20: hidden clipped the suggestions dropdown on phones */
  .topbar .search input { color: var(--text); }
  .search-results { z-index: 41; }
}

/* Phones/tablets: related-product groups render under the content instead of disappearing. */
@media (max-width: 1100px) {
  .pdp__side { display: block !important; margin-top: 24px; }
  .pdp__side-sticky { position: static; }
  .pdp__side-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Mobile tab bar: tabs scroll in the space left of the CTA, never under it. */
@media (max-width: 900px) {
  .pdp__jump-wrap { top: 62px; gap: 8px; }
  .pdp__jump { overflow-x: auto; flex: 1 1 0; min-width: 0; }
  .pdp__jump-link { min-height: 48px; padding: 0 12px; font-size: 14px; }
  .pdp__jump-cta { flex: 0 0 auto; max-width: none; }
  .pdp__jump-cta .tcta-btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
}

/* Mobile bottom CTA (owner 2026-09-17): pinned bar once the hero button scrolls away. */
.pdp__mobile-cta { display: none; }
@media (max-width: 900px) {
  .pdp__jump-cta { display: none !important; }
  .pdp__mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(16, 24, 32, 0.08);
  }
  .pdp__mobile-cta[hidden] { display: none; }
  /* A4 (2026-10-08): never stack three bars at the bottom - the compare tray and the cookie panel win. */
  body.has-compare-tray .pdp__mobile-cta, body.pd-consent-open .pdp__mobile-cta { display: none; }
  .pdp__mobile-cta .pdp__cta { width: 100%; justify-content: center; min-height: 48px; }
  body.has-sticky-cta { padding-bottom: 80px; }
}

@media (max-width: 900px) { body.has-sticky-cta .back-to-top { bottom: calc(88px + env(safe-area-inset-bottom)); } }

@media (max-width: 900px) { body.has-sticky-cta .back-to-top { display: none !important; } }

/* Tab bar sits flush under the header (measured: header 75px desktop, 61px phone). */
.pdp__jump-wrap { top: 75px; }
@media (max-width: 900px) { .pdp__jump-wrap { top: 61px; } }

/* Hero image by width (owner 2026-09-17): phone edge to edge, tablet two columns, desktop unchanged. */
@media (max-width: 699px) {
  .pdp__hero-img { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 0; width: auto; }
  .pdp__hero-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .pdp__top { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 28px; }
  .pdp__hero-img { max-width: 100%; }
}
@media (max-width: 699px) {
  .pdp__gallery .pdp__hero-img { width: calc(100% + 32px); max-width: none; justify-self: stretch; aspect-ratio: 1 / 1; }
  .pdp__gallery .pdp__hero-img img { width: 100%; max-width: none; height: 100%; }
}
@media (max-width: 699px) {
  .pdp__gallery .pdp__hero-img { height: auto; max-height: none; min-height: 0; }
  .pdp__gallery .pdp__hero-img img { max-height: none; object-fit: contain; }
}

/* Footer: Associates note + compact phone layout (owner 2026-09-17). */
.footer__affiliate { margin: 0; font-size: var(--fs-caption); line-height: 1.6; color: var(--muted); max-width: 900px; }
@media (max-width: 760px) {
  .footer { margin-top: 32px; }
  .footer__inner { padding: 26px 16px 20px; gap: 20px; }
  .footer__brand { max-width: none; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--border); }
  .footer__logo { font-size: 20px; margin-bottom: 4px; }
  .footer__motto { margin: 0 0 4px; }
  .footer__tagline { font-size: 13px; }
  .footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; justify-content: stretch; }
  .footer__heading { font-size: var(--fs-caption); margin-bottom: 8px; }
  .footer__list { gap: 6px; }
  .footer__link { font-size: 13px; white-space: normal; }
  .footer__bottom-inner { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__affiliate { font-size: var(--fs-caption); }
  .footer__legal { gap: 4px 14px; }
}
@media (max-width: 760px) {
  .footer__heading { display: block !important; }
  .footer__bottom-inner, .footer__affiliate, .footer__legal, .footer__copyright { text-align: left; justify-content: flex-start; }
}

/* 2026-10-08 section B: PDP alternative cards with spec chips + compare, hero updated line, grid notice. */
.pdp__updated { margin: 6px 0 14px; }
.pdp__compare-btn { margin: 10px 0 0; }
.pdp__side-card-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* the card must shrink so "+ Compare" stays inside the column (owner 10-11: block ran off the right edge) */
.pdp__side-card-row .pdp__side-card-item { flex: 1 1 auto; min-width: 0; }
.pdp__side-card-row .pdp__side-card-text { min-width: 0; }
.pdp__side-card-row .pdp__side-card-item { flex: 1; min-width: 0; }
.pdp__side-card-text { display: flex; flex-direction: column; min-width: 0; }
.pdp__side-specs { display: block; font-size: var(--fs-caption); color: #5b6670; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp__side-compare { flex: none; font-size: var(--fs-caption); padding: 4px 8px; }
.cat-grid__notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff8e6; color: #5b4a12; font-size: 14px; }

/* Footer v3 (owner + Codex astra-high 10-09): one white band, brand | 3 equal link
   columns, quiet disclosure, legal row. Wins over the older footer layers above. */
.footer { background: #fff; color: var(--text); border-top: 1px solid var(--border); margin-top: 56px; }
.footer .footer__inner {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 48px; align-items: start;
  max-width: var(--site-max); margin: 0 auto; padding: 40px var(--site-pad);
}
.footer .footer__brand { max-width: none; padding-right: 0; border-right: 0; }
.footer .footer__logo { font-size: 22px; font-weight: 650; color: var(--text); text-decoration: none; }
.footer .footer__motto { margin: 8px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.footer .footer__tagline { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 300px; }
/* Link columns pushed to the right edge (owner 10-10). */
.footer .footer__links { display: grid; grid-template-columns: repeat(3, max-content); gap: 64px; padding: 0; justify-content: end; }
.footer .footer__heading {
  display: block; margin: 0 0 12px; font-size: var(--fs-caption); font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text);
}
.footer .footer__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer .footer__link { font-size: 14px; color: var(--muted); text-decoration: none; white-space: normal; }
.footer .footer__link:hover { color: var(--green); }
.footer .footer__bottom { background: #f8fafc; border-top: 1px solid var(--border); }
.footer .footer__bottom-inner {
  max-width: var(--site-max); margin: 0 auto; padding: 14px var(--site-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
}
.footer .footer__affiliate { margin: 16px 0 0; font-size: var(--fs-caption); line-height: 1.6; color: var(--muted); max-width: 380px; }
.footer .footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.footer .footer__legal-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.footer .footer__legal-link:hover { color: var(--text); }
.footer .footer__copyright { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .footer .footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; }
  .footer .footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; justify-content: stretch; }
  .footer .footer__affiliate { max-width: none; }
  .footer .footer__bottom-inner { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .footer .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Homepage cards (owner + Codex astra-high 10-09): the SAME card as the category hub
   pages (.home-cat), compacted for the 4-column homepage grid. Scoped to
   .home-cat--compact so /us/<tree>/ keeps its full-size cards. */
.home-cat--compact .home-cat__hero { aspect-ratio: auto; height: 148px; padding: 14px; }
.home-cat--compact .home-cat__hero--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.home-cat--compact .home-cat__hero--trio img { width: 100%; height: 100%; }
.home-cat--compact .home-cat__body { padding: 12px 14px 14px; flex: 1; gap: 2px; }
.home-cat--compact .home-cat__group { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-cat--compact .home-cat__name { margin: 2px 0 6px; font-size: 16px; letter-spacing: 0; }
.home-cat--compact .home-cat__name--clamp {
  font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-cat--compact .home-cat__meta { margin: 2px 0 10px; padding-top: 8px; }
.home-cat--compact .home-cat__stat--wide { flex: 1; }
.home-cat--compact .home-cat__stat--wide strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-cat--compact .home-cat__cta { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--green); }
@media (max-width: 760px) {
  .home-cat--compact .home-cat__hero { height: 120px; padding: 10px; }
  .home-cat--compact .home-cat__body { padding: 10px 11px 12px; }
  .home-cat--compact .home-cat__name { font-size: 14.5px; }
}

/* Category / hub / tree pages (owner + dentist pattern 10-09): compact hero = crumbs,
   name and numbers on one card; the description lives at the bottom in .cat-about;
   "Best <name>" top-10 block with its method line in .cat-best. */
.cat-page__hero--compact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 32px;
  padding: 18px 24px;
}
/* Breadcrumbs sit above the box (owner 10-10), left-aligned. */
.cat-page__crumb--out { margin: 16px 0 10px; }
.cat-page__crumb--out + .cat-page__hero--compact { margin-top: 0; align-items: center; }
.cat-page__hero--compact .cat-page__title { margin: 0; font-size: 30px; letter-spacing: 0; }
.cat-page__hero--compact .cat-page__hero-stats { padding-top: 0; border-top: 0; gap: 0; flex-wrap: nowrap; }
.cat-page__hero--compact .cat-page__hero-stat { padding: 0 18px; border-left: 1px solid #eef2f6; }
.cat-page__hero--compact .cat-page__hero-stat:first-child { border-left: 0; padding-left: 0; }
.cat-page__hero--compact .cat-page__hero-stat:last-child { padding-right: 0; }
.cat-page__hero--compact .cat-page__hero-stat strong { font-size: 17px; }
.cat-page__stats-link--below { display: inline-block; margin: 18px 0 0; }
@media (max-width: 760px) {
  .cat-page__hero--compact { grid-template-columns: 1fr; padding: 16px; gap: 10px; }
  .cat-page__hero--compact .cat-page__title { font-size: 25px; }
  .cat-page__hero--compact .cat-page__hero-stats { flex-wrap: wrap; row-gap: 10px; }
}

.cat-best { margin: 40px 0 0; }
.cat-best h2, .cat-about h2 { margin: 0 0 14px; font-size: 24px; font-weight: 600; color: var(--text); }
.cat-best__list {
  list-style: none; counter-reset: best; margin: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
/* One row per pick (owner + Codex 10-10): number, then the main name with a muted line under it
   (category and/or model); the whole row is the link and lights up on hover. */
.cat-best__list li { counter-increment: best; }
.cat-best__list li + li { border-top: 1px solid #eef2f6; }
.cat-best__row {
  display: grid; grid-template-columns: 28px 56px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 8px; color: var(--text); text-decoration: none;
  transition: background 0.15s;
}
.cat-best__row::before {
  content: counter(best); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #f1f5f3; color: var(--green); font-size: var(--fs-caption); font-weight: 650;
}
/* Product picture on every Best row (owner 10-18: "images and text and top 5", never text only). */
.cat-best__thumb, .best-board__thumb {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px;
  background: #fff; border: 1px solid #eef2f6; overflow: hidden;
}
.cat-best__thumb img, .best-board__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cat-best__text strong { display: block; font-size: 16px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.cat-best__text small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.cat-best__row:hover { background: var(--green-soft); }
.cat-best__row:hover strong { color: var(--green); }
.cat-best__row:hover::before { background: var(--green); color: #fff; }
.cat-best__row:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 600px) { .cat-best__row { padding: 12px 8px; gap: 10px; } }
/* Wide screens: the top 10 in two columns (1-5 | 6-10), owner 10-10. The CSS counter follows the
   DOM order, and column flow fills the left column first, so the numbers read down each column. */
@media (min-width: 900px) {
  .cat-best__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--best-rows, 5), auto); grid-auto-flow: column; column-gap: 12px;
  }
  .cat-best__list li.cat-best__col2 { border-left: 1px solid #eef2f6; padding-left: 12px; }
  .cat-best__list li.cat-best__col2-top { border-top: 0; }
}
.cat-best__method { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.cat-about { margin: 44px 0 8px; }
.cat-about__panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
/* Full width of the panel, same as the Best list above (owner 10-10). */
.cat-about__panel > p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: #3a4651; }
.cat-about__panel > p.cat-about__how { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eef2f6; font-size: 13.5px; color: var(--muted); }
.cat-about__how a { color: var(--green); font-weight: 600; margin-left: 4px; }
@media (max-width: 760px) { .cat-about__panel { padding: 16px; } }

/* Tree-page category sorter (owner 10-10): two white fields on the right, like the
   "Show / Sort by" fields of the category toolbar - label, then the options. */
.cat-sorter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0 0 16px; }
.cat-sorter__field { height: auto; min-height: 40px; }
.cat-sorter__seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; }
.cat-sorter__seg label { position: relative; cursor: pointer; }
.cat-sorter__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-sorter__seg span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
  border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.cat-sorter__seg svg { fill: currentColor; opacity: 0.85; }
.cat-sorter__seg label:hover span { color: var(--text); }
.cat-sorter__seg input:checked + span { background: var(--green-soft); color: var(--green); }
.cat-sorter__seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 600px) {
  .cat-sorter { justify-content: stretch; }
  .cat-sorter__field { width: 100%; }
  .cat-sorter__seg span { padding: 0 9px; font-size: 13px; }
}


/* Department hub /us/d/<dept>/ (owner + Codex 10-10): section jump links + section titles. */
.dept-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.dept-jump a { padding: 6px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; font-size: 14px; color: inherit; text-decoration: none; background: var(--surface, #fff); }
.dept-jump a:hover { border-color: currentColor; }
.dept-section { scroll-margin-top: 80px; }
.dept-section__title { margin: 0 0 14px; font-size: 22px; }
@media (max-width: 480px) {
  .dept-jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .dept-jump a { white-space: nowrap; font-size: 13px; }
}
.dept-collections { margin: 4px 0 10px; font-size: 14px; color: var(--muted, #555); }
.dept-collections a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Sticky footer (owner 10-11): short pages (404, ASIN not found) showed white below the footer. The body is a
   flex column, the cream content panel grows to the footer, nothing sits below it. */
html { height: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main.wrap { flex: 1 0 auto; width: 100%; }
body > .footer { flex-shrink: 0; }
/* back-to-top above the compare tray (owner 10-11) - compare.js sets --pd-tray-h to the tray height */
body.has-compare-tray .back-to-top { bottom: calc(var(--pd-tray-h, 64px) + 16px); }

/* /us/best/ + /us/best/<dept>/ (owner 10-18): the ORIGINAL stacked leaderboard look (.best-board / .best-row rules
   above, "---- /best/ leaderboards ----"), one board under the other, no columns. Only the department wrappers are new. */
.best-dept-boards { margin-top: 30px; scroll-margin-top: 96px; } /* jump chips: land with the section title visible under the sticky header (owner 10-18) */
.best-dept-boards .section-head { margin-bottom: 14px; }
.best-dept-boards .best-board:last-child { margin-bottom: 0; }

/* ============================================================
   TYPOGRAPHY LAYER (owner + Codex astra 2026-10-12): premium type system.
   Source Sans 3 (body/UI, self-hosted) + Source Serif 4 (page/section headings).
   Fluid scale tokens; weights capped (headings 600, emphasis 650); no negative
   tracking; every visible text >= 13px, real copy >= 16px. Appended LAST so it
   wins over the hardcoded px rules above. Fonts: public/fonts/ (OFL licenses there).
   ============================================================ */
@font-face { font-family: "PD Sans"; src: url("/fonts/source-sans-3-latin-normal-v1.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "PD Sans"; src: url("/fonts/source-sans-3-latin-italic-v1.woff2") format("woff2"); font-style: italic; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "PD Serif"; src: url("/fonts/source-serif-4-latin-normal-v1.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }

:root {
  --font-sans: "PD Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "PD Serif", Georgia, serif;
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem);
  --fs-h4: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  --fs-lead: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-small: clamp(.875rem, .85rem + .125vw, .9375rem);
  --fs-caption: clamp(.8125rem, .8rem + .05vw, .875rem);
  --fs-meta: var(--fs-small);
  --fs-label: var(--fs-caption);
  --fs-min: var(--fs-caption);
  --lh-h1: 1.15;
  --lh-heading: 1.25;
  --lh-lead: 1.5;
  --lh-body: 1.65;
  --lh-small: 1.45;
  --fw-body: 450;
  --fw-label: 500;
  --fw-heading: 600;
  --fw-strong: 650;
  --ls-text: 0;
  --text: #0f172a;
  --muted: #475569;
  --measure-prose: 70ch;
}

body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--text); letter-spacing: var(--ls-text); }
button, input, select, textarea { font-family: var(--font-sans); }
body #main :is(h1, h2, h3, h4) { font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: 0; }
/* (round 2: no generic h1-h4 sizing; page titles, section headings and card titles are sized per place below) */
body #main strong, body #main b { font-weight: var(--fw-strong); }

/* Product names and compact interactive hero states stay in the sans */
body #main .pdp__title,
body #main .hero-ws:is(.is-compact, .is-guided) .hero-ws__h1 { font-family: var(--font-sans); font-size: var(--fs-h2); }
body #main .product-card h3,
body #main .ed-card .ed-card__title { font-family: var(--font-sans); font-size: var(--fs-h4); }
body #main .ed-card--featured .ed-card__title { font-size: var(--fs-h3); }

/* Actual copy: category intro/About, cards, PDP and home */
body #main :is(.cat-page__lead, .cat-page__intro p, .cat-about__panel > p, .cat-page__faq details p, .cat-page__curation p,
  .product-card__verdict, .pdp__about-lede, .pdp__about-body, .pdp__verdict, .home-tile__desc, .section-head p,
  .ed-card__dek, .ed-author__bio, .ed-browse__text, .ed-faq__item p) {
  font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--text);
}
body #main :is(.cat-page__intro p, .cat-about__panel > p, .pdp__about-lede, .pdp__about-body, .ed-prose) { max-inline-size: var(--measure-prose); }

/* Metadata floor */
body #main :is(.product-card__cat, .product-card__model, .product-card__badge, .product-card .meta, .product-card .spec,
  .card-bottom__proof, .filter-block label .ct, .filters__clear, .filter-block__more, .pdp__side-specs, .pdp__buyers-source, .aff-note) {
  font-size: var(--fs-caption); line-height: var(--lh-small); letter-spacing: 0;
}
body #main :is(.product-card__cat, .product-card__model, .product-card .meta, .product-card .spec, .card-bottom__proof, .pdp__side-specs) { color: var(--muted); }

/* Useful data and controls must remain readable */
body #main :is(.product-card .spec strong, .pdp__specs-key, .pdp__specs-val) { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; }
body #main .pdp__specs-val { font-weight: var(--fw-body); }
body #main :is(.filter-block label, .filter-block h4) { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-label); line-height: var(--lh-small); }
body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: max(1rem, var(--fs-small)); }
body .footer :is(.footer__tagline, .footer__motto, .footer__link) { font-size: var(--fs-small); line-height: var(--lh-body); }
body .footer :is(.footer__heading, .footer__affiliate, .footer__legal-link, .footer__copyright) { font-size: var(--fs-caption); line-height: var(--lh-small); }
body #main :is(.ed-head__dek, .ed-hub__lead) { font-size: var(--fs-lead); line-height: var(--lh-lead); }
body #main .ed-prose { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: 1.75; color: var(--text); }
body #main .ed-prose :is(p, li) { font-size: inherit; line-height: inherit; }

/* Premium polish (Codex, bounded rules) */
body #main :is(.product-card, .ed-card, .home-cat, .guides-hub__card) { border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
body #main :is(.product-card, .ed-card, .home-cat):hover { transform: none; box-shadow: none; border-color: #94a3b8; }
body #main .ed-prose p { margin-bottom: 1em; }
body #main :is(.btn, button.btn) { font-weight: 600; min-height: 44px; }
body #main .ed-prose a { text-decoration: underline; text-underline-offset: .18em; }

/* --- Typography layer, Codex review fixes (2026-10-12) --- */
/* nested PDP gallery containment on mobile (the hero bleed stays) */
@media (max-width: 700px) {
  body #main .pdp__gallery { grid-template-columns: minmax(0, 1fr); }
  body #main .pdp__gallery > * { min-width: 0; }
  body #main .pdp__thumbs { min-width: 0; max-width: 100%; }
}
/* compact panels, cards and sidebar titles are not page sections: sans, h4 size */
body #main :is(.cat-page__brands > details > summary h2, .cat-page__variants > details > summary h2, .cat-filters-drawer__title, .filters__title,
  .ed-author__name, .ed-browse__title, .compare__head-title, .listicle__pick-title, .pdp__side-title, .guide-card__body h3, .compare-card__body h3) {
  font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: 0;
}
body #main .pdp__variants-axis { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-heading); line-height: var(--lh-small); letter-spacing: 0; }
body #main .ed-takeaways h2 { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: 0; }
body #main :is(.ed-section-h, .ed-related__title) { font-family: var(--font-sans); font-size: var(--fs-h3); }
/* sticky CTA must not shrink the tray / cookie reservations on mobile */
@media (max-width: 900px) {
  body.has-sticky-cta.has-compare-tray { padding-bottom: calc(var(--pd-tray-h, 74px) + var(--pd-tray-off, 0px) + env(safe-area-inset-bottom, 0px)); }
  body.has-sticky-cta.pd-consent-open:not(.has-compare-tray) { padding-bottom: var(--pd-consent-h, 132px); }
}
/* scoped Astro styles that still carry tiny or heavy text */
body #main :is(.listicle__qp-award, .listicle__toc-label, .compare__specs-group-name) { font-size: var(--fs-caption); font-weight: var(--fw-strong); }

/* --- Component typography correction (owner + Codex 2026-10-12, round 2: per place, measured) --- */
body #main .hero-ws__h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1.15; }
body #main .ed-prose h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 600; line-height: 1.3; }

body #main :is(.cat-page__title, .ed-head__title) { font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.3; }
body #main .ed-head__title { font-size: 40px; }

body #main :is(.section-head h2, .home-brief__title, .dept-section__title, .cat-best h2, .cat-about h2, .cat-page__faq h2,
  .cat-page__strip-head h2, .related-cats__head h2, .pdp__block-title, .ed-prose h2, .ed-section-h, .ed-related__title) {
  font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.3;
}
body #main .ed-prose h2 { font-size: 26px; }

body #main :is(.product-card h3, .home-cat__name, .home-tile__name, .guide-card__body h3, .compare-card__body h3,
  .ed-card .ed-card__title, .listicle__pick-title, .compare__head-title, .filters__title, .cat-filters-drawer__title,
  .pdp__side-title, .ed-author__name, .pdp__title) {
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.3;
}
body #main :is(.ed-card .ed-card__title, .listicle__pick-title) { font-size: 17px; }
body #main .pdp__title.pdp__title { font-size: 24px; line-height: 1.35; }   /* doubled class: the :is() group above carries a 2-class specificity */

body #main :is(.product-card h3, .home-cat__name, .home-tile__name, .guide-card__body h3, .compare-card__body h3,
  .ed-card .ed-card__title, .listicle__pick-title, .compare__head-title) { min-height: calc(2 * 1.3em); }
body #main :is(.cat-page__title, .ed-head__title, .pdp__title, .product-card h3, .home-cat__name, .home-tile__name,
  .guide-card__body h3, .compare-card__body h3, .ed-card .ed-card__title, .listicle__pick-title, .compare__head-title,
  .home-tile__desc, .guide-card__body p, .home-cat__stat strong, .pdp__side-specs, .home-cat__group, .home-tile__eyebrow) {
  display: block; -webkit-line-clamp: unset; line-clamp: none; height: auto; max-height: none; min-width: 0;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
body #main :is(.home-tile__desc, .guide-card__body p) { font-size: 16px; font-weight: 450; line-height: 1.5; }
body #main :is(.ed-head__dek, .ed-hub__lead) { font-size: 18px; }
body #main :is(.pdp__specs-key, .pdp__specs-val) { font-size: 16px; }
body #main .product-card .spec strong { font-size: 12px; line-height: 1.45; }
body #main :is(.filter-block h4, .home-cat__group, .home-cat__stat span, .home-tile__eyebrow, .product-card__cat,
  .cat-page__hero-stat span, .ed-card__badge, .ed-chip, .ed-author__eyebrow, .ed-browse__eyebrow, .ed-pn__label, .ed-toc summary) {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.45; text-transform: uppercase; letter-spacing: .06em;
}
body :is(.cp-row-current, .mobile-drawer__current) { font-size: 13px; font-weight: 600; text-transform: uppercase; }
body #main :is(.home-cat__meta, .ed-card__meta) { flex-wrap: wrap; }
@media (max-width: 760px) {
  body #main :is(.cat-page__title, .ed-head__title) { font-size: 30px; }
  body #main .ed-prose h2 { font-size: 24px; }
}
@media (max-width: 540px) {
  body #main .home-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* header nav labels (owner 10-12: too small) */
header .nav .nav-link, header .nav a, .nav .nav-mega__trigger { font-size: 15.5px; font-weight: 600; }
/* Resources label = same as Product categories (owner 10-12) */
.nav--links .res-pick > summary { font-size: 15.5px; font-weight: 600; }
/* mobile drawer sections (owner 10-12) */
.mobile-drawer__nav .mdr { border-bottom: 1px solid var(--border); }
.mobile-drawer__nav .mdr__sum { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 14px 16px; font-size: 16px; font-weight: 650; color: var(--text); }
.mobile-drawer__nav .mdr__sum::-webkit-details-marker { display: none; }
.mobile-drawer__nav .mdr__caret { color: var(--muted); transition: transform .15s ease; }
.mobile-drawer__nav .mdr[open] > .mdr__sum .mdr__caret { transform: rotate(180deg); }
.mobile-drawer__nav .mdr__list { display: flex; flex-direction: column; padding: 0 0 8px; }
.mobile-drawer__nav .mdr__list a { display: block; padding: 11px 16px 11px 28px; font-size: 15.5px; font-weight: 500; color: var(--text); text-decoration: none; border-radius: 0; }
.mobile-drawer__nav .mdr__list a:hover, .mobile-drawer__nav .mdr__list a:active { background: var(--nav); }
/* phones: the home grids show the first 6 of 12 (owner 10-12) */
@media (max-width: 540px) {
  #main .home-tiles > :nth-child(n+7), #main .ed-grid--4 > :nth-child(n+7) { display: none; }
}


/* pdp_facts (10-19): where it stands, spec position, rivals */
.pdp__standout { margin: 0; padding-left: 20px; }
.pdp__standout li { margin: 4px 0; }
.pdp__standout-note { font-size: var(--fs-caption); color: var(--muted); margin: 8px 0 0; }
.pdp__specs-pct { display: block; font-size: var(--fs-caption); color: var(--muted); font-weight: 500; }
.pdp__rivals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pdp__rival { border: 1px solid #e6dfd3; border-radius: 10px; padding: 10px; }
.pdp__rival-link { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--text); font-weight: 650; font-size: 14px; }
.pdp__rival-link img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; }
.pdp__rival-diff { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.pdp__rival-diff li { margin: 3px 0; }
.pdp__rival-label { color: var(--text); font-weight: 600; }
.pdp__rival-pct.is-this { color: var(--green); }
.pdp__rival-pct.is-rival { color: #a35a2a; }
.pdp__rivals-compare { display: inline-block; margin-top: 12px; font-weight: 650; }

/* chooser (10-19) */
.cat-best__choose { margin: 12px 0 0; }
.cat-best__choose-link { display: inline-block; padding: 8px 14px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-weight: 650; text-decoration: none; }
.cat-best__choose-link:hover { background: var(--green); color: #fff; }
.choose { max-width: 960px; margin: 0 auto; padding: 16px; }
.choose__lead { color: var(--muted); }
.choose__form { display: grid; gap: 16px; margin: 20px 0; }
.choose__q { border: 1px solid #e6dfd3; border-radius: 12px; padding: 12px 16px; }
.choose__q legend { font-weight: 700; padding: 0 6px; }
.choose__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.choose__opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d8d0c4; border-radius: 999px; cursor: pointer; font-size: 14px; }
.choose__opt:has(input:checked) { border-color: var(--green); background: #eef6ee; }
.choose__opt input { margin: 0; }
.choose__opt small { color: var(--muted); }
.choose__picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.choose__pick a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); border: 1px solid #e6dfd3; border-radius: 10px; padding: 10px; }
.choose__pick img { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; background: #fff; }
.choose__pick-text { display: flex; flex-direction: column; gap: 4px; }
.choose__pick-text small { color: var(--muted); }
.choose__none { color: var(--muted); }
.choose__copy { border: 1px solid #d8d0c4; background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; }

/* 10-20: ?brand= filter note on category pages (public/cat-filters.js) */
.cat-brand-note { margin: 0 0 14px; font-size: 14px; color: var(--muted, #5b6472); }
.cat-brand-note a { color: var(--green, #287a50); font-weight: 600; margin-left: 6px; }