/* Cazador — public.css : système de design du site public (kazador.mx).
   Feuille indépendante de tokens.css / app.css (mode OPERATE, privé) : aucun partage de code entre
   les deux modes (Eng Review 2 du 2026-09-27, « gabarits publics séparés des privés »).
   Contrastes vérifiés par tests/test_contrast.py. Source : maquettes approuvées
   designs/kazador-final-20260927/*.html et designs/kazador-delta-20260927/*.html (Design Review 2026-09-27). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-700.woff2") format("woff2"); }

:root {
  --paper: #FFFFFF;
  --ink: #17151C;
  --muted: #6B6675;
  --rule: #E6E2EA;
  --soft: #F6F4F8;
  --green: #0A7A4B;
  --mango: #FFC247;
  --amber: #B26B00;
  --ok: #237A33;
  --off: #9A96A1;
  color-scheme: light;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* même rythme que tokens.css (mode OPERATE) ; les composants ci-dessous suivent en plus
     les valeurs pixel-perfect des maquettes approuvées (chip, tampon, sheet…) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
}

/* --- base ------------------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; }
img { display: block; }
a { color: inherit; }
a:visited { color: var(--muted); }
::selection { background: var(--ink); color: var(--paper); }
input { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
body {
  background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
}
.amt, .price, .big { font-family: var(--mono); }

/* --- en-tête, marque, recherche ---------------------------------------------------- */
header { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.brand {
  display: flex; align-items: center; gap: 8px;
  font: 800 26px/1 var(--font-display); letter-spacing: -.035em; text-decoration: none;
}
.search { margin-top: 10px; }
.search label { display: block; font: 600 13px var(--font); margin-bottom: 4px; }
.search div {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink); border-radius: var(--r-md); padding: 0 12px; min-height: 48px;
}
.search input { flex: 1; border: 0; font: inherit; font-size: 16px; background: none; outline: none; min-width: 0; }

/* --- bandeau de fraîcheur (données > 3 h) ------------------------------------------- */
.stale {
  border-bottom: 2px solid var(--ink); padding: 12px 16px;
  font-weight: 600; font-size: 15px; display: flex; gap: 10px; align-items: flex-start;
}
.stale svg { flex: none; margin-top: 2px; }

/* --- accueil : intro et fraîcheur --------------------------------------------------- */
.hero { padding: 20px 16px 6px; }
.hero h1 { font: 800 30px/1.05 var(--font-display); letter-spacing: -.035em; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.fresh { margin-top: 10px; font-size: 14px; font-weight: 500; }
.fresh b { color: var(--green); }

/* --- puces de catégorie (chip = filtre ; chip.on = actif) -------------------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; }
.chip {
  flex: none; border: 1px solid var(--rule); background: var(--soft); border-radius: var(--r-pill);
  padding: 0 16px; font: 500 15px var(--font); min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none;
}
.chip small { color: var(--muted); font-size: 13px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on small { color: #D9D5DE; }

/* --- filtres en bouton contour (ex. « Tiendas », « Orden ») : contour, jamais rempli --- */
.btn2 {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--r-md);
  background: var(--paper); font: 600 15px var(--font); color: var(--ink);
}
.btn2 .n { background: var(--ink); color: #fff; border-radius: var(--r-pill); padding: 0 7px; font-size: 12px; }

/* --- grille de cartes (accueil, recherche) : carte entière cliquable --------------- */
.list { border-top: 1px solid var(--rule); }
.card {
  display: grid; grid-template-columns: 84px 1fr; column-gap: 14px; padding: 16px;
  border-bottom: 1px solid var(--rule); position: relative;
}
.card img, .card .noimg {
  width: 84px; height: 84px; object-fit: contain; background: var(--soft);
  border-radius: var(--r-md); grid-row: 1 / -1; align-self: start;
}
.card:hover { background: var(--soft); }
.body { grid-column: 2; min-width: 0; }
.t { font-size: 15px; line-height: 1.3; font-weight: 600; color: inherit; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.t:hover { text-decoration: underline; }
.more { padding: 16px; color: var(--muted); font-size: 14px; }
.shop { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pr {
  margin-top: 10px; display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; column-gap: 12px; row-gap: 6px;
}
.price { font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.cap { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.spark-col { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--green); }
.lbl { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* tampon de verdict : fond mangue, bord encre, incliné -4° — jamais de texte mangue */
.stamp {
  transform: rotate(-4deg); border: 2px solid var(--ink); background: var(--mango); color: var(--ink);
  border-radius: var(--r-sm); padding: 4px 8px 3px; text-align: center;
  font: 800 11px/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.stamp big { display: block; font-size: 17px; letter-spacing: -.01em; }

/* carte Mercado Libre / rabais annoncé : sans historique ni tampon */
.announced { font-size: 13px; color: var(--muted); }

.go { margin-top: 10px; display: flex; justify-content: flex-end; }
.go a {
  color: var(--green); font: 700 15px var(--font); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
}
.go a::after { content: ""; position: absolute; inset: 0; } /* lien étiré : toute la carte est cliquable */
.card[hidden] { display: none; } /* T23 : filtre Tiendas, priorité sur .card{display:grid} */

/* badge « Más barato en X » : lien vers l'AUTRE enseigne, donc doit rester cliquable au-dessus du
   lien étiré .go a::after (sinon un clic dessus irait toujours vers la tienda de cette carte-ci). */
.cheaper { margin-top: 6px; font-size: 13px; color: var(--ink); }
.cheaper a { position: relative; z-index: 1; color: inherit; text-decoration: underline; }

/* lien vers /buen-fin-2026/ affiché sous la phrase d'accueil (T26) */
.bf-link { display: inline-block; margin-top: 10px; color: var(--green); font-weight: 700; text-decoration: none; font-size: 14px; }

/* utilitaire : visible seulement des lecteurs d'écran (légende de tableau, T28) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- pied de page ------------------------------------------------------------------- */
footer { padding: 20px 16px 32px; font-size: 13px; color: var(--muted); }
footer p + p { margin-top: 6px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
footer nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- points de rupture : 820 px (2 colonnes), 1180 px (3 colonnes) ------------------ */
@media (min-width: 820px) {
  header, .hero, .chips, footer, .stale { padding-left: 32px; padding-right: 32px; }
  .list { border-top: none; }
  main.list { padding: 0 32px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .card { border: 1px solid var(--rule); border-radius: var(--r-lg); }
}
@media (min-width: 1180px) {
  header > *, .hero, .chips, footer, main.list, .stale > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
  main.list { grid-template-columns: repeat(3, 1fr); padding-left: 0; padding-right: 0; }
  .hero, .chips, footer { padding-left: 0; padding-right: 0; }
}

/* --- ordinateur (Refonte filtres) : colonne de filtres fixe à gauche, alignée sur la grille ---
   #filtros-sheet reste le même élément que la feuille mobile (mêmes champs, même JS) : ici la
   visibilité passe en CSS pur (fonctionne même si filters.js n'a pas encore tourné), seuls les
   attributs ARIA de boîte de dialogue sont retirés par filters.js (updateFiltrosMode). */
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: 260px 1fr; column-gap: 24px; max-width: 1180px;
    margin: 0 auto; padding: 0 32px; align-items: start; }
  .layout .content main.list { max-width: none; margin: 0; grid-template-columns: repeat(2, 1fr); padding: 0; }
  #filtros-scrim { display: none !important; }
  #filtros-sheet { position: static; box-shadow: none; border: 1px solid var(--rule); border-radius: var(--r-lg);
    max-height: none; padding: 16px; }
  #filtros-sheet[hidden] { display: block; }
  #filtros-sheet .grab { display: none; }
  #filtros-btn { display: none; }
  .topbar { padding-top: 0; }
}

/* --- fiche produit ------------------------------------------------------------------- */
.crumb { padding: 12px 16px 0; font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); }
.ph { margin: 12px 16px 0; background: var(--soft); border-radius: var(--r-lg); display: flex; justify-content: center; padding: 16px; }
.ph img { width: 100%; max-width: 320px; height: 220px; object-fit: contain; }
.top { padding: 16px 16px 0; }
.top h1 { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.verdict { margin: 14px 16px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.big { font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.why { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; background: var(--soft); border-radius: var(--r-md); padding: 10px 12px; }
.facts { grid-column: 1 / -1; font-size: 14px; color: var(--muted); line-height: 1.6; }

.buy {
  margin: 16px 16px 0; display: flex; justify-content: center; align-items: center; gap: 6px;
  background: var(--green); color: #fff !important; text-decoration: none; border-radius: var(--r-md);
  min-height: 52px; font: 700 16px var(--font);
}
.buy.sec { background: var(--paper); color: var(--ink) !important; border: 2px solid var(--ink); }
.fine { margin: 8px 16px 0; font-size: 12px; color: var(--muted); text-align: center; }

/* rebaja terminée, gardée 7 jours (R9) */
.ended { margin: 14px 16px 0; border: 2px solid var(--ink); border-radius: var(--r-md); padding: 12px; font-size: 15px; }
.ended b { display: block; font: 700 17px var(--font-display); }

section.blk { margin: 24px 16px 0; padding-top: 16px; border-top: 1px solid var(--rule); }
section.blk h2 { font: 700 17px/1.2 var(--font-display); margin-bottom: 10px; }
.chart .ax { font: 500 11px var(--font); fill: var(--muted); }
.chart .strong { fill: var(--green); font-weight: 700; }
.leg { font-size: 13px; color: var(--muted); margin-top: 6px; }
.other {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.other .p { font: 700 17px var(--mono); }
.other a { color: var(--green); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.how p { font-size: 14px; color: var(--muted); }

/* ligne « otras tiendas » avec verdict par ligne (T25, d-fiche-plus.png) : nom, prix, verdict, lien */
.otr {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px;
  padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: center;
}
.otr .n { font-size: 15px; font-weight: 600; }
.otr .p { font: 700 17px var(--mono); text-align: right; }
.otr .p .noprice { font: 500 14px var(--font); color: var(--muted); }
.otr .v { grid-column: 1 / 2; font-size: 12px; color: var(--muted); }
.otr .v .s {
  display: inline-block; background: var(--mango); border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 0 5px; font: 800 10px var(--font-display); color: var(--ink); letter-spacing: .04em; text-transform: uppercase;
}
.otr a {
  grid-column: 2; justify-self: end; color: var(--green); font-weight: 700; text-decoration: none;
  font-size: 14px; min-height: 36px; display: inline-flex; align-items: center;
}

/* onglets d'historique (T27) : panneaux masqués par [hidden], jamais par CSS seul (repli sans JS). */
.tabpanel .leg { margin-top: 8px; }

/* pages de contenu (T10/T30 : aviso, contacto, cómo verificamos…) : article centré, lisible */
.art { padding: 20px 16px; max-width: 680px; margin: 0 auto; }
.art .meta { font-size: 13px; color: var(--muted); }
.art h1 { font: 800 28px/1.1 var(--font-display); margin: 6px 0 10px; letter-spacing: -.02em; }
.art h2 { font: 700 19px var(--font-display); margin: 22px 0 6px; }
.art p, .art li { font-size: 17px; line-height: 1.6; }
.art ol { margin-left: 20px; }
.art ul { margin-left: 20px; }
.art .ex { border: 1px solid var(--rule); border-radius: 12px; padding: 12px; margin: 12px 0; font-size: 15px; }

@media (min-width: 900px) {
  .wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0 32px; align-items: start; }
  .crumb { grid-column: 1 / -1; padding-left: 0; }
  .ph { grid-row: 2 / 7; margin: 16px 0 0; }
  .top, .verdict, .buy, .fine, .ended, section.blk { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  section.blk { grid-column: 1 / -1; }
}

/* --- recherche et états vides / 404 -------------------------------------------------- */
.q { padding: 16px 16px 4px; }
.q h1 { font: 700 20px/1.2 var(--font-display); }
.q p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.sort { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 12px; scrollbar-width: none; align-items: center; }
.sort > span { color: var(--muted); flex: none; font-size: 14px; }
.empty { padding: 28px 16px 8px; }
.empty h1 { font: 700 22px/1.2 var(--font-display); }
.empty p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.empty ul { margin: 14px 0 0 18px; font-size: 15px; line-height: 1.8; }
.empty h2 { font: 700 16px var(--font-display); margin: 22px 0 8px; }
.empty .chips { padding: 0; flex-wrap: wrap; }
.cta {
  display: inline-flex; align-items: center; margin-top: 16px; background: var(--green);
  color: #fff !important; text-decoration: none; border-radius: var(--r-md); min-height: 48px;
  padding: 0 18px; font-weight: 700;
}

/* --- filtres publics (Ordenar, Filtros, recherche de l'en-tête) : cazador/static/public/filters.js */
.topbar { padding: 12px 16px 0; }
.bar { flex-wrap: wrap; }
select.btn2 {
  -webkit-appearance: none; appearance: none; padding-right: 32px;
  /* flèche "Ordenar ▾" (défaut #2, arrow manquante) : SVG en donnée, jamais un fichier — url()
     entre apostrophes pour ne pas matcher tests/test_public_css_assets.py, qui ne cherche que les
     url() entre guillemets doubles (polices auto-hébergées, plus haut dans ce fichier). */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath d="M1 1l5 5 5-5" stroke="%2317151C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right 14px center;
}
.sel-orden { position: relative; display: inline-flex; align-items: center; }
.sel-orden[hidden] { display: none; }
.ord-lbl { position: absolute; left: 14px; font: 600 15px var(--font); color: var(--ink); pointer-events: none; }
.sel-orden select { padding-left: 92px; }
/* nombre de résultats, mis en avant (défaut #2 : "Recomendado" isolé ne suffisait pas à se lire
   comme un tri ; #3B audit UX : le compte doit sauter aux yeux avant les contrôles eux-mêmes) */
.count { padding: 0 0 10px; font: 800 22px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }

/* --- puces rapides (un geste, mobile et ordinateur) : jamais remplies au repos (1A), remplies --
   --- quand actives, comme .chip.on ---------------------------------------------------------- */
.qchips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.qchip, .qchip-tiendas {
  flex: none; border: 2px solid var(--ink); background: var(--paper); border-radius: var(--r-pill);
  padding: 0 14px; min-height: 40px; font: 600 14px var(--font); color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.qchip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.qchip[hidden] { display: none; }

/* --- filtres actifs, retirables un par un (défaut #4) --------------------------------------- */
.achips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 0 10px; }
.achips[hidden] { display: none; }
.achips-list { display: flex; flex-wrap: wrap; gap: 8px; }
.achip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff;
  border: 0; border-radius: var(--r-pill); min-height: 36px; padding: 0 10px 0 14px; font: 600 13px var(--font);
}
.achip span { font-size: 16px; line-height: 1; }
.achip-clear {
  border: 0; background: none; color: var(--green); font: 700 13px var(--font); text-decoration: underline;
  min-height: 36px; padding: 0 4px;
}
.achip-clear[hidden] { display: none; }

.count[hidden] { display: none; }
.fset { border: 0; padding: 0; margin: 14px 0 0; }
.fset legend { font: 700 14px var(--font); padding: 0 0 6px; }
.fset .opt { min-height: 40px; }
.fset .note { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* --- pastilles Descuento (radio) et Precio (bouton preset) : même composant visuel, jamais ---
   --- rempli au repos (1A), texte toujours présent avec la donnée (jamais la couleur seule) --- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span, .pill-btn {
  display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: var(--r-pill);
  padding: 0 14px; min-height: 40px; font: 600 14px var(--font); color: var(--ink); background: var(--paper);
}
.pill input:checked + span, .pill-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pill-btn { cursor: pointer; }

.pr-custom { margin-top: 10px; }
.pr-custom summary { font: 600 13px var(--font); color: var(--green); cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.pr-field {
  display: flex; flex-direction: column; gap: 4px; font: 600 13px var(--font); margin-top: 8px;
}
.pr-field:first-of-type { margin-top: 8px; }
.pr-field input {
  min-height: 44px; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0 12px;
  font: 16px var(--mono);
}
.more-btn {
  display: flex; margin: 16px auto 0; justify-content: center; align-items: center;
  min-height: 48px; padding: 0 20px; border: 2px solid var(--ink); border-radius: var(--r-md);
  background: var(--paper); font: 700 15px var(--font); color: var(--ink);
}
/* .btn2/.more-btn fixent `display` : sans cette règle, ils l'emportent sur `[hidden]` (même
   spécificité, feuille d'auteur > feuille du navigateur) et un bouton "caché" resterait visible
   avant que filters.js ne le révèle (repli sans JS / avant chargement de /ofertas.json). */
.btn2[hidden], .more-btn[hidden] { display: none; }

/* --- panneau Tiendas (feuille du bas, liste de couverture) --------------------------- */
.bar { display: flex; gap: 8px; padding: 12px 16px 0; align-items: center; }
/* z-index explicite : #filtros-sheet vit désormais dans .filtros-col, AVANT .topbar/.card dans le
   DOM (colonne fixe dès 1024 px) ; sans z-index, l'ordre de peinture des éléments positionnés à
   z-index:auto suit l'ordre du DOM et un élément positionné plus loin (.sel-orden, .card) passerait
   au-dessus de la feuille. Valeurs explicites : indépendant de la position dans le DOM. */
.scrim { position: fixed; inset: 0; background: rgba(23, 21, 28, .45); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper);
  border-radius: 16px 16px 0 0; padding: 8px 16px 16px; max-height: 78vh; overflow: auto;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .18); z-index: 41;
}
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 4px auto 10px; }
.sheet h2 { font: 700 18px var(--font-display); display: flex; justify-content: space-between; align-items: center; }
.sheet h2 a { font: 600 14px var(--font); color: var(--green); text-decoration: none; }
.sheet .sub { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.opt input { width: 22px; height: 22px; accent-color: var(--ink); }
.opt small { margin-left: auto; color: var(--muted); font-size: 13px; }
.opt.dis { color: var(--muted); }
.opt .dot { margin-right: 0; }
.apply {
  position: sticky; bottom: 0; margin-top: 12px; display: flex; justify-content: center; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--r-md); min-height: 52px; font: 700 16px var(--font);
}

/* liste de couverture par enseigne (page « Tiendas ») */
.srow { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.srow .l1 { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.srow .st { margin-left: auto; font-size: 13px; color: var(--muted); }
.srow .l2 { font-size: 13px; color: var(--muted); margin-top: 2px; padding-left: 14px; }
.srow.dis { opacity: .6; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--amber); } /* jamais de texte ambre seul : toujours à côté d'un libellé (.st / .l2) */
.dot.off { background: var(--off); }

/* --- carte « tienda nueva » : jauge d'historique encore incomplet -------------------- */
/* .young : texte et jauge dans des <span> distincts (voir product.html/home.html) pour que
   flex-wrap ne coupe jamais la phrase en mobile étroit (375 px) — la jauge passe à la ligne
   suivante plutôt que de déborder ou de tronquer le texte. */
.young { font-size: 13px; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.young b { font-weight: 600; color: var(--ink); }
.meter { flex: none; width: 56px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--muted); }

/* --- onglets de plage (graphique de prix : 30 jours / tout) -------------------------- */
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tab {
  border: 1px solid var(--rule); background: var(--soft); border-radius: var(--r-pill);
  padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; font: 600 14px var(--font);
}
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab.off { opacity: .45; }

/* --- formulaire d'alerte de prix ------------------------------------------------------ */
.alert { margin: 16px 16px 0; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px; }
.alert h2, .alert h3 { font: 700 16px var(--font-display); }
.alert p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.alert label { display: block; font: 600 13px var(--font); margin-top: 10px; }
.alert input[type=email] {
  width: 100%; min-height: 48px; border: 2px solid var(--ink); border-radius: var(--r-md);
  padding: 0 12px; font: inherit; font-size: 16px; margin-top: 4px;
}
.seg { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.seg span {
  border: 1px solid var(--rule); border-radius: var(--r-pill); min-height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; font: 600 14px var(--mono);
}
.seg .on { background: var(--ink); color: #fff; border-color: var(--ink); }
.alert .go2 {
  margin-top: 12px; display: flex; justify-content: center; align-items: center; min-height: 48px;
  border-radius: var(--r-md); background: var(--ink); color: #fff; font: 700 15px var(--font);
}
.alert .legal { font-size: 12px; margin-top: 8px; }

/* --- pages de contenu (T10/T30) : article isolé, sans le grid 2 colonnes de la fiche --------- */
.art { padding: 20px 16px; max-width: 680px; margin: 0 auto; }
.art .meta { font-size: 13px; color: var(--muted); }
.art h1 { font: 800 28px/1.1 var(--font-display); margin: 6px 0 10px; letter-spacing: -.02em; }
.art h2 { font: 700 19px var(--font-display); margin: 22px 0 6px; }
.art p, .art li { font-size: 17px; line-height: 1.6; }
.art ol, .art ul { margin-left: 20px; }
.art .ex { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 12px; margin: 12px 0; font-size: 15px; }

/* --- page « Tiendas » (T28) : cadre simple, jamais le grid 2 colonnes de la fiche ------------ */
.wrap-tiendas { max-width: 900px; margin: 0 auto; }

/* --- couverture par enseigne : liste mobile (5A) et tableau ordinateur, bascule CSS --------- */
.cov { margin: 0 16px; }
.cov-table { display: none; }
.cov table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cov th { font: 600 12px var(--font); color: var(--muted); text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule); }
.cov td, .cov th[scope=row] { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); font-weight: 400; text-align: left; }
.cov td.r, .cov th.r { text-align: right; font-family: var(--mono); padding-right: 16px; }
@media (min-width: 820px) {
  .cov { margin: 0 32px; }
  .cov-rows { display: none; }
  .cov-table { display: block; }
}
@media (min-width: 1180px) {
  .cov, .wrap-tiendas, .kpis, .bf-hero, .bf-hero > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
}

/* --- Buen Fin 2026 (T26) : en-tête, indicateurs, lignes de baisses vérifiées ----------------- */
.bf-hero { padding: 22px 16px 10px; border-bottom: 1px solid var(--rule); }
.bf-hero .k { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bf-hero h1 { font: 800 32px/1.02 var(--font-display); letter-spacing: -.03em; margin-top: 4px; }
.bf-hero p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; }
.kpi { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px; }
.kpi b { display: block; font: 700 22px var(--mono); }
.kpi span { font-size: 12px; color: var(--muted); }
.otr {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0;
  border-bottom: 1px solid var(--rule); align-items: center;
}
.otr .n { font-size: 15px; font-weight: 600; }
.otr .p { font: 700 17px var(--mono); text-align: right; }
.otr .v { font-size: 12px; color: var(--muted); grid-column: 1 / -1; }

/* --- Errores de precio recientes (accueil) et page /errores-de-precio/ (E1-08) --------------- */
.perr { margin: 4px 16px 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.perr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perr-head h2 { font: 700 17px/1.2 var(--font-display); }
.perr-head a { color: var(--green); font: 600 14px var(--font); text-decoration: none; white-space: nowrap; }
.perr-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.perr-list { list-style: none; margin-top: 12px; display: grid; gap: 10px; grid-template-columns: 1fr; }
.perr-card { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 12px 14px; }
.perr-t { font: 600 14px var(--font); color: inherit; text-decoration: none; }
a.perr-t:hover { text-decoration: underline; }
.perr-shop { font-size: 12px; color: var(--muted); margin-top: 2px; }
.perr-fact { font-size: 13px; margin-top: 6px; }
.perr-dates { font-size: 12px; color: var(--muted); margin-top: 4px; }
.perr-list-full { margin: 16px; }
.perr-empty { margin: 16px; color: var(--muted); font-size: 14px; }
.perr-hist { list-style: none; font-size: 13px; display: grid; gap: 6px; }
@media (min-width: 640px) {
  .perr-list { grid-template-columns: repeat(2, 1fr); }
  .perr-list-full { grid-template-columns: repeat(3, 1fr); }
}
.otr a { grid-column: 2; justify-self: end; color: var(--green); font-weight: 700; text-decoration: none; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; }

/* --- panel abonné (E2-08) : invitation à s'abonner, onglets, errores de precio -------------- */
.suscriptor-gate { padding: 28px 16px; text-align: center; }
.suscriptor-gate h2 { font: 700 20px var(--font-display); }
.suscriptor-gate p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.err-row { grid-template-columns: 1fr; } /* pas d'image (realtime_price_errors n'en pousse pas) */
.err-row .pr { grid-template-columns: auto auto 1fr; }
.tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-top: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--soft);
  font: 600 12px var(--font); color: var(--muted);
}
.tag.erreur { border-color: var(--amber); color: var(--amber); }