* { box-sizing: border-box; }

/* Show the blinking text caret ONLY in real text-entry fields. caret-color is
   purely cosmetic (colors the insertion caret, no layout/interaction effect),
   so suppressing it globally and restoring it on text inputs/textareas is
   risk-free - it just stops stray carets on focusable non-text controls (e.g.
   the visually-hidden toggle checkboxes). */
* { caret-color: transparent; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
[contenteditable]:not([contenteditable="false"]) {
  caret-color: auto;
}

/* Single canonical font stack - system UI per platform, no web-font load. */
:root {
  --jf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* === Theme palette =========================================================
   Brand colors are variables so each vertical re-themes every element from one
   place. Default = Amazon (forest green + orange + tropical leaves). The
   data-site attribute (set per page in app.js activateTab) switches palette:
   "walmart" = blue/yellow, "brands" = the neutral MyTrustedBrands umbrella used
   on the chooser + all shared content pages. Success greens (#0f5132/#def7e6/
   #d1f4e0) are SEMANTIC (trusted/ok), not brand colors, so they stay fixed. */
:root {
  --brand: #1a3d2e;
  --brand-hover: #2b5443;
  --brand-tint: #eef6f0;
  --brand-soft: #5b9277;
  --on-brand-muted: #cfe3d6;
  --accent: #ff9900;
  --accent-hover: #e68a00;
  --accent-bright: #ffb13c;
  --accent-dark: #b54708;
  --accent-text: #1f2328;                /* text ON accent surfaces (dark on orange/yellow) */
  --hero-accent: #ff9900;                /* accent that must pop ON the dark hero (brand name) */
  --page-backdrop: transparent;          /* the leaf image covers it */
  --leaf-bg: url("/static/leaves-bg.svg");
  --leaf-nav: url("/static/leaves-nav.svg");
}
body[data-site="walmart"] {
  --brand: #0071dc;
  --brand-hover: #004f9a;
  --brand-tint: #e7f1fc;
  --brand-soft: #4f9fe6;
  --on-brand-muted: #d6e6fa;
  --accent: #ffc220;
  --accent-hover: #e6ad12;
  --accent-bright: #ffd454;
  --accent-dark: #cc9a00;
  --accent-text: #1f2328;
  --hero-accent: #ffc220;
  --page-backdrop: #eef4fb;
  --leaf-bg: url("/static/walmart-stars.png");  /* repeating star tile (Amazon vertical uses tropical leaves) */
  --leaf-nav: none;                             /* nav + hero stay plain blue */
}
body[data-site="brands"] {
  --brand: #1b2a4f;                /* navy */
  --brand-hover: #2a3a66;
  --brand-tint: #eceff3;           /* light grey */
  --brand-soft: #6b7794;
  --on-brand-muted: #cdd5e4;
  --accent: #1b2a4f;               /* navy action color (white text via --accent-text) */
  --accent-hover: #2a3a66;
  --accent-bright: #34457a;
  --accent-dark: #14213d;
  --accent-text: #ffffff;
  --hero-accent: #f5c451;          /* gold - pops on the navy hero (accent is navy here) */
  --page-backdrop: #eef0f3;        /* light grey page */
  --leaf-bg: none;
  --leaf-nav: none;
}

body {
  font-family: var(--jf-font);
  background: #f7f7f8;
  color: #1f2328;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Leaf backdrop on its own fixed layer instead of background-attachment:
   fixed - the latter forces a full-viewport SVG repaint on every scroll
   tick in Chromium on Windows, freezing scrolling for seconds at a time. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--page-backdrop);
  background-image: var(--leaf-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Walmart uses a small seamless star tile, so it repeats instead of covering. */
body[data-site="walmart"]::before {
  background-size: 200px 200px;
  background-repeat: repeat;
}

button, input, select, textarea, label {
  font-family: inherit;
}

header {
  background-color: var(--brand);
  background-image: var(--leaf-nav);
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 8px;
}
header .brand-lockup { display: flex; align-items: center; gap: 9px; }
header .brand-home { display: inline-flex; flex: 0 0 auto; line-height: 0; padding: 3px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
header .brand-home:hover { background: var(--brand-hover); }
header .brand-mark { display: block; width: 26px; height: 26px; }
header .brand-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  background: transparent;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
header .brand-title:hover { background: var(--brand-hover); }
header .brand-title.active { background: transparent; border-color: transparent; }
header nav { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }

/* Lists is the only nav tab - pushed to the far right on desktop. */
.nav-lists { margin-left: auto; }

/* Marketplace picker - flag of the active Amazon marketplace in the nav's
   top-right corner; clicking opens the dropdown (built by app.js). */
.marketplace-menu { position: relative; display: flex; align-items: center; }
.marketplace-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 9px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
}
.marketplace-btn:hover { background: var(--brand-hover); color: #fff; }
.marketplace-flag {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.marketplace-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2300;
  min-width: 250px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 6px;
  background: var(--brand);
  border: 1px solid var(--brand-hover);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 35, 40, 0.35);
}
.marketplace-dropdown[hidden] { display: none; }
.marketplace-region {
  padding: 8px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.marketplace-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
.marketplace-option:hover { background: var(--brand-hover); }
.marketplace-option[aria-checked="true"] { background: rgba(255, 153, 0, 0.22); }
.marketplace-option-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: none;
}
.marketplace-option-name { white-space: nowrap; }
.marketplace-option-domain {
  margin-left: auto;
  padding-left: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* --- Mobile / small-screen layout ---------------------------------------- */
@media (max-width: 600px) {
  /* Header: title on the left, the single Lists tab on the right - both stay
     on one row. Pinned to the top so the nav stays reachable while scrolling. */
  header {
    padding: 10px 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  header .brand-title { flex: 0 1 auto; font-size: 1.1rem; }
  header nav .tab { min-height: 40px; }
  .marketplace-btn { min-height: 40px; }

  /* Search: stack the input above a full-width submit button instead of
     squeezing them onto one row. */
  #search-form { flex-direction: column; gap: 10px; }
  .search-submit-row { width: 100%; }
  .search-submit-row button[type="submit"] { flex: 1; min-height: 44px; }
}

@media (max-width: 480px) {
  header .brand-title { font-size: 1.05rem; padding: 4px 8px; }
  .brand-btn { min-height: 36px; font-size: 0.82rem; padding: 7px 10px; }
  #pagination { gap: 8px; flex-wrap: wrap; }

  /* Your-list rows: stack the brand label above its action button so a long
     brand name doesn't crush the Approve/Approved control. */
  .your-list-preview .brand-row-main { flex-direction: column; align-items: stretch; gap: 8px; }
}
.tab {
  background: transparent;
  color: #d3d8df;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.tab:hover { background: var(--brand-hover); color: #fff; }
.tab.active { background: #37475a; color: #fff; border-color: #5a6c80; }
.tab.active:hover { background: #45596f; }

main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1 0 auto;
}

footer {
  background: #f6f8fa;
  border-top: 1px solid #d0d7de;
  margin-top: 48px;
  padding: 32px 24px 20px;
  color: #57606a;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) auto minmax(8px, 0.5fr) auto minmax(8px, 0.5fr) auto minmax(0, 0.5fr);
  column-gap: 0;
}
.footer-grid > div:nth-child(1) { grid-column: 2; }
.footer-grid > div:nth-child(2) { grid-column: 4; }
.footer-grid > div:nth-child(3) { grid-column: 6; }
.footer-grid strong {
  display: block;
  color: #1f2328;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.footer-grid p { margin: 0; line-height: 1.5; }
.footer-grid a { color: #0969da; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-tab-link.active { font-weight: 700; text-decoration: underline; }
.footer-legal {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid #d0d7de;
  font-size: 0.75rem;
  color: #8b949e;
  line-height: 1.5;
  text-align: center;
}
.footer-copyright {
  text-align: center;
  margin-top: 16px;
}

/* Mobile overrides that must follow the base `main`/`footer`/`.footer-grid`
   rules: media queries don't raise specificity, so anything overriding a
   property those base rules also set has to win on source order. Keeping them
   here (rather than in the header/search media block higher up) is what makes
   the tightened footer spacing actually take effect. The footer stacks (the
   base auto-fit grid collapses to one column) but stays compact so it doesn't
   eat the short viewport. */
@media (max-width: 600px) {
  main { padding: 16px; }
  footer { margin-top: 24px; padding: 20px 16px 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 12px; }
  .footer-grid > div:nth-child(1),
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) { grid-column: 1; }
  .footer-grid p { line-height: 1.4; }
  .footer-legal { padding-top: 12px; }
  .footer-copyright { margin-top: 12px; }
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* <mtj-page> route regions (server-included partials) mirror .tab-panel
   show/hide; the active class is toggled by the router / activateTab. */
mtj-page { display: none; }
mtj-page.active { display: block; }

#search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
/* The list-scope chip and the text input share one bordered pill (Amazon-style
   scoped search): the wrap carries the border + focus ring, the input itself is
   borderless and flexes to fill the remaining width. */
#search-form .search-input-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
#search-form .search-input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
#search-form input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
#search-form input:focus { outline: none; }

/* Inline spinner shown in the status line while we resolve categories and
   redirect to Amazon. It persists through the redirect navigation, so it reads
   as "working… → Amazon". */
.search-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 6px;
  vertical-align: -0.12em;
  border: 2px solid var(--brand-tint);        /* faded brand ring (theme-aware) */
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: mtj-spin 0.7s linear infinite;
}
@keyframes mtj-spin {
  to { transform: rotate(360deg); }
}
/* Don't freeze it (a static ring reads as broken) - just slow it down. */
@media (prefers-reduced-motion: reduce) {
  .search-spinner { animation-duration: 1.6s; }
}
.search-status {
  font-size: 0.85rem;
  color: #57606a;
  margin: -4px 0 12px;
}
.search-status:empty { margin: 0; }

/* Low-confidence fallback banner. Shown in the hero when our routing tiers
   can't place a query - offers an unfiltered Amazon search so the visitor
   isn't stranded. Uses the same orange accent as the Amazon-only toggle so it
   reads as an Amazon-related affordance, not an error. */
/* The fallback always sits on the dark search hero (green/blue/navy per theme),
   so it uses neutral light-on-dark styling that reads on all three. */
.search-fallback {
  max-width: 820px;
  margin: 14px auto 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.95rem;
  text-align: left;
  line-height: 1.4;
}
.search-fallback[hidden] { display: none; }
.search-fallback .info-tip-icon {
  background: var(--hero-accent);
  color: #1f2328;
  flex: 0 0 auto;
}
.search-fallback-msg { flex: 1 1 220px; min-width: 0; }
/* The "Search <store> directly" escape hatch is the primary action - the bright
   hero accent (orange/yellow/gold per theme) so it pops on the dark hero. */
.search-fallback-btn {
  font: inherit;
  color: #1f2328;
  background: var(--hero-accent);
  border: 0;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: filter 0.15s;
}
.search-fallback-btn:hover,
.search-fallback-btn:focus-visible { filter: brightness(1.08); outline: none; }
/* Trusted-category chips (Tier-C suggestions) are secondary - a subtle outlined
   chip, distinct from the bright escape-hatch button above. */
.search-fallback-cat {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
.search-fallback-cat:hover,
.search-fallback-cat:focus-visible { background: rgba(255, 255, 255, 0.26); filter: none; }
.search-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 12px;
}
.affiliate-note {
  font-size: 0.8rem;
  color: #57606a;
  line-height: 1.5;
  margin: 0;
}
.search-meta-row .affiliate-note {
  text-align: right;
  white-space: nowrap;
  flex: none;
}
.search-meta-row .seller-group { white-space: nowrap; flex: none; }
.seller-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seller-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.seller-info:hover .info-tip-icon,
.seller-info:focus .info-tip-icon { background: var(--brand); color: #fff; }
.seller-info::after {
  content: "Blog: The case for shopping direct";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  /* display:none (not opacity:0) so the hidden, nowrap tooltip doesn't sit in
     layout and expand document scrollWidth - on mobile its right edge spilled
     past the viewport, letting iOS Safari zoom out to blank space. Matches the
     .info-tip-body reveal pattern. */
  display: none;
}
.seller-info:hover::after,
.seller-info:focus::after { display: block; }
/* Medium: the ~650px one-line note no longer fits beside the toggle. Keep it on
   the same row, pinned to the right (space-between), but let it wrap into a
   left-aligned paragraph block - capped so it stays a tidy block, and allowed to
   shrink if the row gets tight so it never overflows the toggle. */
@media (max-width: 940px) {
  .search-meta-row { gap: 48px; }
  .search-meta-row .affiliate-note {
    white-space: normal;
    text-align: left;
    flex: 0 1 auto;
    max-width: 50%;
  }
}
/* Mobile: the search bar spans the screen; stack the toggle above a full-width
   note. */
@media (max-width: 600px) {
  .search-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .search-meta-row .affiliate-note { max-width: none; }
}
.blog-disclaimer {
  font-size: 0.85rem;
  color: #8b949e;
  border-left: 3px solid #d0d7de;
  padding-left: 12px;
  margin: -6px 0 16px;
}
button {
  padding: 10px 18px;
  font-size: 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button:hover { background: var(--accent-hover); }

.seller-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #57606a;
  cursor: pointer;
  margin: 0;
  padding: 4px 0;
  user-select: none;
}
.seller-toggle:hover { color: var(--brand); }

/* The real checkbox is visually hidden but kept (JS reads .checked and persists
   it to localStorage); the .switch span is the painted track, its ::after the
   thumb. Sibling selectors drive the on/off state off the native :checked. */
.seller-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.seller-toggle .switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d0d7de;
  transition: background 0.15s ease;
}
.seller-toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.seller-cb:checked + .switch { background: var(--brand); }
.seller-cb:checked + .switch::after { transform: translateX(14px); }
.seller-cb:focus-visible + .switch {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Marketplaces with no first-party Amazon seller (no emi= value) gray the
   toggle out; renderMarketplaceUI sets the class + disabled state. */
.seller-toggle.disabled { opacity: 0.55; cursor: not-allowed; }
.seller-toggle.disabled:hover { color: #57606a; }

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  outline: none;
}
.info-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d0d7de;
  color: #57606a;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  /* The italic "i"'s dense mass (dot + stem) sits right of the glyph box center
     while only the thin serif foot reaches left, so flex-centering leaves it
     looking right-shifted. Trailing letter-spacing is included in the centered
     run, nudging the glyph ~0.5px left to optically center it (visible on hi-DPI). */
  letter-spacing: 1px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.info-tip:hover .info-tip-icon,
.info-tip:focus .info-tip-icon { background: #0969da; color: #fff; }

.info-tip-body {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: 320px;
  background: #ffffff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: default;
}
.info-tip-body em { color: #0969da; font-style: normal; font-weight: 600; }
.info-tip-body a { color: #0969da; }
.info-tip-body::before,
.info-tip-body::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}
.info-tip-body::before {
  bottom: 100%;
  border-bottom-color: #d0d7de;
}
.info-tip-body::after {
  bottom: calc(100% - 1px);
  border-bottom-color: #ffffff;
}
.info-tip:hover .info-tip-body,
.info-tip:focus .info-tip-body,
.info-tip:focus-within .info-tip-body { display: block; }

#status {
  font-size: 0.9rem;
  color: #57606a;
  margin-bottom: 12px;
  min-height: 1.2em;
}
.search-hero {
  text-align: center;
  background-color: var(--brand);
  background-image: var(--leaf-nav);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border-radius: 12px;
  padding: 52px 24px 26px;
  margin: 0 0 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
/* Umbrella ("brands") hero echoes the handshake logo: a large, darker line-art
   mark bleeding off the right edge behind the content. Scoped to the brands
   theme - the Amazon/Walmart heroes keep their leaf/flat backgrounds. */
body[data-site="brands"] .search-hero { position: relative; overflow: hidden; }
body[data-site="brands"] .search-hero > * { position: relative; z-index: 1; }
body[data-site="brands"] .search-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -56px;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  background: url("/static/mtb-handshake-outline.svg") no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 720px) {
  body[data-site="brands"] .search-hero::after {
    width: 200px;
    height: 200px;
    right: -64px;
    top: 30px;
    transform: none;
    opacity: 0.35;
  }
}

/* Page watermark: the same handshake mark as the hero with the domain wordmark
   below it, parked large in the upper-right background of every page EXCEPT the
   hero search/home (which is always tab=search). A fixed flex column, pulled in
   from the right edge so the whole lockup shows in view; the `contain`-sized mark
   is never cropped or flattened. z-index:-1 sits it above body::before's backdrop
   and below page content (which paints over it). */
.page-watermark { display: none; }
/* One opacity on the container so the wordmark matches the mark exactly (same
   faint navy). */
body:not([data-tab="search"]) .page-watermark {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 70px;
  right: 28px;
  z-index: -1;
  pointer-events: none;
  color: #14213d;
  opacity: 0.08;
}
.page-watermark-mark {
  width: 480px;
  height: 480px;
  background: url("/static/mtb-handshake-outline.svg") no-repeat center / contain;
}
.page-watermark-label {
  margin-top: -24px;          /* small gap below the hands (the SVG leaves bottom padding) */
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  body:not([data-tab="search"]) .page-watermark {
    top: 88px;
    right: 8px;
    opacity: 0.07;
  }
  .page-watermark-mark { width: 285px; height: 285px; }
  .page-watermark-label { margin-top: -14px; font-size: 1.3rem; }
}

.search-heading {
  margin: 0 0 10px;
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-accent { color: var(--hero-accent); white-space: nowrap; }
.hero-brand {
  color: var(--hero-accent);
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-brand-out { opacity: 0; transform: translateY(-4px); }
/* Static heading for a custom scope: drop the rotating brand + its leading space
   and the trailing period so the line reads "Your favorite brands on Amazon." */
.search-heading.hero-static #hero-brand,
.search-heading.hero-static #hero-suffix { display: none; }
.search-subheading {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--on-brand-muted);
}
@media (max-width: 600px) {
  .search-hero { padding: 42px 18px 21px; border-radius: 10px; margin-bottom: 18px; }
  .search-heading { font-size: 1.5rem; }
  .search-subheading { font-size: 1rem; }
}

/* Search controls now live inside the dark hero - constrain to a centered
   column and recolor text/affordances for legibility on dark green. */
.search-hero #search-form { max-width: 820px; margin: 40px auto 0; }
.search-hero .search-meta-row { max-width: 820px; margin: 14px auto 0; text-align: left; }
.search-hero .search-status { max-width: 820px; margin: 10px auto 0; text-align: left; }
.search-hero .affiliate-note,
.search-hero .seller-toggle { color: var(--on-brand-muted); }
.search-hero .seller-toggle:hover { color: #fff; }
.search-hero .search-status { color: var(--on-brand-muted); }
/* --hero-accent is the "pops on the dark hero" token (the rotating brand name's
   color); use it for the checked track so the "on" state stays legible on every
   palette - notably brands/umbrella, whose --accent is navy = the hero bg. */
.search-hero .seller-cb:checked + .switch { background: var(--hero-accent); }
.search-hero .seller-info:hover .info-tip-icon,
.search-hero .seller-info:focus .info-tip-icon { background: var(--accent); color: #1f2328; }

/* Example-search suggestions: quiet inline product examples under the box that
   nudge product-searches over brand-name searches. Styled as plain text links
   (site convention: underline on hover) - a suggestion, not a button row.
   Clicking one fills the box and fires the search. */
.search-examples {
  max-width: 820px;
  margin: 24px auto 0;
  font-size: 0.9rem;
  color: var(--on-brand-muted);
  line-height: 1.7;
}
.search-examples-label { margin-right: 5px; }
.search-examples-sep { color: var(--on-brand-muted); opacity: 0.5; padding: 0 7px; }
.search-example-chip {
  font: inherit;
  color: var(--on-brand-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.search-example-chip:hover,
.search-example-chip:focus-visible { background: none; color: #fff; text-decoration: underline; }
/* Mobile: show two examples, not three - the third wraps to a second line and
   squashes the hero. Hides the last chip and the separator before it. */
@media (max-width: 600px) {
  .search-example-chip:last-of-type,
  .search-examples-sep:last-of-type { display: none; }
}

.about {
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2328;
}
.about h2 { margin: 8px 0 12px; font-size: 1.4rem; }
.about h3 { margin: 28px 0 8px; font-size: 1.05rem; color: #1f2328; }
.about p  { margin: 0 0 14px; }
.about ul { margin: 0 0 14px 0; padding-left: 22px; }
.about li { margin-bottom: 6px; }
.about a  { color: #0969da; text-decoration: none; }
.about a:hover { text-decoration: underline; }
.about .legal-meta {
  color: #8b949e;
  font-size: 0.82rem;
  font-style: italic;
  margin-top: -8px;
  margin-bottom: 18px;
}

/* --- Category landing pages (/brands/<slug>) ---------------------------- */
.brands-page { max-width: 760px; }
.brands-page h1 { margin: 4px 0 12px; font-size: 1.6rem; line-height: 1.25; }
.brands-page h2 { font-size: 1.15rem; margin: 26px 0 10px; }
.brands-eyebrow { font-size: 0.8rem; color: #8b949e; margin: 0 0 4px; }
.brands-eyebrow a { color: var(--brand-hover); text-decoration: none; }
.brands-eyebrow a:hover { text-decoration: underline; }
.brands-intro { font-size: 1rem; }
.brands-cta-row { margin: 16px 0 4px; }
.brands-grid {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brands-grid li {
  background: #eef2ef;
  border: 1px solid #d4ddd6;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.9rem;
  color: #1f2328;
}
.brands-grid li.brands-extra { display: none; }
.brands-grid.expanded li.brands-extra { display: inline-block; }
.brands-expand-row { margin: 2px 0 8px; }
.brands-expand {
  font: inherit;
  font-size: 0.9rem;
  color: #0969da;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.brands-expand:hover { text-decoration: underline; }
.brands-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.brands-related-list a { color: #0969da; text-decoration: none; }
.brands-related-list a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .brands-page h1 { font-size: 1.35rem; }
  .brands-cta-row .primary-btn { width: 100%; }
}

/* --- Blog layout (sidebar + selected article) --------------------------- */
.blog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1000px;
}
.blog-sidebar {
  position: sticky;
  top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eaeef2;
  border-radius: 10px;
}
.blog-sidebar-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: #1f2328;
  letter-spacing: 0.01em;
}
.blog-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blog-nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2328;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.blog-nav-item:hover { background: #f5f7fa; }
.blog-nav-item.active {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
}
.blog-nav-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.blog-nav-date {
  font-size: 0.75rem;
  color: #8b949e;
}
.blog-content {
  min-width: 0;
  background: #fff;
  border: 1px solid #eaeef2;
  border-radius: 10px;
  padding: 24px 28px;
}
.blog-entry { display: none; }
.blog-entry.active { display: block; }
.blog-entry h3 { margin: 4px 0 12px; font-size: 1.35rem; }
.blog-entry h4 { margin: 22px 0 8px; font-size: 1rem; color: #1f2328; }
.blog-author {
  color: var(--brand-hover);
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 720px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .blog-sidebar {
    position: static;
    padding: 12px;
  }
  .blog-content { padding: 18px 18px; }
  .blog-nav-item { padding: 8px 10px; }
}

/* --- Featured blog reader on the search page ---------------------------- */
.featured-blog { margin-top: 24px; }
.featured-blog-eyebrow {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-hover);
}
.featured-blog-inner {
  display: grid;
  grid-template-columns: 1fr 248px;
  gap: 24px;
  align-items: start;
}
.featured-article {
  min-width: 0;
  max-width: none;
  background: #fff;
  border: 1px solid #eaeef2;
  border-radius: 10px;
  padding: 22px 26px;
  max-height: 460px;
  overflow-y: auto;
}
.featured-article h3 { margin: 4px 0 12px; font-size: 1.3rem; }
.featured-article h4 { margin: 20px 0 8px; font-size: 1rem; color: #1f2328; }
.featured-blog-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.featured-blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.featured-blog-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  color: #1f2328;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.featured-blog-link:hover { background: #f5f7fa; }
.featured-blog-link.active { background: var(--brand-tint); border-color: var(--brand-soft); }
.featured-blog-link-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.featured-blog-link-date { font-size: 0.74rem; color: #8b949e; }
.featured-blog-all {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0969da;
  text-decoration: none;
}
.featured-blog-all:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .featured-blog-inner { grid-template-columns: 1fr; }
  .featured-blog-rail { position: static; }
  .featured-blog-list { display: none; }
  .featured-blog-all { align-self: center; margin-top: 6px; }
  .featured-article { max-height: 380px; padding: 18px 18px; }
}

.tier { margin: 24px 0; }
.tier.hidden { display: none; }

#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 16px;
  padding: 12px;
}
#pagination.hidden { display: none; }
#pagination button {
  font-size: 0.9rem;
  padding: 8px 16px;
  background: #fff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
#pagination button:hover:not(:disabled) { border-color: #0969da; color: #0969da; }
#pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
#page-indicator { font-size: 0.9rem; color: #57606a; font-weight: 600; }
.tier h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.tier-sub {
  color: #57606a;
  font-size: 0.85rem;
  font-weight: 400;
}
.tier-count {
  color: #57606a;
  font-size: 0.85rem;
  font-weight: 500;
}
.tier-count:empty { display: none; }
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge.trusted  { background: #d1f4e0; color: #0f5132; }
.badge.ok       { background: #fff3cd; color: #664d03; }
.badge.filtered { background: #f8d7da; color: #842029; }
.toggle-tier {
  background: transparent;
  color: #57606a;
  border: 1px solid #d0d7de;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
}
.toggle-tier:hover { border-color: #0969da; color: #0969da; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.grid.hidden { display: none; }
.card {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card.trusted  { border-left: 4px solid #1a7f37; }
.card.ok       { border-left: 4px solid #bf8700; }
.card.filtered { border-left: 4px solid #cf222e; opacity: 0.85; }

.card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #f7f7f8;
  border-radius: 4px;
}
.card .title {
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 500;
  color: #1f2328;
  text-decoration: none;
}
.card .title:hover { color: #0969da; text-decoration: underline; }
.card .brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 2px;
  background: transparent;
  border: none;
  padding: 0;
}
.card .brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.005em;
}
.card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #57606a;
}
.card .meta .price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2328;
}

/* Per-card brand controls - visitor's verify/hide toggle for the card's brand. */
.card .brand-controls {
  border-top: 1px solid #eaeef2;
  padding-top: 8px;
  margin-top: 4px;
}

.brand-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.brand-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #d0d7de;
  color: #57606a;
  cursor: pointer;
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
  min-height: 28px;
}
.brand-btn:hover:not(:disabled) { background: #f6f8fa; border-color: #8b949e; }
.brand-btn.trust:hover:not(:disabled) { background: #eafaf0; color: #1a7f37; border-color: #1a7f37; }
.brand-btn.block:hover:not(:disabled) { background: #fdeff0; color: #cf222e; border-color: #cf222e; }
.brand-btn.trust.active {
  background: #d1f4e0;
  color: #0f5132;
  border-color: #1a7f37;
}
.brand-btn.block.active {
  background: #f8d7da;
  color: #842029;
  border-color: #cf222e;
}
.brand-btn:disabled { opacity: 0.6; cursor: wait; }
.brand-btn.readonly { cursor: default; }
.brand-btn.readonly:hover { background: #fff; border-color: #d0d7de; color: #57606a; }
.brand-btn.trust.active.readonly:hover { border-color: #1a7f37; color: #0f5132; }
.brand-btn.block.active.readonly:hover { border-color: #cf222e; color: #842029; }

.brand-name-missing {
  font-weight: 500;
  color: #8b949e;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* --- Lists tab --------------------------------------------------------------- */
.brands-help {
  color: #57606a;
  font-size: 0.85rem;
  margin: -4px 0 14px;
}
#brand-counts { font-weight: 600; color: #1f2328; }

.your-list { margin-bottom: 32px; }

.your-list-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 2px 4px 2px 0;
  border-radius: 6px;
  cursor: text;
  max-width: 100%;
}
.your-list-title-row:hover { background: rgba(9, 105, 218, 0.06); }
.your-list-title-row:focus-within { background: rgba(9, 105, 218, 0.08); }

.your-list-title {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.01em;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  margin: 0;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 4px;
}
.your-list-title::placeholder {
  color: #1f2328;
  font-weight: 700;
  opacity: 1;
}
.your-list-title:focus::placeholder {
  color: #8b949e;
  font-weight: 500;
}
.your-list-title:focus { background: #fff; box-shadow: inset 0 0 0 1px #0969da; }

.title-edit-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  flex-shrink: 0;
  transition: color 0.15s;
}
.your-list-title-row:hover .title-edit-hint,
.your-list-title-row:focus-within .title-edit-hint,
.your-list-desc-row:hover .title-edit-hint,
.your-list-desc-row:focus-within .title-edit-hint { color: #0969da; }

.your-list-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  padding: 2px 4px 2px 0;
  border-radius: 6px;
  cursor: text;
  max-width: 100%;
}
.your-list-desc-row:hover { background: rgba(9, 105, 218, 0.06); }
.your-list-desc-row:focus-within { background: rgba(9, 105, 218, 0.08); }
.your-list-desc {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  color: #57606a;
  line-height: 1.4;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.7em;
  resize: none;
  overflow: hidden;
  border-radius: 4px;
}
.your-list-desc::placeholder { color: #8b949e; opacity: 1; }
.your-list-desc:focus { background: #fff; box-shadow: inset 0 0 0 1px #0969da; color: #1f2328; }
.your-list-desc-row .title-edit-hint { margin-top: 3px; }

#brand-search,
#popular-list-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656d76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
  background-size: 18px 18px;
}
#brand-search:focus,
#popular-list-search:focus { outline: 2px solid #0969da; outline-offset: -1px; }

#brand-results {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#brand-results.hidden { display: none; }
#brand-results .empty {
  color: #8b949e;
  font-size: 0.88rem;
  padding: 8px 12px;
  text-align: center;
}

.your-list-preview {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  max-height: 270px;
  overflow-y: auto;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
}
.your-list-preview.hidden { display: none; }
.your-list-preview .brand-row {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #eaeef2;
  padding: 8px 12px;
}
.your-list-preview .brand-row:last-child { border-bottom: none; }
.your-list-preview .empty {
  color: #8b949e;
  font-size: 0.88rem;
  padding: 14px 12px;
  text-align: center;
}

.brand-row {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 8px 12px;
}
.brand-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-row-name { font-weight: 500; }
.brand-row-name em { color: #57606a; font-size: 0.82rem; font-weight: 400; }
.brand-row-source {
  font-size: 0.75rem;
  color: #8b949e;
}

/* --- Lists tab: Your List toolbar ------------------------------------------ */
.your-list-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #57606a;
  margin: 4px 0 12px;
}
.your-list-field input,
.your-list-field textarea {
  padding: 8px 10px;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}
.your-list-field input:focus,
.your-list-field textarea:focus {
  outline: 2px solid #0969da;
  outline-offset: -1px;
}
.your-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.your-list-actions .actions-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.your-list-status {
  display: block;
  font-size: 0.82rem;
  color: #57606a;
  min-height: 1.1em;
  margin-top: 8px;
}
.your-list-status[data-kind="ok"] { color: #0f5132; }
.your-list-status[data-kind="error"] { color: #842029; }

/* --- toast notifications --------------------------------------------------- */
/* Transient top-of-screen confirmations for list edits (add/remove/rename).
   Fixed + centered, stacked newest-on-top, pointer-events only on the pills so
   they never block clicks underneath. */
.toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 9px 14px;
  background: #fff;
  color: #1f2328;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #d0d7de;
  border-left: 4px solid #1a7f37;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 35, 40, 0.18);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: #cf222e; }
.toast.info { border-left-color: var(--brand); }
.toast::before {
  content: "✓";
  flex: none;
  font-weight: 700;
  color: #1a7f37;
}
.toast.error::before { content: "!"; color: #cf222e; }
.toast.info::before { content: ""; display: none; }
.toast-text { line-height: 1.35; word-break: break-word; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.18s ease; transform: none; }
  .toast.show { transform: none; }
}

/* Bottom-left notice shown when the localStorage probe fails at boot. Dark
   header green so it stands out against the white page/article background. */
.storage-notice {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 2100;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-hover);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 35, 40, 0.35);
}
.storage-notice.ok { border-left-color: #7ee2a8; }
/* On the unified home the palette retints on store hover; let the fixed notice
   popups (e.g. the "Shopping in <country>" note) fade with everything else
   instead of snapping to the new color. */
body.unified-search .storage-notice {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.storage-notice-title {
  margin: 0 26px 6px 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.storage-notice-body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.storage-notice-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: none;
  border-radius: 6px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.storage-notice-close:hover { background: var(--brand-hover); color: #fff; }
.storage-notice-steps {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.storage-notice-steps ol {
  margin: 0;
  padding-left: 18px;
}
.storage-notice-steps li { margin: 2px 0; }
.storage-notice-refresh {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
}
.storage-notice-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.storage-notice-actions[hidden] { display: none; }
.storage-notice-actions .ghost-btn { text-decoration: none; }
.storage-notice .primary-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.storage-notice .primary-btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.storage-notice .ghost-btn {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.storage-notice .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Generic button variants used across the lists UI. */
.ghost-btn,
.brand-io-import.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 14px;
  background: #fff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
}
.ghost-btn:hover { background: #f0f6fc; border-color: #0969da; color: #0969da; }
.ghost-btn:disabled { opacity: 0.5; cursor: wait; }
.primary-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.primary-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.primary-btn:disabled { opacity: 0.6; cursor: wait; }
.danger-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: #fff;
  color: #842029;
  border: 1px solid #cf222e;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.danger-btn:hover { background: #f8d7da; }

/* --- Lists tab: Popular Lists table --------------------------------------- */
.lists-section-heading {
  font-size: 1.05rem;
  color: #1f2328;
  margin: 28px 0 4px;
  padding-top: 16px;
  border-top: 1px solid #d0d7de;
}
.popular-lists-section { margin-bottom: 24px; }

.popular-lists {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9rem;
}
.popular-lists thead {
  background: #f6f8fa;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #57606a;
}
.popular-lists th,
.popular-lists td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #eaeef2;
  vertical-align: top;
}
.popular-lists tbody tr:last-child td { border-bottom: none; }
.popular-lists tbody tr:hover { background: #fafbfc; }
.col-pop { width: 110px; }
/* Holds Export + the "Edit a copy" button side by side. .list-actions can wrap
   as a fallback, but at this width it normally doesn't. */
.col-actions { width: 256px; }
.list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.list-actions > button { white-space: nowrap; }
.col-title { width: 22%; }
.col-desc { color: #57606a; overflow: hidden; }
.col-title strong {
  color: #1f2328;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popular-list-desc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.popular-list-meta {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 2px;
}
.popular-list-pubdate {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 6px;
}
/* Built-in/default list, pinned to the top of the table */
.popular-list-row.is-builtin td { background: #f5f9ff; }
.popular-list-row.is-builtin .col-pop { box-shadow: inset 3px 0 0 #1c3d5a; }
.popular-list-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.builtin-default-tag[disabled] {
  cursor: default;
  opacity: 1;
  color: #1c3d5a;
  border-color: #d7e3f5;
  background: #eef4fc;
}
.popular-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}
.popular-list-pagination.hidden { display: none; }
.popular-list-pagination .ghost-btn { font-size: 0.82rem; padding: 5px 12px; }
#popular-page-indicator {
  font-size: 0.85rem;
  color: #57606a;
  font-weight: 500;
}
/* "Uses" cell: a usage bar (scaled to the most-used list in view) over the
   this-month count. */
.uses-cell { display: flex; flex-direction: column; gap: 1px; }
.popularity {
  height: 6px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.popularity-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-hover), var(--brand-soft));
  transition: width 0.2s ease;
}
/* The most-used list in view runs hot. */
.popularity.hot .popularity-fill {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
.uses-month { font-size: 0.74rem; color: #8b949e; }
.uses-flame { font-size: 0.95rem; line-height: 1; vertical-align: -0.05em; }

/* Community-lists search + sort controls */
.popular-lists-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.popular-lists-controls #popular-list-search { flex: 1; width: auto; min-width: 160px; margin: 0; }
.popular-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #57606a;
  white-space: nowrap;
}
#popular-sort {
  font-size: 0.82rem;
  padding: 5px 8px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  color: #1f2328;
  cursor: pointer;
}

/* Published-lists kind/provenance filters */
.popular-lists-filters {
  position: relative;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 24px;
  justify-content: start;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: #57606a;
}
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.filter-toggle:hover { color: var(--brand); }
/* The filter icons sit near the panel's left edge, where the default centered
   320px popover spills off-screen (and worse on mobile). Anchor the tooltip to
   the filters block's left edge instead - keeping .info-tip/.filter-toggle
   unpositioned makes .popular-lists-filters the offset parent - and drop it
   just below the block. Reset white-space (it inherits the label's nowrap) so
   the text wraps inside max-width; responsive cap + left:0 keep it on screen at
   any width; drop the now-misaligned arrow. */
.filter-toggle .info-tip { position: static; }
.filter-toggle .info-tip-body {
  white-space: normal;
  left: 0;
  right: auto;
  transform: none;
  top: calc(100% + 8px);
  max-width: min(320px, calc(100vw - 32px));
}
.filter-toggle .info-tip-body::before,
.filter-toggle .info-tip-body::after { display: none; }
/* Switch toggle - mirrors the search-page #amazon-only-toggle: the real
   checkbox is visually hidden, the .switch span is the painted track. */
.filter-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.filter-toggle .switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d0d7de;
  transition: background 0.15s ease;
}
.filter-toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.filter-toggle input:checked + .switch { background: var(--brand); }
.filter-toggle input:checked + .switch::after { transform: translateX(14px); }
.filter-toggle input:focus-visible + .switch {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.col-actions .ghost-btn,
.col-actions .primary-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
}
.empty-row td {
  text-align: center;
  color: #8b949e;
  font-size: 0.88rem;
  padding: 16px;
  background: #fff;
}
.muted { color: #8b949e; font-style: italic; }

@media (max-width: 720px) {
  .popular-lists thead { display: none; }
  .popular-lists,
  .popular-lists tbody,
  .popular-lists tr,
  .popular-lists td { display: block; width: 100%; }
  .popular-lists tr {
    border-bottom: 1px solid #eaeef2;
    padding: 8px 4px;
  }
  .popular-lists td { border: none; padding: 4px 12px; }
  .col-pop, .col-actions { width: auto; }
  .col-actions { text-align: left; }
  .list-actions { justify-content: flex-start; }
}

/* --- Modal -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
}
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 22px 22px 18px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.modal-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: #1f2328;
}
.modal-card p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: #57606a;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- Lists tab: active-list toggles --------------------------------------- */
.lists-section-heading.first { border-top: none; padding-top: 0; margin-top: 4px; }

.search-submit-row { display: flex; gap: 8px; align-items: stretch; }

/* --- /search in-bar list scope chip --------------------------------------- */
/* The left segment of the search pill: shows the active list (built-in badged
   "Recommended") and opens the scope picker. Sits flush inside .search-input-wrap
   with a divider against the text input. */
.search-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 56%;
  padding: 0 11px;
  border: none;
  border-right: 1px solid #e1e6eb;
  background: #f6f8fa;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.search-scope-chip:hover { background: var(--brand-tint); }
.search-scope-chip:focus-visible {
  outline: none;
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.search-scope-icon { flex: none; color: #57606a; }
/* Shrink the name first (only very long custom names ellipsize) so the caret +
   Recommended badge always stay visible. */
.scope-bar-name { flex: 0 1 auto; min-width: 1.5em; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-bar-caret { flex: none; color: #57606a; }
@media (max-width: 600px) {
  /* Stack the chip above the input (full-width each, divider between) so the
     list name + Recommended badge stay fully readable on a phone. */
  #search-form .search-input-wrap { flex-direction: column; }
  .search-scope-chip {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    padding: 9px 12px;
    border-right: none;
    border-bottom: 1px solid #e1e6eb;
  }
  /* Drop the decorative icon on a phone to give the name room beside the badge. */
  .search-scope-icon { display: none; }
  .scope-bar-name { max-width: none; }
}

/* --- /search scope picker modal ------------------------------------------- */
/* A browsable mirror of the Published Lists table; picking a row subscribes to
   that list and makes it the active search scope. */
.scope-picker-card { max-width: 720px; }
.scope-picker-card > p { margin-bottom: 12px; }
.scope-picker-card #scope-picker-search { width: 100%; margin: 0 0 12px; }
.scope-picker-table-wrap {
  max-height: 56vh;
  overflow-y: auto;
  margin-bottom: 14px;
  border: 1px solid #eaeef2;
  border-radius: 8px;
}
.scope-picker-table { margin: 0; }
.scope-picker-table thead th { position: sticky; top: 0; z-index: 1; }
.popular-list-title-strong { font-weight: 700; color: #1f2328; }
.scope-pick-btn { white-space: nowrap; }
.scope-pick-btn.is-active { color: #1a7f37; border-color: #c3e6cb; background: #f0fbf3; }
tr.is-active-scope { background: #f6fbf7; }

/* Section dividers separating the visitor's custom lists from published ones.
   The top border is the "clear horizontal bar" between the two groups. */
.scope-picker-table .scope-picker-section td {
  padding: 7px 12px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #57606a;
  background: #f0f3f6;
  border-top: 2px solid #afb8c1;
}
.scope-picker-table tbody tr.scope-picker-section:first-child td { border-top: none; }
.scope-custom-tag { font-size: 0.7rem; font-style: italic; color: #8b949e; }
/* Compact trash button on custom rows - matches the Lists-tab delete affordance. */
.scope-pick-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: none;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  color: #57606a;
  cursor: pointer;
}
.scope-pick-delete:hover { background: #fbeaec; border-color: #f1b0b7; color: #842029; }
/* The shared confirm modal must stack above an already-open picker modal. */
#confirm-modal { z-index: 120; }

/* --- My Lists selector ----------------------------------------------------- */
.my-lists-section { margin-bottom: 28px; }
#new-list-btn { flex: none; margin-top: 4px; width: 28%; justify-content: center; }
@media (max-width: 600px) { #new-list-btn { width: 100%; } }
.my-lists-empty {
  list-style: none;
  padding: 14px 13px;
  border: 1px dashed #d0d7de;
  border-radius: 8px;
  color: #57606a;
  font-size: 0.88rem;
}
/* The editor hides when no custom list is selected - My Lists shows its
   create prompt instead. */
.your-list.list-empty { display: none; }

/* --- brand detail link + modal -------------------------------------------- */
.brand-detail-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: #1f2328;
  text-align: left;
  cursor: pointer;
}
.brand-detail-link:hover { color: #0f5132; text-decoration: underline; }
.brand-detail-link:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; border-radius: 3px; }

.confirm-modal-card { max-width: 360px; }
.publish-confirm-card { max-width: 400px; }
.publish-confirm-export-hint { margin-bottom: 20px; }
.inline-text-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #0969da;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inline-text-btn:hover { color: #0550ae; }
.brand-detail-card { max-width: 460px; }
.brand-detail-source { font-size: 0.82rem; color: #57606a; margin: 2px 0 16px; }
.brand-detail-body { display: flex; flex-direction: column; gap: 16px; }
.brand-detail-section h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #57606a;
}
.brand-detail-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #8b949e; }
.recog-row { display: flex; align-items: center; gap: 10px; }
.recog-bar { flex: 1; height: 8px; border-radius: 999px; background: #eaecef; overflow: hidden; }
.recog-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.recog-value { flex: none; font-size: 0.82rem; color: #57606a; font-variant-numeric: tabular-nums; }
.brand-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-chip { font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: #def7e6; color: #0f5132; }
.brand-detail-body .muted { color: #8b949e; font-size: 0.88rem; margin: 0; }

/* --- community-list title link + detail modal ----------------------------- */
.popular-list-title-link {
  display: block;
  max-width: 100%;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: -2px -6px;
  font: inherit;
  font-weight: 700;
  color: #1f2328;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popular-list-title-link:hover { color: #0f5132; text-decoration: underline; }
.popular-list-title-link:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; border-radius: 3px; }

.list-detail-card { max-width: 480px; }
.list-detail-meta { font-size: 0.82rem; color: #57606a; margin: 2px 0 8px; }
.list-detail-desc { font-size: 0.9rem; color: #1f2328; margin: 0 0 12px; }
.list-detail-desc.muted { color: #8b949e; }
.list-detail-brands {
  list-style: none;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
  color: #1f2328;
}
.list-detail-brands .muted { color: #8b949e; }
.list-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-actions-spacer { flex: 1; }
.list-detail-report { color: #842029; }
.list-detail-status { font-size: 0.82rem; min-height: 1.1em; margin: 8px 0 0; color: #57606a; }
.list-detail-status[data-kind="ok"] { color: #0f5132; }
.my-lists-help {
  font-size: 0.82rem;
  color: #57606a;
  margin: 0 0 12px;
}
.my-lists { list-style: none; margin: 0; padding: 0; }
.my-list-item { display: flex; align-items: stretch; gap: 8px; margin: 0 0 8px; }
.my-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.my-list-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.my-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  align-self: stretch;
  padding: 0;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  color: #57606a;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.my-list-action:hover { background: #f6f8fa; color: #1f2328; }
.my-list-action-delete:hover { background: #fbeaec; border-color: #f1b0b7; color: #842029; }
.my-list-row:hover { background: #f6f8fa; }
.my-list-row.selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: #f3f7f4;
}
.my-list-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.my-list-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2328;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-list-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.my-list-count {
  flex: none;
  font-size: 0.8rem;
  color: #57606a;
}

/* List badges (kind + provenance) */
.list-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.badge-smart { background: #def7e6; color: #0f5132; }
.badge-simple { background: #eaecef; color: #57606a; }
.badge-builtin { background: #e7eef9; color: #1c3d5a; }
.badge-public { background: #fde7d3; color: #8a5a00; }
.badge-custom { background: #f3e8fb; color: #5a2d82; }
.badge-recommended { background: var(--brand); color: #fff; }

/* --- selected-list editor chrome ------------------------------------------ */
.selected-list-note {
  font-size: 0.82rem;
  color: #57606a;
  margin: 0 0 10px;
  min-height: 1.1em;
}
/* Read-only lists (built-in smart, subscribed public): hide the edit/publish
   controls and the rename/description pencils; the brand table stays for
   browsing + "is this brand on the list?" searches. */
.your-list.list-readonly .your-list-actions,
.your-list.list-readonly .title-edit-hint { display: none; }
.your-list.list-readonly .your-list-title,
.your-list.list-readonly .your-list-desc {
  background: transparent;
  cursor: default;
}

/* --- header retailer switcher (Amazon ⇄ Walmart) -------------------------- */
.retailer-switch-group { display: inline-flex; gap: 4px; }
.retailer-switch {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0.78;
  white-space: nowrap;
}
.retailer-switch:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.retailer-switch.active { opacity: 1; background: rgba(255, 255, 255, 0.2); }

/* Per-vertical structure (colors are handled by the palette variables above).
   The country picker is shared by both store verticals AND the unified home, but
   has no place on the neutral content pages (brands theme without .unified-search
   - i.e. Lists/Blog/FAQ/Terms/Privacy). The "only sold by Amazon.com" filter is
   Amazon-only. */
body[data-site="brands"]:not(.unified-search) .marketplace-menu { display: none; }
body[data-site="walmart"] .amazon-only-group { display: none; }
/* Countries Walmart can't serve: grayed out in the picker on the Walmart
   vertical (still listed - the pick is a global preference for Amazon). */
.marketplace-option.unsupported { opacity: 0.4; }
.marketplace-option.unsupported:hover { background: transparent; }
.marketplace-option.unsupported .marketplace-option-domain {
  font-style: italic;
}

/* --- unified home search (umbrella "/"): one query, two store buttons ------ */
/* The search hero shows a single submit button on the verticals;
   body.unified-search swaps it for an Amazon button + a Walmart button. */
.unified-store { display: none; }
body.unified-search .single-submit { display: none; }
/* The store buttons live on their own full-width row BELOW the search box (the
   form goes column). Each store is a WIDE column: a big button that fills half
   the row + its own "opens on <store>" note beneath. */
body.unified-search #search-form { flex-direction: column; }
body.unified-search .search-submit-row {
  width: 100%;
  gap: 16px;
  align-items: flex-start;
}
body.unified-search .unified-store {
  display: flex;
  flex: 1;                        /* wide: each fills half the row */
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.unified-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 12px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.unified-amazon { background: #ff9900; color: #1f2328; }   /* literal store colors */
.unified-amazon:hover { background: #e68a00; }
.unified-walmart { background: #0071dc; color: #fff; }
/* Hover flips Walmart blue -> Walmart spark yellow (dark text for contrast). */
.unified-walmart:hover { background: #ffc220; color: #1f2328; }
.unified-note { font-size: 0.8rem; color: var(--on-brand-muted); text-align: center; }
/* Each seller toggle shows in exactly one context: amazon-only on the Amazon
   vertical, walmart-only on the Walmart vertical, third-party on the unified home.
   Default-hide the two non-Amazon ones; the Amazon one shows via .seller-group and
   is hidden on Walmart (above) + unified (below). */
.third-party-group,
.walmart-only-group { display: none; }
body[data-site="walmart"] .walmart-only-group { display: inline-flex; }
/* On the unified home the per-button notes replace the shared affiliate note, and
   the filter is reframed store-neutrally as "hide third party sellers". */
body.unified-search .amazon-only-group,
body.unified-search #affiliate-note { display: none; }
body.unified-search .third-party-group { display: inline-flex; }
@media (max-width: 600px) {
  /* Stack the two store columns full-width so the larger text never wraps. */
  body.unified-search .search-submit-row { flex-direction: column; align-items: stretch; }
}

/* --- unified home: hover-to-preview a store's full theme ------------------- */
/* Hovering (or keyboard-focusing) a store button previews that store's whole
   look: its palette (the variable overrides below, consumed by header/hero/etc.)
   plus a crossfading full-page background layer (.unified-bg-layers). Pure CSS
   via :has() - no JS. The two buttons keep their literal store colors so it's
   always clear which is which; this just dresses the rest of the page to match
   the store you're about to send your search to. */

/* Full-page background crossfade layers (Amazon's tropical leaves / Walmart's
   shelving watermark). Hidden + inert except on the unified home; both sit just
   above body::before's backdrop and below the page content. */
.unified-bg-layers { display: none; }
body.unified-search .unified-bg-layers {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.unified-bg-layers .ubg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Both layers are PNGs (not the leaf SVG): Chromium decodes/rasterizes a PNG
     fast enough to crossfade smoothly from opacity:0, whereas the full-viewport
     leaf vector rasterized mid-fade and snapped in ("flicked"). will-change
     keeps the layer warmed on its own compositor layer as a belt-and-suspenders. */
  will-change: opacity;
}
.unified-bg-layers .ubg-amazon {
  background-color: #f7f7f8;
  background-image: url("/static/leaves-bg.png");
}
.unified-bg-layers .ubg-walmart {
  background-color: #eef4fb;
  background-image: url("/static/walmart-stars.png");
  background-size: 200px 200px;   /* seamless star tile - repeat, don't stretch */
  background-repeat: repeat;
}
body.unified-search:has(.unified-amazon:is(:hover, :focus-visible)) .ubg-amazon { opacity: 1; }
body.unified-search:has(.unified-walmart:is(:hover, :focus-visible)) .ubg-walmart { opacity: 1; }

/* The nav leaf band crossfades via ::before instead of instant-swapping --leaf-nav
   (you can't transition background-image). It starts at opacity:0 and fades in on
   Amazon hover; header children are position:relative so they paint above it (a
   positioned child paints after the positioned ::before in tree order - no
   z-index needed, and adding one would wrap the nav in a stacking context that
   traps the country-picker dropdown below the search form). The hero
   carries NO foliage on the unified home - it just color-fades to green (the leaf
   experiments read as either a flat blob or clashed with the handshake), so its
   background-image is dropped and only background-color animates. */
body.unified-search .search-hero,
body.unified-search header { background-image: none; }
/* position:relative anchors the ::before leaf-nav layer; no overflow:hidden -
   the ::before is inset:0 + background:cover (can't paint outside its box), so
   clipping is unnecessary and would crop the country-picker dropdown, which is
   absolutely positioned in the header and hangs below it. */
body.unified-search header { position: relative; }
body.unified-search header > * { position: relative; }
body.unified-search header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/static/leaves-nav.svg");
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.unified-search:has(.unified-amazon:is(:hover, :focus-visible)) header::before {
  opacity: 1;
}

/* Smooth the palette-driven recolor on the big surfaces (header bar + hero box).
   Scoped to the unified home so navigation elsewhere keeps its instant swap. */
body.unified-search header,
body.unified-search .search-hero {
  transition: background-color 0.5s ease;
}

/* Amazon preview palette: forest green + orange. (No --leaf-nav here: the nav
   bar used to instant-swap the leaf SVG on hover, which "flicked" - it now just
   color-fades to green. The hero carries the foliage via its ::before layer.) */
body.unified-search:has(.unified-amazon:is(:hover, :focus-visible)) {
  --brand: #1a3d2e;
  --brand-hover: #2b5443;
  --brand-tint: #eef6f0;
  --brand-soft: #5b9277;
  --on-brand-muted: #cfe3d6;
  --accent: #ff9900;
  --accent-hover: #e68a00;
  --accent-bright: #ffb13c;
  --accent-dark: #b54708;
  --accent-text: #1f2328;
  --hero-accent: #ff9900;
}
/* Walmart preview palette: Walmart blue + spark yellow. */
body.unified-search:has(.unified-walmart:is(:hover, :focus-visible)) {
  --brand: #0071dc;
  --brand-hover: #004f9a;
  --brand-tint: #e7f1fc;
  --brand-soft: #4f9fe6;
  --on-brand-muted: #d6e6fa;
  --accent: #ffc220;
  --accent-hover: #e6ad12;
  --accent-bright: #ffd454;
  --accent-dark: #cc9a00;
  --accent-text: #1f2328;
  --hero-accent: #ffc220;
}

@media (prefers-reduced-motion: reduce) {
  .unified-bg-layers .ubg,
  body.unified-search header,
  body.unified-search header::before,
  body.unified-search .search-hero,
  body.unified-search .storage-notice { transition: none; }
}