:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1a1d21; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0050aa;        /* Lidl blue */
  --brand-ink:#003c80;
  --accent:#e60a14;       /* Parkside/Lidl red */
  --green:#127c3a; --amber:#b45309;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* header */
header.site{background:var(--brand);color:#fff;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:60px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap;flex:0 0 auto}
.logo b{color:#ffe500}
/* Middle nav: single line that scrolls horizontally when tight, so it can
   never wrap into a second row and spill into the freshbar. */
header.site nav{display:flex;gap:16px;font-size:.9rem;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{opacity:.9;flex:0 0 auto}
header.site nav a:hover,header.site nav a.on{opacity:1;text-decoration:underline}
.search-mini{flex:0 0 auto;display:flex}
.search-mini input{border:0;border-radius:20px;padding:7px 14px;font-size:.9rem;width:170px}

/* freshness bar */
.freshbar{background:var(--brand-ink);color:#dbe9ff;font-size:.82rem}
.freshbar .wrap{display:flex;gap:18px;flex-wrap:wrap;padding:7px 20px}
.freshbar b{color:#fff}

/* hero */
.hero{padding:26px 0 6px}
.hero h1{margin:0 0 4px;font-size:1.7rem;letter-spacing:-.02em}
.hero p{margin:0;color:var(--muted)}

/* section */
section.block{margin:30px 0}
.block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.block-head h2{margin:0;font-size:1.2rem}
.block-head a{color:var(--brand);font-size:.85rem;font-weight:600}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.card .imgwrap{aspect-ratio:1/1;background:#fff;padding:12px;display:flex;align-items:center;justify-content:center}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .name{font-size:.9rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.card .cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.pricerow{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.price{font-size:1.25rem;font-weight:800;color:var(--accent)}
.old{color:var(--muted);text-decoration:line-through;font-size:.85rem}
.cta{margin-top:8px;background:var(--brand);color:#fff;text-align:center;padding:9px;border-radius:8px;
  font-weight:700;font-size:.85rem}
.cta:hover{background:var(--brand-ink)}

/* badges */
.badges{display:flex;flex-wrap:wrap;gap:5px}
.badge{font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:20px;letter-spacing:.02em}
.badge.disc{background:#fde7e7;color:var(--accent)}
.badge.low{background:#e6f4ea;color:var(--green)}
.badge.new{background:#e7efff;color:var(--brand)}
.badge.drop{background:#e6f4ea;color:var(--green)}
.badge.rise{background:#fdeede;color:var(--amber)}
.badge.stock-out{background:#f3f4f6;color:var(--muted)}
.badge.stock-ok{background:#e6f4ea;color:var(--green)}
.badge.top{background:#fff4d6;color:#8a6100}
.delta{font-weight:700;color:var(--green)}

/* rating */
.rating{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.stars{color:#f5a623;letter-spacing:1px}

/* product detail */
.pdp{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:36px;margin:28px 0}
.pdp .gallery{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.pdp h1{font-size:1.5rem;margin:.1em 0 .3em}
.pdp .buybox{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-top:18px}
.pdp .price-lg{font-size:2rem;font-weight:800;color:var(--accent)}
.buy-btn{display:block;background:var(--accent);color:#fff;text-align:center;font-weight:800;font-size:1.05rem;
  padding:14px;border-radius:10px;margin-top:14px}
.buy-btn:hover{filter:brightness(.94)}
.disclaimer{font-size:.72rem;color:var(--muted);margin-top:8px;text-align:center}
.specs{width:100%;border-collapse:collapse;margin-top:10px;font-size:.88rem}
.specs td{padding:7px 10px;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--muted);width:45%}

/* sparkline */
.spark{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.spark svg{width:100%;height:auto;overflow:visible}
.spark .lbl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:6px}
.spark polyline{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .dot{fill:var(--accent)}
.spark.trend-down polyline{stroke:var(--green)}
.spark.trend-up polyline{stroke:var(--amber)}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0;font-size:.85rem}
.filters a,.filters select,.filters input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 11px}
.filters a.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ad slot */
.adslot{background:repeating-linear-gradient(45deg,#eef0f3,#eef0f3 10px,#e8eaed 10px,#e8eaed 20px);
  border:1px dashed #cbd0d6;border-radius:var(--radius);color:#98a0aa;text-align:center;
  padding:22px;font-size:.8rem;margin:24px 0}

footer.site{margin-top:50px;background:#111418;color:#9aa2ab;font-size:.82rem}
footer.site .wrap{padding:26px 20px;display:flex;gap:26px;flex-wrap:wrap}
footer.site a{color:#cfd5db}
.prose{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin:24px 0;max-width:760px}
.prose h1{margin-top:0}

@media(max-width:720px){
  .pdp{grid-template-columns:1fr}
  header.site .wrap{height:auto;padding:10px 20px;flex-wrap:wrap}
  .search-mini{width:100%;margin:6px 0 0}
  .search-mini input{width:100%}
}