/* Product pages (produits/, en/products/, nl/producten/) — generated by
   scripts/generate-products.mjs. Follows the homepage's white theme
   (index.css "Thème blanc classique"), standalone so a product page
   doesn't pull in the whole homepage. */

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

:root{
  --bg:#FFFFFF;
  --panel:#F7F7F4;
  --ink:#111111;
  --muted:#4A4A4A;
  --soft:#8A8A84;
  --lime:#B5CC2E;
  --lime-deep:#8FA51E;
  --olive:#5F6F12;           /* lime family, dark enough for text on white */
  --lime-wash:rgba(181,204,46,.12);
  --hair:rgba(17,17,17,.10);
  --shadow:0 24px 60px rgba(17,17,17,.08);
}

html{ background:var(--bg); }
body{
  font-family:'Jost',sans-serif; background:var(--bg); color:var(--ink);
  overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--lime); color:var(--ink); }
a{ color:inherit; }

/* ── nav ── */
.pp-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:76px; padding:0 4vw;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair); box-shadow:0 10px 30px rgba(0,0,0,.04);
}
.pp-logo{ display:flex; flex-direction:column; line-height:1; text-decoration:none; }
.pp-wm{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
}
.pp-wm b{ color:var(--lime-deep); font-weight:500; }
.pp-tg{ font-size:8px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.pp-nav-right{ display:flex; align-items:center; gap:12px; }
.pp-lang{
  display:flex; gap:2px; padding:3px;
  border:1px solid var(--hair); border-radius:999px; background:var(--bg);
}
.pp-lang a, .pp-lang span{
  font-size:11px; font-weight:500; letter-spacing:.12em;
  padding:7px 11px; border-radius:999px; text-decoration:none;
}
.pp-lang a{ color:var(--muted); transition:.2s; }
.pp-lang a:hover{ color:var(--ink); background:var(--panel); }
.pp-lang-on{ background:var(--lime); color:var(--ink); }
.pp-contact{
  background:var(--ink); color:#fff; text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 22px; border-radius:999px; transition:.2s; white-space:nowrap;
}
.pp-contact:hover{ background:var(--lime-deep); }

/* ── product ── */
.pp-main{ flex:1; width:100%; max-width:1240px; margin:0 auto; padding:26px 4vw 90px; }
.pp-crumbs{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
  margin-bottom:22px;
}
.pp-crumbs li + li::before{ content:'/'; margin-right:8px; opacity:.6; }
.pp-crumbs a{ text-decoration:none; transition:color .2s; }
.pp-crumbs a:hover{ color:var(--olive); }
.pp-crumbs [aria-current]{ color:var(--ink); }

/* Soft panel with the same lime glow as the homepage hero. */
.pp-product{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:start;
  padding:44px; border-radius:28px; border:1px solid var(--hair);
  background:
    radial-gradient(700px 420px at 18% 20%, rgba(181,204,46,.12), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--panel) 100%);
}
.pp-media{
  background:#fff; border-radius:20px; overflow:hidden;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); position:sticky; top:110px;
}
.pp-media img{ width:100%; height:100%; object-fit:contain; display:block; padding:6%; }

.pp-info{ padding-top:8px; }
.pp-kicker{
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--olive); background:var(--lime-wash); border:1px solid rgba(143,165,30,.35);
  padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.pp-title{
  font-family:'Cormorant Garamond',serif; font-weight:400; color:var(--ink);
  font-size:clamp(36px, 4.4vw, 58px); line-height:1.02; letter-spacing:-.005em; margin-bottom:14px;
}
.pp-local-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted);
  background:rgba(255,255,255,.9); border:1px solid var(--hair);
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
}
.pp-local-badge svg{ color:var(--lime-deep); flex-shrink:0; }
.pp-price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:30px; font-weight:500; color:var(--ink); margin-bottom:10px;
}
.pp-price span{ font-size:12px; font-weight:400; color:var(--soft); letter-spacing:.06em; }
.pp-stock{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:28px;
}
.pp-stock::before{ content:''; width:8px; height:8px; border-radius:50%; }
.pp-stock.is-in{ color:var(--olive); }
.pp-stock.is-in::before{ background:var(--lime); box-shadow:0 0 0 4px var(--lime-wash); }
.pp-stock.is-out{ color:#B4532F; }
.pp-stock.is-out::before{ background:#D9764F; }

/* Facts under the stock line: net weight, per-kilo price, packaging,
   category. Mirrors the Product JSON-LD so the markup is backed by
   visible content. */
.pp-specs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, max-content)); gap:14px 34px;
  margin:-8px 0 28px; padding:16px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.pp-spec dt{ font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:4px; }
.pp-spec dd{ font-size:15px; font-weight:500; color:var(--ink); }

.pp-buy{ min-height:56px; margin-bottom:10px; max-width:420px; }
.pp-fallback{ display:inline-block; font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:30px; }
.buy-ready .pp-fallback{ display:none; }
.buy-ready .pp-buy{ margin-bottom:34px; }

.pp-desc{
  font-size:15.5px; line-height:1.75; color:var(--muted);
  border-top:1px solid var(--hair); padding-top:28px;
}
.pp-desc p{ margin:0 0 12px; }
.pp-desc ul, .pp-desc ol{ margin:0 0 12px 20px; }
.pp-desc strong{ color:var(--ink); font-weight:600; }
/* Delivery & pick-up notice (scripts/delivery-info.mjs) */
.pp-delivery{
  margin-top:28px; padding:20px 22px;
  background:linear-gradient(160deg,#FFFFFF,var(--panel)); border:1px solid var(--hair);
  border-left:3px solid var(--lime); border-radius:14px;
  box-shadow:0 12px 30px -22px rgba(17,17,17,.25);
}
.pp-delivery-title{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--olive);
  font-weight:600; margin-bottom:14px;
}
.pp-delivery-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.pp-delivery-item{ display:flex; align-items:flex-start; gap:14px; font-size:14px; line-height:1.5; color:var(--muted); }
.pp-delivery-icon{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--lime-wash); color:var(--olive);
}
.pp-delivery-icon svg{ width:20px; height:20px; }
.pp-delivery-text{ padding-top:8px; }
.pp-delivery-text strong{ color:var(--ink); font-weight:600; }
.pp-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:30px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--olive); transition:gap .2s;
}
.pp-back:hover{ gap:12px; }

/* ── other products ── */
.pp-others{ margin-top:96px; }
.pp-others h2{
  font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(30px, 3vw, 40px);
  margin-bottom:28px; padding-left:18px; border-left:2px solid var(--lime);
}
.pp-others ul{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.pp-other a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:var(--bg); border:1px solid var(--hair); border-radius:18px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pp-other a:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(143,165,30,.45); }
.pp-other-img{ display:block; background:var(--panel); aspect-ratio:1/1; }
.pp-other-img img{ width:100%; height:100%; object-fit:contain; display:block; padding:8%; mix-blend-mode:multiply; }
.pp-other-title{ font-family:'Cormorant Garamond',serif; font-size:20px; line-height:1.15; padding:16px 18px 6px; }
.pp-other-price{ font-size:14px; font-weight:500; color:var(--olive); padding:0 18px 18px; margin-top:auto; }

/* ── footer ── */
.pp-footer{
  background:var(--panel); border-top:1px solid var(--hair); padding:44px 4vw;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  font-size:13px; color:var(--muted);
}
.pp-copy{ font-size:11px; letter-spacing:.06em; color:var(--soft); }

@media (max-width:900px){
  .pp-product{ grid-template-columns:minmax(0,1fr); gap:32px; padding:22px; border-radius:22px; }
  .pp-media{ position:static; }
  .pp-others ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
@media (max-width:520px){
  .pp-nav{ height:64px; padding:0 16px; }
  .pp-tg{ display:none; }
  .pp-wm{ font-size:20px; }
  .pp-contact{ display:none; }
  .pp-main{ padding:18px 16px 60px; }
  .pp-product{ padding:14px 14px 26px; }
  .pp-info{ padding:0 4px; }
  .pp-other-title{ font-size:17px; padding:12px 12px 4px; }
  .pp-other-price{ padding:0 12px 14px; }
}