/* ========== TOKENS ========== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  --ink-50:#eef2f6;--ink-100:#d6dee7;--ink-200:#a9b9c9;--ink-300:#7a8ea3;--ink-400:#4f6478;
  --ink-500:#2d4154;--ink-600:#1a2b3d;--ink-700:#0e1e2e;--ink-800:#071421;--ink-900:#030b14;
  --teal-50:#edf7f9;--teal-100:#d4ecf0;--teal-200:#a8d8e0;--teal-300:#7cc2cf;--teal-400:#5aa9b8;
  --teal-500:#3f8c9c;--teal-600:#2d7081;--teal-700:#225764;--teal-800:#1a424c;--teal-900:#122e35;
  --paper-0:#ffffff;--paper-50:#fbfaf7;--paper-100:#f5f3ed;--paper-200:#ece8de;--paper-300:#ddd7c7;
  --grade-good-50:#eaf5ec;--grade-good-500:#4c8c5a;--grade-good-700:#305a3b;
  --grade-neutral-50:#f1f0ea;--grade-neutral-500:#8a866f;--grade-neutral-700:#56533f;
  --grade-caution-50:#fbf1df;--grade-caution-500:#c68a2a;--grade-caution-700:#8a5c13;
  --grade-avoid-50:#f7e6e4;--grade-avoid-500:#b84b3c;--grade-avoid-700:#7f2e22;
  --bg:var(--paper-50);--bg-raised:var(--paper-0);--bg-sunken:var(--paper-100);--bg-inverse:var(--ink-800);
  --fg:var(--ink-800);--fg-muted:var(--ink-500);--fg-subtle:var(--ink-300);--fg-on-inverse:var(--paper-50);--fg-on-accent:var(--paper-0);
  --accent:var(--teal-500);--accent-hover:var(--teal-600);--accent-press:var(--teal-700);--accent-subtle:var(--teal-50);
  --link:var(--teal-600);--link-visited:var(--ink-600);--link-hover:var(--teal-700);
  --border:var(--ink-100);--border-strong:var(--ink-200);--border-subtle:var(--paper-200);
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Lora",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
  --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:17px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:38px;--fs-4xl:48px;--fs-5xl:64px;
  --lh-tight:1.15;--lh-snug:1.3;--lh-normal:1.5;--lh-relaxed:1.65;
  --ls-tight:-0.02em;--ls-snug:-0.01em;--ls-normal:0;--ls-wide:0.04em;--ls-caps:0.08em;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:16px;--r-pill:999px;
  --shadow-0:0 0 0 1px var(--border);
  --shadow-1:0 1px 2px rgba(7,20,33,0.04),0 0 0 1px var(--border);
  --shadow-2:0 2px 6px rgba(7,20,33,0.06),0 1px 2px rgba(7,20,33,0.05);
  --shadow-3:0 8px 24px rgba(7,20,33,0.10),0 2px 4px rgba(7,20,33,0.06);
  --shadow-focus:0 0 0 3px rgba(63,140,156,0.35);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --width-prose:68ch;--width-content:1120px;--width-wide:1280px;
}
html[data-theme="dark"] {
  --bg:#0b1620;--bg-raised:#111f2c;--bg-sunken:#081019;
  --fg:#e6ecf2;--fg-muted:#9fb1c3;--fg-subtle:#6a7f93;
  --accent:#6fc0d0;--accent-hover:#88d0de;--accent-press:#a0dce8;--accent-subtle:#15333c;
  --link:#7cc2cf;--link-visited:#a9b9c9;--link-hover:#a8d8e0;
  --border:#1f3140;--border-strong:#2b4254;--border-subtle:#16252f;
  --paper-0:#121f2b;--paper-50:#0b1620;--paper-100:#0e1a25;--paper-200:#16242f;
  --grade-good-50:#12291c;--grade-good-500:#5ea572;--grade-good-700:#a0d4ae;
  --grade-neutral-50:#1e1d17;--grade-neutral-500:#a29c82;--grade-neutral-700:#d4cdb0;
  --grade-caution-50:#2b1e0c;--grade-caution-500:#d7a14a;--grade-caution-700:#f0c988;
  --grade-avoid-50:#2c1512;--grade-avoid-500:#d2695b;--grade-avoid-700:#f2a89d;
  --shadow-1:0 1px 2px rgba(0,0,0,0.35),0 0 0 1px var(--border);
  --shadow-2:0 2px 8px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.3);
  --shadow-3:0 12px 30px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.35);
  --shadow-focus:0 0 0 3px rgba(124,194,207,0.35);
}

/* ========== RESET & BASE ========== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden;max-width:100%;}
body{font-family:var(--font-display);color:var(--fg);background:var(--bg);font-size:var(--fs-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--link);text-decoration:none;cursor:pointer;}
a:hover{color:var(--link-hover);}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}

/* ========== TOPBAR ========== */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--width-wide);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px;}
.brand-mark{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;}
.brand-mark svg{width:26px;height:26px;flex-shrink:0;}
.brand-mark .wm{font-weight:800;font-size:18px;color:var(--fg);letter-spacing:-0.01em;}
.brand-mark .wm .ru{color:var(--teal-600);font-weight:700;font-size:11px;vertical-align:top;margin-left:2px;}
html[data-theme="dark"] .brand-mark .wm .ru{color:var(--accent);}
.topbar-search-wrap{flex:1;max-width:480px;min-width:0;position:relative;}
.topbar-search{position:relative;}
.topbar-search input{width:100%;padding:9px 40px 9px 34px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:13px;color:var(--fg);outline:none;transition:border-color 150ms var(--ease-out),box-shadow 150ms var(--ease-out),background 150ms;font-family:var(--font-display);min-width:0;}
.topbar-search input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);background:var(--bg-raised);}
.topbar-search input::placeholder{color:var(--fg-subtle);}
.topbar-search>.leading-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-subtle);pointer-events:none;}
.topbar-search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg-raised);}
.topbar-nav{display:flex;gap:4px;font-size:13px;font-weight:500;}
.topbar-nav a{color:var(--fg-muted);cursor:pointer;padding:7px 11px;border-radius:6px;transition:color 120ms,background 120ms;}
.topbar-nav a:hover{color:var(--fg);background:var(--bg-sunken);text-decoration:none;}
.topbar-nav a.active{color:var(--fg);font-weight:600;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--fg-muted);transition:color 120ms,background 120ms;}
.theme-toggle:hover{color:var(--fg);background:var(--bg-sunken);}

/* ========== PAGE SHELL ========== */
.page{max-width:min(var(--width-content),100%);width:100%;margin:0 auto;padding:40px 28px 80px;overflow-x:hidden;}
.page-wide{max-width:min(var(--width-wide),100%);}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);font-size:14px;font-weight:600;line-height:1;border:1px solid transparent;transition:all 150ms var(--ease-out);font-family:var(--font-display);white-space:nowrap;}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none;}
.btn-primary:active{background:var(--accent-press);}
.btn-secondary{background:var(--bg-raised);color:var(--fg);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--bg-sunken);border-color:var(--fg-subtle);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--fg-muted);}
.btn-ghost:hover{background:var(--bg-sunken);color:var(--fg);text-decoration:none;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed;}

/* ========== CARDS ========== */
.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;}
.card-flat{padding:0;}

/* ========== GRADES ========== */
.grade-dot{width:10px;height:10px;border-radius:999px;flex-shrink:0;display:inline-block;}
.grade-dot.good{background:var(--grade-good-500);}
.grade-dot.neutral{background:var(--grade-neutral-500);}
.grade-dot.caution{background:var(--grade-caution-500);}
.grade-dot.avoid{background:var(--grade-avoid-500);}
.grade-dot.unknown{background:var(--fg-subtle);opacity:0.5;}
.grade-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:0.02em;font-family:var(--font-display);}
.grade-pill.good{background:var(--grade-good-50);color:var(--grade-good-700);}
.grade-pill.neutral{background:var(--grade-neutral-50);color:var(--grade-neutral-700);}
.grade-pill.caution{background:var(--grade-caution-50);color:var(--grade-caution-700);}
.grade-pill.avoid{background:var(--grade-avoid-50);color:var(--grade-avoid-700);}

/* ========== INCI ROW ========== */
.inci-row{display:grid;grid-template-columns:20px minmax(160px,260px) minmax(120px,1fr) minmax(140px,220px) 56px 18px;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background 120ms var(--ease-out);}
.inci-row:last-child{border-bottom:0;}
.inci-row:hover{background:var(--bg-sunken);}
.inci-row .name{font-family:var(--font-mono);font-size:13px;color:var(--fg);font-weight:500;}
.inci-row .ru{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);font-style:italic;}
.inci-row .fns{display:flex;gap:5px;flex-wrap:wrap;}
/* Standalone fn-chip (ingredient header, index filters, etc.) */
.fn-chip{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:4px 12px;
  border-radius:var(--r-pill);
  background:var(--bg-raised);
  color:var(--fg-muted);
  border:1px solid var(--border-strong);
  white-space:nowrap;
  text-decoration:none;
  cursor:default;
  line-height:1.4;
}
.fn-chip--link{cursor:pointer;}
.fn-chip--link:hover{
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:var(--accent);
  text-decoration:none;
}
.fn-chip.active{
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:var(--accent);
}
/* Compact variant inside ingredient rows */
.inci-row .fn-chip{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:999px;background:var(--bg-sunken);color:var(--fg-muted);border:1px solid var(--border);font-weight:600;cursor:default;}
.inci-row .pct{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);font-variant-numeric:tabular-nums;}
.inci-row .arrow{color:var(--fg-subtle);font-size:14px;transition:transform 120ms,color 120ms;}
.inci-row:hover .arrow{color:var(--fg);transform:translateX(2px);}

/* ========== TABS ========== */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto;}
.tabs .tab{padding:11px 18px;font-size:14px;font-weight:500;color:var(--fg-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color 120ms var(--ease-out),border-color 120ms var(--ease-out);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;background:transparent;font-family:var(--font-display);}
.tabs .tab:hover{color:var(--fg);}
.tabs .tab.active{color:var(--fg);border-bottom-color:var(--accent);font-weight:600;}
.tabs .tab .count{font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:999px;background:var(--bg-sunken);color:var(--fg-muted);font-weight:600;}
.tabs .tab.active .count{background:var(--accent-subtle);color:var(--accent);}

/* ========== TYPOGRAPHY HELPERS ========== */
.eyebrow{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);font-weight:700;}
.eyebrow.accent{color:var(--accent);}
h1{word-break:break-word;overflow-wrap:break-word;}
.h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:var(--fg);margin:0;word-break:break-word;overflow-wrap:break-word;}
.h2{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-0.01em;line-height:1.2;color:var(--fg);margin:0;}
.h3{font-size:var(--fs-lg);font-weight:600;line-height:1.3;color:var(--fg);margin:0;}
.muted{color:var(--fg-muted);}
.mono{font-family:var(--font-mono);}
.serif{font-family:var(--font-serif);}

/* ========== LAYOUT ========== */
.stack>*+*{margin-top:var(--sp-4);}
.stack-sm>*+*{margin-top:var(--sp-2);}
.stack-lg>*+*{margin-top:var(--sp-8);}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.divider{height:1px;background:var(--border);margin:32px 0;border:0;}
.spacer-sm{height:16px;}.spacer-md{height:32px;}.spacer-lg{height:56px;}

/* ========== HERO ========== */
.hero{padding:0;position:relative;overflow:hidden;}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero h1{font-size:52px;font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin:0 0 16px;color:var(--fg);}
.hero h1 .accent{color:var(--accent);}
html[data-theme="dark"] .hero h1 .accent{color:var(--accent-hover);}
.hero .sub{font-family:var(--font-serif);font-size:19px;line-height:1.55;color:var(--fg-muted);margin:0 0 32px;max-width:58ch;}
.hero-search{display:flex;align-items:stretch;gap:0;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:6px;box-shadow:var(--shadow-1);transition:border-color 150ms,box-shadow 150ms;}
.hero-search:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.hero-search .leading{display:flex;align-items:center;padding:0 8px 0 12px;color:var(--fg-subtle);}
.hero-search input{flex:1;border:0;outline:0;background:transparent;font-size:16px;padding:10px 0;color:var(--fg);font-family:var(--font-display);}
.hero-search input::placeholder{color:var(--fg-subtle);}
.hero-search .btn{border-radius:calc(var(--r-lg) - 6px);}
.hero-quick-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--fg-muted);}
.hero-quick-links a{font-weight:600;color:var(--accent);}
html[data-theme="dark"] .hero-quick-links a{color:var(--accent-hover);}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--border);padding-top:24px;}
.hero-stat .num{font-size:28px;font-weight:800;letter-spacing:-0.01em;color:var(--fg);font-variant-numeric:tabular-nums;}
.hero-stat .lbl{font-size:12px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:4px;}

/* ========== SEARCH DROPDOWN ========== */
.search-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);z-index:60;overflow:hidden;max-height:480px;overflow-y:auto;}
.search-group{padding:10px 0;border-bottom:1px solid var(--border-subtle);}
.search-group:last-child{border-bottom:0;}
.search-group-header{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-muted);}
.search-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background 100ms;}
.search-item:hover{background:var(--bg-sunken);}
.search-item .icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--bg-sunken);color:var(--fg-muted);flex-shrink:0;}
.search-item .title{font-weight:600;color:var(--fg);font-size:14px;}
.search-item .title .mono{font-family:var(--font-mono);font-weight:500;}
.search-item .sub{font-size:12px;color:var(--fg-muted);margin-top:1px;}
.search-item .right{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);}
.search-show-all{display:block;padding:10px 16px;font-size:13px;font-weight:500;color:var(--accent);border-top:1px solid var(--border-subtle);text-decoration:none;transition:background 100ms;}
.search-show-all:hover{background:var(--bg-sunken);}

/* ========== SECTION HEADS & FEATURE CARDS ========== */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;gap:16px;flex-wrap:wrap;}
.section-head .link{font-size:14px;font-weight:600;color:var(--accent);}
html[data-theme="dark"] .section-head .link{color:var(--accent-hover);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.feature-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:border-color 150ms,transform 150ms;}
.feature-card:hover{border-color:var(--border-strong);}
.feature-card h3{font-size:20px;font-weight:700;margin:8px 0 6px;color:var(--fg);letter-spacing:-0.01em;}
.feature-card p{font-family:var(--font-serif);font-size:14px;line-height:1.55;color:var(--fg-muted);margin:0 0 16px;}
.feature-card .icon-bg{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-subtle);color:var(--accent);margin-bottom:4px;}
html[data-theme="dark"] .feature-card .icon-bg{color:var(--accent-hover);}
.feature-card .cta{color:var(--accent);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:4px;}

/* ========== BRANDS ========== */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.brand-cell{display:block;padding:14px 16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);font-weight:600;font-size:14px;color:var(--fg);cursor:pointer;transition:all 120ms var(--ease-out);}
.brand-cell .count{float:right;color:var(--fg-subtle);font-weight:500;font-family:var(--font-mono);font-size:12px;}
.brand-cell:hover{border-color:var(--accent);background:var(--accent-subtle);color:var(--fg);text-decoration:none;}

/* ========== FUNCTION CARDS ========== */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.fn-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:all 150ms;}
.fn-card:hover{border-color:var(--accent);}
.fn-card .t{font-size:15px;font-weight:700;color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:8px;}
.fn-card .t .count{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);font-weight:500;}
.fn-card .d{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);margin-top:6px;line-height:1.45;}
.fn-card .samples{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px;}
.fn-card .samples .s{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);background:var(--bg-sunken);padding:2px 7px;border-radius:4px;}

/* ========== PRODUCT PAGE ========== */
.product-layout{display:grid;grid-template-columns:1fr 260px;gap:24px 40px;align-items:start;grid-template-areas:"header sidebar" "tabs sidebar";}
.product-layout__header{grid-area:header;min-width:0;}
.product-layout__sidebar{grid-area:sidebar;min-width:0;display:flex;flex-direction:column;gap:24px;position:sticky;top:80px;align-self:start;}
.product-layout__media{min-width:0;}
.product-layout__info{min-width:0;}
.product-layout__tabs{grid-area:tabs;min-width:0;}

/* ========== INGREDIENT PAGE ========== */
.ingr-layout{display:grid;grid-template-columns:1fr 260px;gap:24px 40px;align-items:start;}
.ingr-layout__header{grid-column:1;min-width:0;}
.ingr-layout__content{grid-column:1;min-width:0;}
.ingr-layout__aside{grid-column:2;grid-row:1/span 2;align-self:start;position:sticky;top:80px;min-width:0;display:flex;flex-direction:column;gap:12px;}

.product-thumb{aspect-ratio:3/4;width:100%;background:var(--bg-sunken);border-radius:var(--r-lg);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--fg-subtle);font-size:12px;text-align:center;padding:20px;position:relative;}
.product-thumb .placeholder-stamp{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:12px;padding:4px 10px;border:1px dashed var(--border-strong);border-radius:999px;}
.product-thumb .name{font-family:var(--font-serif);font-size:17px;color:var(--fg);font-style:italic;line-height:1.3;}
.product-meta-side{margin-top:16px;display:grid;gap:8px;font-size:13px;}
.product-meta-side .row-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-subtle);}
.product-meta-side .row-item:last-child{border-bottom:0;}
.product-meta-side .k{color:var(--fg-muted);font-size:12px;}
.product-meta-side .v{color:var(--fg);font-family:var(--font-mono);font-size:12px;text-align:right;}
.product-header-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.summary-stat{padding:14px 16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);position:relative;overflow:hidden;}
.summary-stat .num{font-size:26px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1;}
.summary-stat .lbl{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:6px;}
.summary-stat.good .num{color:var(--grade-good-700);}
.summary-stat.caution .num{color:var(--grade-caution-700);}
.summary-stat.avoid .num{color:var(--grade-avoid-700);}
.dist-bar{height:10px;border-radius:999px;overflow:hidden;display:flex;background:var(--bg-sunken);border:1px solid var(--border);}
.dist-bar .seg{height:100%;}
.dist-bar .seg.good{background:var(--grade-good-500);}
.dist-bar .seg.neutral{background:var(--grade-neutral-500);}
.dist-bar .seg.caution{background:var(--grade-caution-500);}
.dist-bar .seg.avoid{background:var(--grade-avoid-500);}
.dist-legend{display:flex;gap:14px;margin-top:10px;font-size:12px;flex-wrap:wrap;}
.dist-legend>div{display:flex;align-items:center;gap:6px;color:var(--fg-muted);}
.dist-legend>div b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;}
.actives-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.active-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:border-color 150ms;}
.active-card:hover{border-color:var(--accent);}
.active-card .name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--fg);}
.active-card .ru{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);font-style:italic;margin-top:1px;}
.active-card .desc{font-family:var(--font-serif);font-size:13px;color:var(--fg);margin-top:10px;line-height:1.5;}
.active-card .meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--fg-muted);}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.similar-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;cursor:pointer;transition:border-color 150ms;}
.similar-card:hover{border-color:var(--accent);}
.mini-thumb{aspect-ratio:1;background:var(--bg-sunken);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--fg-subtle);font-family:var(--font-serif);font-style:italic;font-size:13px;text-align:center;padding:12px;margin-bottom:12px;}
.similar-card .brand{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.similar-card .title{font-size:14px;font-weight:600;color:var(--fg);margin:3px 0 8px;line-height:1.3;}
.similar-card .match{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--accent);background:var(--accent-subtle);padding:3px 8px;border-radius:999px;font-weight:600;}

/* ========== INCI TOOLTIP ========== */
.inci-tooltip{position:fixed;z-index:90;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:14px 16px;max-width:340px;pointer-events:none;font-size:13px;}
.inci-tooltip .t{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.inci-tooltip .t .name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--fg);}
.inci-tooltip .ru{font-family:var(--font-serif);font-style:italic;color:var(--fg-muted);font-size:13px;margin-bottom:8px;}
.inci-tooltip .desc{font-family:var(--font-serif);font-size:13px;line-height:1.5;color:var(--fg);}
.inci-tooltip .footer{margin-top:10px;padding-top:8px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--fg-muted);display:flex;justify-content:space-between;}

/* ========== COMPOSER / SCANNER / COMPARE ========== */
.composer-input{width:100%;min-height:180px;padding:16px 18px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--fg);outline:0;transition:border-color 150ms var(--ease-out),box-shadow 150ms;resize:vertical;}
.composer-input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.scanner-frame{position:relative;background:#0a0d12;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;border:1px solid var(--border);}
.scanner-line{position:absolute;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan 2.4s ease-in-out infinite;box-shadow:0 0 12px var(--accent);}
@keyframes scan{0%,100%{top:10%;}50%{top:90%;}}
.scanner-corner{position:absolute;width:28px;height:28px;border:3px solid var(--accent);}

/* ========== COMPARE ========== */
.compare-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.compare-slot{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;min-height:180px;}
.compare-slot .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;cursor:pointer;color:var(--fg-muted);border:2px dashed var(--border);border-radius:var(--r-md);padding:32px;transition:all 150ms;}
.compare-slot .empty:hover{border-color:var(--accent);color:var(--accent);}
.compare-slot .remove{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--fg-muted);}
.compare-slot .remove:hover{background:var(--bg-sunken);color:var(--fg);}
.compare-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
.compare-table thead tr{border-bottom:2px solid var(--border);}
.compare-table__label-col{text-align:left;padding:12px 16px;font-weight:600;min-width:220px;vertical-align:top;}
.compare-table__product-col{text-align:center;padding:14px 12px;font-weight:600;min-width:140px;vertical-align:top;border-left:1px solid var(--border-subtle);}
.compare-table__divider td{padding:6px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--fg-muted);background:var(--bg-sunken);border-bottom:1px solid var(--border);}
.compare-table__row{border-bottom:1px solid var(--border-subtle);transition:background 80ms;}
.compare-table__row:hover{background:var(--bg-sunken);}
.compare-table__row--shared{background:color-mix(in srgb,var(--grade-good-50,#f0fdf4) 60%,transparent);}
.compare-table__row--shared:hover{background:color-mix(in srgb,var(--grade-good-50,#f0fdf4) 90%,transparent);}
.compare-table__ingr-cell{padding:8px 16px;vertical-align:middle;}
.compare-table__check-cell{text-align:center;padding:8px 12px;vertical-align:middle;border-left:1px solid var(--border-subtle);}
.compare-check--yes{color:var(--grade-good-600,#16a34a);font-weight:700;font-size:15px;}
.compare-check--no{color:var(--border-strong,#cbd5e1);font-size:15px;}
.compare-suggest-item:hover{background:var(--bg-sunken);}
.compare-suggest-item.disabled{opacity:0.45;cursor:default;pointer-events:none;}
.compare-search-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle);}
.compare-header{display:grid;gap:0;padding:14px 16px;background:var(--bg-sunken);border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;color:var(--fg-muted);}
.compare-row{display:grid;gap:0;padding:10px 16px;border-bottom:1px solid var(--border-subtle);align-items:center;font-size:13px;transition:background 100ms;}
.compare-row:last-child{border-bottom:0;}
.compare-row.shared{background:color-mix(in srgb,var(--accent-subtle) 60%,transparent);}
.compare-row:hover{background:var(--bg-sunken);}
.cell-ing{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0;}
.cell-ing .name{font-family:var(--font-mono);font-size:12px;color:var(--fg);}
.cell-ing .ru{font-family:var(--font-serif);font-size:11px;color:var(--fg-muted);font-style:italic;}
.cell-presence{display:flex;align-items:center;justify-content:center;font-size:12px;}
.cell-presence.has{color:var(--grade-good-700);}
.cell-presence.no{color:var(--fg-subtle);}

/* ========== MODAL ========== */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(7,20,33,0.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade 160ms ease-out;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:28px;animation:pop 180ms ease-out;}
@keyframes pop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.modal h3{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.modal .sub{color:var(--fg-muted);font-family:var(--font-serif);font-size:14px;margin:0 0 20px;}
.modal .field{margin-bottom:14px;}
.modal label{display:block;font-size:12px;font-weight:700;color:var(--fg);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.modal input,.modal textarea,.modal select{width:100%;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;color:var(--fg);outline:0;transition:border-color 150ms,box-shadow 150ms;font-family:var(--font-display);}
.modal textarea{font-family:var(--font-display);min-height:96px;resize:vertical;}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}

/* ========== MISC ========== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--bg-sunken);color:var(--fg);border:1px solid var(--border);}
.chip.accent{background:var(--accent-subtle);color:var(--accent);border-color:transparent;font-weight:600;}
html[data-theme="dark"] .chip.accent{color:var(--accent-hover);}
.az-filter{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:20px;}
.az-filter a{padding:4px 9px;border-radius:4px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--fg-muted);cursor:pointer;}
.az-filter a.active{background:var(--accent);color:#fff;}
.az-filter a.disabled{color:var(--fg-subtle);cursor:default;opacity:0.5;}
.az-filter a:hover:not(.disabled):not(.active){background:var(--bg-sunken);color:var(--fg);}
.breadcrumb{font-size:13px;color:var(--fg-muted);margin-bottom:16px;}
.breadcrumb a{color:var(--fg-muted);}
.breadcrumb a:hover{color:var(--fg);text-decoration:underline;}
.breadcrumb .sep{margin:0 6px;color:var(--fg-subtle);}
.breadcrumb .cur{color:var(--fg);font-weight:500;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-3);z-index:300;font-size:13px;font-weight:500;animation:slide-up 200ms ease-out;}
@keyframes slide-up{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
.source-block{margin-top:48px;padding:16px 20px;background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--r-md);font-family:var(--font-mono);font-size:12px;color:var(--fg-muted);line-height:1.7;}
.source-block a{color:var(--accent);}
.compare-dock{position:fixed;bottom:20px;right:20px;z-index:200;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:var(--r-md);padding:12px 16px;font-size:13px;font-weight:600;box-shadow:var(--shadow-3);cursor:pointer;transition:background 150ms;}
.compare-dock:hover{background:var(--accent-hover);}

/* ========== FOOTER ========== */
.site-footer{margin-top:80px;padding:40px 28px 48px;border-top:1px solid var(--border);background:var(--bg-sunken);font-size:13px;color:var(--fg-muted);}
.site-footer-inner{max-width:var(--width-wide);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
.site-footer h5{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg);font-weight:700;margin:0 0 12px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:8px;}
.site-footer a{color:var(--fg-muted);}
.site-footer a:hover{color:var(--fg);}
.site-footer .copyright{font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);margin-top:10px;}

/* ========== SCANNER LAYOUT ========== */
.scanner-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.ean-input{flex:1;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-mono);font-size:15px;color:var(--fg);outline:0;width:100%;transition:border-color 150ms,box-shadow 150ms;}
.ean-input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}

/* ========== FORM FIELDS ========== */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--fg-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;color:var(--fg);outline:0;font-family:var(--font-display);transition:border-color 150ms,box-shadow 150ms;}
.field textarea{font-family:var(--font-display);resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-track{background:transparent;}

/* ========== HOME PAGE ========== */
.recent-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.inci-row--fn{grid-template-columns:1fr 80px 18px;gap:14px;}
.inci-row--product{grid-template-columns:1fr 200px 18px;gap:14px;}
.inci-row--brand-product{grid-template-columns:1fr 18px;gap:14px;}
.fn-grid--col1{grid-template-columns:1fr;}

/* ========== MOBILE NAV (hamburger menu) ========== */
.mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:var(--r-md);
  color:var(--fg-muted);
  flex-shrink:0;
  transition:background 120ms,color 120ms;
}
.mobile-menu-btn:hover{background:var(--bg-sunken);color:var(--fg);}
.mobile-menu-icon{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:18px;height:18px;
}
.mobile-menu-icon span{
  display:block;height:2px;background:currentColor;border-radius:2px;
  transform-origin:center;
  transition:transform 250ms var(--ease-out),opacity 200ms,width 200ms;
}
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){opacity:0;transform:scaleX(0);}
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;
  position:fixed;
  top:var(--topbar-h,57px);left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:48;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:mobile-nav-in 220ms var(--ease-out);
}
@keyframes mobile-nav-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.mobile-nav.is-open{display:flex;flex-direction:column;}
.mobile-nav__links{flex:1;padding:8px 0;}
.mobile-nav__links a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  font-size:16px;
  font-weight:600;
  color:var(--fg);
  border-bottom:1px solid var(--border-subtle);
  transition:background 100ms;
  text-decoration:none;
}
.mobile-nav__links a:hover,.mobile-nav__links a.active{background:var(--bg-sunken);color:var(--fg);}
.mobile-nav__links a.active{color:var(--accent);}
.mobile-nav__links a svg{color:var(--fg-muted);flex-shrink:0;}
.mobile-nav__links a.active svg{color:var(--accent);}
.mobile-nav__footer{
  padding:16px 20px 32px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
}

a.inci-row,a.fn-card,a.similar-card{color:inherit;text-decoration:none}
button.theme-toggle{font-size:17px}
.scanner-corner{position:absolute;width:34px;height:24px;border:2px solid var(--accent)}
.scan-demo.scanning .scanner-line{display:block}
.scanner-line{display:none;position:absolute;left:4%;right:4%;top:50%;height:2px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:scanline 1.2s linear infinite}
@keyframes scanline{0%{top:10%}50%{top:90%}100%{top:10%}}
.search-results{display:grid;gap:12px}
.topbar-search .suggest{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);z-index:90;overflow:hidden}
.topbar-search .suggest a{display:block;padding:9px 14px;color:var(--fg);font-size:13px}
.topbar-search .suggest a:hover{background:var(--bg-sunken);text-decoration:none}
.alpha-bar{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md)}
.alpha-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:none;transition:all 100ms var(--ease-out)}
.alpha-btn:hover{background:var(--accent-subtle);color:var(--accent);text-decoration:none}
.alpha-btn.active{background:var(--accent);color:#fff}
.alpha-btn.disabled{color:var(--border-strong);pointer-events:none}
.rich-text p{margin:0 0 1em}
.rich-text p:last-child{margin-bottom:0}
.rich-text strong{font-weight:700}
.rich-text a{color:var(--accent)}
.rich-text ul,.rich-text ol{padding-left:1.4em;margin:0 0 1em}
.rich-text li{margin-bottom:0.3em}
/* ── Product card slider ─────────────────────────────────────────── */
.pslider{position:relative;width:100%}
.pslider__viewport{overflow:hidden;width:100%}
.pslider__track{display:flex;transition:transform 350ms cubic-bezier(.25,.46,.45,.94);will-change:transform}
.pslider__slide{flex:0 0 20%;box-sizing:border-box;padding:0 8px}
.pslider__btn{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;border:none;background:rgba(var(--bg-raised-rgb,255,255,255),.82);cursor:pointer;font-size:28px;color:var(--fg);transition:background 150ms,opacity 150ms;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:0}
.pslider__btn:hover{background:rgba(var(--bg-raised-rgb,255,255,255),.96)}
.pslider__btn--prev{left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.pslider__btn--next{right:0;border-radius:0 var(--r-md) var(--r-md) 0}
.pslider__btn[disabled]{opacity:0;pointer-events:none}
/* card inside slide */
.pcard{display:block;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--fg);transition:box-shadow 150ms var(--ease-out),border-color 150ms var(--ease-out);background:var(--bg-raised);height:100%}
.pcard:hover{box-shadow:var(--shadow-2);border-color:var(--accent);text-decoration:none}
.pcard__img{position:relative;aspect-ratio:1/1;background:var(--bg-raised);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.pcard__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:12px;box-sizing:border-box;}
.pcard__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;text-align:center}
.pcard__img img ~ .pcard__overlay{opacity:0}
.pcard__img:not(:has(img)) .pcard__overlay{opacity:1}
.pcard__brand-over{font-family:var(--font-serif);font-style:italic;font-size:12px;color:var(--fg-muted);margin-bottom:4px}
.pcard__name-over{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--fg-muted)}
.pcard__meta{padding:10px 12px 12px}
.pcard__brand{font-size:10px;font-weight:700;letter-spacing:0.06em;color:var(--fg-muted);text-transform:uppercase;margin-bottom:4px}
.pcard__name{font-size:13px;font-weight:600;line-height:1.35;font-family:var(--font-display)}
/* ── Product action buttons ────────────────────────────────────── */
.prod-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.btn-ghost{background:transparent;border:none;color:var(--fg-muted);padding:0 10px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:36px;border-radius:var(--r-md);transition:color 150ms,background 150ms}
.btn-ghost:hover{color:var(--fg);background:var(--bg-sunken);text-decoration:none}
/* ── Grade stats grid ───────────────────────────────────────────── */
.grade-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.grade-stat-tile{border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.grade-stat-tile__num{font-size:28px;font-weight:700;line-height:1;margin-bottom:4px}
.grade-stat-tile__label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)}
.grade-stat-tile.good .grade-stat-tile__num{color:var(--grade-good-500)}
.grade-stat-tile.neutral .grade-stat-tile__num{color:var(--grade-neutral-500)}
.grade-stat-tile.caution .grade-stat-tile__num{color:var(--grade-caution-500)}
.grade-stat-tile.avoid .grade-stat-tile__num{color:var(--grade-avoid-500)}
/* ── Grade bar ──────────────────────────────────────────────────── */
.grade-bar{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;margin:0 0 8px}
.grade-bar__seg{min-width:2px;transition:flex .3s ease}
.grade-bar__seg.good{background:var(--grade-good-500)}
.grade-bar__seg.neutral{background:var(--grade-neutral-500)}
.grade-bar__seg.caution{background:var(--grade-caution-500)}
.grade-bar__seg.avoid{background:var(--grade-avoid-500)}
/* ── Grade legend ───────────────────────────────────────────────── */
.grade-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--fg-muted);margin-bottom:4px}
.grade-legend strong{color:var(--fg)}
/* ── Grade chips (tab filter) ───────────────────────────────────── */
.grade-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.grade-chip{border:none;background:var(--bg-sunken);border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all 120ms;color:var(--fg-muted)}
.grade-chip:hover{background:var(--border)}
.grade-chip.active{background:var(--border);color:var(--fg)}
.grade-chip.good.active,.grade-chip.good:hover{background:var(--grade-good-50);color:var(--grade-good-700)}
.grade-chip.neutral.active,.grade-chip.neutral:hover{background:var(--grade-neutral-50);color:var(--grade-neutral-700)}
.grade-chip.caution.active,.grade-chip.caution:hover{background:var(--grade-caution-50);color:var(--grade-caution-700)}
.grade-chip.avoid.active,.grade-chip.avoid:hover{background:var(--grade-avoid-50);color:var(--grade-avoid-700)}
.grade-chips__hint{margin-left:auto;font-size:11px;color:var(--fg-subtle);font-style:italic}
/* ── Product tabs ───────────────────────────────────────────────── */
.prod-tabs__nav{display:flex;border-bottom:2px solid var(--border);gap:0;margin-bottom:20px;overflow-x:auto}
.prod-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;padding:10px 16px;font-size:14px;font-weight:600;font-family:var(--font-display);color:var(--fg-muted);cursor:pointer;white-space:nowrap;transition:color 150ms,border-color 150ms;display:inline-flex;align-items:center;gap:6px}
.prod-tab:hover{color:var(--fg)}
.prod-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.prod-tab__badge{background:var(--accent-subtle);color:var(--accent);border-radius:var(--r-pill);padding:1px 7px;font-size:11px;font-weight:700}
.prod-tab.active .prod-tab__badge{background:var(--accent);color:#fff}
.prod-tab-panel{display:none}
.prod-tab-panel.active{display:block}
/* ── Similar product card extras ────────────────────────────────── */
.pcard__similarity{padding:6px 12px 10px;font-size:11px;color:var(--fg-muted);display:flex;align-items:center;gap:4px;border-top:1px solid var(--border-subtle)}
.pcard__pct{font-weight:700;color:var(--grade-good-700)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================== */
/* ==================== RESPONSIVE OVERRIDES ==================== */
/* ============================================================== */
/* Placed at end of file so they win against base rules.          */

/* ── Tablet ≤ 900px ─────────────────────────────────────── */
@media(max-width:900px){
  .feature-grid{grid-template-columns:1fr;}
  .scanner-layout{grid-template-columns:1fr;}
  .compare-picker{grid-template-columns:1fr;}
  .site-footer-inner{grid-template-columns:1fr 1fr;}
  .recent-split{grid-template-columns:1fr;gap:40px;}

  /* Product layout: stack as flex column with explicit order */
  .product-layout{display:flex;flex-direction:column;gap:20px;}
  .product-layout__header{order:1;width:100%;min-width:0;}
  .product-layout__sidebar{order:2;width:100%;min-width:0;position:static;top:auto;flex-direction:column;}
  .product-layout__media{width:100%;min-width:0;position:static;top:auto;}
  .product-layout__info{width:100%;min-width:0;position:static;top:auto;}
  .product-layout__tabs{order:4;width:100%;min-width:0;}

  /* Image card: full width, centered */
  .product-layout__media .card{padding:20px;display:flex;align-items:center;justify-content:center;}
  .product-layout__media img{max-height:320px;max-width:100%;}

  .product-layout__tabs .prod-tabs{margin-top:0;}

  /* Hero h1 */
  .hero h1{font-size:34px;}

  /* INCI row: drop fns column */
  .inci-row{grid-template-columns:20px minmax(140px,1fr) minmax(100px,200px) 18px;gap:10px;}
  .inci-row .fns,.inci-row .pct{display:none;}
  .inci-row--product{grid-template-columns:1fr minmax(100px,160px) 18px;gap:10px;}

  /* Prevent ch-based max-width from overflowing container */
  .page p,.page li,.page div.rich-text,.page ul{max-width:100%;}

  /* Typography */
  .h1{font-size:var(--fs-2xl);}

  /* Grade stats: 2×2 */
  .grade-stats{grid-template-columns:repeat(2,1fr);}

  /* Pslider on tablet */
  .pslider__slide{flex:0 0 50%;}
}

/* ── Tablet portrait ≤ 768px ────────────────────────────── */
@media(max-width:768px){
  /* Topbar */
  .topbar-nav{display:none;}
  .topbar-kbd{display:none;}
  .topbar-inner .theme-toggle{display:none;}
  .mobile-menu-btn{display:flex;}
  .topbar-inner{gap:12px;padding:10px 16px;}

  /* Page padding */
  .page{padding-left:20px;padding-right:20px;}

  /* Typography */
  .hero h1{font-size:32px;}

  /* Product page */
  .grade-stat-tile{padding:12px 10px;}
  .grade-stat-tile__num{font-size:24px;}
  .prod-actions .btn{font-size:13px;padding:8px 12px;}
  .prod-actions .btn svg{width:12px;height:12px;}

  /* Tabs: scrollable horizontally */
  .prod-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .prod-tab{white-space:nowrap;padding:10px 12px;font-size:13px;flex-shrink:0;}

  /* Grade chips */
  .grade-chips{flex-wrap:wrap;gap:5px;}
  .grade-chips__hint{display:none;}

  /* Product image: bigger on phone-tablets */
  .product-layout__media img{max-height:280px;}

  /* Pslider — carousel mode (1 card visible + peek) */
  .pslider__slide{flex:0 0 60%;}
  .pcard__img img{padding:10px;}

  /* Compare table */
  .compare-table__label-col{min-width:170px;}
  .compare-table__product-col{min-width:120px;}
}

/* ── Mobile ≤ 640px ─────────────────────────────────────── */
@media(max-width:640px){
  /* Shell */
  .page{padding:20px 16px 56px;}
  .topbar-inner{gap:8px;}

  /* Typography */
  .h1{font-size:var(--fs-xl);letter-spacing:-0.01em;}
  .eyebrow{font-size:11px;}
  .hero h1{font-size:26px;}
  .hero .sub{font-size:15px;}

  /* Product layout: tighter */
  .product-layout{gap:16px;}
  .product-layout__media .card{padding:16px;}
  .product-layout__media img{max-height:260px;}
  .card{padding:16px;}

  /* Grade stats: 2×2 with tighter padding */
  .grade-stat-tile{padding:10px 8px;}
  .grade-stat-tile__num{font-size:22px;}
  .grade-stat-tile__label{font-size:10px;letter-spacing:0.05em;}

  /* Grade legend: smaller */
  .grade-legend{font-size:11px;gap:4px 10px;}

  /* Action buttons */
  .prod-actions{gap:6px;flex-wrap:wrap;}
  .prod-actions .btn{font-size:12px;padding:7px 10px;}
  .prod-actions .btn svg{display:none;}

  /* INCI row: dot + name + arrow only */
  .inci-row{grid-template-columns:16px 1fr 18px;gap:8px;padding:10px 12px;}
  .inci-row .ru,.inci-row .fns,.inci-row .pct{display:none;}
  .inci-row .name{font-size:12px;}
  .inci-row--product{grid-template-columns:1fr 18px;}
  .inci-row--fn{grid-template-columns:1fr 18px;}
  .inci-row--fn .pct{display:none;}

  /* Tabs: more compact */
  .prod-tab{padding:9px 10px;font-size:12px;white-space:nowrap;}
  .prod-tab__badge{display:none;}

  /* Pslider — carousel */
  .pslider__slide{flex:0 0 72%;}
  .pslider__btn{width:30px;font-size:20px;}
  .pcard__img{max-height:160px;}
  .pcard__img img{padding:8px;}

  /* Synonyms — wrap, no overflow */
  .aka-chip{max-width:100%;word-break:break-word;white-space:normal;}

  /* Breadcrumb */
  .breadcrumb{font-size:12px;}

  /* Hero */
  .hero-search input::placeholder{font-size:13px;}
  .hero-search .btn-text{display:none;}
  .hero-quick-links{gap:8px 16px;font-size:12px;}

  /* Hero stats */
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .hero-stat .num{font-size:22px;}

  /* Compare table */
  .compare-table__label-col{min-width:160px;padding:8px 10px;}
  .compare-table__product-col{min-width:100px;padding:10px 6px;}
  .compare-table__ingr-cell{padding:7px 10px;}
  .compare-table__check-cell{padding:7px 8px;}

  /* Summary grid */
  .summary-grid{grid-template-columns:repeat(2,1fr);}

  /* Footer */
  .site-footer{padding:32px 16px 48px;}
  .site-footer-inner{grid-template-columns:1fr;}

  /* Ingredient page */
  .ingr-layout{display:flex;flex-direction:column;gap:20px;}
  .ingr-layout__header{order:1;width:100%;}
  .ingr-layout__aside{order:2;width:100%;position:static;top:auto;}
  .ingr-layout__content{order:3;width:100%;}

  /* Compare bar */
  .compare-bar__slots{display:none;}
  .compare-bar__inner{padding:10px 16px;justify-content:space-between;}
  .compare-bar__actions{flex-direction:row;gap:8px;width:100%;}
  .compare-bar__cta{flex:1;text-align:center;}
}

/* ========== COMPARE BASKET BAR ========== */
.compare-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg-card);
  border-top:2px solid var(--border);
  box-shadow:0 -4px 24px rgba(0,0,0,.10);
  z-index:500;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.compare-bar--visible{transform:translateY(0);}
.compare-bar__inner{
  max-width:1160px;margin:0 auto;
  padding:12px 24px;
  display:flex;align-items:center;gap:24px;
}
.compare-bar__slots{display:flex;gap:12px;flex:1;min-width:0;}
.compare-bar__slot{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:72px;flex-shrink:0;text-align:center;
}
.compare-bar__slot--filled img{
  width:56px;height:56px;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-raised);
  padding:4px;
  box-sizing:border-box;
}
.compare-bar__no-img{
  width:56px;height:56px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-sunken);
}
.compare-bar__slot--empty{opacity:.35;}
.compare-bar__empty-icon{
  width:56px;height:56px;
  border:2px dashed var(--border-strong);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--fg-muted);
}
.compare-bar__slot-name{
  font-size:10px;color:var(--fg-muted);
  width:72px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.compare-bar__slot-link{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit;}
.compare-bar__slot-link:hover img,.compare-bar__slot-link:hover .compare-bar__no-img{opacity:.8;}
.compare-bar__remove{
  position:absolute;top:-5px;right:1px;
  width:18px;height:18px;
  background:var(--fg-muted);color:var(--bg-card);
  border:2px solid var(--bg-card);
  border-radius:50%;cursor:pointer;
  font-size:13px;line-height:14px;text-align:center;padding:0;
  transition:background .15s;
}
.compare-bar__remove:hover{background:var(--grade-avoid-600,#dc2626);}
.compare-bar__actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}

/* Compare button on product page */
.compare-btn--active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);}
.compare-btn--active:hover{background:var(--accent);color:#fff;}

/* ── Score badge (irritancy / comedogenicity colour scale) ───────── */
.score-badge{
  display:inline-flex;align-items:center;
  padding:1px 8px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;
  line-height:20px;
  white-space:nowrap;
}
/* Light theme — 0 green → 5 red */
.score-level-0{background:#d1fae5;color:#065f46;}
.score-level-1{background:#d9f99d;color:#3f6212;}
.score-level-2{background:#fef3c7;color:#92400e;}
.score-level-3{background:#fed7aa;color:#9a3412;}
.score-level-4{background:#fee2e2;color:#991b1b;}
.score-level-5{background:#fecaca;color:#7f1d1d;}
.score-level-x{background:var(--bg-sunken);color:var(--fg-muted);}
/* Dark theme overrides */
html[data-theme="dark"] .score-level-0{background:#052e16;color:#6ee7b7;}
html[data-theme="dark"] .score-level-1{background:#1a2e05;color:#a3e635;}
html[data-theme="dark"] .score-level-2{background:#451a03;color:#fbbf24;}
html[data-theme="dark"] .score-level-3{background:#431407;color:#fb923c;}
html[data-theme="dark"] .score-level-4{background:#450a0a;color:#fca5a5;}
html[data-theme="dark"] .score-level-5{background:#3b0a0a;color:#f87171;}

/* ── Info icon + popup (ingredient characteristics tooltips) ─────── */
.info-wrap{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  vertical-align:middle;
}
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;
  border-radius:50%;
  background:transparent;
  color:var(--fg-muted);
  border:1.5px solid var(--fg-muted);
  cursor:pointer;
  font-size:9px;font-weight:700;font-style:italic;font-family:Georgia,serif;
  line-height:1;padding:0;flex-shrink:0;
  transition:color .15s,border-color .15s;
  vertical-align:middle;
}
.info-icon:hover,.info-icon[aria-expanded="true"]{
  color:var(--accent);
  border-color:var(--accent);
}
.info-popup{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:-8px;
  width:250px;
  background:var(--bg-raised);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
  padding:12px 14px;
  font-size:12px;line-height:1.55;
  color:var(--fg);
  z-index:200;
  text-align:left;
}
.info-popup--open{display:block;}
.info-popup p{margin:0 0 8px;}
.info-popup p:last-of-type{margin-bottom:0;}
.info-popup__more{
  display:inline-block;margin-top:8px;
  font-size:12px;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;
}
.info-popup__more:hover{border-bottom-color:var(--accent);}

/* ── Registry links (CAS / EC numbers) ─────────────────────────── */
.registry-link{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--link);
  text-decoration:none;
}
.registry-link:hover{
  text-decoration:underline;
  text-underline-offset:2px;
  color:var(--link-hover);
}

/* ── Evidence section (scientific proofs + SCCS opinions) ────────── */
.evidence-block{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-raised);
}
.evidence-block__header{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  background:var(--bg-sunken);
  border-bottom:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--fg-muted);
}
.evidence-block__icon{flex-shrink:0;color:var(--accent);}
.evidence-block__count{
  margin-left:auto;flex-shrink:0;
  font-size:11px;font-weight:700;
  background:var(--border-strong);color:var(--fg-muted);
  padding:1px 7px;border-radius:var(--r-pill);
}
.evidence-list{
  list-style:none;margin:0;padding:0;
}
.evidence-list__item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 16px;
  border-bottom:1px solid var(--border-subtle);
  font-size:13px;line-height:1.55;
}
.evidence-list__item:last-child{border-bottom:none;}
.evidence-list--numbered .evidence-list__item{align-items:flex-start;}
.evidence-list__num{
  flex-shrink:0;
  min-width:20px;
  font-size:11px;font-weight:700;
  color:var(--fg-subtle);
  padding-top:1px;
  text-align:right;
}
.evidence-list__citation{
  color:var(--fg);font-family:var(--font-serif);font-size:13px;line-height:1.55;
}
.evidence-list__link{
  color:var(--link);text-decoration:none;font-size:13px;line-height:1.55;flex:1;
}
.evidence-list__link:hover{text-decoration:underline;text-underline-offset:2px;}
.evidence-list__pubmed{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--accent);text-decoration:none;
  padding:2px 8px;border:1px solid var(--accent);border-radius:var(--r-pill);
  width:fit-content;margin-top:2px;
  transition:background .15s,color .15s;
}
.evidence-list__pubmed:hover{
  background:var(--accent);color:var(--fg-on-accent);
}