/* p/<id>.html — one cross-store product (build-product-pages.mjs). Light on purpose: these pages
   are Google landings, so this file + chrome.css is all they load. */
@import url('fonts-face.css?v=1');
:root{
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ink:#171A1F;--ink-2:#394049;--muted:#5F6773;--faint:#9AA2AE;--paper:#fff;
  --line:rgba(23,26,31,.08);--line-strong:rgba(23,26,31,.14);
  --blue:#1766D6;--blue-deep:#0F4FA8;--blue-soft:rgba(23,102,214,.11);
  --green:#0E9F6E;--green-soft:rgba(14,159,110,.12);--red:#E30613;
  --maxw:1080px;--pad:24px;--ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* title band (chrome.css styles div.hero) — product names stay in readable Archivo */
div.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:center}
div.hero h1{font-family:var(--sans)!important;font-weight:800!important;letter-spacing:-.015em!important;font-size:clamp(24px,3.2vw,36px)!important;line-height:1.15!important}
.pp-crumb{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:10px}
.pp-crumb a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.pp-lead{margin-top:12px;font-size:17px;color:rgba(255,255,255,.92)}
.pp-lead b{color:#fff;font-family:var(--mono);font-weight:600}
.pp-fig{background:#fff;border:2px solid var(--c-ink,#1B2233);border-radius:20px;height:200px;display:grid;place-items:center;padding:14px;box-shadow:0 4px 0 rgba(4,22,64,.35)}
.pp-fig{overflow:hidden}
.pp-fig img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}

main{padding:28px 0 8px}
.pp-sec{margin-top:30px}
.pp-sec h2{font-family:'Lilita One',var(--sans);font-weight:400;color:var(--c-navy,#0B2A63);font-size:clamp(24px,3vw,32px);line-height:1.05;margin-bottom:6px}
.pp-note{font-size:14px;color:var(--c-text-3,#4A556E);margin-bottom:14px}

/* offers: cheapest first */
.pp-offers{list-style:none;background:#fff;border:2px solid var(--c-ink,#1B2233);border-radius:20px;box-shadow:0 4px 0 var(--c-ink,#1B2233);overflow:hidden}
.pp-offers li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 18px;align-items:center;padding:16px 20px}
.pp-offers li+li{border-top:1px solid rgba(27,34,51,.1)}
.pp-offers li.best{background:#EAF7F0}
.pp-st{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--c-navy,#0B2A63);min-width:0}
.pp-st i{flex:none;width:10px;height:10px;border-radius:50%}
.pp-tag{font-size:12.5px;font-weight:800;color:#fff;background:#0F8A60;border:1.5px solid var(--c-ink,#1B2233);border-radius:9px;padding:2px 8px;transform:rotate(-3deg)}
.pp-sub{grid-column:1;font-size:13px;color:var(--c-text-3,#4A556E)}
.pp-pr{grid-row:1/3;grid-column:2;text-align:right}
.pp-pr b{display:block;font:600 22px/1.1 var(--mono);letter-spacing:-.02em}
.pp-pr span{font-size:13px;color:var(--c-text-3,#4A556E)}
.pp-offers li.best .pp-pr b{color:#0B7F57}
.pp-go{grid-row:1/3;grid-column:3;font-weight:800;font-size:14px;color:#fff;background:var(--c-navy,#0B2A63);border-radius:999px;padding:9px 14px;white-space:nowrap}
.pp-go:hover{background:#0E3478}
.pp-save{margin-top:14px;font-size:15px;color:var(--c-text-2,#2F3A52)}
.pp-save b{font-family:var(--mono);color:#0B7F57}
.pp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pp-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:800;font-size:14.5px;
  border:2px solid var(--c-ink,#1B2233);box-shadow:0 3px 0 var(--c-ink,#1B2233);background:#fff;color:var(--c-navy,#0B2A63);cursor:pointer;font-family:var(--sans)}
.pp-btn.primary{background:#1F5FC8;color:#fff}
.pp-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--c-ink,#1B2233)}

/* 60-day chart */
.pp-chart{background:#fff;border:2px solid var(--c-ink,#1B2233);border-radius:20px;box-shadow:0 4px 0 var(--c-ink,#1B2233);padding:16px 16px 10px}
.pp-plot{position:relative;padding-left:62px}
.pp-plot svg{display:block;width:100%;height:220px;overflow:visible}
.pp-y{position:absolute;left:0;width:54px;text-align:right;transform:translateY(-50%);font:500 12px/1 var(--mono);color:var(--c-text-3,#4A556E)}
.pp-x{display:flex;justify-content:space-between;margin:6px 0 0 62px;font-size:12px;color:var(--c-text-3,#4A556E)}
.pp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--c-text-2,#2F3A52)}
.pp-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}

.pp-more{display:flex;flex-wrap:wrap;gap:10px}
.pp-more a{font-weight:700;font-size:14px;color:var(--c-navy,#0B2A63);background:#fff;border:1.5px solid rgba(27,34,51,.25);border-radius:999px;padding:8px 14px}
.pp-more a:hover{border-color:var(--c-ink,#1B2233)}
footer{margin-top:44px;padding:26px 0 30px;font-size:13.5px}
footer .wrap{display:block}
footer p+p{margin-top:8px}

@media (max-width:700px){
  div.hero .wrap{grid-template-columns:1fr;gap:16px}
  .pp-fig{height:160px;order:-1}
  .pp-plot svg{height:170px}
  .pp-offers li{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  .pp-pr{grid-row:1/3;grid-column:2}
  .pp-go{grid-row:3;grid-column:1/-1;text-align:center}
  :root{--pad:16px}
}

/* ¿algo parecido más barato? — other product pages, cheaper per kg / L / unit */
.pp-alts{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pp-alts a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:#fff;
  border:2px solid var(--c-ink,#1B2233);border-radius:18px;box-shadow:0 3px 0 var(--c-ink,#1B2233);color:var(--c-ink,#1B2233)}
.pp-alts a:hover{background:#F4F8FF}
.pp-alt-img{width:56px;height:56px;border-radius:12px;border:1px solid rgba(27,34,51,.12);background:#fff;display:grid;place-items:center;overflow:hidden}
.pp-alt-img img{width:100%;height:100%;object-fit:contain}
.pp-alt-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.pp-alt-t b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-alt-t em{font-style:normal;font-size:12.5px;color:var(--c-text-3,#4A556E)}
.pp-alt-s{display:flex;flex-direction:column;align-items:flex-end;font:700 17px/1.1 var(--mono);color:#0B7F57}
.pp-alt-s small{font:600 11px/1.2 var(--sans);color:var(--c-text-3,#4A556E)}