/* Tacaro.
   One stylesheet, no framework, no build step.

   The site is about money, so numbers are the design: prices are large, set in tabular
   figures, and never compete with anything else on the card for attention. Everything
   else -- chrome, labels, navigation -- deliberately recedes.

   Light is the base and dark is selected rather than flipped, honouring both the OS
   setting and an explicit data-theme. The five chart series colours are the validated
   categorical palette (see charts.py); the verdict colours are a separate status set,
   and every one of them ships beside a written label, never as colour alone. */

/* Served from our own origin rather than from Google. A third-party stylesheet that then
   fetches a third-party font is two extra DNS lookups and two TLS handshakes before a
   single word can be painted, on a site whose whole promise is answering one question
   quickly. One 48KB variable subset, preloaded, covers every weight the design uses. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --surface:        #fbfaf7;
  --raised:         #ffffff;
  --sunken:         #f2f0ea;
  --border:         #e5e2d9;
  --border-strong:  #d0ccbf;
  --ink:            #14140f;
  --ink-soft:       #57544a;
  --ink-faint:      #868275;
  --brand:          #0d7a5f;
  --brand-deep:     #0a5f4a;
  --brand-wash:     #e6f3ee;
  --link:           #0a5f4a;

  --good-bg:        #e2f2e9;   --good-ink:   #0a5c3d;
  --best-bg:        #0d7a5f;   --best-ink:   #ffffff;
  --normal-bg:      #eeece6;   --normal-ink: #57544a;
  --high-bg:        #fdf0dc;   --high-ink:   #8a5a06;
  --learn-bg:       #eeece6;   --learn-ink:  #868275;

  --s0: #2a78d6; --s1: #eb6834; --s2: #1baf7a; --s3: #eda100; --s4: #e87ba4;
  --grid: #e6e4de;
  --marker: #a5a196;

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 76rem;
  --shadow: 0 1px 2px rgba(20,20,15,.04), 0 4px 14px rgba(20,20,15,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface:        #111110;
    --raised:         #1a1a18;
    --sunken:         #222220;
    --border:         #302f2b;
    --border-strong:  #46443e;
    --ink:            #f7f6f1;
    --ink-soft:       #aeaba0;
    --ink-faint:      #86837a;
    --brand:          #34b389;
    --brand-deep:     #34b389;
    --brand-wash:     #12291f;
    --link:           #4fc79b;

    --good-bg:        #12291f;   --good-ink:   #64d3a4;
    --best-bg:        #14876a;   --best-ink:   #ffffff;
    --normal-bg:      #262521;   --normal-ink: #aeaba0;
    --high-bg:        #2c2110;   --high-ink:   #e0aa55;
    --learn-bg:       #262521;   --learn-ink:  #86837a;

    --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #c98500; --s4: #d55181;
    --grid: #2b2a27;
    --marker: #6d6b64;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface:        #111110;
  --raised:         #1a1a18;
  --sunken:         #222220;
  --border:         #302f2b;
  --border-strong:  #46443e;
  --ink:            #f7f6f1;
  --ink-soft:       #aeaba0;
  --ink-faint:      #86837a;
  --brand:          #34b389;
  --brand-deep:     #34b389;
  --brand-wash:     #12291f;
  --link:           #4fc79b;

  --good-bg:        #12291f;   --good-ink:   #64d3a4;
  --best-bg:        #14876a;   --best-ink:   #ffffff;
  --normal-bg:      #262521;   --normal-ink: #aeaba0;
  --high-bg:        #2c2110;   --high-ink:   #e0aa55;
  --learn-bg:       #262521;   --learn-ink:  #86837a;

  --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #c98500; --s4: #d55181;
  --grid: #2b2a27;
  --marker: #6d6b64;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* Prices are compared down a column all over this site. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

a { color: var(--link); text-underline-offset: 2px; }

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.12;
     letter-spacing: -.022em; font-weight: 800; margin: 0 0 .6rem; }
h2 { font-size: 1.3rem; letter-spacing: -.012em; font-weight: 700; margin: 0; }
h3 { font-size: 1rem; margin: 0; }

.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }
.lede { font-size: 1.09rem; color: var(--ink-soft); max-width: 44rem; margin: 0; }
.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
           font-weight: 600; margin: 0 0 .3rem; }

.empty {
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.6rem; color: var(--ink-soft);
}
.empty p { margin: 0; }

.button {
  display: inline-block; background: var(--brand); color: #fff; font-weight: 600;
  padding: .7rem 1.15rem; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
}
.button:hover { background: var(--brand-deep); }

/* ---------------------------------------------------------------- chrome */

header.site {
  border-bottom: 1px solid var(--border); background: var(--raised);
  position: sticky; top: 0; z-index: 5;
}
header.site .bar {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding: .85rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 800;
  font-size: 1.16rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink);
}
.brand .mark { width: 26px; height: 26px; flex: none; }
.brand .mark rect { fill: var(--brand); }
.brand .mark path { stroke: #fff; }

header nav { display: flex; gap: 1.1rem; font-size: .93rem; margin-left: auto; }
header nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
header nav a:hover { color: var(--ink); }

.search { display: flex; align-items: stretch; flex: 1 1 10rem; max-width: 26rem;
          min-width: 0; }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: .95rem;
  padding: .5rem .85rem; border: 1px solid var(--border-strong);
  border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--surface); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.search button {
  display: grid; place-items: center; width: 2.6rem; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 0 10px 10px 0;
  background: var(--sunken); color: var(--ink-soft);
}
.search button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

main { padding: 1.5rem 0 3rem; }

footer.site { border-top: 1px solid var(--border); background: var(--raised); }
footer.site .foot {
  display: grid; gap: 1.5rem; padding: 2rem 0 2.5rem; font-size: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
footer.site p { margin: .3rem 0; }
.foot-brand { font-weight: 800; color: var(--ink); font-size: 1rem; }

/* ------------------------------------------------------------------ hero */

/* Centred, and the search is the largest thing on it. There is exactly one thing a
   visitor came here to do. The old hero was left-aligned at 46rem inside a 68rem page,
   which left the right-hand half of every desktop screen empty. */
.hero {
  padding: 3rem 0 1rem; max-width: 40rem; margin-inline: auto; text-align: center;
}
.hero h1 { margin-bottom: .75rem; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede { margin-inline: auto; }
.hero-search {
  display: flex; gap: .5rem; margin: 1.75rem auto 0; max-width: 34rem;
  background: var(--raised); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: .35rem; box-shadow: var(--shadow);
}
.hero-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.02rem; padding: .75rem .95rem;
  border: 0; background: transparent; color: var(--ink);
}
.hero-search input:focus { outline: 0; }
.hero-search:focus-within { border-color: var(--brand); }
.hero-search button {
  font: inherit; font-weight: 600; cursor: pointer; padding: .75rem 1.25rem;
  border: 0; border-radius: 10px; background: var(--brand); color: #fff;
  white-space: nowrap;
}
.hero-search button:hover { background: var(--brand-deep); }
.hero-stat { margin: 1.1rem 0 0; font-size: .92rem; color: var(--ink-faint); }
.hero-stat strong { color: var(--ink-soft); font-weight: 700; }

/* ------------------------------------------------------------- categories */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
         padding: 0; margin: 1rem 0 0; }
.chips { max-width: 100%; }
.chips a {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  max-width: 100%;
  font-size: .92rem; font-weight: 500; color: var(--ink);
  background: var(--raised); border: 1px solid var(--border);
  padding: .5rem .85rem; border-radius: 999px;
}
.chips a:hover { border-color: var(--brand); color: var(--brand-deep); }
.chip-count { font-size: .78rem; color: var(--ink-faint); }

.page-head { padding: .75rem 0 1.5rem; }
.section { margin-top: 2.5rem; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 .25rem;
}
.foot-note {
  margin: 4rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border);
  font-size: .9rem; max-width: 46rem; line-height: 1.6;
}
.section-note { margin: 0 0 1rem; font-size: .92rem; }
.more { font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; }

.starting {
  background: var(--brand-wash); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem; margin: 1.5rem 0;
  max-width: 44rem;
}
.starting h2 { margin-bottom: .5rem; }

.crumbs { font-size: .88rem; color: var(--ink-soft); padding: .5rem 0 1rem;
          display: flex; gap: .4rem; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ----------------------------------------------------------------- cards */

/* The min() is load-bearing. A bare minmax(13.5rem, 1fr) makes every column at least
   216px whether or not the screen has room, so on a 390px phone the grid lays out two
   columns and the whole page scrolls sideways under the reader. min(13.5rem, 100%) lets
   a column shrink to the container when that is all there is. */
.cards {
  list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
}
.card > a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: border-color .12s ease, transform .12s ease;
}
.card > a:hover { border-color: var(--brand); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card > a { transition: none; } }

/* The panel is a fixed height and clips, and the image fills it with object-fit rather
   than relying on a percentage max-height. A percentage there resolves against a grid
   area inside a flex item, which browsers size late: a tall product photo then spills
   out of the panel and lands on top of the title, which is unreadable and looks broken.

   Product photographs are mostly cut out on white, so the panel is white and stays out
   of their way. Stripes appear only where there is no photograph at all -- behind every
   one of them they read as texture on the product itself, which looked like a printing
   fault rather than a placeholder. */
.thumb {
  display: block; overflow: hidden; flex: none; background: #fff;
  border-bottom: 1px solid var(--border); padding: .75rem; height: 9.5rem;
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-image.is-empty {
  background:
    repeating-linear-gradient(45deg, var(--sunken) 0 10px, transparent 10px 20px) #fff;
}
.thumb.is-empty {
  background:
    repeating-linear-gradient(45deg, var(--sunken) 0 8px, transparent 8px 16px) #fff;
}

/* The price is the largest thing in the card and sits directly under the name, with the
   shop and any note beneath it in small type. The old order put the shop between the two,
   so the eye went name, shop, price -- and the shop is the least interesting of the
   three to somebody deciding whether to buy. */
.card-body {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .75rem .85rem .85rem; flex: 1;
}
.card-title {
  font-weight: 600; font-size: .92rem; line-height: 1.35; min-height: 2.5em;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.price-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
             margin-top: .15rem; }
.price { font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em; }
.card-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .35rem; font-size: .8rem; color: var(--ink-faint);
}
.card-store { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.card-note { font-size: .78rem; white-space: nowrap; }
.good-note { color: var(--good-ink); font-weight: 600; }

/* Verdict badges. Status colours, always with the word beside them -- nobody is asked
   to know that green means good. */
.badge {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.badge.big { font-size: .9rem; padding: .35rem .8rem; margin: 0 0 .5rem; }
.b-lowest   { background: var(--best-bg);   color: var(--best-ink); }
.b-good     { background: var(--good-bg);   color: var(--good-ink); }
.b-normal   { background: var(--normal-bg); color: var(--normal-ink); }
.b-high     { background: var(--high-bg);   color: var(--high-ink); }
.b-learning { background: var(--learn-bg);  color: var(--learn-ink); }

/* ------------------------------------------------------------ categories */

.cats { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem;
        grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.cats a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .95rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--raised); text-decoration: none; color: var(--ink); font-size: .93rem;
}
.cats a:hover { border-color: var(--brand); }
.cat-name { line-height: 1.35; }
.cat-count { color: var(--ink-faint); font-size: .85rem; flex: none; }

/* --------------------------------------------------------------- product */

.product-head {
  display: grid; gap: 2rem; align-items: start; margin-bottom: 1rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}
/* Square, and it stays square. `aspect-ratio` alone is only honoured while the content
   fits, so a tall photograph stretched the panel to twice the height of the facts beside
   it and left a lake of white under them. */
.product-image {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  aspect-ratio: 1; min-height: 0; overflow: hidden; padding: 1.5rem;
}
.product-image img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.product-facts h1 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); }
.gtin { font-size: .82rem; margin: 1rem 0 0; }
.product .chart-box, .product > section { margin-top: 1.5rem; }

.price-panel {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.35rem; margin-top: 1.25rem;
  box-shadow: var(--shadow);
}
.panel-label { font-size: .8rem; margin: 0; }
.panel-price { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); font-weight: 800;
               letter-spacing: -.03em; line-height: 1.05; margin: .1rem 0 .2rem; }
.panel-store { margin: 0 0 .9rem; font-size: .95rem; color: var(--ink-soft); }
.panel-store strong { color: var(--ink); }
.oos { color: var(--high-ink); font-weight: 600; }
.panel-note { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.5; }
.buy { margin-top: .5rem; }

.follow { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.follow-title { margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; }
.follow-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.follow-row input {
  flex: 1 1 9rem; min-width: 0; font: inherit; font-size: .92rem; padding: .55rem .7rem;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink);
}
.follow-row input.follow-target { flex: 0 1 6rem; }
.follow-row input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.follow-row button {
  font: inherit; font-weight: 600; cursor: pointer; padding: .55rem 1rem;
  border: 0; border-radius: 9px; background: var(--brand); color: #fff;
}
.follow-row button:hover { background: var(--brand-deep); }
.follow-note { font-size: .78rem; margin: .5rem 0 0; line-height: 1.45; }

/* ----------------------------------------------------------------- table */

.prices { width: 100%; border-collapse: collapse; margin: 1.25rem 0 .5rem; font-size: .93rem; }
.prices th, .prices td { padding: .6rem .65rem; border-bottom: 1px solid var(--border);
                         text-align: left; }
.prices thead th { font-size: .78rem; color: var(--ink-faint); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .04em; }
.prices .r { text-align: right; }
.prices tbody tr:hover { background: var(--sunken); }

.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px;
          margin-right: .5rem; }
.swatch.s0 { background: var(--s0); } .swatch.s1 { background: var(--s1); }
.swatch.s2 { background: var(--s2); } .swatch.s3 { background: var(--s3); }
.swatch.s4 { background: var(--s4); }

/* ----------------------------------------------------------------- chart */

.chart-box {
  margin: 1rem 0; background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .6rem; overflow-x: auto;
}
.chart { display: block; width: 100%; height: auto; min-width: 30rem; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--ink-faint); font-size: 11px; font-family: "Inter", sans-serif; }
.chart .axis.num { font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--raised); stroke-width: 2; }
.chart .tip-label { font-size: 12px; font-weight: 700; fill: var(--ink);
                    font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.chart .tip-name { font-size: 10.5px; fill: var(--ink-soft); font-family: "Inter", sans-serif; }
.chart .marker { stroke: var(--marker); stroke-width: 1.5; }
.chart .marker-label { font-size: 10.5px; fill: var(--ink-soft); font-family: "Inter", sans-serif; }
.chart .crosshair { stroke: var(--border-strong); stroke-width: 1; }

.chart .line.s0, .chart .dot.s0 { stroke: var(--s0); }
.chart .line.s1, .chart .dot.s1 { stroke: var(--s1); }
.chart .line.s2, .chart .dot.s2 { stroke: var(--s2); }
.chart .line.s3, .chart .dot.s3 { stroke: var(--s3); }
.chart .line.s4, .chart .dot.s4 { stroke: var(--s4); }
.chart .dot.s0 { fill: var(--s0); } .chart .dot.s1 { fill: var(--s1); }
.chart .dot.s2 { fill: var(--s2); } .chart .dot.s3 { fill: var(--s3); }
.chart .dot.s4 { fill: var(--s4); }

/* The hover readout is an enhancement: every value it shows is also in the table. */
.chart .readout { opacity: 0; pointer-events: none; }
.chart .hover:hover .readout { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .chart .readout { transition: opacity .12s ease; }
}

/* ----------------------------------------------------------------- prose */

.prose { max-width: 42rem; }
.prose h2 { margin: 2.25rem 0 .6rem; }
.prose li { margin: .45rem 0; }

@media (max-width: 52rem) {
  .product-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .product-image { max-width: 16rem; aspect-ratio: 1; }
}
@media (max-width: 40rem) {
  header.site .bar { gap: .75rem; }
  header nav { margin-left: 0; order: 3; width: 100%; }
  .search { order: 2; max-width: none; }
  /* On a phone the hero already carries a large search box; the one in the header is
     there for every other page and does not need to shout on the home page. */
  .hero { padding-top: 1.5rem; }
  .hero h1 { font-size: clamp(1.6rem, 1.1rem + 3.2vw, 2.2rem); }
  .prices { display: block; overflow-x: auto; white-space: nowrap; }
  /* The chart holds a 30rem floor so its labels stay legible, and on a phone that means
     a third of it sits off-screen behind a scrollbar nobody notices. Scaling it down via
     the viewBox loses a little label size and keeps the whole shape visible, which is
     what the chart is for. */
  .chart { min-width: 0; }
}

/* ------------------------------------------------- a shop offering a feed */

/* On /lojas, where a retailer can hand us its catalogue instead of its bandwidth.
   Stacked rather than inline like .follow-row: this form is read carefully by somebody
   deciding whether to trust us, not filled in quickly by a shopper. */
.feed-form { display: grid; gap: .4rem; max-width: 32rem; margin: 1rem 0 .6rem; }
.feed-form label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.feed-form label + input { margin-bottom: .35rem; }
.feed-form input {
  font: inherit; font-size: .92rem; padding: .55rem .7rem;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink);
}
.feed-form input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.feed-form button {
  justify-self: start; font: inherit; font-weight: 600; cursor: pointer;
  margin-top: .35rem; padding: .55rem 1.1rem;
  border: 0; border-radius: 9px; background: var(--brand); color: #fff;
}
.feed-form button:hover { background: var(--brand-deep); }

.notice {
  padding: .7rem .85rem; border-radius: 9px; font-size: .92rem;
  background: var(--good-bg); color: var(--good-ink);
  border: 1px solid var(--border-strong);
}
.notice-bad { background: var(--high-bg); color: var(--high-ink); }

/* ------------------------------------------------------- the product page

   Arranged around the decision, in the order somebody makes it: what is it, what does
   the cheapest shop want, where do I click. The statistics that used to open the page
   are folded away at the bottom for the people who want them. */

.buy-head {
  display: grid; gap: 2rem; align-items: start; margin: .5rem 0 0;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
}
.buy-facts h1 { font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); margin-bottom: 1rem; }

.lead-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
              margin: 0 0 .6rem; }
.lead-price-value { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem); font-weight: 800;
                    letter-spacing: -.03em; line-height: 1; }
.lead-price-where { color: var(--ink-soft); font-size: 1rem; }
.lead-price-where strong { color: var(--ink); }

.verdict-line { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap;
                margin: 0 0 1.1rem; font-size: .95rem; color: var(--ink-soft);
                line-height: 1.5; max-width: 34rem; }
.verdict-line strong { color: var(--ink); }

/* The one thing on the page that has to be impossible to miss. */
.buy-big {
  display: inline-block; font-size: 1.05rem; font-weight: 700;
  padding: .95rem 1.6rem; border-radius: 12px;
}
.buy-note { margin: .6rem 0 0; font-size: .88rem; }

/* Every shop, each with its own button. */
.shops { list-style: none; padding: 0; margin: 1rem 0 .75rem;
         display: grid; gap: .5rem; }
.shop {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.shop-best { border-color: var(--brand); background: var(--brand-wash); }
.shop-name { font-weight: 600; display: flex; align-items: center; gap: .5rem;
             flex-wrap: wrap; min-width: 0; }
.shop-price { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.shop-diff { font-size: .82rem; font-weight: 600; color: var(--ink-faint);
             margin-left: .35rem; }
.shop-go { padding: .55rem 1rem; font-size: .92rem; white-space: nowrap; }
.tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .45rem; border-radius: 999px;
  background: var(--brand); color: #fff;
}
.tag-oos { background: var(--high-bg); color: var(--high-ink); }

/* The report, folded away. */
.detail { margin-top: 1.25rem; }
.detail summary { cursor: pointer; font-weight: 600; font-size: .92rem;
                  color: var(--ink-soft); padding: .5rem 0; }
.detail summary:hover { color: var(--ink); }

.follow-panel {
  display: grid; gap: 1rem; background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.follow-panel h2 { margin-bottom: .35rem; }
.follow-panel p { margin: 0; }

@media (max-width: 46rem) {
  .buy-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .buy-head .product-image { max-width: 15rem; }
  .buy-big { display: block; text-align: center; }
  .shop { grid-template-columns: minmax(0, 1fr) auto; row-gap: .6rem; }
  .shop-go { grid-column: 1 / -1; text-align: center; }
}