/* 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 (warm cream + green CTA palette) come straight from the
   approved homepage mock; only extend, never redefine. */

:root {
  --bg:        #f7f3ec;
  --card:      #ffffff;
  --text:      #101820;
  --muted:     #66737d;
  --border:    #ded6ca;
  --nav:       #fbf8f2;
  --green:     #287a50;
  --green-soft:#e7f4eb;
  --cta:       #287a50;
  --cta-hover: #1f6040;
  --gold:      #f6b21a;
  --red:       #b42318;
  --soft:      #fffaf2;
  --blue:      #1f5c82;
  --amber-bg:  #fdf3e1;
  --amber-tx:  #9a5419;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, Roboto, Arial, sans-serif;
  background: #ffffff;     /* outer page is white */
  color: var(--text);
  line-height: 1.55;
  font-size: 15.5px;
  -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: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-cta-slot .tcta-price {
  font-size: 12.5px;
  font-weight: 700;
  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: 700;
  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. */
:root { --site-max: 1280px; --site-pad: 28px; }

.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: 700;
  letter-spacing: -0.7px;
  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 #d8d0c4;
  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: 11px;
  font-weight: 700;
  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: 700;
  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: 12px;
  color: var(--muted);
  font-weight: 600;
}
.search-results__empty {
  padding: 14px 14px;
  font-size: 13px;
  color: var(--muted);
}
@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: #fbf8f2; }
.country-pick[open] > summary {
  border-color: var(--text);
  background: #fbf8f2;
}
.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: 11px;
  font-weight: 700;
  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;
  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: #fbf8f2; }
.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;
}
.country-pick .cp-row-current {
  font-size: 10px;
  font-weight: 700;
  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: 11.5px;
  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: 700;
}
.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 h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  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: 11.5px;
  color: var(--muted);
  font-weight: 600;
  background: #fbf8f2;
  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: #fbf8f2;
  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: 10.5px;
  font-weight: 700;
  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: 700;
  color: var(--text);
}
.mega-feature p {
  margin: 0;
  font-size: 12.5px;
  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: 700;
  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: 12.5px; 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: #fbf8f2;     /* 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 (Resources / 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: 60px;
}
.footer__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(246, 178, 26, 0.55) 50%, transparent 90%);
}
.footer__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 64px var(--site-pad) 48px;
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.footer__brand {
  max-width: 300px;
  flex-shrink: 0;
  padding-right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__logo {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer__logo-accent { color: var(--green); }
.footer__motto {
  font-size: 14px;
  font-weight: 600;
  color: #e8e3d6;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.footer__tagline {
  font-size: 14px;
  color: #948c79;
  line-height: 1.65;
  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: 12px;
  font-weight: 700;
  color: #948c79;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 18px;
  white-space: nowrap;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__link {
  font-size: 15px;
  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: 22px var(--site-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: #948c79;
}
.footer__copyright { margin: 0; }
.footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.footer__legal-link {
  font-size: 13px;
  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: 11px;
  font-weight: 700;
  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: 800;
  letter-spacing: -1px;
  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: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.doc-page__section h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  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: 700; }
.doc-page h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 8px;
  letter-spacing: -0.2px;
}
.doc-page__callout {
  font-size: 16px;
  font-weight: 700;
  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: 800;
  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: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.doc-page__final-lead {
  font-size: 18px !important;
  font-weight: 700;
  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: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.doc-page__contact-email {
  font-size: 16px;
  font-weight: 700;
  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: 12px;
  font-weight: 700;
  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: 12px;
  font-weight: 800;
  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.6px; }
  .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 #f0eadd;
}
.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: 700;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -0.1px;
}
.cp-category__desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.cp-always {
  font-size: 10.5px;
  font-weight: 700;
  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: #fbf8f2;
  border-top: 1px solid #f0eadd;
  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: 700;
  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: 32px;
    padding: 44px var(--site-pad) 32px;
  }
  .footer__brand {
    max-width: 100%;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    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. */
.pd-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #171410;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.pd-cookie.is-visible { transform: translateY(0); }
.pd-cookie__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 18px var(--site-pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
.pd-cookie__copy { flex: 1; min-width: 0; }
.pd-cookie__title {
  font-size: 13px;
  font-weight: 700;
  color: #f3eddc;
  margin: 0 0 2px;
}
.pd-cookie__body {
  font-size: 12.5px;
  color: #a39b87;
  line-height: 1.55;
  margin: 0;
}
.pd-cookie__link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-cookie__link:hover { color: #ffd066; }
.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: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-cookie__btn--primary {
  background: var(--green);
  color: #fff;
}
.pd-cookie__btn--primary:hover { background: var(--cta-hover); }
.pd-cookie__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e3d6;
  border-color: rgba(255, 255, 255, 0.12);
}
.pd-cookie__btn--secondary:hover { background: rgba(255, 255, 255, 0.14); }
.pd-cookie__btn--ghost {
  background: transparent;
  color: #a39b87;
  border-color: rgba(255, 255, 255, 0.12);
}
.pd-cookie__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: #e8e3d6; }

@media (max-width: 720px) {
  .pd-cookie__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .pd-cookie__actions { flex-wrap: wrap; gap: 8px; }
  .pd-cookie__btn { flex: 1; min-width: 0; padding: 11px 12px; }
}

/* ---------- 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: 12px;
  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: 11.5px;
  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: 12px;
  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: 10px;
  padding: 4px 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  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: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.2px;
}
/* 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: 11.5px;
  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: 700; }
.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 #f0eadd;
  padding-top: 12px;
  margin-top: 4px;
}
.product-card .spec {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px;
  border-left: 1px solid #f0eadd;
}
.product-card .spec:first-child { border-left: 0; padding-left: 0; }
.product-card .spec strong {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  text-transform: none;
  margin-bottom: 3px;
}
.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 #f0eadd;
}
/* 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: 12.5px;
  font-weight: 700;
  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: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.product-card .card-bottom__proof {
  font-size: 11px;
  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 #f0eadd;
}
.filters__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.1px;
  margin: 0;
}
.filters__clear {
  font-size: 12px;
  font-weight: 700;
  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: #fbf8f2;
  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 #f0eadd; }
.filter-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.filter-block h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  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: 12px; 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: 12px; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}
.filter-range__val { background: #fbf8f2; 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: 12px;
  font-weight: 700;
  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: 700; }
.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: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border);
  background: #fbf8f2;
}
.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: 700;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  align-items: center;
  gap: 6px;
}
.cat-toolbar__filter-btn:hover { background: #fbf8f2; }
.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: 10px;
  font-weight: 800;
  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: 11px;
  font-weight: 700;
  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: 12.5px;
  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: #fbf8f2; color: var(--text); }
.applied-filters__clear {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  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: 12.5px;
  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: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  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.1px;
  /* 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: 12px; gap: 6px; }
.cat-grid .product-card__cat { font-size: 10.5px; }
.cat-grid .product-card__verdict {
  font-size: 12px;
  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: 9.5px;
  padding: 4px 8px;
  border-top: 1px solid #f0eadd;
  border-left: 0;
}
.cat-grid .product-card .spec:nth-child(odd) { padding-left: 0; }
.cat-grid .product-card .spec strong {
  font-size: 12px;
  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.2px;
}
.cat-grid .product-card .card-bottom__proof {
  font-size: 11px;
  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: 9.5px;
  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: 700; }
.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: #fbf8f2; }
.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: 12.5px;
  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: 700; }
.cat-page__title {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  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;
}
.cat-page__hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid #f0eadd;
}
.cat-page__hero-stat { display: flex; flex-direction: column; gap: 2px; }
.cat-page__hero-stat strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}
.cat-page__hero-stat span {
  font-size: 11px;
  font-weight: 700;
  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: 800;
  letter-spacing: -0.4px;
  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: 700; }

.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: 700;
  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: 700;
  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: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.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: 700;
  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: 700;
  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: 700;
  line-height: 1.25;
  color: var(--text);
}
.cat-page__subhub-count {
  grid-column: 1;
  font-size: 12.5px;
  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: 700;
  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: 700;
  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: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.guide-card__meta strong { color: var(--text); font-weight: 700; }
.guide-card__arrow {
  margin-left: auto;
  color: var(--green);
  font-weight: 700;
  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: 11.5px;
  font-weight: 700;
  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: 11px;
  font-weight: 800;
  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: 700;
  color: var(--text);
}
.compare-card__arrow {
  font-size: 12.5px;
  color: var(--green);
  font-weight: 700;
  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: 700;
  color: var(--text);
}
.cat-page__brand-card-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.cat-page__brand-card-price {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
  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: 12px;
  font-weight: 700;
  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: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

@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: 11px;
  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: 700;
  color: var(--text);
}
.cat-page__recent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  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: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-page__recent-item-meta {
  font-size: 11px;
  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: 800;
  letter-spacing: -0.4px;
  color: var(--text);
}
.cat-page__faq details {
  border-top: 1px solid #f0eadd;
}
.cat-page__faq details:last-of-type { border-bottom: 1px solid #f0eadd; }
.cat-page__faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
  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: 700;
  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;
}
.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: 800;
  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: #fbf8f2; }
.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.6px; }
  .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: 11.5px;
  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.3px;
  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: #fbf8f2;
  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: 11.5px;
  font-weight: 700;
  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: 12.5px; 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: 700; letter-spacing: -0.4px;
  color: var(--text); line-height: 1;
}
.purchase .price small {
  font-size: 14px; color: var(--text); font-weight: 700; margin-left: 1px;
}

.cta-row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
.cta-row .btn {
  font-size: 16px;
  padding: 17px 24px;
  font-weight: 700;
  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: #fbf8f2;
  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.1px;
  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: 700;
  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: #fbf8f2;
}
.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: 700;
  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: 700;
}
.hl-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fbf8f2;
  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: 700;
  letter-spacing: -0.2px;
  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: 700; }

/* 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: #fbf8f2;
  border: 1px solid var(--border);
  border-radius: 8px;
  border-top: 2px solid var(--text);
}
.tk-label {
  font-size: 10.5px;
  font-weight: 700;
  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: 12px;
  font-weight: 700;
  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: 700;
  letter-spacing: -0.2px;
  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: #fbf8f2;
  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: 11px;
  font-weight: 700;
  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: 12px;
  font-weight: 700;
  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: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: #fbf8f2;
  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: 800;
  letter-spacing: -2px;
  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: 12.5px; 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: 12px;
  font-weight: 700;
  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: 12px; }
.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: 12.5px;
  margin-left: 4px;
}

.owners-disclaimer {
  margin: 22px 0 0;
  font-size: 12px;
  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: 700;
  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: 700;
}
.proscons .cons li::before {
  content: "−";
  position: absolute;
  left: 1px;
  color: var(--red);
  font-weight: 700;
}
@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: 700;
  letter-spacing: -0.2px;
  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: 11px;
  font-weight: 800;
  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: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.vs-name {
  font-size: 17px;
  font-weight: 700;
  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: 700;
  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: 12.5px; }

/* 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: 800;
  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: 700; }

.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: 10px;
  font-weight: 700;
  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: 12.5px;
  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: 10.5px;
  font-weight: 700;
  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: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.gc-title {
  font-size: 17px;
  font-weight: 700;
  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: #fbf8f2;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.gc-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
  line-height: 1;
}
.gc-stat-label {
  font-size: 11px;
  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: 12px;
  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; } }


/* 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 h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.1px;
  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: #fbf8f2;
  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: #fbf8f2;
}
.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-picks-page { 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: 11px;
  font-weight: 700;
  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: -1.2px;
  font-weight: 800;
  color: var(--text);
}
.home-h1-accent { color: var(--green); font-weight: 800; }
.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; }

/* Hero newsletter — proper editorial signup card. Lives in the hero
   left column under the headline. Eyebrow + h3 + 3 value bullets +
   form + trust line. Subtle green-tinted card to give it visual weight
   without competing with the hero h1. */
.home-hero-newsletter {
  display: flex;
  flex-direction: column;
  max-width: 460px;
  background: linear-gradient(160deg, var(--green-soft) 0%, #ffffff 100%);
  border: 1px solid #bfe1ca;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 4px 14px rgba(16, 24, 32, 0.05);
}
.home-hero-newsletter__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 6px;
}
.home-hero-newsletter__title {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.2px;
  color: var(--text);
}
.home-hero-newsletter__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-hero-newsletter__list li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.35;
}
.home-hero-newsletter__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.home-hero-newsletter__form { display: flex; gap: 6px; }
.home-hero-newsletter__form input {
  flex: 1; height: 38px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 12px; font-size: 13px;
  outline: 0; background: #fff;
}
.home-hero-newsletter__form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(40, 122, 80, 0.18);
}
.home-hero-newsletter__form .btn {
  padding: 0 16px; height: 38px;
  font-size: 13px; white-space: nowrap;
}
.home-hero-newsletter__note {
  margin-top: 8px;
  font-size: 11px; color: var(--muted);
}

/* 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;
  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: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-hero-gallery__thumb-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.32;
}
.home-hero-gallery__thumb-price {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  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: 11.5px;
  font-weight: 600;
  color: var(--muted);
  min-width: 42px;
  text-align: center;
}

/* §4 Editor's picks — 2-up carousel of full product cards. All pages
   stack in row 1 col 1 so the container locks to the tallest page;
   dots sit in row 2. */
.home-picks-carousel {
  display: grid;
  grid-template-rows: auto auto;
  margin-bottom: 28px;
}
.home-picks-page {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.home-picks-page.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.home-picks-carousel__dots {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.home-picks-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-picks-carousel__dot:hover { background: rgba(16, 24, 32, 0.4); }
.home-picks-carousel__dot.is-current {
  background: var(--green);
  width: 22px;
  border-radius: 4px;
}

/* 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: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-feature__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--text);
}
.home-feature__copy {
  margin: 0;
  color: #3a4651;
  font-size: 12.5px;
  line-height: 1.45;
}
.home-feature__copy strong { color: var(--text); font-weight: 700; }

.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: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}

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

/* ---- 2. Authority stats ---- */
.home-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 0 28px;
  overflow: hidden;
}
.home-stat {
  padding: 14px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.home-stat:last-child { border-right: 0; }
.home-stat__num {
  font-size: 24px; font-weight: 800;
  color: var(--text); letter-spacing: -0.6px; line-height: 1;
  margin-bottom: 4px;
}
.home-stat__plus { color: var(--green); }
.home-stat__label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
@media (max-width: 900px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .home-stat:nth-child(odd) { border-right: 1px solid var(--border); }
}

/* ---- 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: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-cat__name {
  margin: 4px 0 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  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 #f0eadd;
}
.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 #f0eadd;
}
.home-cat__stat strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
  line-height: 1.2;
  white-space: nowrap;
}
.home-cat__stat span {
  font-size: 10.5px;
  font-weight: 700;
  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: #fbf8f2;
}
.home-compare__a, .home-compare__b {
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.1px;
}
.home-compare__a { text-align: right; }
.home-compare__vs {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  background: #fbf8f2;
  border: 1px solid #ece5d6;
  padding: 2px 6px;
  border-radius: 4px;
}
.home-compare__arrow {
  color: var(--blue); font-weight: 700; 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: 800; letter-spacing: -0.3px;
  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: 700; }
.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: 12.5px; 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: 11px; font-weight: 700;
  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: 10.5px;
  font-weight: 700;
  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: 700;
  letter-spacing: -0.3px;
  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 #f0eadd;
}
.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 #f0eadd;
}
.home-guide__stat strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
  line-height: 1.2;
  white-space: nowrap;
}
.home-guide__stat span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) { .home-guides { grid-template-columns: 1fr; } }

/* ---- 7. Trust manifesto ---- */
.home-trust {
  margin: 36px 0 0;
  padding: 40px 42px;
  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);
}
.home-trust__head {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #f0eadd;
}
.home-trust__head h2 {
  margin: 0 0 10px;
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.6px; color: var(--text);
}
.home-trust__head p {
  margin: 0 auto;
  color: #3a4651;
  font-size: 15px; line-height: 1.6;
  max-width: 620px;
}
.home-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.home-trust__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  background: #fdfaf3;
  border: 1px solid #ece5d6;
  border-radius: 10px;
}
.home-trust__item h3 {
  margin: 0;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}
.home-trust__item p {
  margin: 0;
  color: #3a4651;
  font-size: 14px; line-height: 1.6;
}
@media (max-width: 720px) {
  .home-trust__grid { grid-template-columns: 1fr; }
  .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: #fbf8f2; }
.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: #fbf8f2; }

/* --- Mobile slide-in drawer (hidden on desktop) --- */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.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; }
.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: #fbf8f2; }
.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: #fbf8f2; }
.mobile-drawer__section {
  padding: 12px 12px 24px;
}
.mobile-drawer__section h4 {
  margin: 8px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  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; }
.mobile-drawer__country:hover, .mobile-drawer__country:active { background: #fbf8f2; }
.mobile-drawer__country--active {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
}
.mobile-drawer__country--active:hover { background: var(--green-soft); }
.mobile-drawer__country-soon {
  padding: 10px 14px 4px;
  font-size: 12px;
  color: var(--muted);
}
.mobile-drawer__current {
  font-size: 10px;
  font-weight: 700;
  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.9px; 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-stats { grid-template-columns: repeat(3, 1fr); }
  .home-stats .home-stat { padding: 16px 12px; }
  .home-stat__num { font-size: 22px; }
  .home-stat__label { font-size: 11px; }

  .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; }

  .home-trust { padding: 24px 22px; }
  .home-trust__grid { grid-template-columns: 1fr; gap: 12px; }
  .home-trust__item { padding: 18px 20px; }
  .home-trust__head h2 { font-size: 22px; }

  /* 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.4px; }
  .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.8px; }
  .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-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stats .home-stat:nth-child(5) { grid-column: 1 / -1; }

  .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 #f0eadd; }
  .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;
  }

  .home-trust { padding: 20px 18px; }
  .home-trust__head h2 { font-size: 20px; }
  .home-trust__head p { font-size: 14px; }

  /* 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.4px;
  }
  .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: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pdp-related__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ece4d3;
  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: #fbf8f2;
  border-radius: 9px;
  padding: 14px;
}
.pdp-related__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pdp-related__brand {
  font-size: 11px;
  font-weight: 700;
  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.1px;
  /* 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 #f0eadd;
  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: 700; }
.pdp-related__price {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* Per-product interlinks: featured-in listicles + compared-with rows. */
.pdp-mentions h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  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: 12px;
  font-weight: 800;
  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: 700; 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.
   ============================================================================ */
.pdp {
  display: block;
  margin-top: 0;
  max-width: var(--site-max);
}
.pdp__crumb {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 16px;
  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: 0.94fr 1.06fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .pdp__top { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Gallery — vertical thumbs left, hero right, controls below ---- */
.pdp__gallery {
  display: grid;
  grid-template-areas:
    "thumbs hero"
    "thumbs herobar";
  grid-template-columns: 80px 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
  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 #ece4d3;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  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 #ece4d3;
  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 #ece4d3;
  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: #fbf8f2;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 24, 32, 0.06);
}
.pdp__hero-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  min-width: 56px;
  text-align: center;
}

/* Vertical thumbnail column — capped to ~6 visible, chevron scrolls more. */
.pdp__thumbs-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
  /* 6 thumbs * 68px + 5 gaps * 8px + 4px padding */
  max-height: calc(68px * 6 + 8px * 5 + 4px);
  /* No native scroll — only the chevron below advances the strip. */
  overflow: hidden;
  scroll-behavior: smooth;
}
.pdp__thumb {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  background: #fff;
  border: 1px solid #ece4d3;
  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 #ece4d3;
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  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: #fbf8f2;
  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 #ece4d3;
  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: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  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: 30px;
  line-height: 1.18;
  letter-spacing: -0.6px;
  margin: 0 0 18px;
  color: var(--text);
  font-weight: 700;
}
/* 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 #e6dcc4;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}
.pdp__meta > * + * {
  border-left: 1px solid #ece2cd;
}
.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: #e0d5b8; }
.pdp__meta-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #d4a017;
  white-space: nowrap;
}
.pdp__meta-rating-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}
.pdp__meta-rating-out {
  font-size: 12px;
  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: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}
.pdp__meta-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pdp__meta-tile--demand .pdp__meta-tile-num { color: var(--green, #287a50); }
.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: #fbf8f2;
  border: 1px solid #ece4d3;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  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 #ece4d3;
  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.8px;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}
.pdp__avail {
  font-size: 11.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pdp__cta {
  display: block;
  text-align: center;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  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 #e6dcc4;
  border-radius: 12px;
}
.pdp__variants-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dashed #ece2cd;
}
.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: 11px;
  font-weight: 700;
  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 #ece2cd;
  font-size: 12.5px;
  color: var(--muted);
}
.pdp__variants-hint a {
  color: var(--green, #287a50);
  font-weight: 700;
  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: 11.5px;
  font-weight: 700;
  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 #ece4d3;
  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: #fbf8f2; 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: 700;
  color: var(--muted);
  font-family: -apple-system, system-ui, sans-serif;
}
.pdp__swatch-label { color: var(--text); }
.pdp__swatch-price { color: var(--muted); font-weight: 700; font-size: 12px; }
/* 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 {
  background: #fff;
  border: 1px solid #ece4d3;
  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: 700;
  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: 11.5px;
  color: var(--muted);
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #ece4d3;
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .pdp__hero-img { height: 320px; padding: 18px; }
  .pdp__title { font-size: 22px; }
  .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 #ece4d3;
  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 #ece4d3;
  border-left: 3px solid #c8843a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.pdp__skip-label {
  font-size: 10.5px;
  font-weight: 800;
  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: 10.5px;
  color: var(--muted);
  margin: 10px 0 0;
  padding: 0;
  letter-spacing: 0.02em;
  text-align: center;
}

/* 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 #ece4d3;
  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: 10.5px;
  font-weight: 700;
  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: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.pdp__brand-link:hover .pdp__brand-link-title { color: var(--green); }
.pdp__brand-link-arrow {
  color: var(--green);
  font-weight: 700;
  transition: transform 0.15s;
}
.pdp__brand-link:hover .pdp__brand-link-arrow { transform: translateX(3px); }
.pdp__fit-label {
  font-size: 10.5px;
  font-weight: 800;
  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); }


/* Tabs: Highlights / Specs / What buyers say. */
.pdp__tabs { margin: 40px 0 0; }
.pdp__tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #ece4d3;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pdp__tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 22px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.18s, border-color 0.18s;
}
.pdp__tab:first-child { padding-left: 0; }
.pdp__tab:hover { color: var(--text); }
.pdp__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.pdp__tab-panel { display: none; }
.pdp__tab-panel.is-active { display: block; }

/* 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 #f0eadd;
}
.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 #ece4d3;
  border-radius: 10px;
  overflow: hidden;
}
.pdp__specs-table td { padding: 14px 20px; border-bottom: 1px solid #f0eadd; }
.pdp__specs-table tr:last-child td { border-bottom: 0; }
.pdp__specs-table tr:hover td { background: #fbf8f2; }
.pdp__specs-key { color: var(--muted); font-weight: 600; width: 40%; }
.pdp__specs-val { color: var(--text); font-weight: 600; }

/* "What buyers say" panel — two columns: love (green) | complain (amber). */
.pdp__buyers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pdp__buyers-col {
  background: #fff;
  border: 1px solid #ece4d3;
  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: 10.5px;
  font-weight: 800;
  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 #ece4d3;
}
.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; }
}


/* ---------- FAQ accordion ----------------------------------------------- */
.pdp__faq {
  margin: 36px 0 0;
  background: linear-gradient(180deg, #fdfbf6 0%, #fff 100%);
  border: 1px solid #ece4d3;
  border-radius: 14px;
  padding: 28px 32px 22px;
  box-shadow: 0 1px 0 rgba(16,24,32,0.02), 0 6px 24px rgba(16,24,32,0.04);
}
.pdp__faq-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ece4d3;
}
.pdp__faq-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.pdp__faq-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text);
}
.pdp__faq-sub {
  margin: 0;
  color: #55626d;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 640px;
}
.pdp__faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp__faq-item {
  background: #fff;
  border: 1px solid #ece4d3;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pdp__faq-item:hover { border-color: #d8cfba; }
.pdp__faq-item[open] {
  border-color: #c9bfa8;
  box-shadow: 0 1px 0 rgba(16,24,32,0.02), 0 6px 18px rgba(16,24,32,0.05);
}
.pdp__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  line-height: 1.45;
  letter-spacing: -0.05px;
}
.pdp__faq-q::-webkit-details-marker { display: none; }
.pdp__faq-q-text { flex: 1; min-width: 0; }
.pdp__faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-soft, #e7f4ec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green, #287a50);
  transition: transform 0.22s ease, background 0.15s;
}
.pdp__faq-item[open] .pdp__faq-icon {
  transform: rotate(180deg);
  background: var(--green, #287a50);
  color: #fff;
}
.pdp__faq-a {
  font-size: 14.5px;
  line-height: 1.65;
  color: #3a4651;
  margin: 0;
  padding: 0 18px 16px;
  max-width: 760px;
}
.pdp__faq-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #ece4d3;
  font-size: 13px;
  color: var(--muted);
}
.pdp__faq-foot a {
  color: var(--green, #287a50);
  font-weight: 700;
  text-decoration: none;
}
.pdp__faq-foot a:hover { text-decoration: underline; }


/* ---------- 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; }
}