:root {
  --ink:#163b31;
  --paper:#fffdf7;
  --sand:#f1eadb;
  --line:#d8d0c0;
  --lime:#c7e856;
  --muted:#59615a;
  --good:#1ea766;
  --warning:#e99a17;
  --bad:#e13b2b;
  --neutral:#a4a8a5;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font:inherit; }
.visually-hidden, .skip-link { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { width:auto; height:auto; clip:auto; left:1rem; top:1rem; margin:0; background:white; padding:.6rem; z-index:10; }
.site-header { max-width:1240px; margin:auto; padding:1.25rem 2rem; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:800; text-decoration:none; }
.back-link { color:var(--ink); font-weight:700; }
main { max-width:1240px; margin:auto; padding:2rem; }
.hero { max-width:920px; padding:3.5rem 0 2.5rem; }
.eyebrow, .detail-kicker { margin:0; color:#57751e; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
h1 { max-width:860px; margin:.25rem 0 1rem; font-size:clamp(2.5rem,7vw,5.5rem); letter-spacing:-.065em; line-height:.95; }
h1 em { color:#6f8f22; font-style:normal; }
.hero > p:not(.eyebrow) { max-width:700px; color:var(--muted); font-size:1.1rem; }
.stats { display:flex; flex-wrap:wrap; gap:1px; margin:2.2rem 0 0; background:var(--line); border:1px solid var(--line); }
.stats div { min-width:145px; padding:1rem 1.3rem; background:var(--paper); }
dt { font-size:1.65rem; font-weight:850; }
dd { margin:0; color:var(--muted); font-size:.85rem; }
.catalogue-panel { margin:1rem 0 4rem; padding:1.3rem; border:1px solid var(--line); background:#fff; }
.controls { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:.85rem; }
label { display:grid; gap:.35rem; color:var(--muted); font-size:.83rem; font-weight:700; }
input, select { width:100%; min-height:2.8rem; border:1px solid var(--line); border-radius:.4rem; padding:.5rem .65rem; background:white; color:var(--ink); }
input:focus, select:focus, button:focus-visible, summary:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb,var(--lime) 65%,white); outline-offset:2px; }
.result-count { margin:1.3rem 0 .75rem; font-weight:750; }
.table-wrap { overflow-x:auto; border-top:1px solid var(--line); }
table { border-collapse:collapse; width:100%; min-width:980px; }
th { text-align:left; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
th, td { padding:1rem .65rem; vertical-align:middle; border-bottom:1px solid var(--line); }
.score-sort { display:inline-flex; align-items:center; gap:.35rem; margin:-.35rem; padding:.35rem; border:0; border-radius:.35rem; background:transparent; color:inherit; cursor:pointer; font:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; }
.score-sort:hover { color:var(--ink); background:#f3f7e9; }
.score-sort-indicator { display:inline-grid; min-width:1.7rem; min-height:1.15rem; place-items:center; padding:0 .18rem; border-radius:.25rem; background:#edf1e9; color:#60706a; font-size:.6rem; font-weight:850; letter-spacing:0; line-height:1; text-transform:none; }
.score-sort-indicator::before { content:"↕"; }
.score-sort[data-direction="best"] { color:var(--ink); }
.score-sort[data-direction="best"] .score-sort-indicator { color:#0d6b40; background:#dff4e9; }
.score-sort[data-direction="best"] .score-sort-indicator::before { content:"A→E"; }
.score-sort[data-direction="worst"] { color:var(--ink); }
.score-sort[data-direction="worst"] .score-sort-indicator { color:#8d350d; background:#fff0d9; }
.score-sort[data-direction="worst"] .score-sort-indicator::before { content:"E→A"; }
th:last-child, .toggle-cell { width:48px; padding-left:.25rem; padding-right:.25rem; text-align:right; }
.product-row:has(.product-toggle[aria-expanded="true"]) td { border-bottom-color:transparent; background:#fbfaf5; }
.product-cell { display:flex; align-items:center; gap:.8rem; min-width:270px; }
.product-cell strong { display:block; min-width:190px; line-height:1.28; }
.product-image, .product-image-unavailable { width:72px; height:72px; flex:0 0 72px; border:1px solid var(--line); border-radius:.55rem; background:var(--sand); }
.product-image { display:block; object-fit:contain; mix-blend-mode:multiply; }
.product-image-unavailable { display:grid; place-items:center; padding:.35rem; color:var(--muted); font-size:.65rem; line-height:1.2; text-align:center; }
.type-label { display:flex; align-items:flex-start; gap:.55rem; max-width:190px; color:#355149; font-size:.82rem; font-weight:720; line-height:1.3; }
.type-label::before { content:""; width:4px; height:1.5rem; flex:0 0 4px; margin-top:.08rem; border-radius:999px; background:#b7cf55; }
.offers { max-width:320px; }
.offer-list { display:flex; flex-wrap:wrap; gap:.35rem; }
.offer-list a, .offer-list > span { display:inline-block; padding:.28rem .48rem; color:var(--ink); background:#eff8d7; border-radius:.3rem; font-size:.8rem; font-weight:700; text-decoration:none; }
.offer-list small { margin-left:.2rem; color:var(--muted); font-weight:500; }
.score-pair { display:flex; align-items:center; gap:.7rem; min-width:210px; }
.nutri-score-logo, .green-score-logo { display:block; width:96px; height:auto; aspect-ratio:240 / 130; object-fit:contain; }
.nutri-score-logo-compact { flex:0 0 96px; }
.green-score-logo-compact { flex:0 0 96px; }
.score-stack { display:flex; flex:0 0 96px; flex-direction:column; align-items:center; gap:.16rem; }
.score-origin-chip { display:block; max-width:96px; padding:.14rem .38rem; border-radius:999px; font-size:.49rem; font-weight:850; letter-spacing:.025em; line-height:1.2; text-align:center; text-transform:uppercase; white-space:nowrap; }
.score-origin-chip.declared { color:#0d6b40; background:#dff4e9; box-shadow:0 0 0 2px white; }
.score-origin-chip.calculated { color:#355149; background:#edf1ee; }
.score-origin-chip.estimated { color:#775200; background:#fff0c9; }
.nutri-estimate { display:grid; align-content:center; justify-items:start; width:96px; min-height:52px; padding:.45rem .55rem; border:1px solid #cfd7d1; border-left:5px solid var(--neutral); border-radius:.55rem; background:#f8faf8; color:var(--ink); line-height:1.05; }
.nutri-estimate small { color:var(--muted); font-size:.58rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.nutri-estimate strong { margin-top:.18rem; font-size:1.12rem; }
.nutri-estimate.grade-a { border-left-color:#13844f; }
.nutri-estimate.grade-b { border-left-color:#58a946; }
.nutri-estimate.grade-c { border-left-color:#efbd28; }
.nutri-estimate.grade-d { border-left-color:#ef8422; }
.nutri-estimate.grade-e { border-left-color:#d8382a; }
.score-empty { display:grid; gap:.08rem; padding:.35rem 0 .35rem .7rem; border-left:2px solid #d9ddd7; color:#737a74; line-height:1.2; }
.score-empty strong { color:#59615a; font-size:.78rem; font-weight:780; }
.score-empty small { font-size:.66rem; }
.score-missing { display:grid; gap:.08rem; min-width:88px; padding:.25rem 0 .25rem .7rem; border-left:1px solid #d9ddd7; color:#747b75; line-height:1.15; }
.score-missing small { font-size:.58rem; font-weight:820; letter-spacing:.035em; text-transform:uppercase; }
.score-missing strong { font-size:.7rem; font-weight:650; }
.score-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:62px; height:48px; border-radius:.5rem; color:white; overflow:hidden; line-height:1; }
.score-badge small { margin-bottom:.15rem; font-size:.52rem; font-weight:850; letter-spacing:.03em; text-transform:uppercase; }
.score-badge strong { font-size:1.1rem; }
.score-badge.grade-a, .score-hero.grade-a .score-letter { background:#13844f; }
.score-badge.grade-b, .score-hero.grade-b .score-letter { background:#58a946; }
.score-badge.grade-c, .score-hero.grade-c .score-letter { background:#efbd28; color:#473a00; }
.score-badge.grade-d, .score-hero.grade-d .score-letter { background:#ef8422; }
.score-badge.grade-e, .score-hero.grade-e .score-letter { background:#d8382a; }
.score-badge.green { border-radius:55% 45% 55% 45%; }
.score-badge.score-unknown, .score-hero.score-unknown .score-letter { background:#e4e5e3; color:#737873; }
.product-toggle { display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid #d9ddd7; border-radius:.7rem; background:white; color:var(--ink); cursor:pointer; box-shadow:0 1px 2px rgba(22,59,49,.06); transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.product-toggle:hover { border-color:#b9ca7b; background:#f5f9e8; box-shadow:0 4px 12px rgba(22,59,49,.1); transform:translateY(-1px); }
.toggle-chevron { display:block; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease; }
.product-toggle[aria-expanded="true"] .toggle-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.product-details-row[hidden] { display:none; }
.product-details-row td { padding:0 1rem 1.25rem; background:#fbfaf5; }
.product-details { max-width:900px; margin:0 auto; padding:1.35rem; border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 14px 40px rgba(22,59,49,.08); }
.detail-heading { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; }
.detail-heading h2 { margin:.25rem 0 0; font-size:clamp(1.25rem,3vw,1.8rem); line-height:1.2; }
.verified-source, .missing-source { flex:none; padding:.38rem .65rem; border-radius:999px; font-size:.75rem; font-weight:800; }
.verified-source { color:#0d6b40; background:#dff4e9; }
.missing-source { color:#775200; background:#fff0c9; }
.detail-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:1.4rem 0; padding:3px; border-radius:999px; background:#eceeeb; }
.detail-tabs button { min-height:44px; border:0; border-radius:999px; background:transparent; color:var(--ink); font-weight:800; cursor:pointer; }
.detail-tabs button[aria-selected="true"] { background:white; box-shadow:0 2px 8px rgba(22,59,49,.08); }
.score-hero { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.score-hero .nutri-score-logo-hero, .score-hero .green-score-logo-hero { width:132px; flex:0 0 132px; }
.score-hero .nutri-estimate-hero { width:132px; min-height:72px; flex:0 0 132px; padding:.65rem .8rem; }
.score-hero .nutri-estimate-hero small { font-size:.65rem; }
.score-hero .nutri-estimate-hero strong { font-size:1.55rem; }
.score-letter { display:grid; place-items:center; width:70px; height:70px; flex:0 0 70px; border-radius:50%; color:white; font-size:2rem; font-weight:900; }
.score-hero > div:last-child { display:grid; }
.score-hero .score-provenance { margin-bottom:.12rem; color:#58716a; font-size:.68rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.score-hero > div:last-child strong { font-size:1.25rem; }
.score-hero > div:last-child span { color:var(--muted); }
.score-unavailable-panel { display:flex; align-items:center; gap:.8rem; margin-bottom:1.25rem; padding:.85rem 1rem; border:1px dashed #cfd5d0; border-radius:.75rem; background:#fafbf9; }
.score-unavailable-panel > span { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#a7ada8; }
.score-unavailable-panel > div { display:grid; }
.score-unavailable-panel strong { color:#4f5952; font-size:.9rem; }
.score-unavailable-panel small { color:var(--muted); }
.score-comparison { display:grid; grid-template-columns:1fr auto 1fr; gap:.85rem; align-items:center; margin:-.25rem 0 1.25rem; padding:1rem; border:1px solid #e0d7c5; border-radius:.8rem; background:#fffaf0; }
.score-comparison > div { display:grid; }
.score-comparison > div:nth-of-type(2) { text-align:right; }
.score-comparison span:not(.score-comparison-separator) { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.score-comparison strong { font-size:1.5rem; line-height:1; }
.score-comparison small { color:var(--muted); }
.score-comparison-separator { color:#9b7240; font-size:1.25rem; font-weight:900; }
.score-comparison p { grid-column:1 / -1; margin:0; padding-top:.75rem; border-top:1px solid #e7dfcf; color:var(--muted); font-size:.84rem; }
.score-comparison.matches { border-color:#cfe3d6; background:#f2faf5; }
.data-unavailable, .data-warning { padding:1rem; border-radius:.7rem; }
.data-unavailable { background:#f0f1ef; }
.data-unavailable.compact { margin-top:1rem; }
.data-warning { margin:0 0 1rem; background:#fff4d8; }
.data-unavailable p, .data-warning p { margin:.25rem 0 0; color:var(--muted); }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.section-title h3, .metrics-section h3 { margin:0 0 .7rem; font-size:1.2rem; }
.section-title span { color:var(--muted); font-size:.85rem; }
.nutrition-block { margin:1.25rem 0 1.5rem; }
.calculation-formula { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:1rem 0 1.35rem; padding:.85rem 1rem; border:1px solid #d7dfd8; border-radius:.75rem; background:#f7faf7; }
.calculation-formula span { color:var(--muted); font-size:.8rem; }
.calculation-formula span strong { margin-left:.2rem; color:var(--ink); font-size:1rem; }
.calculation-formula > small { flex-basis:100%; color:#68716b; font-size:.7rem; }
.nutrition-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; border:1px solid var(--line); background:var(--line); }
.nutrition-grid div { padding:.75rem; background:white; }
.nutrition-grid dt { color:var(--muted); font-size:.74rem; font-weight:700; }
.nutrition-grid dd { margin:.2rem 0 0; color:var(--ink); font-size:.95rem; font-weight:800; }
.metrics-section { margin:1.5rem 0 0; }
.metric-row { border-top:1px solid #e4e2dc; }
.metric-row:last-child { border-bottom:1px solid #e4e2dc; }
.metric-row summary { display:grid; grid-template-columns:12px minmax(0,1fr) auto 24px; gap:.8rem; align-items:center; min-height:66px; padding:.6rem 0; cursor:pointer; list-style:none; }
.metric-row summary::-webkit-details-marker { display:none; }
.metric-dot { width:10px; height:10px; border-radius:50%; background:var(--neutral); }
.tone-good .metric-dot { background:var(--good); }
.tone-warning .metric-dot { background:var(--warning); }
.tone-bad .metric-dot { background:var(--bad); }
.metric-copy { display:grid; min-width:0; }
.metric-copy strong { font-size:1rem; }
.metric-copy small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.metric-value { color:var(--muted); font-weight:700; text-align:right; }
.metric-arrow { color:#8b908c; font-size:1.3rem; transition:transform .2s ease; }
.metric-row[open] .metric-arrow { transform:rotate(180deg); }
.metric-proof { margin:0 0 .7rem 1.35rem; padding:.8rem; border-left:3px solid var(--line); background:#faf9f5; color:var(--muted); font-size:.86rem; }
.metric-proof p { margin:0 0 .3rem; }
.metric-proof span { font-size:.76rem; }
.source-proof { margin-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.source-proof summary { padding:.9rem 0 0; color:var(--ink); font-weight:800; cursor:pointer; }
.source-proof p { margin:.5rem 0; }
.source-proof a { color:var(--ink); font-weight:800; }
.source-proof-block { padding:.75rem 0; }
.source-proof-block + .source-proof-block { border-top:1px solid #e7e2d8; }
.declared-proof { margin-top:.4rem; padding:.8rem; border-radius:.65rem; background:#f0f8f2; }
.source-links { display:flex; flex-wrap:wrap; gap:.8rem; }
.empty { padding:2rem; text-align:center; color:var(--muted); }

@media (max-width:1100px) {
  .site-header, main { padding-left:1rem; padding-right:1rem; }
  .controls { grid-template-columns:1fr 1fr; }
  .search-control { grid-column:1 / -1; }
  .hero { padding-top:2rem; }
  .table-wrap { overflow:visible; border-top:0; }
  table, tbody { display:block; min-width:0; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .product-row { position:relative; display:grid; grid-template-columns:1fr 46px; margin-top:.75rem; padding:.85rem; border:1px solid var(--line); border-radius:.9rem; background:white; }
  .product-row td { display:block; grid-column:1; padding:.35rem 0; border:0; }
  .product-row td::before { content:attr(data-label); display:block; margin-bottom:.15rem; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .product-row td:first-child::before, .product-row .toggle-cell::before { display:none; }
  .product-row .toggle-cell { position:absolute; top:1rem; right:.8rem; grid-column:2; padding:0; }
  .product-row:has(.product-toggle[aria-expanded="true"]) { border-radius:.9rem .9rem 0 0; border-bottom-color:transparent; background:#fbfaf5; }
  .product-row:has(.product-toggle[aria-expanded="true"]) td { background:transparent; }
  .product-cell { min-width:0; padding-right:48px; }
  .product-cell strong { min-width:0; }
  .score-pair { min-width:0; }
  .offers { max-width:none; }
  .product-details-row { display:block; }
  .product-details-row[hidden] { display:none; }
  .product-details-row td { display:block; padding:0; border:0; }
  .product-details { max-width:none; border-radius:0 0 .9rem .9rem; box-shadow:none; }
}

@media (max-width:560px) {
  main { padding-top:.5rem; }
  .catalogue-panel { margin-left:-1rem; margin-right:-1rem; padding:1rem; border-left:0; border-right:0; }
  .controls { grid-template-columns:1fr; }
  .search-control { grid-column:auto; }
  .product-image, .product-image-unavailable { width:78px; height:78px; flex-basis:78px; }
  .detail-heading { display:grid; }
  .verified-source, .missing-source { width:max-content; max-width:100%; }
  .product-details { padding:1rem; }
  .nutrition-grid { grid-template-columns:1fr 1fr; }
  .metric-row summary { grid-template-columns:10px minmax(0,1fr) 24px; gap:.6rem; }
  .metric-value { grid-column:2; text-align:left; }
  .metric-arrow { grid-column:3; grid-row:1 / span 2; }
  .score-hero { align-items:flex-start; }
  .score-comparison { grid-template-columns:1fr auto 1fr; gap:.55rem; }
}