*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); }
.screen { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.tbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
#category-tag { gap: 5px; flex: none; align-self: flex-start; }
/* Product title reuses the .brand wordmark face but needs its own length budget:
   long names (e.g. "Repollitos de Bruselas") should wrap to a tight, balanced
   two lines instead of one loose column that crowds the category tag.
   margin-right:auto keeps it left-aligned after the back button and pushes the
   category tag to the right, so short and long names align the same way. */
#product-title { font-size: 18px; line-height: 1.15; text-wrap: balance; margin-right: auto; }
.brand { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.brand-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.grow { margin-left: auto; }
.body { padding: 6px var(--space-4) var(--space-8); }
.hero-q { margin: 10px 2px 12px; font-size: 28px; }
#offline-banner { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-accent-2-500); color: var(--color-accent-2-700); margin-bottom: 6px; }
/* Freshness is passive status, not a control: inline muted text + a small clock
   icon, with no border/fill/pill so it never reads as tappable (the price
   disclosure chevron is the only shaped control nearby). Stale (>3 días)
   escalates through a warm colour + weight, still no chip. */
.fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 6px; }
.fresh.stale { color: var(--color-accent-700); font-weight: 600; }
.fresh[hidden], #offline-banner[hidden] { display: none; }
.sec { margin-top: 22px; }
.sec-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.sec-lbl { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; }
.sec-cnt { margin-left: auto; font-size: 12px; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.sec-empty { font-size: 13px; padding: 10px 2px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; text-decoration: none; color: inherit; border-top: 1px solid var(--color-divider); }
.row:first-child { border-top: 0; }
.row.hidden { display: none; }
.row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.r-ic { color: color-mix(in srgb, var(--color-text) 62%, transparent); display: flex; }
.r-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.r-name { font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.r-sub { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.st { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.st b { color: var(--color-accent); font-weight: 400; }
.st i { color: var(--color-neutral-400); font-style: normal; }
.r-chev { color: var(--color-neutral-400); display: flex; }
/* Text-link look, but a full ~44px tap target (padding, not just line height).
   Negative left margin keeps the label visually flush with the rows above. */
.verall { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; margin-left: -4px; min-height: 44px; padding: 6px 4px; font-size: 13px; color: var(--color-accent); background: none; border: 0; cursor: pointer; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* per-bucket row status tint (inset, no layout shift) */
.row-green  { box-shadow: inset 3px 0 0 var(--color-accent-2-500); }
.row-yellow { box-shadow: inset 3px 0 0 var(--color-neutral-400); }
.row-red    { box-shadow: inset 3px 0 0 var(--color-accent-600); }
.row-green, .row-yellow, .row-red { padding-left: 11px; }

/* Product detail (Task 9) */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); }
.verdict { flex-direction: row !important; gap: 13px; align-items: flex-start; margin-top: 6px; }
.v-ic { flex: none; margin-top: 2px; }
.v-txt { display: flex; flex-direction: column; gap: 5px; }
.v-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; }
.v-note { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
details.price { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.price-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--color-accent-700); padding: 8px 13px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.price-toggle::-webkit-details-marker { display: none; }
/* Chevron signals an inline reveal (not a link): points right closed, rotates
   down when the disclosure is open. */
.price-toggle svg { transition: transform .15s ease; }
details.price[open] .price-toggle svg { transform: rotate(90deg); }
.price-toggle .mw { color: color-mix(in srgb, var(--color-text) 45%, transparent); font-size: 10.5px; text-transform: uppercase; }
.price-fig { font-weight: 600; font-size: 17px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-top: 13px; }
.price-fig span { font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.price-fig-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 13px; }
.price-fig-row .price-fig { margin-top: 0; }
.price-asof { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); white-space: nowrap; }
.price-note { display: flex; gap: 7px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-top: 8px; }
.sec-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 8px; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-top: 1px solid var(--color-divider); font-size: 14px; }
.cmp-row:first-child { border-top: 0; }
.cmp-v { color: var(--color-accent-700); font-weight: 600; }

/* verdict card tint by status (subtle, Organic not alarmist) */
.verdict-green  { background: color-mix(in srgb, var(--color-accent-2-500) 12%, var(--color-surface)); }
.verdict-yellow { background: color-mix(in srgb, var(--color-neutral-500) 10%, var(--color-surface)); }
.verdict-red    { background: color-mix(in srgb, var(--color-accent-500) 12%, var(--color-surface)); }

/* trend valence: word + colour (word already carries meaning) */
.cmp-up   { color: var(--color-accent-700); }
.cmp-down { color: var(--color-accent-2-700); }
.cmp-flat { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.season { flex-direction: row !important; gap: 13px; align-items: flex-start; }
.season-spark { margin-top: 10px; }
.season-spark .spk { width: 100%; height: 40px; display: block; }
.season-spark .spk rect { fill: var(--color-neutral-400); }
.season-spark .spk rect.spk-now { fill: var(--color-accent); }
.spk-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 4px;
  font-size: 10px; text-align: center; color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-variant-numeric: tabular-nums; }
.spk-months .spk-now-lbl { color: var(--color-accent); font-weight: 600; }
.not-found { padding: 40px 10px; text-align: center; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* Acerca (static about page): prose scaled below the Home hero so it reads as
   reference, not headline. Section titles reuse the heading face. */
.about { max-width: 34rem; }
.about-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; margin: 10px 2px 10px; }
.about h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; margin: 22px 0 4px; }
.about p { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.about .lead { font-size: 15.5px; color: var(--color-text); }
.about-src { margin-top: 26px !important; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.about-src a { color: var(--color-accent-700); }
.last-seen { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0; }

/* Search (Task 10) */
.srch { position: relative; margin: 6px 0 16px; }
.srch .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.srch .input { padding-left: 40px; min-height: 44px; }
.oos { gap: 0 !important; border-left: 3px solid var(--color-accent-2-500); }
.oos-h { display: flex; gap: 12px; align-items: flex-start; }
.oos-tag { margin-left: auto; white-space: nowrap; align-self: center; }
.empty-state { font-size: 13px; padding: 20px 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }