/* Self-hosted (no request to Google's servers, no visitor IP sent to a third party). Google's
   own build already ships each weight as the same variable-font file with a different
   font-weight descriptor selecting the instance, so one file per subset covers all four weights. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/open-sans/open-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/open-sans/open-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   foodtest.hu — public site stylesheet. Tokens shared with the partner portal.
   Mobile first; breakpoints: 720px (tablet), 1080px (desktop).
   ========================================================================== */
:root{
  --food:#7faa3c;--food-dark:#4f7d22;--food-tint:#eef4e2;
  --test:#2495c5;--test-dark:#1d6782;--test-deep:#123f50;--test-tint:#e4f2f8;
  --warn:#f7931d;--warn-dark:#97570b;--warn-tint:#fdf1e2;
  --ink:#1f2d33;--ink-soft:#3b4a50;--muted:#5d6b71;--line:#dfe6e7;--line-strong:#c5d1d3;
  --surface:#fff;--bg:#f5f7f8;--bg-alt:#eceff1;
  --danger:#b3323d;--danger-tint:#fbe9ea;--success:#3a7321;--success-tint:#e8f3e0;
  --radius-sm:10px;--radius:16px;--radius-lg:24px;
  --shadow-sm:none;--shadow:0 14px 36px rgba(16,40,50,.10);--shadow-lg:0 24px 60px rgba(16,40,50,.16);
  --cta:#488420;--cta-dark:#3f6819;--cta-tint:#edf6e4;
  --container:1200px;--gutter:clamp(16px,4vw,32px);
  /* Vertical rhythm (owner feedback 2026-10-23: compact pages): section padding, tight sections,
     section heading to content, and blocks stacked inside one section. */
  --space-section:clamp(28px,3.4vw,48px);--space-tight:clamp(20px,2.6vw,32px);--space-head:clamp(16px,2vw,26px);--space-block:clamp(22px,3vw,36px);
  --font:"Open Sans","Open Sans Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --heading:var(--test-deep);--link:var(--test-dark);--link-hover:var(--test-deep);--accent:#467c18;--food-text:#49761f;
  --test-line:#bcdcea;--success-line:#c8e0b5;--success-text:#2c5a18;--danger-line:#f0c4c8;--danger-text:#8c2530;
  --header-bg:#fff;--placeholder:#69777e;--field-line:#7f8d94;
  --warn-text:#8a4f0a;--ok-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a7321' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* Dark theme: follows the system setting unless the visitor picked one (data-theme on <html>, from the theme cookie). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --surface:#141d21;--bg:#0f171a;--bg-alt:#18242a;
  --ink:#e2eaed;--ink-soft:#c2cfd4;--muted:#94a4aa;--line:#26343a;--line-strong:#3a4b52;
  --heading:#d4eaf4;--link:#6cc3e8;--link-hover:#a8dcf2;--accent:#9ccf68;--food-text:#a6cd70;
  --test-tint:#132d38;--food-tint:#1b2914;--cta-tint:#1b2a13;--warn-tint:#33240e;--danger-tint:#371a1e;--success-tint:#18290f;
  --test-line:#24526a;--success-line:#2f4d1f;--success-text:#a9d68a;--danger-line:#6b2a31;--danger-text:#f3a6ad;
  --danger:#f0848d;--success:#8fcd6a;
  --header-bg:#141d21;--placeholder:#8a979c;--field-line:#64767e;
  --warn-text:#f5b46a;--ok-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fcd6a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --shadow-sm:none;--shadow:0 14px 36px rgba(0,0,0,.4);--shadow-lg:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface:#141d21;--bg:#0f171a;--bg-alt:#18242a;
  --ink:#e2eaed;--ink-soft:#c2cfd4;--muted:#94a4aa;--line:#26343a;--line-strong:#3a4b52;
  --heading:#d4eaf4;--link:#6cc3e8;--link-hover:#a8dcf2;--accent:#9ccf68;--food-text:#a6cd70;
  --test-tint:#132d38;--food-tint:#1b2914;--cta-tint:#1b2a13;--warn-tint:#33240e;--danger-tint:#371a1e;--success-tint:#18290f;
  --test-line:#24526a;--success-line:#2f4d1f;--success-text:#a9d68a;--danger-line:#6b2a31;--danger-text:#f3a6ad;
  --danger:#f0848d;--success:#8fcd6a;
  --header-bg:#141d21;--placeholder:#8a979c;--field-line:#64767e;
  --warn-text:#f5b46a;--ok-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fcd6a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --shadow-sm:none;--shadow:0 14px 36px rgba(0,0,0,.4);--shadow-lg:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
/* The sticky header is never "hidden" under the scroll padding: focusing one of its controls does not scroll the page. */
[data-site-header] *{scroll-margin-top:-120px}
/* The mobile drawer scrolls on its own (under its sticky head): its links do need to scroll into view. */
@media (max-width:1319px){.main-nav *{scroll-margin-top:72px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--surface);overflow-x:clip;overflow-wrap:break-word;font-synthesis:none;text-rendering:optimizeLegibility}
img,iframe,video{max-width:100%;height:auto}
img{display:block}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--test);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4,h5,h6{line-height:1.18;letter-spacing:-.02em;color:var(--heading);margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(28px,3.6vw,44px)}
h2{font-size:clamp(24px,2.8vw,36px)}
h3{font-size:clamp(18px,1.8vw,22px)}
h4{font-size:18px}
h5{font-size:16px}
h6{font-size:14px}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:calc(820px + 2*var(--gutter))}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--surface);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow)}
.skip-link:focus{left:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lead{font-size:clamp(16.5px,1.4vw,18px);color:var(--ink-soft);line-height:1.6}
.muted{color:var(--muted)}
.section{padding-block:var(--space-section)}
.section-alt{background:var(--bg)}
.section-head{max-width:760px;margin:0 auto var(--space-head);text-align:center}
.section-head p{color:var(--muted);font-size:16.5px}

/* Icons: mask images, colored with currentColor */
.icon{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-3px}
.icon-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.icon-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")}
.icon-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.icon-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.icon-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.icon-cart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E")}
.icon-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E")}
.icon-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.icon-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.icon-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.icon-facebook{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a5 5 0 0 0-5 5v2H7v4h2v7h4v-7h3l1-4h-4V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}
.icon-youtube{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.8 15V9l5.7 3z'/%3E%3C/svg%3E")}
.icon-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.icon-lab{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v6L4.5 18.5A2 2 0 0 0 6.3 21h11.4a2 2 0 0 0 1.8-2.5L14 8V2'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E")}
.icon-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1zM15 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='18.5' r='2'/%3E%3C/svg%3E")}
.icon-gift{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v4H3zM5 12v9h14v-9M12 8v13M12 8S10.5 3 8 3a2.5 2.5 0 0 0 0 5M12 8s1.5-5 4-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.icon-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.icon-doc{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E")}
.icon-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E")}

.icon-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E")}
.icon-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
/* Buttons & form controls */
.button{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--link);background:var(--surface);color:var(--link);font-size:15px;line-height:1.25;text-decoration:none;cursor:pointer;text-align:center;max-width:100%;white-space:normal}
.button:hover{border-color:var(--link-hover);background:var(--test-tint);color:var(--link-hover)}

.button-primary{background:var(--test-dark);border-color:var(--test-dark);color:#fff}
.button-primary:hover{background:var(--test-deep);border-color:var(--test-deep);color:#fff}
.button-food{background:var(--food-dark);border-color:var(--food-dark);color:#fff}
.button-food:hover{background:#3f6819;border-color:#3f6819;color:#fff}
.button-ghost{background:transparent;border-color:transparent;color:var(--link)}
.button-ghost:hover{background:var(--test-tint);border-color:transparent}
.button-light{background:#fff;border-color:#fff;color:var(--test-deep)}
.button-light:hover{background:#e4f2f8;border-color:#e4f2f8;color:var(--test-deep)}
.button-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.button-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.button-block{width:100%}
.button-sm{min-height:38px;padding:6px 14px;font-size:14px}
.button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none}
.link-button{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}
.icon-zap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E")}
.icon-leaf{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6'/%3E%3C/svg%3E")}
.icon-droplet{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7s-6 6.6-6 11.3a6 6 0 0 0 12 0c0-4.7-6-11.3-6-11.3z'/%3E%3C/svg%3E")}
.icon-battery{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 10v4M10 10v4'/%3E%3C/svg%3E")}
.icon-activity{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E")}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--heading);cursor:pointer;position:relative;text-decoration:none}
.icon-button:hover{background:var(--test-tint);color:var(--heading)}
.icon-button .icon{width:21px;height:21px}
label{font-weight:650;font-size:14.5px;color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=date],input[type=password],select,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:120px;resize:vertical}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--test);box-shadow:0 0 0 1px var(--test),0 0 0 4px rgba(36,149,197,.18)}
select{-webkit-appearance:none;appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6782' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px}
.field{display:grid;gap:6px;align-content:start;margin-bottom:16px}
.field-hint{font-size:13.5px;color:var(--muted);font-weight:400}
.field-error{color:var(--danger);font-size:13.5px;font-weight:650}
.is-invalid{border-color:var(--danger)!important}
.req{display:inline-block;color:var(--danger);transition:color .2s ease,transform .2s var(--ease)}
/* form-feedback.js: a required field filled in correctly turns its * green; e-mail hints are polite, not alarming. */
.is-complete .req{color:var(--success);transform:scale(1.15)}
.is-complete>:is(input[type=text],input[type=email],input[type=tel],input[type=date]):not(.is-attention),:is(input[type=text],input[type=email],input[type=tel],input[type=date]).is-complete:not(.is-attention){border-color:var(--success);padding-right:40px;background:var(--surface) var(--ok-icon) no-repeat right 14px center/18px}
.is-complete>textarea{border-color:var(--success)}
input.is-attention{border-color:var(--warn-text)}
.field-feedback{color:var(--warn-text);font-size:13.5px;font-weight:600;line-height:1.45}
.field-feedback:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.field-feedback .link-button{font-weight:700;color:var(--link)}
input:-webkit-autofill{animation:ft-autofill 1ms}
@keyframes ft-autofill{from{opacity:1}to{opacity:1}}
/* Boxes and radios 22px, every .check label at least a 24px target (WCAG 2.5.8). */
.check{display:flex;gap:10px;align-items:flex-start;min-height:24px;font-weight:500;font-size:14.5px;line-height:1.5;cursor:pointer}
.check input{width:22px;height:22px;margin-top:0;flex:none;accent-color:var(--test-dark)}
input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:22px;height:22px;flex:none;margin:0;border:2px solid var(--field-line);border-radius:5px;background:var(--surface);background-clip:padding-box;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
input[type=checkbox]::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform .12s ease}
input[type=checkbox]:checked{background:var(--test-dark);border-color:var(--test-dark)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:focus{outline:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--test);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.form-grid{display:grid;gap:0 18px;grid-template-columns:1fr}
@media (min-width:720px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .span-2{grid-column:1/-1}}
.form-stack{display:grid;gap:12px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{border-radius:var(--radius);padding:14px 18px;margin:18px 0;border:1px solid var(--line);background:var(--bg);font-weight:600}
.notice-success{background:var(--success-tint);border-color:var(--success-line);color:var(--success-text)}
.notice-error{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger-text)}
.notice-info{background:var(--test-tint);border-color:var(--test-line);color:var(--heading)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
/* Top bar: one line at every width. Left the CMS announcement or the trust points (as many as fit), right the
   contact details, the myFOODTEST login and the language switch from 1080px; phones show only the left side. */
.topbar{background:var(--test-deep);color:#d9eaf1;font-size:13px}
.topbar a{color:#d9eaf1;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar-inner{display:flex;justify-content:center;align-items:center;gap:20px;height:var(--topbar-h)}
.topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center;white-space:nowrap}
.topbar .icon{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.topbar-trust{min-width:0}
.topbar-trust li:not(:first-child){display:none}
.topbar-trust .icon{color:#7fd3a0}
.topbar-announcement{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;text-align:center}
.topbar .topbar-announcement a{color:#fff}
.topbar-announcement .icon{margin:0 0 0 6px}
.topbar .topbar-contact{display:none}
.topbar-hours{margin-left:8px;color:#a9c8d3}
.topbar-contact .icon-facebook,.topbar-contact .icon-youtube,.topbar-contact .icon-users{margin:0;width:16px;height:16px}
.topbar .topbar-account{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.topbar .topbar-account:hover{background:rgba(255,255,255,.2);text-decoration:none}
.topbar-email{display:none}
@media (min-width:640px){.topbar-trust li:nth-child(2){display:list-item}}
@media (min-width:1080px){
  .topbar-inner{justify-content:space-between}
  .topbar-announcement{text-align:left}
  .topbar .topbar-contact{display:flex}
  .topbar-trust li:nth-child(2){display:none}
}
@media (min-width:1240px){.topbar-trust li:nth-child(2){display:list-item}}
@media (min-width:1360px){.topbar-email{display:list-item}}
@media (min-width:1680px){.topbar-trust li:nth-child(3){display:list-item}}
/* Language switch (HU / EN): a small segmented pill in the topbar and the mobile menu */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.12);line-height:1}
.lang-switch a{justify-content:center;min-width:34px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#d9eaf1;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.14);text-decoration:none}
.lang-switch a.is-active{background:#fff;color:var(--test-deep)}
.lang-switch.is-mobile{margin-left:auto;background:var(--test-tint)}
.lang-switch.is-mobile a{min-width:44px;min-height:44px;padding:8px 12px;font-size:13px;color:var(--link)}
.lang-switch.is-mobile a:hover{background:#fff;color:var(--test-deep)}
.lang-switch.is-mobile a.is-active{background:var(--test-dark);color:#fff}
.header-main{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
/* The wide logo is cropped to its ink; dark mode swaps in the light-lettered artwork. */
.site-logo img{width:150px;height:auto}
@media (min-width:720px){.site-logo img{width:172px}}
@media (min-width:1080px){.site-logo img{width:196px}}
.site-logo .logo-for-dark{display:none}
:root[data-theme="dark"] .site-logo .logo-for-light{display:none}
:root[data-theme="dark"] .site-logo .logo-for-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-logo .logo-for-light{display:none}
  :root:not([data-theme="light"]) .site-logo .logo-for-dark{display:block}
}
.header-actions{display:flex;align-items:center;gap:4px}
/* Theme toggle: the moon offers dark mode, the sun offers light mode. */
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:inline-block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:inline-block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}
/* The smallest phones: four 44px header buttons next to a slightly smaller logo. */
@media (max-width:359px){.header-main{gap:8px}.header-actions{gap:0}.header-main .site-logo img{width:112px}}
.cart-count{position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px;color:#fff;font-weight:700;line-height:19px;text-align:center}
.cart-count.is-empty{display:none}
/* Search and cart icons on their own page (the cart also on the checkout): tinted like hover, plus a bar under the icon. */
.header-actions .icon-button.is-active{background:var(--test-tint);color:var(--heading)}
.header-actions .icon-button.is-active::after{content:"";position:absolute;left:50%;bottom:5px;width:16px;height:3px;border-radius:2px;background:var(--link);transform:translateX(-50%)}
.header-cta{display:none;margin-left:8px;white-space:nowrap}
@media (min-width:720px){.header-cta{display:inline-flex;min-height:42px;padding:8px 18px;font-size:14.5px}}
.menu-button{display:inline-flex}
@media (min-width:1320px){.menu-button{display:none}}

/* Main navigation: off-canvas on mobile, horizontal with dropdowns on desktop */
.main-nav{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);background:var(--surface);z-index:60;padding:76px 20px 28px;overflow-y:auto;transform:translateX(100%);box-shadow:var(--shadow-lg)}
/* Closed off-canvas menu: hidden from focus and from the mobile layout viewport width. */
.main-nav{visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
.main-nav.is-open{transform:none;visibility:visible;transition-delay:0s}
.nav-backdrop{position:fixed;inset:0;background:rgba(18,40,48,.45);z-index:55;opacity:0;transition:opacity .2s ease}
.nav-backdrop.is-visible{opacity:1}
.nav-list{list-style:none;margin:0;padding:0}
.nav-item{position:relative;border-bottom:1px solid var(--line)}
.nav-link{display:block;padding:13px 44px 13px 4px;color:var(--ink);font-weight:700;text-decoration:none;font-size:16px}
.nav-link.is-active{color:var(--link)}
.nav-toggle{position:absolute;right:0;top:4px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;color:var(--link)}
.nav-toggle::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:transform .2s ease}
.nav-toggle[aria-expanded=true]::before{transform:rotate(180deg)}
.submenu{list-style:none;margin:0 0 10px;padding:0 0 0 12px;display:none}
.nav-item.is-open>.submenu{display:block}
.submenu a{display:block;padding:9px 6px;color:var(--ink-soft);text-decoration:none;font-size:15px;border-radius:8px}
.submenu a:hover{background:var(--test-tint);color:var(--heading)}
.submenu a.is-active{background:var(--test-tint);color:var(--heading);font-weight:650}
.submenu-featured{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.submenu-featured+.submenu-featured{margin-top:6px;padding-top:0;border-top:0}
.submenu .submenu-featured a{display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--cta-tint);border:1px solid color-mix(in srgb,var(--cta) 30%,transparent);border-radius:12px;color:var(--heading)}
.submenu .submenu-featured a:hover,.submenu .submenu-featured a.is-active{background:color-mix(in srgb,var(--cta) 16%,var(--surface));border-color:color-mix(in srgb,var(--cta) 55%,transparent);color:var(--heading)}
.submenu-featured-text{display:grid;gap:2px;flex:1;min-width:0}
.submenu-featured-text strong{font-weight:700}
.submenu-featured-text small{font-size:13px;color:var(--muted);line-height:1.35}
.submenu-featured-go{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--cta);color:#fff;transition:transform .16s var(--ease)}
.submenu-featured-go .icon{width:15px;height:15px}
.submenu-featured a:hover .submenu-featured-go{transform:translateX(2px)}
.nav-mobile-extra{display:grid;gap:2px;margin-top:20px;font-size:14.5px}
.nav-mobile-extra a{padding:8px 4px;color:var(--muted);text-decoration:none}
.nav-mobile-extra a.is-active{color:var(--link);font-weight:650}
/* The open drawer locks the page: html is the scroller (overflow-x:clip keeps body's overflow from reaching the viewport). */
html.has-nav-open{overflow:hidden}
.main-nav{overscroll-behavior:contain}
/* The header is a stacking context (sticky + z-index): it must sit above the backdrop for its fixed menu to. */
body.has-nav-open .site-header{z-index:70}
@media (min-width:1320px){
  .main-nav{position:static;width:auto;transform:none;visibility:visible;padding:0;box-shadow:none;overflow:visible;background:transparent;flex:1;display:flex}
  .nav-backdrop,.nav-mobile-extra{display:none}
  .nav-list{display:flex;align-items:center}
  .nav-item{border:0}
  .nav-link{font-size:14.5px;font-weight:650;border-radius:999px;white-space:nowrap}
  .nav-link:hover,.nav-link.is-active{background:var(--test-tint);color:var(--heading)}
  .nav-toggle{top:50%;right:4px;transform:translateY(-50%);width:24px;height:24px;pointer-events:none}
  .nav-toggle::before{width:12px;height:12px}
  .submenu{display:block;position:absolute;top:100%;left:0;min-width:270px;padding:10px;margin:8px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
  .submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .nav-item:hover>.submenu,.nav-item:focus-within>.submenu,.nav-item.is-open>.submenu{opacity:1;visibility:visible;transform:none}
}

/* Breadcrumbs */
.breadcrumbs{padding-top:18px;font-size:13.5px;color:var(--muted)}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.breadcrumbs li+li::before{content:"›";margin:0 6px;color:var(--line-strong)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--link);text-decoration:underline}

/* Hero */
.hero{position:relative}
.hero-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:1}
@media (min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:650;margin-bottom:18px}
.hero h1 em{font-style:normal;font-weight:600;color:var(--accent)}
.hero .lead{max-width:620px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.hero-trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--ink-soft)}
.hero-trust li{display:flex;align-items:center;gap:8px}
.hero-trust .icon{width:18px;height:18px}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);padding:22px 20px;text-align:center}
.stat strong{display:block;font-size:clamp(26px,3vw,34px);color:var(--heading);letter-spacing:-.02em}
.stat span{font-size:14px;color:var(--muted)}

/* Cards & grids */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);transition:border-color .2s ease}
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{border-color:var(--test-dark)}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.feature-icon{display:inline-flex;color:var(--link);margin-bottom:10px}
.feature-icon .icon{width:22px;height:22px}
.feature-icon.is-food{color:var(--link)}

/* Product cards */
.product-grid{display:grid;gap:22px}
@media (min-width:720px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.product-grid{grid-template-columns:repeat(3,1fr)}}
.product-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.product-card.is-featured{border-color:var(--test-dark)}
/* The flag sits on the photo's lower edge: at the top it covered the printed text of the kit box. */
.product-card-flag{position:absolute;bottom:12px;left:14px;z-index:1;color:#fff;font-size:12.5px}
.product-card-media{position:relative;aspect-ratio:16/10;background:var(--bg-alt);overflow:hidden}
.product-card-media img{width:100%;height:100%;object-fit:cover}
.product-card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.product-card h3{font-size:20px;margin-bottom:6px}
.product-card h3 a{color:inherit;text-decoration:none}
.product-card h3 a::after{content:"";position:absolute;inset:0}
.product-card-summary{color:var(--muted);font-size:15px;margin-bottom:14px}
.checklist{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;font-size:14.8px}
.checklist li{position:relative;padding-left:28px;line-height:1.45}
.checklist li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:var(--radius-sm);background:var(--test-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7d22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.product-card-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line);position:relative;z-index:2}
.price{font-weight:700;font-size:24px;color:var(--food-text);letter-spacing:-.02em;white-space:nowrap}
.price del{font-size:15px;color:var(--muted);font-weight:600;margin-right:6px}
.price ins,.cart-price ins,.need-price ins{text-decoration:none;color:inherit}
.cart-price del,.need-price del{margin-right:6px;color:var(--muted)}
.bundle-note{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--success)}
.bundle-note del{margin:0 4px;font-weight:400;color:var(--muted)}
.bundle-note ins{text-decoration:none}
.order-addon-price del{margin:0 4px;font-weight:400;color:var(--muted)}
.price small{font-size:13px;color:var(--muted);font-weight:600}

/* Steps */
/* Home "how it works": the two ways to give the sample, above the four steps. */
.sampling-options{display:grid;gap:22px;margin-bottom:22px}
@media (min-width:720px){.sampling-options{grid-template-columns:repeat(2,1fr)}}
.sampling-option{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sampling-option img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.sampling-option figcaption{padding:16px 22px 20px;color:var(--ink-soft)}
.sampling-option strong{display:block;margin-bottom:4px;color:var(--heading);font-size:18px;font-weight:600}
.steps{counter-reset:step;display:grid;gap:22px;list-style:none;padding-left:0}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding:26px 22px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-bottom:14px}
.step h3{font-size:18px}
.step p{font-size:15px;color:var(--muted);margin:0}

/* Split media/text */
.split{display:grid;gap:clamp(24px,5vw,64px);align-items:start}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split img{border-radius:var(--radius);border:1px solid var(--line);width:100%}

/* FAQ / toggles */
.faq-list{display:grid;gap:12px;max-width:900px;margin-inline:auto}
details.cms-toggle,.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
details.cms-toggle[open],.faq-item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
details.cms-toggle summary,.faq-item summary{list-style:none;cursor:pointer;padding:16px 52px 16px 20px;font-weight:700;color:var(--heading);position:relative}
details summary::-webkit-details-marker{display:none}
details.cms-toggle summary::after,.faq-item summary::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--link);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .2s ease}
details[open]>summary::after{transform:rotate(45deg)}
.cms-toggle-body,.faq-answer{padding:0 20px 18px;color:var(--ink-soft)}
.faq-search{max-width:900px;margin:0 auto 22px}

/* Article / CMS content */
.page-header{padding-block:clamp(20px,3.5vw,40px) clamp(14px,2vw,24px);background:var(--bg);border-bottom:1px solid var(--line)}
.page-header h1{margin-bottom:10px}
.page-header .lead{max-width:780px;margin:0}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted);margin-top:14px}
.article-meta a{color:var(--muted)}
.layout-sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.5vw,48px);padding-block:var(--space-tight)}
@media (min-width:1080px){.layout-sidebar{grid-template-columns:minmax(0,1fr) 320px}}
.sidebar{display:grid;gap:22px;align-content:start}
/* The article sidebar: the table of contents and the test card (.sidebar-pin) stay in view while reading, the help
   and link cards wait at the bottom of the column. When both do not fit the window (a long table of contents), the
   contents scroll away and the test card alone stays pinned. */
@media (min-width:900px){.sidebar{grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;align-content:stretch}}
@media (min-width:900px) and (min-height:560px){
  .sidebar-pin{position:sticky;top:var(--sticky-top)}
  .sidebar-pin.is-static{display:contents}
  .sidebar-pin.is-static>.is-cta{position:sticky;top:var(--sticky-top)}
}
.sidebar-track,.sidebar-pin{display:grid;gap:22px;align-content:start}
.sidebar-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.sidebar-card h2{font-size:18px}
.sidebar-card.is-cta{background:var(--test-deep);border-color:var(--test-deep);color:#d9eaf1}
.sidebar-card.is-cta h2{color:#fff}
.content{font-size:17px;line-height:1.75;color:var(--ink-soft)}
.content>*:first-child{margin-top:0}
.content h2{margin-top:1.8em}
.content h3{margin-top:1.5em}
.content h2:first-child,.content h3:first-child{margin-top:0}
.content ul,.content ol{padding-left:1.3em;margin:0 0 1.2em}
/* Components rendered inside page content (e.g. the form steps) keep their own list reset. */
.content :is(ul,ol).list-reset{padding-left:0}
.content li{margin-bottom:.4em}
.content img{border-radius:var(--radius);margin:1.2em auto}
.content iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius);margin:1.4em 0;background:var(--bg-alt)}
.content blockquote{margin:1.5em 0;padding:18px 22px;border-left:3px solid var(--test-dark);background:var(--bg);border-radius:0;color:var(--ink);font-size:17px}
.content blockquote p:last-child{margin:0}
.content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px;display:block;overflow-x:auto}
/* A table wider than the column scrolls sideways; a soft shade at the edge with more columns shows that
   (the "local" covers scroll with the content and hide the shade at either end). */
.content table{--table-shade:color-mix(in srgb,var(--ink) 22%,transparent);
  background:linear-gradient(to right,var(--surface) 30%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 30%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--table-shade),transparent) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--table-shade),transparent) right center/16px 100% no-repeat scroll;
  background-color:var(--surface)}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.content th{background:var(--bg)}
/* Long cookie names, URLs and reference titles in table cells wrap instead of widening the first column past the screen. */
.content :is(td,th) :is(code,a,u,h4,h5,h6){overflow-wrap:anywhere}
/* The cookie tables (name, purpose, duration) stack into one card per cookie on phones. */
@media (max-width:560px){
  .content table:has(td code){display:block;overflow:visible;background:none}
  .content table:has(td code) thead{display:none}
  .content table:has(td code) :is(tbody,tr){display:block}
  .content table:has(td code) tr{margin:0 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
  .content table:has(td code) td{display:block;border:0;padding:4px 12px}
  .content table:has(td code) td:first-child{padding-top:10px;font-weight:600;background:var(--bg)}
  .content table:has(td code) td:last-child{padding-bottom:10px;color:var(--muted);font-size:14px}
}
.content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.content a{font-weight:600}
.content strong{color:var(--ink)}
.content .cms-section{padding-block:clamp(10px,2vw,22px)}
.content .cms-section+.cms-section{border-top:1px solid var(--line);margin-top:clamp(14px,2vw,26px);padding-top:clamp(24px,3vw,40px)}
.content .cms-row{display:grid;row-gap:clamp(16px,3vw,28px);column-gap:0;margin-bottom:1em;--col-gap:clamp(16px,3vw,36px)}
@media (min-width:860px){
  .content .cms-row{grid-template-columns:repeat(60,minmax(0,1fr));margin-inline:calc(var(--col-gap)/-2)}
  .content .cms-row>.cms-col{padding-inline:calc(var(--col-gap)/2)}
  .cms-col-1-1{grid-column:span 60}.cms-col-1-2{grid-column:span 30}.cms-col-1-3{grid-column:span 20}.cms-col-2-3{grid-column:span 40}
  .cms-col-1-4{grid-column:span 15}.cms-col-3-4{grid-column:span 45}.cms-col-1-5{grid-column:span 12}.cms-col-2-5{grid-column:span 24}
  .cms-col-3-5{grid-column:span 36}.cms-col-4-5{grid-column:span 48}
}
.content .cms-col{min-width:0}
.content .cms-col>*:last-child{margin-bottom:0}
.content .cms-lead{font-size:18.5px;color:var(--ink-soft);font-weight:500}
.content .cms-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;height:100%}
.content .cms-card h3{margin-top:0}
.content .cms-iconlist{list-style:none;padding:0;display:grid;gap:14px}
.content .cms-iconlist li{position:relative;padding-left:34px;margin:0}
.content .cms-iconlist li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:var(--radius-sm);background:var(--test-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7d22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.content .cms-iconlist strong{display:block;color:var(--heading)}
.content .cms-actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0}
.content .cms-actions .button,.content a.button{font-weight:700;text-decoration:none}
.content .cms-actions a.button-primary,.content a.button-primary{color:#fff}
.content details.cms-toggle{margin-bottom:10px}
/* About page: the team (founder first), embedded in the page body (data-embed). Equal cards, three
   per row on desktop; the bio opens in a popover above the page, so the grid never reflows. */
.content .team-grid{padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.content .team-card{display:flex;flex-direction:column;margin:0}
.content .team-card img,.content .team-bio img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:var(--radius-sm);background:var(--bg-alt);margin:0 0 14px}
.team-role{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.team-job{color:var(--muted);font-size:15px}
.content .team-card h3{margin:0 0 4px}
.team-card .team-job{margin-bottom:14px}
.team-bio-open,.story-open{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--test-line);border-radius:999px;background:var(--test-tint);color:var(--link);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.team-bio-open::after,.story-open::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.team-bio-open:hover,.story-open:hover{border-color:var(--link)}
.team-bio-open:focus-visible,.team-bio-close:focus-visible,.story-open:focus-visible,.story-close:focus-visible{outline:3px solid var(--test);outline-offset:2px}
.team-bio,.story-dialog{width:min(640px,calc(100vw - 32px));max-height:min(80dvh,720px);overflow-y:auto;overscroll-behavior:contain;margin:auto;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg)}
.team-bio::backdrop,.story-dialog::backdrop{background:rgba(10,24,30,.55)}
.team-bio-head{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:8px}
.content .team-bio-head img{margin:0;border-radius:50%}
.team-bio-name{font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--heading);line-height:1.25;margin:0 0 2px}
.team-bio-head .team-job{margin:0}
.team-bio-close,.story-close{align-self:start;width:40px;height:40px;border:0;border-radius:50%;background:var(--bg-alt);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.team-bio-close:hover,.story-close:hover{background:var(--line)}
.team-bio>p,.story-dialog>p{font-size:16px;margin:14px 0 0}
.team :target{scroll-margin-top:110px}
.team h3:target{color:var(--accent)}
@media (max-width:1079px){.content .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.content .team-grid{grid-template-columns:1fr}.team-bio-head{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}}
/* Community Programme page: reference companies (data-embed="partners"). The logo sits on a white
   plate in both themes, since the companies' logos are drawn for light backgrounds. */
.content .partners-grid{padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,22px);max-width:900px;margin-inline:auto}
.content .partners{margin-bottom:clamp(36px,5vw,64px)}
.content .partner-card{display:flex;flex-direction:column;margin:0}
.content .partner-logo{display:flex;align-items:center;justify-content:center;height:120px;margin:0 0 18px;padding:18px 24px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
/* No content-image tint, rounding or dark-mode dimming: the logo keeps the plate's white. */
.content .partners .partner-card .partner-logo img{max-width:100%;max-height:84px;width:auto;height:auto;margin:0;background:none;border-radius:0;filter:none}
.content .partner-card h3{margin:0 0 6px}
.content .partner-card p{color:var(--muted);font-size:16px}
.content .partner-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
.content .partner-link::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.content .partner-link:hover{text-decoration:underline}
/* Success stories (partials/site/success-stories): quote cards whose full story opens in a popover, like the team bios above. */
.story-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:0;padding:0}
.story-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0}
.story-card .story-title{margin:0;font-size:clamp(18px,1.8vw,20px);line-height:1.3;overflow-wrap:anywhere}
.story-quote{margin:0 0 6px;padding:0 0 0 14px;border-left:3px solid var(--food);color:var(--ink-soft);font-style:italic;overflow-wrap:anywhere}
.story-quote p{margin:0;max-width:none}
.story-dialog-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;margin-bottom:4px}
.story-dialog-title{font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--heading);line-height:1.25;margin:10px 0 0}
.story-dialog>p.story-source{font-size:13.5px;color:var(--muted);margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.story-note{font-size:13.5px;margin:14px 0 0;text-align:center}
/* Imprint page (/impresszum-es-szakmai-hatter/): six cards, label/value rows side by side on wide cards, stacked on narrow ones. */
.imprint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.imprint .card{min-width:0;overflow-wrap:anywhere;hyphens:manual}
.imprint .card h2{font-size:clamp(19px,1.8vw,22px);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.imprint .card p{font-size:15.5px}
.imprint-list{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);margin:0 0 16px;font-size:15px;line-height:1.5}
.imprint-list:last-child{margin-bottom:0}
.imprint-list dt,.imprint-list dd{padding:8px 0;border-top:1px solid var(--line)}
.imprint-list dt:first-of-type,.imprint-list dt:first-of-type+dd{border-top:0;padding-top:0}
.imprint-list dt{color:var(--muted);padding-right:16px}
.imprint-list dd{margin:0;font-weight:600;color:var(--ink)}
@media (max-width:1100px){.imprint-list{grid-template-columns:minmax(0,12em) minmax(0,1fr)}}
@media (max-width:900px){.imprint-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.imprint-list{grid-template-columns:minmax(0,1fr)}.imprint-list dt{padding:8px 0 0}.imprint-list dd{border-top:0;padding-top:2px}.imprint-list dt:first-of-type{padding-top:0}}
.content .embed-posts{margin:1.5em 0}
.medical-note{display:flex;gap:12px;align-items:flex-start;background:var(--test-tint);border:1px solid var(--test-line);border-radius:12px;padding:14px 18px;font-size:14.5px;color:var(--heading);margin:2em 0}
.medical-note .icon{color:var(--link);margin-top:3px}

/* Post cards & archives */
.post-grid{display:grid;gap:24px}
@media (min-width:720px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease;position:relative}
.post-card:hover{border-color:var(--test-dark)}
.post-card-media{background:var(--bg-alt);overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card-media img.post-card-fallback{object-fit:contain}

.post-card-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.post-card-cat{font-size:13px;margin-bottom:6px}
.post-card-title{font-size:18.5px;margin-bottom:8px}
.post-card-title a{color:var(--heading);text-decoration:none}
.post-card-title a::after{content:"";position:absolute;inset:0}
.post-card p{font-size:14.8px;color:var(--muted);margin-bottom:12px}
.post-card time{margin-top:auto;font-size:13px;color:var(--muted)}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 26px}
.chip{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);font-size:14px;font-weight:650;text-decoration:none}
.chip:hover{border-color:var(--test-dark);color:var(--link)}
.chip.is-active{background:var(--test-dark);border-color:var(--test-dark);color:#fff}
.chip.is-active .muted{color:inherit;opacity:.85}
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:var(--space-block);list-style:none;padding:0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);text-decoration:none;color:var(--ink-soft);font-weight:650}
.pagination a:hover{border-color:var(--test-dark);color:var(--link)}
.pagination .is-current{background:var(--test-dark);border-color:var(--test-dark);color:#fff}
.pagination .is-disabled{opacity:.4}

/* Footer */
.site-footer{background:var(--test-deep);color:#c4d9e1;font-size:14px;line-height:1.55;margin-top:0}
.site-footer a{color:#fff}
.footer-cta{color:#fff}
.footer-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;padding-block:clamp(16px,2vw,22px)}
.footer-cta h2{color:#fff;margin-bottom:4px;font-size:clamp(19px,2vw,23px)}
.footer-cta p{margin:0;color:#e3f2f8}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.footer-grid{display:grid;gap:22px 32px;padding-block:clamp(22px,2.6vw,32px)}
@media (min-width:720px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.footer-grid{grid-template-columns:1.2fr .8fr .95fr 1.75fr}}
.footer-col h2{color:#fff;font-size:15px;letter-spacing:.02em;margin-bottom:10px}
.footer-logo{display:block;margin-bottom:14px;width:176px;height:auto}
.footer-about p{margin:0 0 8px}
.footer-license{font-size:13px}
.footer-license a{white-space:nowrap}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-links-split{display:block;columns:2;column-gap:20px}
.footer-links-split li{break-inside:avoid;margin-bottom:6px}
.footer-links a{color:#c4d9e1;text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-social a{display:inline-flex;align-items:center;gap:8px}
.footer-social .icon{width:16px;height:16px}
.site-footer address{font-style:normal;line-height:1.7}
/* Phone and e-mail are the footer's main tap targets: 44px high on phones, tablets and touch screens, 24px with a mouse. */
.site-footer address a{display:inline-flex;align-items:center;min-height:24px;vertical-align:middle}
@media (max-width:1079px),(pointer:coarse){.site-footer address a{min-height:44px}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);font-size:12.5px}
.footer-bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:12px}
.footer-bottom p{margin:0}
@media (min-width:960px){.footer-legal{text-align:right}}
.barion-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px;text-decoration:none;color:#a9c4ce!important}
.barion-note img{background:#fff;border-radius:8px;padding:4px 8px;width:150px;height:auto}

/* Cookie consent & newsletter */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:980px;margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px 22px}
.cookie-consent-inner{display:grid;gap:16px;align-items:center}
@media (min-width:860px){.cookie-consent-inner{grid-template-columns:1fr auto}}
/* The banner and popup titles are paragraphs: they come before the page H1 and stay out of the outline. */
.dialog-title{line-height:1.18;letter-spacing:-.02em;color:var(--heading);margin:0 0 .6em;font-weight:600;text-wrap:balance}
.cookie-consent .dialog-title{font-size:18px;margin-bottom:6px}
.cookie-consent p{font-size:14.5px;color:var(--muted);margin:0}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
/* Three choices, strongest last: "Elfogadom mindet" is the green primary, "Statisztika" a light green middle step
   on the thumb-friendly right of the phone row, "Csak a szükségesek" a plain white button on the left. All three keep the same size and readable text (refusing stays as easy). */
.cookie-actions .cookie-necessary{font-weight:600;box-shadow:none}
.cookie-actions .cookie-statistics{background:var(--cta-tint);border-color:var(--cta-tint);color:var(--food-text);box-shadow:none}
.cookie-actions .cookie-statistics:hover{border-color:var(--cta);color:var(--food-text)}
.newsletter-popup{position:fixed;right:16px;bottom:16px;z-index:80;width:min(400px,calc(100vw - 32px));background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line);animation:pop-in .35s var(--ease)}
@keyframes pop-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.newsletter-head{display:flex;gap:14px;align-items:center;padding:18px 52px 0 20px;min-width:0}
/* Csepi's window: he rises from its bottom edge, wobbles and lets a few bubbles up; after a sign-up he jumps.
   A few seconds in all (the tube's motion runs once), none under prefers-reduced-motion (he just stands there). */
.newsletter-mascot{flex:none;display:flex;align-items:flex-end;justify-content:center;width:68px;height:76px;border-radius:14px;background:linear-gradient(180deg,var(--test-tint),var(--cta-tint));overflow:hidden}
.newsletter-mascot .ft-tube{width:60px;height:75px;margin-bottom:-3px;animation:nl-rise .65s cubic-bezier(.34,1.45,.55,1) .25s both}
.newsletter-mascot .ft-tube.is-idle .t-body{animation:nl-wobble 1.5s ease-in-out .9s both}
.newsletter-mascot .ft-tube.is-idle .t-bubble{animation:tube-bubble 1.5s ease-in 1s both}
.newsletter-mascot .ft-tube.is-idle .t-bubble:nth-of-type(2){animation-delay:1.4s}
.newsletter-mascot .ft-tube.is-idle .t-bubble:nth-of-type(3){animation-delay:1.8s}
.newsletter-mascot .ft-tube.is-happy .t-body{animation:nl-jump 1.5s cubic-bezier(.3,.7,.4,1) .85s both}
.newsletter-mascot .ft-tube.is-happy .t-shadow{animation:nl-jump-shadow 1.5s cubic-bezier(.3,.7,.4,1) .85s both}
@keyframes nl-rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes nl-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}42%{transform:rotate(7deg)}62%{transform:rotate(-4deg)}82%{transform:rotate(2deg)}}
@keyframes nl-jump{0%,50%,100%{transform:translateY(0) scale(1)}8%,58%{transform:translateY(0) scale(1.05,.94)}25%,75%{transform:translateY(-9px) scale(.97,1.04)}}
@keyframes nl-jump-shadow{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(.65);opacity:.06}}
.newsletter-heading{min-width:0;padding-bottom:2px}
.newsletter-kicker{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--food-text)}
.newsletter-kicker .icon{flex:none;width:16px;height:16px}
.newsletter-heading .dialog-title{margin:0;font-size:19px;overflow-wrap:break-word}
.newsletter-body{padding:14px 20px 20px}
.newsletter-body p{font-size:14.5px;color:var(--muted)}
.newsletter-body>p:first-child{margin:0 0 14px}
.newsletter-body .check{font-size:13.5px}
/* A 24 px consent box (WCAG 2.5.8); the whole label toggles it too. */
.newsletter-body .check input{width:24px;height:24px;margin-top:0}
.quiz-signup-popup{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.quiz-signup-popup .signup-card{margin:0;border:0;border-radius:0;background:var(--surface);padding:20px 20px 22px}
.quiz-signup-popup .signup-card-head{padding-right:32px}
.quiz-signup-popup .signup-card-fields{grid-template-columns:1fr}
@media (max-width:719px){.quiz-signup-popup .signup-card{gap:12px;padding:16px}.quiz-signup-popup .signup-card-icon,.quiz-signup-popup .signup-card-head p:last-child,.quiz-signup-popup .signup-card-form>.field-hint{display:none}}
.quiz-signup-open{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;min-width:0;margin:0 0 22px;padding:16px clamp(16px,2.4vw,24px);background:var(--test-tint);border:1px solid var(--test-line);border-radius:var(--radius-lg)}
.quiz-signup-open-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--test-dark)}
.quiz-signup-open-icon .icon{width:22px;height:22px}
.quiz-signup-open-text{display:grid;gap:2px;flex:1 1 220px;min-width:0;line-height:1.45}
.quiz-signup-open-text strong{font-size:17px;color:var(--heading);overflow-wrap:anywhere}
.quiz-signup-open-text span{font-size:14.5px;color:var(--ink-soft)}
.quiz-signup-open .button{flex:none;white-space:nowrap}
@media (max-width:519px){.quiz-signup-open-icon{display:none}.quiz-signup-open .button{flex:1 1 100%}}
.newsletter-close{position:absolute;top:8px;right:6px;width:44px;height:44px;border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.newsletter-close:hover{background:var(--bg)}
.signup-card{display:grid;gap:16px;margin:var(--space-block) 0 8px;padding:clamp(18px,3vw,28px);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);font-size:15.5px;line-height:1.55;min-width:0}
.signup-card.is-magnet{background:var(--surface);border-color:var(--test-line)}
.signup-card-head{display:flex;gap:14px;align-items:flex-start;min-width:0}
.signup-card-head>div{min-width:0}
.signup-card-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--test-tint);color:var(--test-dark)}
.signup-card-icon .icon{width:22px;height:22px}
.signup-card-kicker{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.signup-card h2,.content .signup-card h2{margin:0 0 6px;font-size:clamp(19px,2.2vw,22px);line-height:1.3;overflow-wrap:anywhere}
.signup-card-head p:last-child{margin:0;color:var(--ink-soft)}
.signup-card-form{display:grid;gap:12px}
.signup-card-fields{display:grid;gap:12px}
@media (min-width:600px){.signup-card-fields{grid-template-columns:1fr 1fr}.signup-card-form .button{justify-self:start}}
.signup-card .check{font-size:13.5px}
.signup-card .notice{margin:0}
.welcome-coupon-terms{margin-top:10px;font-size:12.5px;line-height:1.45}
.newsletter-body .welcome-coupon-terms{font-size:12.5px}
.newsletter-offer{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
.newsletter-cover{flex:none;width:96px;height:auto;border-radius:6px;border:1px solid var(--line)}
.newsletter-offer-text{min-width:0}
.newsletter-offer-text>p{margin:0 0 8px}
.newsletter-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--ink-soft)}
.newsletter-points li{position:relative;padding-left:22px;line-height:1.4}
.newsletter-points li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.newsletter-note{margin:8px 0 0;font-size:12.5px;text-align:center}
.newsletter-later{display:block;margin:10px auto 0;padding:6px 10px;min-height:32px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.newsletter-later:hover{color:var(--ink)}
@media (max-width:479px){.newsletter-cover{display:none}.newsletter-offer{margin-bottom:12px}}
.cart-signup{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}

/* Shop: product page, cart, checkout */
.product-hero{display:grid;gap:clamp(24px,3.5vw,48px);padding-block:var(--space-tight);align-items:start}
@media (min-width:960px){.product-hero{grid-template-columns:1fr 440px}}
.product-gallery img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.buy-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
/* Sticky right-hand boxes (buy box, summary, sidebar pin) stick just under the collapsed header, and only in windows
   tall enough to show them whole: the min-height queries cover the usual content (the tallest buy box + --sticky-top
   + a margin), and site.js marks any box still taller than the window .is-static. Never an inner scrollbar. */
:root{--sticky-top:76px}
[data-sticky-fit].is-static{position:static}
@media (min-width:960px) and (min-height:560px){.buy-box{position:sticky;top:var(--sticky-top)}}
.buy-box h1{font-size:clamp(22px,1.9vw,26px);line-height:1.2;margin-bottom:4px}
.buy-box-price{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:0 0 12px}
.buy-box .price{font-size:27px;display:block;margin:0;line-height:1.2}
.buy-box-trust{list-style:none;padding:12px 0 0;margin:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink-soft)}
.buy-box-trust li{display:flex;gap:6px;align-items:center}
.buy-box-trust .icon{color:var(--food-text)}
.option-group{border:0;padding:0;margin:0 0 16px}
.option-group legend{font-weight:700;font-size:14.5px;color:var(--ink-soft);margin-bottom:8px;padding:0}
.option-choices{display:grid;gap:8px}
.option-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:12px;cursor:pointer;font-weight:600;font-size:15px;transition:border-color .15s ease,background-color .15s ease}
.option-choice:hover{border-color:var(--test)}
.option-choice input{position:absolute;opacity:0;pointer-events:none}
.option-choice:has(input:checked){border-color:var(--link);background:var(--test-tint);box-shadow:inset 0 0 0 1px var(--link)}
.option-choice:has(input:focus-visible){outline:3px solid var(--test);outline-offset:2px}
.option-choice small{color:var(--food-text);font-weight:700;white-space:nowrap}
/* Product page: each option is one row, its short name and then compact toggle buttons side by side. */
.buy-box .option-group{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.buy-box .option-group legend{float:left;flex:none;width:86px;margin:0;font-size:14px}
.option-choices.is-segmented{flex:1;min-width:0;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.option-choices.is-segmented .option-choice{position:relative;justify-content:center;flex-wrap:wrap;gap:0 6px;min-height:44px;padding:8px 10px;font-size:14.5px;line-height:1.25;text-align:center}
.option-choices.is-segmented .option-choice small{font-size:12.5px}
.buy-box-extras{display:grid;gap:12px;align-content:start}
.buy-box-extras .buy-box-trust{margin:0;padding:0;border:0}
.buy-box-extras .callback-box{margin:0;max-width:440px}
.qty-row{display:flex;gap:12px;align-items:stretch}
.qty-row input{width:84px;text-align:center}
@media (max-width:359px){.qty-row{gap:8px}.qty-row input{width:64px}.qty-row .button{padding-inline:14px}}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:0 12px 12px;border-bottom:1px solid var(--line)}
.cart-table td{padding:18px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cart-item-name{font-weight:700;color:var(--heading);text-decoration:none}
.cart-item{display:flex;align-items:flex-start;gap:14px}
.cart-item-thumb{flex:none;width:96px;height:60px;object-fit:cover;border-radius:var(--radius-sm);background:var(--bg-alt)}
.cart-item-text{min-width:0}
.cart-item-options{list-style:none;padding:0;margin:6px 0 0;font-size:14px;color:var(--muted)}
.cart-layout{display:grid;gap:32px;padding-block:clamp(24px,4vw,48px)}
/* Basket and checkout: totals beside the lines from 1000px (the summary box is sticky from there); with
   extras (upsell, next steps) the totals sit beside both, on phones the DOM order is lines, totals, extras. */
@media (min-width:1000px){
  .cart-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .cart-layout.has-extras{grid-template-areas:"main aside" "extras aside"}
  .cart-layout.has-extras>.cart-main{grid-area:main}
  .cart-layout.has-extras>.summary-box{grid-area:aside}
  .cart-layout.has-extras>.cart-extras{grid-area:extras}
}
.summary-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
@media (min-width:1000px) and (min-height:560px){.summary-box{position:sticky;top:var(--sticky-top)}}
.summary-box h2{font-size:20px}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.summary-row.is-total{border-bottom:0;font-size:19px;font-weight:700;color:var(--heading);padding-top:16px}
.summary-row.is-discount{color:var(--success)}
.quantity-tiers{margin:10px 0 0;font-size:14px;color:var(--success)}
.summary-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.summary-note.is-hint{color:var(--success);font-weight:600}
.summary-note.is-offer{color:var(--success);font-weight:600}
/* Cart leaving offer (shop/partials/exit-offer, exit-offer.js): a small centred modal; the body carries the padding so a click on the backdrop is the dialog itself. */
.exit-offer{width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(10,24,30,.28)}
.exit-offer::backdrop{background:rgba(10,24,30,.55)}
.exit-offer-body{position:relative;padding:28px 24px 24px}
.exit-offer-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:var(--radius-sm)}
.exit-offer-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--success)}
.exit-offer h2{margin:6px 44px 10px 0;font-size:clamp(20px,4.6vw,24px);line-height:1.25;color:var(--heading)}
.exit-offer p{margin:0 0 10px}
.exit-offer-note{font-size:13.5px;color:var(--muted)}
.exit-offer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.exit-offer-actions .button{flex:1 1 180px}
/* Quantity tiers as steps: one segment per tier, filled once the hinted product's pieces reach it,
   the next one outlined dashed; the check mark keeps the reached state readable without color. */
.quantity-progress{margin-top:12px}
.quantity-progress .summary-note{margin-top:10px}
.quantity-progress-now{margin:0 0 8px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.quantity-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;list-style:none;margin:0;padding:0}
.quantity-step{display:flex;flex-wrap:wrap;column-gap:4px;min-width:0;padding-top:14px;position:relative;font-size:12.5px;line-height:1.35;color:var(--muted)}
.quantity-step::before{content:"";position:absolute;inset:0 0 auto;height:8px;border:1px solid var(--muted);border-radius:999px;background:transparent}
.quantity-step-count{font-weight:700;color:var(--ink)}
.quantity-step.is-reached::before{border-color:var(--success);background:var(--success)}
.quantity-step.is-reached .quantity-step-count::before{content:"✓ "}
.quantity-step.is-reached .quantity-step-percent{color:var(--success-text);font-weight:700}
.quantity-step.is-next::before{border:1px dashed var(--success)}
@media (max-width:719px){
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border-bottom:1px solid var(--line)}
  .cart-table td{border:0;padding:4px 0}
  .cart-table td[data-label]::before{font-weight:700;color:var(--muted);font-size:13px}
}
.checkout-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,28px);margin-bottom:22px}
.checkout-section h2{font-size:20px;margin-bottom:16px}
.lab-sites-notice{padding:12px 14px;border-radius:10px;background:var(--warn-tint);color:var(--warn-text)}
.lab-sites-title{font-size:16px;margin:20px 0 12px}
.lab-sites{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:768px){.lab-sites{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lab-site{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--test-dark);border-radius:12px;background:var(--surface);overflow-wrap:anywhere}
.lab-site-name{line-height:1.35;margin-bottom:2px}
.lab-site-note{color:var(--muted);font-size:14px;font-style:italic}
.lab-site-map{margin-top:6px;font-size:14px;font-weight:700;align-self:flex-start}
.payment-methods{display:grid;gap:10px}
.payment-method{display:block;border:1.5px solid var(--line-strong);border-radius:12px;padding:14px 16px;cursor:pointer}
.payment-method:has(input:checked){border-color:var(--test-dark);background:var(--test-tint)}
.payment-method p{margin:6px 0 0 30px;font-size:14px;color:var(--muted);font-weight:400}
.empty-state{text-align:center;padding:clamp(40px,8vw,90px) 16px}
.empty-state p{color:var(--muted)}

/* Search */
.search-form-large{display:flex;gap:10px;max-width:680px;margin-top:18px}
.search-results{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.search-result{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow-wrap:anywhere}
.search-result h2{font-size:19px;margin-bottom:4px}
.search-result h2 a{text-decoration:none}
.search-result p{margin:0;color:var(--muted);font-size:15px}
.search-result .search-result-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px;font-size:13px}
.search-result-type{color:var(--food-text);font-weight:700}
.search-result-where{color:var(--muted)}
.search-result .search-result-snippet{color:var(--ink-soft)}
/* Search hits: a calm highlighter tint, readable in both themes. */
.search-results,.quick-answers{--mark-bg:#fbefb0;--mark-ink:var(--ink)}
:root[data-theme="dark"] .search-results,:root[data-theme="dark"] .quick-answers{--mark-bg:#574811;--mark-ink:#fdf3cf}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .search-results,:root:not([data-theme="light"]) .quick-answers{--mark-bg:#574811;--mark-ink:#fdf3cf}}
/* The highlight overhangs the word a little (padding offset by a negative margin), so no gap opens before a comma or full stop. */
.search-results mark,.quick-answers mark{background:var(--mark-bg);color:var(--mark-ink);padding:0 .08em;margin-inline:-.08em;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Contact */
.contact-grid{display:grid;gap:28px}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .feature-icon{margin:0;width:46px;height:46px}
.hours{width:100%;max-width:340px;border-collapse:collapse;font-size:15px;margin-top:4px}
.hours td{padding:4px 0;border-bottom:1px solid var(--line)}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;font-weight:650;padding-left:16px}
/* Contact page: everything fits one desktop screen above the footer (owner request 2026-10-28). */
.contact-page{padding-block:var(--space-tight)}
.contact-page .contact-list li>div{flex:1;min-width:0}
.contact-page .checkout-section{margin:0}
.contact-page .checkout-section h2{margin-bottom:12px}
.contact-page textarea{min-height:96px}
@media (min-width:1080px){.contact-page .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.contact-page .contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(28px,4vw,56px)}}

/* Utilities */
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--food-tint);color:var(--food-text);font-size:12.5px;font-weight:600}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(24,45,51,.08);padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .25s var(--ease)}
.sticky-buy.is-visible{transform:none}
@media (min-width:960px){.sticky-buy{display:none}}
@media print{.site-header,.site-footer,.cookie-consent,.newsletter-popup,.sticky-buy{display:none!important}}
.link-list{display:grid;gap:8px;font-size:15px}
.link-list a{font-weight:600}
.link-list a:hover{text-decoration:underline}
.mt-lg{margin-top:clamp(18px,2.4vw,26px)}
.list-reset{list-style:none;padding:0;margin:0}
.search-form-large.is-centered{margin-inline:auto}
/* Search page: title and field centred together in the header band, results in the same narrow column below. */
.page-header-search{text-align:center;padding-block:var(--space-tight)}
.page-header-search h1{margin-bottom:20px;overflow-wrap:anywhere}
.page-header-search .search-form-large{margin-top:0}
.search-form-large input{flex:1 1 auto;min-width:0}
.search-form-large .button{flex:none}
.search-body>:first-child{margin-top:0}
.search-count{margin:0 0 14px}
.search-body .empty-state{padding-block:0}
.action-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* Shop module */
.product-summary{margin-top:20px}
.buy-box-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:2px 0 10px;font-size:15px;color:var(--ink-soft)}
.buy-box-total strong{font-size:20px;color:var(--heading)}
.buy-box-total del{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.buy-box-total strong{white-space:nowrap}
.buy-box-discount{margin:-6px 0 10px;font-size:14px;font-weight:600;color:var(--success);text-align:right}
.product-meta{margin:14px 0 0;font-size:14px;color:var(--muted)}
.product-description{margin-top:clamp(16px,3vw,32px)}
.product-help{font-weight:700;color:var(--heading);margin-top:1.5em}
.sticky-buy-info{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.3}
.sticky-buy-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-remove{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--danger);font-size:20px;line-height:1;cursor:pointer}
.cart-remove:hover{background:var(--danger-tint);border-color:var(--danger)}
.cart-table .cart-qty{width:84px;text-align:center}
.cart-actions{display:flex;justify-content:flex-end;margin-top:16px}
.cart-totals{transition:opacity .2s}
.cart-totals.is-loading{opacity:.55}
.cart-coupon h2{font-size:18px}
.coupon-form{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.coupon-form input{flex:1 1 200px}
/* Coupon codes are capitals only: shown so while typing (site.js uppercases the value too), the placeholder stays as written. */
.coupon-form input[data-coupon-code]{text-transform:uppercase}
.coupon-form input[data-coupon-code]::placeholder{text-transform:none}
.summary-remove{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
.checkout-coupon{border:1px dashed var(--line-strong);border-radius:12px;padding:14px 18px;margin-bottom:22px;background:var(--bg)}
/* The coupon line sits between the page header and the form: even gaps above and below it. */
.checkout-coupon{margin-top:clamp(20px,3vw,28px)}
.checkout-coupon~.cart-layout{padding-top:0}
.checkout-coupon summary{cursor:pointer;font-weight:650}
.checkout-coupon summary span{color:var(--link);text-decoration:underline}
.checkout-coupon[open] summary{margin-bottom:10px}
.billing-address{display:contents}
/* Home delivery: the address the kit goes to, checked against the one typed above, or another one */
.ship-choice{border:0;padding:0;margin:0;min-width:0}
.ship-choice-title{padding:0;margin:0 0 10px;font-weight:700;font-size:16px}
.ship-preview{white-space:pre-line;overflow-wrap:anywhere}
.ship-preview.is-empty{font-style:italic}
/* Home kit delivery: courier or pickup point (search + result list) */
.delivery-methods{border:0;padding:0;margin:0}
.delivery-price{margin-left:auto;font-size:14px;font-weight:700;color:var(--food-dark)}
.pickup-picker{display:grid;gap:12px;margin-top:16px}
.pickup-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:560px){.pickup-filters{grid-template-columns:minmax(0,1fr) minmax(140px,auto)}}
.pickup-results{display:grid;grid-auto-rows:max-content;gap:8px;max-height:min(420px,60svh);overflow-y:auto;overscroll-behavior:contain}
.pickup-results:empty{display:none}
.pickup-point{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px;cursor:pointer;min-height:44px}
.pickup-point:has(input:checked){border-color:var(--test-dark);background:var(--test-tint)}
.pickup-point input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--test-dark)}
.pickup-point strong{display:block;overflow-wrap:anywhere}
.pickup-point-meta{display:block;font-size:14px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.checkout-shipping{margin-top:18px}
.order-review{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:6px}
.order-review th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--line)}
.order-review td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.order-review th:last-child,.order-review td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
/* The checkout's sticky summary stays short: tighter rows, each line's choices on one line. */
.checkout-form .summary-box{padding:20px 22px}
.checkout-form .summary-box h2{margin-bottom:10px}
.checkout-form .order-review{font-size:14.5px;line-height:1.4}
.checkout-form .order-review td{padding:10px 0}
.checkout-form .order-review .cart-item-options{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:2px;font-size:13.5px}
.checkout-form .order-review .cart-item-options li:not(:last-child)::after{content:"·";margin-left:6px}
.checkout-form .summary-row{padding:8px 0}
.checkout-form .summary-row.is-total{padding-top:12px}
.summary-box .payment-methods{border:0;padding:0;margin:20px 0 0}
.payment-method .check{align-items:center}
.payment-method-logo{display:block;width:calc(100% - 30px);max-width:300px;height:auto;margin:10px 0 0 30px}
.checkout-privacy{font-size:13.5px;color:var(--muted);margin:18px 0 12px}
.order-overview{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:0;border:1px dashed var(--line-strong);border-radius:12px;background:var(--bg)}
.order-overview li{flex:1 1 180px;padding:12px 18px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.order-overview strong{display:block;font-size:15.5px;color:var(--ink);text-transform:none;letter-spacing:0}
/* From tablets the six facts sit in two even rows of three, so wide pages do not leave one stretched cell. */
@media (min-width:720px){.order-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
.bank-details{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 16px}
.bank-details dt{font-weight:700;color:var(--ink-soft)}
.bank-details dd{margin:0}
/* Phones: each label above its value, so the account number and reference stay on one line to copy. */
@media (max-width:559px){.bank-details{grid-template-columns:1fr;gap:2px}.bank-details dd+dt{margin-top:10px}}
.cart-table .cart-price{white-space:nowrap}

/* Clinical components: link panel, specification table */
.link-list{list-style:none;margin:0;padding:0}
.link-list li+li{border-top:1px solid var(--line)}
.link-list a{display:grid;gap:2px;padding:14px 44px 14px 18px;text-decoration:none;color:var(--ink);position:relative}
.link-list a::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-top:2px solid var(--link);border-right:2px solid var(--link);transform:translateY(-50%) rotate(45deg)}
.link-list strong{color:var(--heading);font-weight:600}
.link-list span{font-size:14.5px;color:var(--muted)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--surface)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:30%;min-width:140px;color:var(--ink-soft);font-weight:600}
@media (max-width:600px){.spec-table th,.spec-table td{display:block;width:auto;border-bottom:0}.spec-table th{padding-bottom:2px}.spec-table td{padding-top:2px;border-bottom:1px solid var(--line)}}

/* ==========================================================================
   Modern sales layer: rounded, confident, conversion-focused (owner feedback 2026-10-04)
   ========================================================================== */
.button{border-radius:999px;font-weight:700;min-height:48px;padding:11px 24px;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.button-primary,.button-food{background:var(--cta);border-color:var(--cta);color:#fff}
.button-primary:hover,.button-food:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:#fff}
.button-secondary{background:var(--test-deep);border-color:var(--test-deep);color:#fff}
.button-secondary:hover{background:var(--test-dark);border-color:var(--test-dark);color:#fff}
.button-lg{min-height:56px;padding:14px 30px;font-size:17px}
@media (max-width:359px){.button{padding-inline:16px}.button-lg{padding-inline:18px;font-size:16px}.summary-box{padding:16px}}
.header-cta{border-radius:999px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent);background:var(--cta-tint);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.section-tint{background:var(--bg);border-block:0}
.hero{background:var(--surface);border-bottom:0;padding-block:clamp(28px,4.5vw,64px)}
.hero-price{margin:22px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.hero-price strong{font-size:clamp(24px,2.6vw,30px);color:var(--food-text);letter-spacing:-.02em;margin-inline:2px;white-space:nowrap}
.hero-trust{font-weight:600}
.hero-trust .icon{color:var(--cta)}
.hero h1 em{display:block;margin-top:.2em;font-size:.72em;line-height:1.15}
.hero-grid>*{min-width:0}
.hero h1,.hero h1 em{text-wrap:balance}
.hero-symptoms{margin-top:22px}
.hero-symptoms p{margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.hero-symptoms .chip-list{margin:0}
.hero-symptoms .chip{color:var(--accent)}
.hero-symptoms .chip:hover{background:var(--cta-tint);border-color:var(--cta);color:var(--accent)}
.hero-symptoms+.hero-actions{margin-top:24px}
/* The report on a phone: a cut-out PNG, so no card frame; height-capped so it never pushes the price below the fold. */
/* Home hero with the muted lab loop (hero-video.js): full-bleed video under a fixed navy overlay, white copy.
   The overlay keeps the text readable in both themes, so the colours here do not follow the theme tokens. */
.hero.is-video{background:#123f50 url("../images/hero/hero-lab-poster.jpg") center/cover no-repeat;color:#fff;overflow:hidden;padding-block:clamp(40px,7vw,104px)}
.hero-video{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,46,60,.93) 0%,rgba(14,46,60,.84) 48%,rgba(14,46,60,.55) 100%)}
.hero.is-video .hero-grid{grid-template-columns:minmax(0,760px)}
.hero.is-video h1{color:#fff}
.hero.is-video h1 em{color:#b4dc7e}
.hero.is-video .lead,.hero.is-video .hero-symptoms p{color:rgba(255,255,255,.9)}
.hero.is-video .eyebrow{background:rgba(255,255,255,.14);color:#d5edb4}
.hero.is-video .hero-symptoms .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);color:#fff}
.hero.is-video .hero-symptoms .chip:hover,.hero.is-video .hero-symptoms .chip:focus-visible{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.hero.is-video .hero-price{color:rgba(255,255,255,.82)}
.hero.is-video .hero-price strong{color:#b4dc7e}
.hero.is-video .hero-trust{color:#fff}
.hero.is-video .hero-trust .icon{color:#b4dc7e}
@media (max-width:719px){.hero-video::after{background:rgba(14,46,60,.8)}}
.hero-video-toggle{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(14,46,60,.55);color:#fff;cursor:pointer}
.hero-video-toggle:hover,.hero-video-toggle:focus-visible{background:rgba(14,46,60,.85);border-color:#fff}
.hero-video-toggle:focus-visible{outline:3px solid #b4dc7e;outline-offset:2px}
.hero-video-icon{display:block;width:12px;height:14px;border-inline:4px solid currentColor}
.hero-video-toggle.is-paused .hero-video-icon{width:0;height:0;border-block:7px solid transparent;border-inline:12px solid currentColor;border-inline-end:0;margin-inline-start:3px}
.stats{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card,.table-wrap,details.cms-toggle,.faq-item,.post-card,.product-card{box-shadow:var(--shadow-sm)}
a.card:hover,.post-card:hover{border-color:var(--line-strong)}
.product-card{border-radius:var(--radius-lg);transition:border-color .2s ease}
.product-card:hover{border-color:var(--line-strong)}
.product-card.is-featured{border:2px solid var(--cta)}
.product-card-flag{background:var(--cta);border-radius:999px;padding:5px 12px;font-weight:700}
.product-card .price{font-size:24px;color:var(--food-text)}
.link-list a:hover{background:var(--cta-tint)}
.link-list a::after{border-color:var(--cta)}
.table-wrap{border-radius:var(--radius-lg)}
.spec-table th{background:var(--bg)}
.step::before{border-radius:50%;background:var(--cta);width:40px;height:40px}
.chip{border-radius:999px}
.pagination a,.pagination span{border-radius:999px}
.post-card-cat{color:var(--accent);font-weight:700}
.footer-cta{background:var(--test-deep)}
.badge{border-radius:999px}
.cart-count{border-radius:999px;background:var(--cta)}
.product-card-footer{flex-wrap:wrap;row-gap:10px}
.product-card-footer .price{white-space:nowrap}
.product-card-footer .button{flex:0 1 auto;min-width:0}
/* Audit fixes: the logo must never shrink in the header row; footer links rule must not
   recolour light buttons; leave room under the footer for the mobile sticky buy bar. */
.site-logo{flex:none}
.site-logo img{max-width:none}
.site-footer a.button-light{color:var(--test-deep)}
.site-footer a.button-light:hover{color:var(--test-deep)}
@media (max-width:959px){body:has(.sticky-buy) .site-footer{padding-bottom:84px}}

/* Desktop header: the navigation sits in the header row from 1320px (seven menu items no longer fit
   next to the logo below that), in a compact form below 1680px; narrower windows use the drawer. */
@media (min-width:1320px){
  .site-header .container{max-width:1440px}
  .header-main{gap:20px}
  .main-nav{min-width:0}
}

/* Polish pass (2026-10-04): findings of the all-widths design review. */

/* Header: the logo is the home link on desktop, the nav is right-aligned and never overflows. */
/* The drawer head (logo, HU/EN, close) stays at the top while the menu scrolls under it. */
.nav-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0 -20px 10px;padding:14px 20px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.nav-drawer-head .site-logo{flex:0 1 auto;min-width:0}
.nav-drawer-head .site-logo img{width:140px;max-width:100%}
.nav-drawer-head [data-menu-close]{flex:none}
@media (max-width:359px){.main-nav{width:92vw}.nav-drawer-head .site-logo img{width:112px}.lang-switch.is-mobile a{padding-inline:10px}}
.main-nav{padding-top:0}
.nav-mobile-extra .button{margin:6px 0 10px;color:#fff}
.nav-mobile-extra .nav-phone{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:650}
.menu-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:720px) and (max-width:1319px){
  .menu-button{width:auto;gap:8px;padding:0 14px 0 12px;border:1px solid var(--line-strong);border-radius:999px;font-weight:650;font-size:14.5px;color:var(--ink)}
  .menu-button-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
@media (min-width:1320px){
  .nav-drawer-head,.nav-item.is-home{display:none}
  .main-nav{justify-content:flex-end;padding-top:0}
  .nav-list{flex-wrap:nowrap;gap:0}
  .nav-link{padding:9px 10px}
  .nav-item.has-children>.nav-link{padding-right:24px}
}
@media (min-width:1680px){.site-header .container{max-width:1600px}}

/* Imported media that never had a source (lazy-load leftovers) must not leave empty boxes. */
.content img:not([src]),.content iframe:not([src]){display:none}

/* Product photo thumbnails under the main photo (product-gallery.js swaps the main photo). */
.product-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;justify-content:center}
.product-gallery .product-thumbs img{display:block;width:100px;height:66px;aspect-ratio:auto;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.product-thumb{display:block;border-radius:var(--radius-sm);outline:2px solid transparent;outline-offset:2px}
.product-thumb:hover img{border-color:var(--line-strong)}
.product-thumb.is-active{outline-color:var(--food)}
@media (max-width:399px){.product-gallery .product-thumbs img{width:68px;height:45px}}
/* Mobile product page: title, price and "add to cart" come right after the photo. */
@media (max-width:959px){
  .product-hero{display:flex;flex-direction:column;align-items:stretch}
  .product-gallery{display:contents}
  .product-gallery>img{order:1;aspect-ratio:16/9}
  .product-thumbs{order:1}
  .buy-box{order:2}
  .product-summary{order:4;margin:0}
  .product-gallery .checklist{order:5}
  .product-gallery .product-meta{order:6;margin:0}
  .buy-box-extras{order:7}
}
@media (max-width:599px){.buy-box{padding:20px}.buy-box .option-group{display:block}.buy-box .option-group legend{float:none;width:auto;margin-bottom:6px}}
.sticky-buy .button{flex:none;white-space:nowrap;min-height:44px;padding:8px 18px}
.sticky-buy-info [data-live-price]{font-weight:700;color:var(--food-text);font-size:16px}
.sticky-buy{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
body:has(.cookie-consent:not([hidden])) .sticky-buy{display:none}

/* Imported team gallery: portrait cards in a grid instead of a bulleted list. */
.content .cms-gallery{list-style:none;padding:0;margin:1.2em 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.content .cms-gallery li{display:flex;flex-direction:column;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.content .cms-gallery img{order:-1;width:100%;margin:0;border-radius:0;aspect-ratio:4/5;object-fit:cover}
.content .cms-gallery :is(h2,h3,h4){font-size:16px;margin:12px 14px 2px;letter-spacing:-.01em}
.content .cms-gallery p{font-size:13.5px;color:var(--muted);margin:0 14px 14px}

/* Builder "buttons" without a link are labels, and runs of name buttons are tags, not CTAs. */
.content span.button,.content a.button:not([href]){background:var(--cta-tint);border-color:transparent;color:var(--accent);box-shadow:none;min-height:36px;padding:6px 14px;font-size:14px;cursor:default;transform:none}
.content a.button-primary[href]:is(:has(+:is(a,span).button),:is(a,span).button+*){background:var(--surface);color:var(--link);border-color:var(--line-strong);box-shadow:none;min-height:38px;padding:6px 14px;font-size:14px}

/* Package check lists (converted from the imported ✅/❌ lines). */
.content .cms-checks{gap:8px;margin:1em 0 1.2em;font-size:15px}
.content .cms-checks li{padding-left:30px}
.content .cms-checks li::before{width:20px;height:20px;top:2px}
.content .cms-checks strong{display:inline;color:inherit}
.content .cms-checks li.is-excluded{color:var(--muted)}
.content .cms-checks li.is-excluded::before{background:var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a878c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center/12px no-repeat}

/* Decorative line art and logo rows from the old builder. */
@media (max-width:859px){.content .cms-col-1-3>img:only-child,.content .cms-col-1-3>p:only-child>img{max-width:180px;margin-inline:auto}}
.content .cms-row:has(>.cms-col-1-4>img:only-child) img,.content .cms-row:has(>.cms-col-1-5>img:only-child) img{max-height:64px;width:auto;margin:8px auto;object-fit:contain}

/* Builder pages: no empty half columns; centred landing content stays centred. */
.content .cms-col:empty{display:none}
.content.text-center .cms-row{grid-template-columns:1fr!important}
.content.text-center .cms-col{grid-column:1/-1!important}
.content.text-center :is(ul,ol){display:inline-block;text-align:left}

/* Comfortable text measure. */
.content :is(p,li,blockquote){max-width:72ch}
.content.text-center p{margin-inline:auto}
.content .cms-gallery :is(p,li),.medical-note p{max-width:none}
@media (min-width:900px) and (max-width:1079px){.layout-sidebar{grid-template-columns:minmax(0,1fr) 260px}}
.product-description{max-width:none}

/* Tablet grids without orphans; steps in two columns. */
@media (min-width:600px) and (max-width:899px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:720px) and (max-width:1079px){.product-grid>:last-child:nth-child(odd),.post-grid>:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 11px);justify-self:center;width:100%}}

/* Post thumbnails carry a text banner in the lower part of the image: crop above it. */
.post-card-media{aspect-ratio:1/1}

/* Basket on phones: compact item cards, remove control top right. */
@media (max-width:719px){
  .cart-table tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;position:relative;padding:16px 44px 16px 0}
  .cart-table td{width:auto}
  .cart-table td.cart-remove-cell{position:absolute;right:0;top:12px;width:auto;padding:0}
  .cart-table td[data-label]::before{content:none}
  .cart-table td:nth-child(2){grid-column:1/-1}
  .cart-table td:nth-child(3){display:none}
  .cart-table td:nth-child(5){text-align:right}
}
.cart-table td:nth-child(3),.cart-table td:nth-child(5){white-space:nowrap}
/* Tablet, and desktop with the totals beside the table: the unit price column goes (the line total shows it)
   so the product name and options get the room; the smallest phones get a smaller thumbnail. */
@media (min-width:720px) and (max-width:1279px){.cart-table th:nth-child(3),.cart-table td:nth-child(3){display:none}}
@media (max-width:359px){.cart-item{gap:10px}.cart-item-thumb{width:64px;height:40px}}
/* Reserve room for a seven-digit line total so a higher quantity does not squeeze the product column. */
@media (min-width:720px){.cart-table th:nth-child(5){width:140px}}
.cart-coupon{margin-top:18px;margin-bottom:0}

/* Checkout details. */
.checkout-coupon summary{list-style:none}
.checkout-coupon summary::-webkit-details-marker{display:none}
::placeholder{color:var(--placeholder);opacity:1}
.order-overview strong{overflow-wrap:anywhere}

/* Chips wrap onto several lines on phones too (no sideways swiping), each a full 44px tap target.
   The home hero's symptom chips are an even grid: three across, two rows. */
@media (max-width:719px){
  .chip{min-height:44px}
  .hero-symptoms .chip-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-symptoms .chip{width:100%;justify-content:center;text-align:center;padding:6px 8px;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
}
/* Below 360px three across leaves "Gyermekemnek keresek" no room: two across, three rows. */
@media (max-width:359px){.hero-symptoms .chip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* "Gyermekemnek keresek": its first word is wider than a third of a phone screen, so the Hungarian chips use two columns there and the label wraps between its words instead of being hyphenated. */
@media (max-width:419px){:lang(hu) .hero-symptoms .chip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Home hero on phones: the copy, the symptom grid, the button and the price fit the first screen, so the
   trust list (the top bar already says free delivery) and the report photo are left out there. */
@media (max-width:719px){
  .hero-trust{display:none}
  .hero .lead{font-size:16px;margin-bottom:0}
  .hero-symptoms p{margin-bottom:8px}
  .hero-price{margin-top:14px}
}

/* Hero on phones: equal-width actions. */
@media (max-width:599px){.hero-actions .button{width:100%;justify-content:center}}

/* Cookie banner and newsletter pop-up: compact on phones, equal-weight consent choices. */
@media (max-width:719px){
  .cookie-consent{left:8px;right:8px;bottom:8px;padding:14px 16px}
  .cookie-consent .dialog-title{font-size:16px}
  .cookie-consent p{font-size:13.5px;line-height:1.5}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr}
  .cookie-actions .button-primary{grid-column:1/-1;order:-1}
  .cookie-actions .button{min-height:44px;padding:8px 10px;justify-content:center;font-size:14.5px}
  .newsletter-popup{left:8px;right:8px;width:auto;bottom:8px}
  .newsletter-head{gap:12px;padding:14px 48px 0 16px}
  .newsletter-mascot{width:58px;height:66px;border-radius:12px}
  .newsletter-mascot .ft-tube{width:52px;height:65px}
  .newsletter-heading .dialog-title{font-size:17px}
  .newsletter-body{padding:12px 16px 16px}
}
@media (max-width:400px){
  .cookie-actions .button{font-size:13.5px;padding-inline:6px}
  .newsletter-mascot{width:50px;height:58px}
  .newsletter-mascot .ft-tube{width:44px;height:55px}
  .newsletter-heading .dialog-title{font-size:16px}
}
/* The narrowest phones: the banner stays a small strip, the three choices stacked at full width, same size. */
@media (max-width:359px){
  .cookie-consent{padding:12px 14px}
  .cookie-consent-inner{gap:10px}
  .cookie-consent .dialog-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cookie-consent p{font-size:12.5px;line-height:1.45}
  .cookie-actions{grid-template-columns:1fr;gap:8px}
  .cookie-actions .cookie-necessary{order:1}
  .cookie-actions .button{min-height:40px;padding-block:6px;font-size:14.5px}
}
.newsletter-popup::before{content:none}
.newsletter-popup{border-top:3px solid var(--cta)}

/* One radius scale: controls --radius-sm, panels --radius, hero containers --radius-lg. */
.option-choice,.payment-method{border-radius:var(--radius-sm)}
.checkout-coupon,.order-overview,.search-result,.medical-note{border-radius:var(--radius)}
.search-result,.medical-note{box-shadow:var(--shadow-sm)}
a.eyebrow{text-decoration:none}
a.eyebrow:hover{background:var(--food-tint)}
.search-result-meta{letter-spacing:0}

/* Small tap targets. */
.lang-switch a{min-height:32px;display:inline-flex;align-items:center}
.footer-bottom .link-button{padding:10px 0}
@media (min-width:960px){.footer-bottom .link-button{padding:2px 0}}
.footer-links a{display:inline-flex;align-items:center;min-height:24px}
.footer-bottom .link-button{min-height:24px}
/* Phones, tablets and other touch screens: 44px tall footer links. */
@media (max-width:1079px),(pointer:coarse){
  .footer-links{gap:0}
  .footer-links-split li{margin-bottom:0}
  .footer-links a{min-height:44px}
  .footer-bottom .link-button{min-height:44px}
}
.cart-remove{width:44px;height:44px}
@media (min-width:720px){.chip{min-height:40px}}
.cart-count{font-size:12.5px}
.product-card-footer .price del{display:block;font-size:13px}
.content .table-wrap table{display:table;margin:0}

/* Builder layout (ContentRenderer::layoutRows): merged column runs and lone columns. */
.content .cms-row-single{max-width:820px;margin-inline:auto}
@media (min-width:860px){.content .cms-row-single>.cms-col{grid-column:1/-1}}
.layout-sidebar .content .cms-row-single{max-width:none}
.content .cms-cards{row-gap:var(--col-gap)}
.content .cms-cards>.cms-col{display:flex;flex-direction:column}
.content .cms-cards>.cms-col>*{margin-top:0}
.content .cms-cards>.cms-col{position:relative}
.content .cms-cards>.cms-col::before{content:"";position:absolute;inset:0 calc(var(--col-gap)/2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);z-index:-1}
.content .cms-cards>.cms-col{padding-block:0 22px;isolation:isolate}
.content .cms-cards>.cms-col>:not(img,p:has(>img:only-child)){margin-inline:22px}
/* Card images keep their own shape (many are text banners that a fixed crop would cut), capped in height. */
.content .cms-cards>.cms-col>img,.content .cms-cards>.cms-col>p:has(>img:only-child) img{width:100%;height:auto;max-height:320px;margin:0 0 18px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;object-fit:contain;background:var(--bg)}
.content .cms-cards>.cms-col>p:has(>img:only-child){margin:0}
.content .cms-cards>.cms-col>.cms-actions{margin-top:auto;padding-top:14px}
.content .cms-cards>.cms-col>:is(h3,h4){font-size:19px;margin-bottom:8px}
.content .cms-cards>.cms-col>p{font-size:15px;color:var(--ink-soft)}
.content .cms-cards>.cms-col:not(:has(>img,>p>img))::before{background:var(--bg)}
.content .cms-cards>.cms-col:not(:has(>img,>p>img)){padding-top:22px}
@media (max-width:859px){.content .cms-cards{gap:18px}.content .cms-cards>.cms-col::before{inset:0}}
.content .cms-cards>.cms-col br{display:none}
/* A video preview in a card keeps the card's side padding instead of running 44px past its edge. */
.content .cms-cards>.cms-col>.video-facade{width:auto}
@media (min-width:900px){.steps-3{grid-template-columns:repeat(3,1fr)}}
.next-steps-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(24px,4vw,36px) 0 0}
.chooser{display:grid;gap:12px;margin:0 auto clamp(24px,4vw,36px);max-width:980px}
@media (min-width:760px){.chooser{grid-template-columns:repeat(3,1fr)}}
.chooser li{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--radius);background:var(--cta-tint);font-size:14.5px;line-height:1.45}
.chooser strong{color:var(--accent);font-size:15px}
.chooser span{color:var(--ink-soft)}
.step:has(.step-art){padding-top:0;overflow:hidden}
.step-art{display:block;width:calc(100% + 44px);max-width:none;margin:0 -22px 14px;aspect-ratio:4/3;object-fit:cover}
.step:has(.step-art)::before{position:absolute;top:14px;left:14px;z-index:1}

/* Package differences: card tags, prices page chooser and table, product value stack */
.section-tight{padding-block:var(--space-tight)}
.product-card-tags{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.product-card-tags li,.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--test-tint);color:var(--link);font-size:12.5px;font-weight:700;line-height:1.5}
.product-card-tags li.is-accent,.tag.is-accent{background:var(--cta-tint);color:var(--accent)}
.checklist li.is-excluded{color:var(--muted)}
.checklist li.is-excluded::before{background:var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a878c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center/11px no-repeat}
.checklist li.is-key::before{background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.product-card .checklist{margin-bottom:12px}
.product-card-value{margin:0 0 4px;font-size:14px;color:var(--muted)}
.product-card-value strong{color:var(--accent)}
.need-list{display:grid;gap:12px}
@media (min-width:720px){.need-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.need-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.need-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.need-card:hover{border-color:var(--cta);color:inherit}
.need-situation{font-size:14px;color:var(--muted);line-height:1.45}
.need-package{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;color:var(--heading);font-size:16.5px;line-height:1.3}
.need-price{font-weight:700;color:var(--food-text);white-space:nowrap}
.need-why{font-size:14px;color:var(--ink-soft);line-height:1.45}
.need-why .tag{margin-right:6px}
.upgrade-note{padding:12px 16px;border-radius:var(--radius-sm);background:var(--warn-tint);color:var(--ink);font-size:15px}
.content .service-packages :is(p,li){max-width:none}
.content .service-packages{margin-block:var(--space-block)}
/* A running sale: badge plus its last day, next to every sale price. */
.sale-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4;white-space:normal}
.sale-note>span{display:inline;margin:0;color:inherit;font-size:inherit;font-weight:inherit}
.sale-note .sale-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border:1px solid var(--success-line);border-radius:999px;background:var(--success-tint);color:var(--success-text);font-size:12.5px;font-weight:700;white-space:nowrap}
.sale-note .sale-badge::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.product-card .sale-note{margin:6px 0 0}
.buy-box .sale-note{margin:0;font-size:13.5px}
.sale-reference{margin:-4px 0 14px;color:var(--muted);font-size:12px;line-height:1.4}
.sale-reference.is-listing{margin:12px 0 0;text-align:center}
.cart-main .sale-reference.is-listing{text-align:left}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(22px,3vw,32px);border-radius:var(--radius-lg);background:var(--test-tint)}
.cta-band>div:first-child{flex:1 1 420px;min-width:0}
.cta-band h2{font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.cta-band p{margin:0;color:var(--ink-soft)}
/* Szakembereknek page: downloadable professional materials with their covers, and the partner call. */
.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(14px,2vw,22px);margin-bottom:var(--space-block)}
.material-card{display:flex;flex-direction:column}
.material-cover img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:var(--radius-sm);border:1px solid var(--line);margin-bottom:14px}
.material-card h3{font-size:18px;margin-bottom:6px}
.material-card p{color:var(--muted);font-size:15px}
.material-card .button{margin-top:auto;align-self:flex-start}
.cta-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.buy-box-audience{margin:0 0 8px;color:var(--ink-soft);font-size:14.5px;line-height:1.4}
.consult-highlight{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:7px 12px;border-radius:var(--radius-sm);background:var(--cta-tint);font-size:14px;line-height:1.4;color:var(--ink)}
.consult-highlight .icon{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent)}
.consult-highlight strong{color:var(--accent)}
.buy-box .upgrade-note{margin:12px 0 0;padding:8px 12px;font-size:13.5px;line-height:1.4}
.buy-box .gift-note{margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.buy-box .gift-note .icon{color:var(--cta);margin-right:2px}
.buy-box .gift-note a{font-weight:600}

/* All packages in one table (pricing and services pages, owner feedback 2026-11-03); below 1100px each row is a card. */
.price-table-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.price-table-wrap .price-table{display:table;width:100%;margin:0;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.45}
.price-table thead th:nth-child(1){width:18%}
.price-table thead th:nth-child(2){width:136px}
.price-table-wrap .price-table thead th:nth-child(2){text-align:right}
.price-table thead th:nth-child(3){width:13%}
.price-table thead th:nth-child(4){width:21%}
.price-table thead th:nth-child(6){width:152px}
.price-table-wrap .price-table :is(th,td){padding:14px 16px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;background:none}
.price-table-wrap .price-table thead th{background:var(--cta-dark);color:#fff;font-size:14px;font-weight:700;vertical-align:middle}
.price-table-wrap .price-table tbody tr:nth-child(even)>*{background:var(--bg-alt)}
.price-table-wrap .price-table tbody tr:last-child>*{border-bottom:0}
.price-table-wrap .price-table tbody th{font-weight:700}
.price-table-wrap .price-table tbody th a{display:inline-block;padding-block:2px;color:var(--heading);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.price-table-wrap .price-table tbody th a:hover{color:var(--link)}
.price-table-wrap .price-table td{color:var(--ink)}
.price-table-wrap .price-table .price-table-price{text-align:right}
.price-table-price .price{display:block;font-size:16px;letter-spacing:0}
.price-table-price .price del{display:block;margin:0;font-size:13px}
.price-table-price .sale-note{display:block;margin-top:4px;font-size:12.5px}
.price-table-price .sale-badge{white-space:normal;text-align:left;padding:3px 8px}
.price-table-price .sale-badge::before{content:none}
.price-table-wrap .price-table .price-table-action{vertical-align:middle;text-align:right}
.price-table-action .button{white-space:nowrap}
@media (max-width:1099px){
  .price-table-wrap{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .price-table-wrap .price-table,.price-table-wrap .price-table :is(tbody,tr,th,td){display:block;width:auto}
  .price-table-wrap .price-table thead{display:none}
  .price-table-wrap .price-table tbody{display:grid;gap:14px}
  .price-table-wrap .price-table tr{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
  .price-table-wrap .price-table tbody tr>*,.price-table-wrap .price-table tbody tr:nth-child(even)>*{background:none}
  .price-table-wrap .price-table tbody th{padding:14px 16px 8px;border:0;font-size:17px}
  .price-table-wrap .price-table td{display:grid;grid-template-columns:minmax(96px,32%) 1fr;gap:12px;padding:8px 16px;border-bottom:0;text-align:left}
  .price-table-wrap .price-table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px;font-weight:700}
  .price-table-wrap .price-table .price-table-price{text-align:left}
  .price-table-price .price del{display:inline;margin-right:6px}
  .price-table-price .sale-note{grid-column:2}
  .price-table-wrap .price-table .price-table-action{display:block;padding:10px 16px 16px}
  .price-table-action .button{width:100%}
}
/* Its own line under the name; not display:table, which would inherit the table's collapsed borders and drop the padding. */
.price-table-flag{display:block;width:fit-content;margin-top:10px;padding:.45em 1.1em;border-radius:999px;background:var(--cta);color:#fff;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:.02em;white-space:nowrap}
/* Services page: the knowledge base card left under the comparison table (after the import it is a single-column
   row) spans the table's width as one card, the image beside the text. */
.content .service-packages+.cms-section>.cms-row-single{max-width:none;margin-inline:0}
.content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(140px,220px) 1fr;grid-template-rows:auto auto 1fr;align-content:center;column-gap:28px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child>img{grid-row:1/-1;align-self:center;width:100%;height:auto;max-height:170px;margin:0;border-radius:var(--radius);object-fit:contain}
.content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child>:not(img){margin:0 0 8px;max-width:none}
.content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child>.cms-actions{margin:0;padding-top:6px}
@media (max-width:599px){
  .content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child{grid-template-columns:1fr}
  .content .service-packages+.cms-section>.cms-row-single>.cms-col:only-child>img{grid-row:auto;max-height:160px;margin-bottom:14px}
}
.price-table-note{margin:14px 0 0;color:var(--muted);font-size:14.5px;text-align:center}
.package-contents,.compare-strip,.product-faq,.product-stories{margin-top:var(--space-block)}
.package-contents h2,.compare-strip h2,.product-faq h2{text-align:center}
.package-extras{max-width:760px;margin-inline:auto}
.package-contents .checklist{margin:0}
.value-list{display:grid;gap:0;margin:0 0 12px}
.value-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.8px;line-height:1.45}
.value-list li>span:last-child{flex:none;white-space:nowrap;color:var(--muted);font-weight:600}
.value-list li.is-highlight{font-weight:700;color:var(--accent)}
.value-list li.is-highlight>span:last-child{color:var(--accent)}
.value-list small{display:block;font-weight:400;color:var(--muted)}
.value-total{display:flex;justify-content:space-between;gap:16px;margin:0;font-size:16px}
.value-total strong{color:var(--accent);white-space:nowrap}
.compare-strip .need-list{max-width:1100px;margin-inline:auto}
.product-faq .faq-list{max-width:820px;margin-inline:auto}
.reviewed-by{display:flex;align-items:center;gap:8px;margin:24px 0 0;font-size:14.5px;color:var(--muted)}
.reviewed-by .icon{width:18px;height:18px;color:var(--accent);flex:none}

/* ==========================================================================
   FOODTEST test tube mascot (partials/site/tube) and loading states
   ========================================================================== */
.ft-tube{display:block;overflow:visible;--tube-glass:#f3f9fb;--tube-line:var(--test-deep);--tube-liquid:var(--food);--tube-cap:var(--test);--tube-cheek:#f4a6a6}
:root[data-theme="dark"] .ft-tube{--tube-glass:#1d2a30;--tube-line:#a8dcf2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ft-tube{--tube-glass:#1d2a30;--tube-line:#a8dcf2}}
.ft-tube .t-shadow{fill:var(--tube-line);opacity:.12;transform-origin:60px 143px}
.ft-tube .t-body{transform-origin:60px 140px}
.ft-tube .t-glass{fill:var(--tube-glass)}
.ft-tube .t-liquid{fill:var(--tube-liquid)}
.ft-tube .t-outline,.ft-tube .t-limb{fill:none;stroke:var(--tube-line);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ft-tube .t-shine{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;opacity:.75}
.ft-tube .t-cap{fill:var(--tube-cap);stroke:var(--tube-line);stroke-width:4}
.ft-tube .t-cap-shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.5}
.ft-tube .t-bubble{fill:#fff;opacity:0}
.ft-tube .t-eyes{fill:var(--test-deep);transform-origin:60px 92px;animation:tube-blink 4.5s infinite}
.ft-tube .t-cheek{fill:var(--tube-cheek);opacity:.7}
.ft-tube .t-mouth{fill:none;stroke:var(--test-deep);stroke-width:2.6;stroke-linecap:round;display:none}
.ft-tube .t-o{fill:var(--test-deep);stroke:none}
.ft-tube .t-arms,.ft-tube .t-sparkles,.ft-tube .t-question{display:none}
.ft-tube .t-sparkles{fill:var(--warn)}
.ft-tube .t-question{font:800 30px var(--font);fill:var(--test)}
.ft-tube .t-wave{animation:tube-wave 2.6s linear infinite}

.ft-tube.is-idle .t-smile,.ft-tube.is-loading .t-smile,.ft-tube.is-happy .t-smile{display:block}
.ft-tube.is-idle .t-body{animation:tube-bob 3.2s var(--ease) infinite}
.ft-tube.is-loading .t-body{animation:tube-wobble 1.4s ease-in-out infinite}
.ft-tube.is-loading .t-wave{animation-duration:1.1s}
.ft-tube.is-loading .t-bubble,.ft-tube.is-happy .t-bubble,.ft-tube.is-idle .t-bubble{animation:tube-bubble 1.8s ease-in infinite}
.ft-tube .t-bubble:nth-of-type(2){animation-delay:.6s}
.ft-tube .t-bubble:nth-of-type(3){animation-delay:1.2s}
.ft-tube.is-happy .t-arms,.ft-tube.is-happy .t-sparkles{display:block}
.ft-tube.is-happy .t-body{animation:tube-hop 1.2s cubic-bezier(.3,.7,.4,1) infinite}
.ft-tube.is-happy .t-shadow{animation:tube-shadow 1.2s cubic-bezier(.3,.7,.4,1) infinite}
.ft-tube.is-happy .t-sparkles path{transform-box:fill-box;transform-origin:center;animation:tube-twinkle 1.6s ease-in-out infinite}
.ft-tube.is-happy .t-sparkles path:nth-child(2){animation-delay:.5s}
.ft-tube.is-happy .t-sparkles path:nth-child(3){animation-delay:1s}
.ft-tube.is-sad .t-frown{display:block}
.ft-tube.is-sad .t-body{transform:rotate(-6deg);animation:tube-sigh 4s ease-in-out infinite}
.ft-tube.is-sad .t-wave{animation-duration:6s}
.ft-tube.is-curious .t-o,.ft-tube.is-curious .t-question{display:block}
.ft-tube.is-curious .t-body{animation:tube-tilt 3s ease-in-out infinite}
.ft-tube.is-curious .t-question{transform-box:fill-box;transform-origin:bottom;animation:tube-bob 2s ease-in-out infinite}

@keyframes tube-wave{to{transform:translateX(-44px)}}
@keyframes tube-bubble{0%{opacity:0;transform:translateY(0)}20%{opacity:.85}100%{opacity:0;transform:translateY(-52px)}}
@keyframes tube-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes tube-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes tube-wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes tube-hop{0%,100%{transform:translateY(0) scale(1.03,.97)}40%{transform:translateY(-14px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.04,.96)}}
@keyframes tube-shadow{0%,100%{transform:scale(1)}40%{transform:scale(.7);opacity:.07}}
@keyframes tube-twinkle{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.1);opacity:1}}
@keyframes tube-sigh{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-8deg) translateY(2px)}}
@keyframes tube-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(8deg)}60%{transform:rotate(8deg)}}

.empty-state .ft-tube{margin:0 auto 18px}

/* A tiny bubbling tube on submit buttons while the form is on its way (added by site.js). */
.mini-tube{position:relative;display:inline-block;flex:none;width:10px;height:18px;border:2px solid currentColor;border-top-width:3px;border-radius:2px 2px 6px 6px;overflow:hidden}
.mini-tube::before{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:55%;background:currentColor;opacity:.55;border-radius:40% 45% 0 0;animation:mini-slosh 1s ease-in-out infinite alternate}
.mini-tube::after{content:"";position:absolute;left:3px;bottom:2px;width:3px;height:3px;border-radius:50%;background:currentColor;animation:mini-bubble 1.2s ease-in infinite}
@keyframes mini-slosh{from{transform:rotate(-12deg) translateY(1px)}to{transform:rotate(12deg)}}
@keyframes mini-bubble{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.button.is-loading{cursor:progress}

/* Full-page wait while an order is placed and the visitor is sent on to Barion. */
.loading-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(4px);text-align:center}
.loading-overlay[hidden]{display:none}
.loading-overlay .ft-tube{margin:0 auto 12px}
.loading-overlay p{margin:0 auto;max-width:340px;color:var(--ink-soft)}
.loading-overlay strong{display:block;font-size:18px;color:var(--heading);margin-bottom:4px}
.order-mascot{display:flex;justify-content:center;margin:0 0 8px}
/* === package quiz (/melyik-vizsgalat/): one card per question, progress bar, result cards === */
.page-header.is-compact{padding-block:clamp(16px,3vw,32px) clamp(14px,2vw,22px)}
.page-header.is-compact h1{font-size:clamp(26px,3vw,38px);margin-bottom:6px}
.quiz-page{padding-top:clamp(16px,2vw,24px)}
.quiz-scope{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 18px;border-radius:12px;background:var(--test-tint);border:1px solid var(--test-line);font-size:14.5px;color:var(--heading)}
.quiz-scope .icon{color:var(--link);flex:none;margin-top:3px}
.quiz-scope p{margin:0}
.quiz-form{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-sm)}
.quiz-progress{display:grid;gap:8px;margin-bottom:22px;font-size:14px;font-weight:650;color:var(--muted)}
.quiz-bar{height:8px;border-radius:999px;background:var(--bg-alt);overflow:hidden}
.quiz-bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--cta);transition:width .3s var(--ease)}
.quiz-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:-8px 0 18px;padding:10px 14px;border-radius:12px;background:var(--test-tint);border:1px solid var(--test-line);font-size:14px}
.quiz-summary-title{color:var(--muted);font-weight:650}
.quiz-summary-list{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;min-width:0}
.quiz-summary-list li{min-width:0;overflow-wrap:anywhere}
.quiz-summary-list strong{color:var(--heading);font-weight:700}
.quiz-summary-list .link-button{font-size:13.5px;font-weight:650;color:var(--link)}
.quiz-step{border:0;padding:0;margin:0 0 22px;min-width:0}
.quiz-step legend{padding:0;margin-bottom:14px;font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--heading)}
.quiz-step legend:focus{outline:none}
.quiz-step legend small{display:block;margin-bottom:4px;font-size:13px;font-weight:650;letter-spacing:0;color:var(--muted)}
.quiz-step .field-hint{margin:-6px 0 12px}
.quiz-step .option-choices{grid-template-columns:minmax(0,1fr)}
.quiz-step .option-choice{position:relative;justify-content:flex-start;background:var(--surface)}
@media (min-width:720px){.quiz-step .option-choices.is-wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiz-flags{display:grid;gap:10px}
.quiz-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;margin-top:6px}
.quiz-nav [data-quiz-prev]{margin-right:auto}
.quiz-nav .field-error{flex-basis:100%;margin:0;text-align:right}
.quiz-form.is-stepped .quiz-step{animation:quiz-step-in .25s var(--ease)}
.quiz-form.is-stepped .quiz-question-no{display:none}
@keyframes quiz-step-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz-warning{--quiz-warn-text:var(--warn-dark);margin:0 0 22px;padding:20px 22px;border-radius:var(--radius);background:var(--warn-tint);border:1px solid var(--warn);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quiz-warning{--quiz-warn-text:#f5b465}}
:root[data-theme="dark"] .quiz-warning{--quiz-warn-text:#f5b465}
.quiz-warning h2{font-size:20px;margin-bottom:8px;color:var(--quiz-warn-text)}
.quiz-warning ul{margin:0 0 12px;padding-left:20px}
.quiz-warning p:last-child{margin:0}
.quiz-results{display:grid;gap:18px;margin:0 0 18px}
@media (min-width:860px){.quiz-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiz-result{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.quiz-result.is-primary{border:2px solid var(--cta)}
.quiz-result-flag{display:inline-flex;align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--bg-alt);color:var(--ink-soft);font-size:12.5px;font-weight:700}
.quiz-result.is-primary .quiz-result-flag{background:var(--cta);color:#fff}
.quiz-result h2{margin:0;font-size:clamp(20px,2.2vw,26px)}
.quiz-result-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.quiz-result-price .price{font-size:26px}
.quiz-result .checklist{margin:0}
/* Both cards end the same way at every width: a full-width cart button, the details link under it. */
.quiz-result-actions{display:grid;gap:6px;margin-top:auto;padding-top:6px}
.quiz-result-actions .button{width:100%;justify-content:center}
.quiz-restart{margin:0 0 26px;font-size:14.5px;color:var(--muted)}
/* Complaint profile ("Panaszprofil"): ten-segment meter, band colour from --profile */
.quiz-profile{--profile:var(--muted);--profile-tint:var(--bg-alt);display:grid;gap:12px;min-width:0;margin:0 0 22px;padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-top:4px solid var(--profile);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.quiz-profile.is-medium{--profile:var(--link);--profile-tint:var(--test-tint)}
.quiz-profile.is-high{--profile:var(--cta);--profile-tint:var(--cta-tint)}
.quiz-profile-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 18px;min-width:0}
.quiz-profile-head>div{min-width:0;flex:1 1 220px}
.quiz-profile-kicker{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.quiz-profile h2{margin:0;font-size:clamp(20px,2.4vw,26px);overflow-wrap:anywhere}
.quiz-profile-score{margin:0;line-height:1;color:var(--profile);white-space:nowrap}
.quiz-profile-score strong{font-size:clamp(38px,5vw,48px);font-weight:800;letter-spacing:-.03em}
.quiz-profile-score span{font-size:18px;font-weight:700;color:var(--muted)}
.quiz-meter{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.quiz-meter li{height:10px;border-radius:999px;background:var(--bg-alt)}
.quiz-meter li.is-on{background:var(--profile)}
.quiz-meter-scale{display:flex;justify-content:space-between;gap:8px;margin:-4px 0 0;font-size:12.5px;font-weight:650;color:var(--muted)}
.quiz-profile-lead{margin:0;font-size:16px;color:var(--ink)}
.quiz-profile-subtitle{margin:4px 0 0;font-size:15px;font-weight:600;color:var(--heading)}
.quiz-profile .checklist{margin:0}
.quiz-profile-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;background:var(--profile-tint);font-size:14.5px;color:var(--heading)}
.quiz-profile-note .icon{flex:none;margin-top:3px;color:var(--link)}
.quiz-profile-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.quiz-profile-action span{flex:1 1 220px;min-width:0;font-size:14px;color:var(--muted)}
.quiz-profile+.signup-card{margin:0 0 22px}
.quiz-profile-disclaimer{margin:0;font-size:13.5px;color:var(--muted)}
.quiz-refine{margin:0 0 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.quiz-refine summary{display:grid;gap:2px;padding:16px 20px;cursor:pointer;list-style-position:inside}
.quiz-refine-title{font-weight:600;color:var(--link)}
.quiz-refine-hint{font-size:14px;color:var(--muted)}
.quiz-refine-form{padding:4px clamp(18px,3vw,24px) clamp(18px,3vw,24px)}
.quiz-refine-form .quiz-step legend{font-size:17px}
.quiz-signup{margin-top:0}
.quiz-edit{margin-top:4px}
.quiz-edit summary{padding:10px 0;cursor:pointer;font-weight:700;color:var(--link)}
.quiz-edit[open] summary{margin-bottom:14px}
.quiz-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;max-width:980px;margin:0 auto var(--space-head);padding:18px 22px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--bg)}
.quiz-cta p{flex:1 1 320px;margin:0;font-size:15px;color:var(--ink-soft)}
.quiz-cta strong{display:block;color:var(--heading)}

/* === Blog post table of contents + related test === */
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:15px;line-height:1.4}
.toc-item a{display:block;padding:6px 10px;border-left:2px solid var(--line);color:var(--ink-soft);text-decoration:none;overflow-wrap:anywhere;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.toc-item a:hover{color:var(--link);border-left-color:var(--test-dark)}
.toc-item a.is-current{color:var(--heading);font-weight:600;border-left-color:var(--accent);background:var(--test-tint)}
.toc-item.is-sub a{padding-left:24px;font-size:14px}
.toc-sidebar{display:none}
.toc-sidebar .toc-list{font-size:14.5px;line-height:1.35}
.toc-sidebar .toc-item a{padding:4px 10px}
.toc-sidebar .toc-item.is-sub{display:none}
.toc-sidebar h2{margin-bottom:8px}
.toc-mobile{margin:0 0 1.6em;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:16px}
.toc-mobile summary{list-style:none;cursor:pointer;padding:14px 48px 14px 18px;font-weight:700;color:var(--heading);position:relative}
.toc-mobile summary::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--link);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .2s ease}
.toc-mobile .toc-list{padding:0 14px 14px}
.content .toc-list li{margin:0}
@media (min-width:900px){.toc-sidebar{display:block}.toc-mobile{display:none}}
.sidebar-card-eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#bfe0ee;margin:0 0 6px}
.related-test{display:flex;gap:14px;align-items:flex-start;margin:1.8em 0;padding:20px;background:var(--test-tint);border:1px solid var(--test-line);border-radius:var(--radius);line-height:1.55}
.related-test-icon{width:24px;height:24px;color:var(--accent);margin-top:2px}
.related-test-body{min-width:0}
.related-test-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.related-test p{margin:0 0 6px}
.related-test-eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--food-text)}
.related-test-title{font-size:18px;font-weight:700;color:var(--heading)}
.related-test-text{font-size:15.5px;color:var(--ink-soft)}
.related-test-note{font-size:14px;color:var(--muted)}
.related-test .button{margin-top:8px;text-decoration:none}
@media (max-width:479px){.related-test{padding:16px}.related-test-icon{display:none}}

/* === Site search: header search field + quick answers === */
/* Overlays the page under the header: opening or closing it never moves the content (or the scroll position). */
.header-search{position:absolute;inset:100% 0 auto;border-block:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);padding-block:12px}
.header-search-form{display:flex;align-items:center;gap:10px;max-width:760px;margin-inline:auto}
.header-search-form input{flex:1 1 auto;min-width:0}
.header-search-form .button{flex:none}
.header-search-form .icon-button{flex:none}
@media (max-width:479px){.header-search-form{gap:6px}.header-search-form .button{padding-inline:14px}}
.quick-answers{display:grid;gap:10px;margin-top:28px}
.quick-answers h2{font-size:19px;margin:0 0 4px}
.quick-answers .faq-answer p{margin:0 0 8px}
.quick-answers .faq-answer a{font-weight:600}

/* === order tracker === */
.tracker-steps{list-style:none;margin:0;padding:0;display:grid}
.tracker-step{position:relative;display:flex;gap:14px;align-items:flex-start;padding:0 0 22px;min-width:0}
.tracker-step:last-child{padding-bottom:0}
.tracker-step:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--line);border-radius:2px}
.tracker-step.is-done:not(:last-child)::after{background:var(--accent)}
.tracker-marker{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);color:var(--muted);font-weight:700;font-size:15px}
.tracker-step.is-done .tracker-marker{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.tracker-step.is-current .tracker-marker{border-color:var(--link);color:var(--link);box-shadow:0 0 0 4px var(--test-tint)}
.tracker-body{display:flex;flex-direction:column;min-width:0;padding-top:6px}
.tracker-body strong{color:var(--heading);line-height:1.35}
.tracker-step:not(.is-done):not(.is-current) .tracker-body strong{color:var(--muted);font-weight:600}
.tracker-body small{color:var(--muted)}
.order-tracker .notice{margin-top:20px}
.order-tracker .notice a{font-weight:700}
.tracker-parcel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tracker-parcel small{flex-basis:100%;color:var(--muted)}
.tracking-number{overflow-wrap:anywhere;letter-spacing:.02em}
@media (min-width:760px){
  .tracker-steps{grid-auto-flow:column;grid-auto-columns:1fr}
  .tracker-step{flex-direction:column;align-items:center;text-align:center;padding:0 8px}
  .tracker-step:not(:last-child)::after{left:calc(50% + 26px);right:calc(-50% + 26px);top:17px;bottom:auto;width:auto;height:2px}
  .tracker-body{align-items:center;padding-top:0}
}

/* === verified reviews === */
.product-reviews{margin:var(--space-block) 0}
.product-reviews-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.product-reviews-head h2{margin:0}
.review-score{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.review-score strong{color:var(--heading);font-size:18px}
.review-stars{display:inline-flex;gap:1px;font-size:18px;line-height:1;letter-spacing:0;color:var(--line-strong)}
.review-stars .is-on{color:var(--warn)}
.review-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.review-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.review-rating{margin:0}
.review-body{margin:0;color:var(--ink);overflow-wrap:anywhere}
.review-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:auto 0 0;font-size:14px;color:var(--muted)}
.review-meta strong{color:var(--heading)}
.chip.review-verified,.chip.review-verified:hover{min-height:28px;padding:2px 10px;gap:4px;font-size:12.5px;border-color:var(--success-line);background:var(--success-tint);color:var(--success-text)}
.review-verified .icon{width:14px;height:14px}
.review-note{font-size:13.5px;margin:14px 0 0}
.withdrawal-page .checkout-section{max-width:720px}
.withdrawal-page textarea{width:100%}
.withdrawal-intro{font-size:14.5px;margin:-6px 0 14px}
.withdrawal-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 18px;margin:0 0 20px}
.withdrawal-summary dt{font-weight:700;color:var(--heading);font-size:14px;margin-top:10px}
.withdrawal-summary dd{margin:0;overflow-wrap:anywhere}
@media (min-width:560px){.withdrawal-summary{grid-template-columns:minmax(0,14em) minmax(0,1fr)}.withdrawal-summary dt,.withdrawal-summary dd{margin-top:10px}}
.withdrawal-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.withdrawal-actions .button{max-width:100%;white-space:normal}
.order-withdrawal{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* === Patient safety: alarm symptoms box (partials/site/red-flags) === */
.red-flags{margin:2em 0;padding:18px 20px;border:1px solid var(--danger-line);border-left:4px solid var(--danger);border-radius:var(--radius);background:var(--danger-tint);color:var(--ink)}
.red-flags-title{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 8px;color:var(--danger-text)}
.red-flags p{margin:0 0 8px}
.red-flags ul{margin:0;padding-left:1.2em}
.red-flags li{margin:2px 0}
.checkout-terms-note{font-size:14px;color:var(--muted);margin:0 0 10px}

/* === report guide (/lelet/): marks, interactive sample report, teaser === */
.is-positive,.is-qualifying{--cat:var(--danger);--cat-tint:var(--danger-tint);--cat-text:var(--danger-text)}
/* Borderline mark: the brand orange is 2:1 on the light tint, so a darker one (4.1:1); dark mode keeps the orange (6.5:1). */
.is-borderline{--cat:var(--warn);--cat-tint:var(--warn-tint);--cat-text:var(--warn-dark);--cat-mark:var(--warn-dark)}
.is-negative{--cat:var(--success);--cat-tint:var(--success-tint);--cat-text:var(--success-text)}
:root[data-theme="dark"] .is-borderline{--cat-text:#f3c27a;--cat-mark:var(--warn)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .is-borderline{--cat-text:#f3c27a;--cat-mark:var(--warn)}}
.report-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.1em;color:var(--cat-mark,var(--cat));font-size:1.05em;line-height:1}
.report-marks{display:grid;gap:16px}
@media (min-width:720px){.report-marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.report-marks .card{border-top:4px solid var(--cat)}
.report-marks .card p{font-size:15px;color:var(--ink-soft)}
.report-marks-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.report-marks .card .report-marks-head{font-size:18px;color:var(--heading)}
.report-marks-head>span:last-child{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--cat-tint);color:var(--cat-text);font-size:13.5px;font-weight:700}
.step.is-key{border:2px solid var(--cta);background:var(--cta-tint)}
.step.is-key p{color:var(--ink)}
.sample-report-inner{max-width:calc(900px + 2*var(--gutter))}
.report-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:clamp(18px,3vw,30px)}
.report-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.report-title{margin:0;font-size:15px;color:var(--muted)}
.report-title strong{color:var(--heading);font-size:17px;letter-spacing:.02em;margin-right:6px}
.badge-warn{background:var(--warn-tint);color:var(--warn-dark)}
:root[data-theme="dark"] .badge-warn{color:#f3c27a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge-warn{color:#f3c27a}}
.report-subtitle{font-size:16px;margin:22px 0 10px;color:var(--heading)}
.report-head+.report-subtitle{margin-top:0}
.report-legend{display:grid;gap:10px}
@media (min-width:720px){.report-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
.report-cat,.report-row{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;transition:border-color .2s ease}
.report-cat[open],.report-row[open]{border-color:var(--line-strong)}
.report-cat summary,.report-row summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 40px 10px 14px;position:relative;color:var(--ink);font-weight:600}
.report-cat summary::-webkit-details-marker,.report-row summary::-webkit-details-marker{display:none}
.report-cat summary::after,.report-row summary::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease}
.report-cat[open]>summary::after,.report-row[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.report-cat summary:focus-visible,.report-row summary:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.report-cat summary{flex-wrap:wrap;row-gap:0}
.report-cat-label{color:var(--heading)}
.report-cat summary small{flex-basis:100%;padding-left:calc(1.1em + 10px);font-size:13px;font-weight:500;color:var(--muted)}
.report-cat-body,.report-row-body{padding:12px 14px 14px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);border-top:1px dashed var(--line)}
.report-rows{display:grid;gap:8px}
.report-row summary{font-size:15px}
.report-food{flex:1 1 auto;min-width:0}
.report-group{display:none;font-weight:500;color:var(--muted);font-size:13.5px}
.report-value{flex:none;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:4.2em;font-variant-numeric:tabular-nums;color:var(--heading)}
.report-result{flex:none;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--cat-tint);color:var(--cat-text)}
@media (max-width:419px){.report-result{display:none}}
@media (min-width:600px){.report-group{display:inline;flex:0 1 38%}}
.report-foot{margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.report-teaser{display:grid;gap:18px 32px;align-items:center;margin-top:clamp(24px,3vw,36px);padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);text-align:left}
@media (min-width:900px){.report-teaser{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.report-teaser h2{font-size:clamp(21px,2.4vw,26px);margin:0 0 8px}
.report-teaser-text p{color:var(--ink-soft)}
.report-teaser-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.report-scale{display:grid;gap:8px}
.report-scale li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px;border-left:4px solid var(--cat);border-radius:var(--radius-sm);background:var(--cat-tint);color:var(--ink);font-size:15px}
.report-scale li>span:last-child{margin-left:auto;font-weight:600;color:var(--cat-text);font-variant-numeric:tabular-nums}

/* === elimination-diet companion (eliminacios-etrend-segedlet) === */
.steps-2{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.elim-disclaimer{font-weight:500;font-size:15px;line-height:1.6}
.elim-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 0}
.elim-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);position:sticky;top:76px;z-index:2;box-shadow:var(--shadow-sm)}
.elim-count{font-size:14.5px;font-weight:600;color:var(--heading)}
.elim-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px}
.elim-list{display:grid;gap:10px}
.elim-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px 14px;transition:border-color .2s ease,background-color .2s ease}
.elim-group:has(input:checked),.elim-group.is-selected{border-color:var(--link);background:var(--test-tint)}
.elim-check{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:32px}
.elim-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--test-dark);cursor:pointer}
.elim-check input:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.elim-label{font-weight:700;color:var(--heading);font-size:16px}
.elim-details{margin:8px 0 0 34px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.elim-details dt{font-weight:600;color:var(--muted);white-space:nowrap}
.elim-details dd{margin:0}
@media (max-width:479px){.elim-details{grid-template-columns:minmax(0,1fr);margin-left:0}.elim-details dt{margin-top:4px}}
.elim-foot{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.elim-diary-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:clamp(20px,3vw,32px) 0 12px}
.elim-diary-head h3{margin:0;font-size:18px}
.elim-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.elim-diary{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.elim-diary th,.elim-diary td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;height:40px}
.elim-diary th{background:var(--bg);color:var(--heading);font-weight:600}
.elim-diary tbody tr:nth-child(even) td{background:var(--bg)}
@media print{
  .elim-page .elim-no-print,.elim-page .breadcrumbs,.elim-page .next-steps,.elim-page .medical-note,.elim-page .theme-toggle,.elim-page .lang-switch{display:none!important}
  .elim-page .page-header{background:none;border:0;padding:0 0 8px}
  .elim-page .page-header .lead{display:none}
  .elim-page .section{padding-block:12px;background:none;border:0}
  .elim-page .section-head{text-align:left;margin:0 0 10px;max-width:none}
  .elim-page .container{max-width:none;padding:0}
  .elim-group{break-inside:avoid;border:1px solid #999;background:none!important;padding:8px 10px}
  .elim-check input{width:14px;height:14px}
  .elim-details{font-size:12px}
  .elim-list:has(input:checked) .elim-group:not(:has(input:checked)),.elim-list.is-filtering .elim-group:not(.is-selected){display:none}
  .elim-table-wrap{overflow:visible;border:0}
  .elim-diary{min-width:0;font-size:12px}
  .elim-diary th,.elim-diary td{border:1px solid #666;height:34px}
  .elim-diary tbody tr:nth-child(even) td{background:none}
  body[data-elim-print="list"] .elim-print-diary,body[data-elim-print="diary"] .elim-print-list{display:none!important}
}

/* === Callback request (sidebar + product buy box) === */
.callback-box{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.callback-box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 44px 12px 16px;font-weight:700;color:var(--heading);position:relative;border-radius:var(--radius)}
.callback-box>summary:focus-visible{outline:2px solid var(--test);outline-offset:2px}
.callback-box>summary .icon{color:var(--link)}
.callback-box>summary::after{content:"";position:absolute;right:16px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--link);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .2s ease}
.callback-box[open]{border-color:var(--line-strong)}
.callback-intro{margin:0;padding:0 16px 12px;font-size:14px;color:var(--muted)}
.callback-box .site-form{padding:0 16px 16px}
.callback-box.is-static{border-color:var(--line-strong)}
.callback-box-title{display:flex;align-items:center;gap:10px;margin:0;padding:16px 16px 6px;font-size:18px;line-height:1.3}
.callback-box-title .icon{color:var(--link)}
.buy-box-extras .callback-box.is-static{max-width:none}
@media (min-width:600px){.callback-box.is-static .site-form.is-compact .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}}
.site-form.is-compact .form-grid{grid-template-columns:1fr}
.site-form.is-compact .field{margin-bottom:12px;min-width:0}
.site-form.is-compact .notice{margin:0}
.site-form.is-compact .check{font-size:13.5px}

/* === Health fund invoice helper (checkout) === */
.health-fund{margin:0 0 16px}
.health-fund-toggle{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.health-fund-toggle .field-hint,.checkout-newsletter .field-hint{display:block;margin-top:2px}
.health-fund-toggle:has(input:checked){border-color:var(--test-line)}
.health-fund-toggle:not([hidden])+.health-fund-fields{margin-top:14px}
.health-fund-howto{margin:0 0 16px;font-weight:500;font-size:14.5px}
.health-fund-howto p{margin:0 0 6px}
.health-fund-howto ol{margin:0 0 8px;padding-left:20px;display:grid;gap:4px}
.health-fund-fields input:focus::placeholder{color:transparent}

/* === Gift voucher page (/ajandekutalvany/) === */
.gift-intro .hero-trust{margin-top:16px}
.gift-builder{display:grid;gap:24px;align-items:start}
.gift-builder>*{min-width:0}
/* Phone/tablet: sample voucher, form, then the package contents; desktop: the voucher and contents stick beside the form. */
.gift-aside{display:contents}
.gift-voucher{order:1}
.voucher-form{order:2}
.gift-contents{order:3}
@media (min-width:900px){
  .gift-aside{display:grid;gap:20px}
  .gift-builder{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .gift-aside{order:2}
}
@media (min-width:900px) and (min-height:860px){.gift-aside{position:sticky;top:96px}}
.voucher-form{min-width:0}
.voucher-form h2,.gift-contents h2,.voucher-redeem h2{font-size:20px}
.gift-contents.is-empty{display:none}
.gift-contents-product{font-weight:700;color:var(--food-text);margin:-4px 0 12px}
.gift-contents .checklist{margin:0}
/* The sample voucher mirrors the PDF (shop/voucher-pdf.blade.php): a printed paper, so it keeps its light colors in the dark theme.
   Its look (App\Enums\VoucherTheme) sets the --v-* colours; the theme tiles of the form use the same classes. */
.gift-voucher,.voucher-theme-choice{--v-dark:#123f50;--v-accent:#7faa3c;--v-product:#4f7d22;--v-msg-bg:#e4f2f8;--v-msg-line:#2495c5;--v-stub-text:#bcdcea;--v-stub-line:#9cc3d3;--v-code-bg:#1d4f63;--v-code-line:#4f7d93;--v-greeting:#4f7d22}
.voucher-theme-christmas{--v-dark:#1f4d36;--v-accent:#c0392b;--v-product:#a93226;--v-msg-bg:#fbeceb;--v-msg-line:#c0392b;--v-stub-text:#cfe5d6;--v-stub-line:#9cc9ad;--v-code-bg:#2b6047;--v-code-line:#5c8f72;--v-greeting:#c0392b}
.voucher-theme-st-nicholas{--v-dark:#8e1f1f;--v-accent:#d64541;--v-product:#b03a2e;--v-msg-bg:#fdeeee;--v-msg-line:#d64541;--v-stub-text:#f6d2d0;--v-stub-line:#e6a3a0;--v-code-bg:#a63030;--v-code-line:#cf6b67;--v-greeting:#c0392b}
.voucher-theme-new-year{--v-dark:#14213d;--v-accent:#c9a227;--v-product:#8a6d0f;--v-msg-bg:#f6f1df;--v-msg-line:#c9a227;--v-stub-text:#e9dca6;--v-stub-line:#c9a227;--v-code-bg:#22325a;--v-code-line:#8a7a3c;--v-greeting:#8a6d0f}
.voucher-theme-valentine{--v-dark:#7a1f3d;--v-accent:#e05a7a;--v-product:#b0305a;--v-msg-bg:#fdecf1;--v-msg-line:#e05a7a;--v-stub-text:#f6cfdb;--v-stub-line:#e695ae;--v-code-bg:#912b4e;--v-code-line:#c66b8a;--v-greeting:#c2385e}
.voucher-theme-mothers-day{--v-dark:#6b3a5b;--v-accent:#e89ab5;--v-product:#9c4573;--v-msg-bg:#fbeef4;--v-msg-line:#d77aa0;--v-stub-text:#f1d6e4;--v-stub-line:#d9a3c0;--v-code-bg:#7f4a6d;--v-code-line:#b07c9e;--v-greeting:#a24c78}
.voucher-theme-easter{--v-dark:#2f5d3a;--v-accent:#f2c94c;--v-product:#4f7d22;--v-msg-bg:#fdf7e1;--v-msg-line:#e3b62f;--v-stub-text:#dcebc9;--v-stub-line:#b5d39a;--v-code-bg:#3c704a;--v-code-line:#77a27f;--v-greeting:#a86b12}
.voucher-theme-birthday{--v-dark:#3b2a6b;--v-accent:#f29f3d;--v-product:#b85f0c;--v-msg-bg:#fff2e2;--v-msg-line:#f29f3d;--v-stub-text:#dcd3f2;--v-stub-line:#a99ad6;--v-code-bg:#4c3a82;--v-code-line:#8273b8;--v-greeting:#c46a12}
.gift-voucher{margin:0;container-type:inline-size}
.gift-voucher-card{display:grid;border-radius:var(--radius);overflow:hidden;background:#fff;color:#1f2d33;border:1px solid #dfe6e7}
.gift-voucher-main{position:relative;min-width:0;padding:18px 20px 20px 24px;border-left:6px solid var(--v-accent)}
.gift-voucher-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.gift-voucher-top>img{width:132px;height:auto;min-width:0}
.gift-voucher-tag{font-size:12.5px;font-weight:700;color:#8a4f0a;background:#fdf1e2;border:1px solid #f3cf9f;border-radius:999px;padding:2px 10px}
.gift-voucher p{margin:0}
.gift-voucher-top-end{display:flex;align-items:center;gap:8px;flex:none}
.gift-voucher-ornament{width:40px;height:40px}
.gift-voucher-title{font-size:clamp(24px,7cqi,30px);font-weight:800;color:var(--v-dark);letter-spacing:-.02em;line-height:1.1}
.gift-voucher .gift-voucher-greeting{font-size:15px;font-weight:700;font-style:italic;color:var(--v-greeting);margin-top:2px}
.gift-voucher-greeting[hidden]{display:none}
.gift-voucher-product{font-size:14.5px;font-weight:700;color:var(--v-product);margin-top:4px}
.gift-voucher-label{font-size:12.5px;color:#5d6b71;margin-top:14px}
.gift-voucher-recipient{font-size:19px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.gift-voucher .gift-voucher-message{font-size:13.5px;font-style:italic;line-height:1.5;background:var(--v-msg-bg);border-left:3px solid var(--v-msg-line);border-radius:0 8px 8px 0;padding:8px 12px;margin-top:10px;overflow-wrap:anywhere}
.gift-voucher-stub{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;padding:16px 20px;background:var(--v-dark);color:#fff;border-top:2px dashed var(--v-stub-line)}
.gift-voucher-stub::before,.gift-voucher-stub::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--surface)}
.gift-voucher-stub::before{left:-10px}
.gift-voucher-stub::after{right:-10px}
.gift-voucher-stub-label{font-size:12.5px;color:var(--v-stub-text)}
.gift-voucher-stub-label strong{display:block;color:#fff;font-size:14px}
.gift-voucher-value{font-size:22px;font-weight:800;white-space:nowrap}
.gift-voucher-qr{grid-row:1/span 4;grid-column:1;width:84px;height:84px;padding:5px;background:#fff;border-radius:8px}
.gift-voucher-code{justify-self:start;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;overflow-wrap:anywhere;background:var(--v-code-bg);border:1px solid var(--v-code-line);border-radius:8px;padding:4px 8px;color:#fff}
@container (min-width:460px){
  .gift-voucher-card{grid-template-columns:minmax(0,1fr) minmax(176px,34%)}
  .gift-voucher-title{font-size:clamp(22px,5.4cqi,30px)}
  .gift-voucher-stub{grid-template-columns:1fr;justify-items:center;align-content:center;text-align:center;gap:6px;padding:20px 14px;border-top:0;border-left:2px dashed var(--v-stub-line)}
  .gift-voucher-stub::before{top:-10px;left:-10px}
  .gift-voucher-stub::after{top:auto;bottom:-10px;right:auto;left:-10px}
  .gift-voucher-qr{grid-row:auto;grid-column:auto;width:96px;height:96px;margin:6px 0 2px}
  .gift-voucher-code{justify-self:center}
}
.voucher-theme-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.voucher-theme-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 6px;border:1.5px solid var(--line-strong);border-radius:12px;cursor:pointer;font-weight:600;font-size:13.5px;line-height:1.25;text-align:center;transition:border-color .15s ease,background-color .15s ease}
.voucher-theme-choice:hover{border-color:var(--test)}
.voucher-theme-choice input{position:absolute;opacity:0;pointer-events:none}
.voucher-theme-choice:has(input:checked){border-color:var(--link);background:var(--test-tint);box-shadow:inset 0 0 0 1px var(--link)}
.voucher-theme-choice:has(input:focus-visible){outline:3px solid var(--test);outline-offset:2px}
.voucher-theme-swatch{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;border:3px solid var(--v-dark);box-shadow:inset 0 -6px 0 var(--v-accent)}
.voucher-theme-swatch img{width:28px;height:28px}
.voucher-theme-name{max-width:100%}
.gift-voucher figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.voucher-redeem{display:grid;gap:20px;margin-bottom:8px}
@media (min-width:768px){.voucher-redeem{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voucher-ready{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 0;border-top:1px solid var(--line)}
.voucher-ready>div{min-width:0}
.voucher-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--heading);margin:4px 0;overflow-wrap:anywhere}
.voucher-form .option-choice span{min-width:0;overflow-wrap:anywhere}
.voucher-steps{margin:0 0 18px;padding-left:22px;display:grid;gap:10px;font-size:15px;color:var(--ink-soft)}
.voucher-steps li::marker{color:var(--link);font-weight:700}
.cart-voucher-recipient{display:block;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}

/* === next steps (cart) and prep box (product) === */
.next-steps{margin-top:var(--space-block);padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.next-steps h2{font-size:20px;margin:0 0 18px}
.next-steps-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.next-steps-list li{position:relative;display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;min-width:0}
.next-steps-list li:last-child{padding-bottom:0}
.next-steps-list li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;background:var(--line);border-radius:2px}
.next-steps-marker{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--test-tint);color:var(--link);font-weight:700;font-size:14px}
.next-steps-list strong{display:block;color:var(--heading);line-height:1.35;padding-top:5px}
.next-steps-list p{margin:4px 0 0;color:var(--ink-soft);font-size:15px;overflow-wrap:anywhere}
.prep-box{margin:var(--space-block) 0}
.prep-box h2{font-size:22px;margin:0 0 14px}
.prep-box .checklist{margin-bottom:14px}
.prep-box a{font-weight:700}

/* === logo grid: quarter columns holding only a linked image (health fund logos) === */
.cms-col-1-4 > a:only-child:has(> img:only-child){display:flex;align-items:center;justify-content:center;height:96px;padding:8px}
.cms-col-1-4 > a:only-child > img:only-child{width:auto;height:auto;max-width:min(100%,200px);max-height:100%;object-fit:contain;border-radius:0;box-shadow:none}

/* === accessibility & performance === */
/* Arial resized to Open Sans' metrics (per weight band: Open Sans gets wider as it gets bolder): text keeps its
   line breaks when the web font swaps in, so nothing below it jumps (CLS). */
@font-face{font-family:"Open Sans Fallback";font-weight:100 549;src:local("Arial"),local("ArialMT");ascent-override:101.65%;descent-override:27.86%;line-gap-override:0%;size-adjust:105.22%}
@font-face{font-family:"Open Sans Fallback";font-weight:550 699;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:105.8%;descent-override:29%;line-gap-override:0%;size-adjust:101%}
@font-face{font-family:"Open Sans Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:100.4%;descent-override:27.5%;line-gap-override:0%;size-adjust:106.5%}
/* Click-to-play YouTube preview (ContentRenderer::videoFacades); the player replaces it on click. */
.content .video-facade,.video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:1.4em 0;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);text-decoration:none}
.video-facade img,.content .video-facade img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;aspect-ratio:auto}
.video-facade-play{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);border-radius:14px;background:rgba(18,63,80,.86);transition:background .15s ease}
.video-facade-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.video-facade:hover .video-facade-play,.video-facade:focus-visible .video-facade-play{background:#c4302b}
.video-facade:focus-visible{outline:3px solid var(--test);outline-offset:2px}
/* Google Maps in CMS content: a click-to-load box in the iframe's own 16:9 frame (site.js swaps the map in). */
.content .map-facade,.map-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:16/9;margin:1.4em 0;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);color:var(--ink);text-align:center}
.map-facade-icon{width:32px;height:32px;color:var(--link)}
.content .map-facade-note,.map-facade-note{margin:0;max-width:34em;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:480px){.content .map-facade,.map-facade,.content iframe.map-frame{aspect-ratio:4/3}}
/* Wide diary table on phones: keyboard-scrollable region needs a visible focus ring inside its rounded border. */
.elim-table-wrap:focus-visible{outline:3px solid var(--test);outline-offset:2px}
/* Imported builder buttons without a link (ContentRenderer::inertButtons) are labels: no hover or pointer. */
.content span.button{cursor:default;pointer-events:none}

/* === preview gate (hidden pre-launch deployment) === */
.preview-gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg-alt,var(--bg))}
.preview-gate-card{width:100%;max-width:400px}
.preview-gate-card h1{font-size:26px;margin:16px 0 8px}
.preview-gate-logo{height:auto;max-width:180px;background:#fff;border-radius:10px;padding:6px 10px}

/* === short and landscape screens === */
/* The popup never outgrows the viewport, and its close button stays reachable. A swipe or wheel over it
   still scrolls the page (it is not modal), so no overscroll containment. */
.newsletter-popup{max-height:calc(100dvh - 32px);overflow-y:auto}
@media (max-height:500px){
  .newsletter-popup{bottom:8px;max-height:calc(100dvh - 16px)}
  .newsletter-mascot{display:none}
  .newsletter-head{padding:14px 48px 0 16px}
  .newsletter-body{padding:10px 16px 14px}
  .newsletter-cover{width:64px}
  .newsletter-heading .dialog-title{font-size:17px}
}

/* Next to a sidebar the content column can be narrow (tablets, small laptops): two-column CMS rows
   would squeeze a headline into a few words per line, so they stack below 900px of content width;
   logo rows keep two per line. */
.layout-sidebar>.content{container-type:inline-size}
@container (max-width:900px){
  .content .cms-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;margin-inline:0!important;column-gap:var(--col-gap)}
  .content .cms-row>.cms-col{grid-column:1/-1!important;padding-inline:0!important}
  .content .cms-row>.cms-col-1-4,.content .cms-row>.cms-col-1-5{grid-column:span 1!important}
  .content .cms-row>.cms-col>img:only-child,.content .cms-row>.cms-col>p:only-child>img:only-child{max-width:min(100%,440px);margin-inline:auto}
  .content .cms-cards{row-gap:18px}
  .content .cms-cards>.cms-col::before{inset:0}
  .content .cms-cards>:is(.cms-col-1-3,.cms-col-1-4,.cms-col-1-5){grid-column:span 1!important}
}
@container (max-width:520px){.content .cms-cards>.cms-col{grid-column:1/-1!important}}

/* Phone numbers never break across lines. */
a[href^="tel:"]{white-space:nowrap}

/* Compact header (1320–1679px): tighter menu items; up to 1419px the "order" button keeps its place with a short label
   ("Rendelés"), as the full one would push the menu over the logo. */
@media (min-width:1320px) and (max-width:1679px){
  .header-main{gap:12px}
  .nav-link{padding:9px 7px;font-size:14px}
  .nav-item.has-children>.nav-link{padding-right:21px}
  .nav-toggle{right:2px}
}
.header-cta-short{display:none}
@media (min-width:1320px) and (max-width:1419px){
  .header-cta{padding-inline:14px}
  .header-cta-full{display:none}
  .header-cta-short{display:inline}
}

/* Scrolled: the header sticks with the topbar and the top --header-shrink of the main row above the viewport, so
   they slide away exactly with the scroll and nothing below the header moves. The logo, menu and actions follow the
   scroll position (scroll-driven animation, compositor only) to stay centred in the visible part; browsers without
   scroll timelines, and reduced motion, get the same end state from the is-compact class. */
.site-header{--topbar-h:32px;--header-shrink:14px;--header-collapse:calc(var(--topbar-h) + var(--header-shrink));top:calc(-1 * var(--header-collapse))}
@media (min-width:1080px){.site-header{--topbar-h:38px}}
@media (max-height:500px){
  .header-main{min-height:56px}
  .site-header{--header-shrink:8px}
  .site-logo img{width:136px}
}
@keyframes header-settle{to{transform:translateY(calc(var(--header-shrink) / 2))}}
@keyframes header-logo-shrink{from{transform:scale(1)}to{transform:scale(.86)}}
.header-main>.site-logo img{transform-origin:left center}
.site-header.is-compact .header-main>:is(.site-logo,.header-actions){transform:translateY(calc(var(--header-shrink) / 2))}
.header-main>:is(.site-logo,.header-actions),.header-main>.site-logo img{transition:transform .2s var(--ease)}
@media (min-width:1080px){.site-header.is-compact .header-main>.site-logo img{transform:scale(.86)}}
@supports (animation-timeline:scroll()){
  .header-main>:is(.site-logo,.header-actions){animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 var(--header-collapse)}
  @media (min-width:1080px){.header-main>.site-logo img{animation:header-logo-shrink linear both;animation-timeline:scroll(root);animation-range:0 var(--header-collapse)}}
}
/* The inline desktop menu follows too; as a drawer it must not be transformed (it would trap the fixed menu). */
@media (min-width:1320px){
  .header-main>.main-nav{transition:transform .2s var(--ease)}
  .site-header.is-compact .header-main>.main-nav{transform:translateY(calc(var(--header-shrink) / 2))}
  @supports (animation-timeline:scroll()){.header-main>.main-nav{animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 var(--header-collapse)}}
}

/* Short laptop windows: the hero (up to the price line) and the quiz's first question fit the first screen. */
@media (min-width:960px) and (max-height:820px){
  .hero{padding-block:clamp(20px,4vh,40px)}
  .hero h1{font-size:clamp(28px,5.4vh,44px);margin-bottom:12px}
  .hero-symptoms{margin-top:16px}
  .hero-symptoms+.hero-actions{margin-top:18px}
  .hero .lead{font-size:16.5px}
  .hero-actions{margin:18px 0 12px}
  .hero-price{margin-top:12px}
  .page-header.is-compact{padding-block:16px 14px}
  .page-header.is-compact h1{font-size:clamp(26px,5vh,34px)}
  .quiz-page{padding-top:14px}
  .quiz-form{padding:16px 24px}
  .quiz-progress{margin-bottom:14px}
  .quiz-step{margin-bottom:10px}
  .quiz-nav{margin-top:0}
  .quiz-step legend{margin-bottom:10px}
  .quiz-step .option-choice{padding-block:8px}
  .quiz-progress{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}
  .quiz-scope{margin-top:12px;padding:10px 16px;font-size:13.5px}
  .product-hero{padding-top:14px}
  .buy-box{padding-block:18px}
  .buy-box h1{font-size:22px}
  .buy-box .option-group{margin-bottom:8px}
}

/* Phones held sideways (short, wide screens): two columns, so the essentials fit the first screen. */
@media (max-height:500px) and (min-width:568px) and (max-width:959px){
  .hero{padding-block:20px 28px}
  .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px;align-items:start}
  .hero h1{font-size:clamp(24px,4vw,32px);margin-bottom:10px}
  .hero .lead{font-size:15px}
  .hero-actions{margin:16px 0 14px}
  .hero-actions .button{width:auto}
  /* The buttons come before the long introduction, so they are on the first screen. */
  .hero-grid>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
  .hero-grid>div:first-child>.hero-actions{order:1;margin:6px 0 14px}
  .hero-grid>div:first-child>:not(.eyebrow):not(h1):not(.hero-actions){order:2}
  .buy-box h1{font-size:24px}
  .product-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}
  .product-gallery{display:block}
  .product-gallery>img{aspect-ratio:4/3}
  .product-summary{margin-top:16px}
  .buy-box{grid-column:2;grid-row:1;padding:20px}
}

/* Collapsible category chips (blog): extras hidden from 720px until "Továbbiak" is pressed. */
.chip-more{display:none}
button.chip{cursor:pointer;font:inherit;font-size:14px;font-weight:650}
@media (min-width:720px){
  .chip-list .is-extra{display:none}
  .chip-list.is-expanded .is-extra{display:list-item}
  .chip-more{display:list-item}
}

/* Multi-line button labels break evenly instead of leaving one word on the second line. */
.button{text-wrap:balance}

/* Dark mode: a transparent PNG/SVG in a page or post body (a signature, a logo, a chart drawn in dark ink) would vanish on
   the dark background, so it sits on a light plate. Opaque pictures cover the plate and look the same. */
:root[data-theme="dark"] .content img:is([src*=".png" i],[src*=".svg" i]):not([src^="/images/illustrations/"],[src^="/images/partners/"]){background-color:#eef3f1;border-radius:var(--radius-sm)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .content img:is([src*=".png" i],[src*=".svg" i]):not([src^="/images/illustrations/"],[src^="/images/partners/"]){background-color:#eef3f1;border-radius:var(--radius-sm)}
}
/* Dark mode: bright white-background photos and illustrations are toned down a little. */
:root[data-theme="dark"] .content img,:root[data-theme="dark"] .product-gallery img{filter:brightness(.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .content img,:root:not([data-theme="light"]) .product-gallery img{filter:brightness(.9)}
}

/* Runs of inline content buttons (symptom tags, name lists) wrap onto several lines: keep a row gap. */
.content :is(a,span).button:is(:has(+:is(a,span).button),:is(a,span).button+*){margin-block:5px}

/* Images keep their whole picture: blog covers (square, with a caption band at the bottom) are shown
   uncropped, product photos keep their own ratio, and no content image is taller than the screen. */
.product-gallery>img{--gallery-max:min(480px,70svh);display:block;aspect-ratio:auto!important;width:auto;max-width:100%;height:auto;max-height:var(--gallery-max);margin-inline:auto}
/* Desktop: the photo leaves room for the start of the description on the first screen, beside the whole buy box. */
@media (min-width:960px){.product-gallery>img{--gallery-max:clamp(240px,calc(100svh - 300px),480px)}}
/* The same size, known before the file arrives: as wide as the column, at most as wide as the height cap allows. */
.product-gallery>img[class*="is-ratio-"]{width:min(100%,calc(var(--gallery-max)*var(--ratio)));aspect-ratio:var(--ratio)!important}
.product-gallery>img.is-ratio-12-5{--ratio:2.4}
.product-gallery>img.is-ratio-3-2{--ratio:1.5}
.product-gallery>img.is-ratio-1-1{--ratio:1}
.content>img:first-child{display:block;width:auto;max-width:100%;max-height:min(560px,80svh);margin:0 auto 28px}
/* width:auto leaves the cover unsized until its file arrives, and the text below jumps down when it
   does. A square cover at least 560 px wide ends up exactly this wide, so its box is reserved up front. */
.content>img.is-square:first-child{width:min(100%,560px,80svh)}
@media (max-height:500px) and (orientation:landscape){
  .content :not(.video-facade)>img{width:auto;max-width:100%;max-height:80svh}
  .content .video-facade{max-width:calc(80svh*16/9);margin-inline:auto}
  .content .cms-cards>.cms-col>img,.content .cms-cards>.cms-col>p:has(>img:only-child) img{width:100%;max-height:60svh}
}

/* Post and product cards embedded in an article: the article's image and heading margins do not apply. */
.content :is(.post-card,.product-card) img{margin:0;border-radius:0}
.content .post-card-title{margin-top:0}

/* Link list inside a sidebar card: the card already has padding, so the links align with its heading
   and keep their text on one or two lines in the narrow tablet sidebar. */
.sidebar-card .link-list a{padding:12px 26px 12px 0}
.sidebar-card .link-list a::after{right:4px}
.sidebar-card .link-list a:hover{background:none;color:var(--link)}

/* Touch tablets with the header menu: there is no hover, so the chevron next to a menu item is a real
   button that opens and closes its submenu (the item itself still links to its page). */
@media (min-width:1320px) and (hover:none),(min-width:1320px) and (pointer:coarse){
  .nav-toggle{pointer-events:auto;right:-4px;width:34px;height:44px}
  .nav-item.has-children>.nav-link{padding-right:28px;margin-right:2px}
  .nav-item:is(:hover,:focus-within):not(.is-open)>.submenu{opacity:0;visibility:hidden;transform:translateY(6px)}
}

/* Desktop alignment: a post's header starts on the same left edge as its text (readable width kept),
   and a product description's single text blocks line up with its videos and FAQ instead of centring. */
.page-header-article>*{max-width:820px}
.product-description .cms-row-single{margin-inline:0}
@media (min-width:860px){.product-description .cms-row-single{margin-left:calc(var(--col-gap)/-2)}}

/* Accessibility (WCAG 2.1 AA audit, 2026-10-15). */
/* Delivery prices on the tinted selected card and in dark mode: the AA text green of each theme. */
.delivery-price{color:var(--food-text)}
/* Breadcrumb links: at least a 24px tall target. */
.breadcrumbs a{display:inline-block;padding-block:3px}
/* Checkout on the narrowest phones: long radio labels wrap instead of widening the page. */
@media (max-width:999px){.cart-layout{grid-template-columns:minmax(0,1fr)}}
.payment-methods{min-width:0}
@media (max-width:359px){.payment-method .check{flex-wrap:wrap}.payment-method .check{row-gap:2px}.payment-method .check>strong{flex:1 1 0}.payment-method .check>.delivery-price{flex-basis:calc(100% - 32px);margin-left:32px;text-align:left}}
/* Small links outside running text: at least a 24px tall target (WCAG 2.2 2.5.8). */
.checkout-steps a,.order-addon-title a,.faq-answer>a{display:inline-flex;align-items:center;min-height:24px}
/* Breadcrumb links on phones, tablets and touch screens: a 44px tall hit area, the line keeps its visual height. */
@media (max-width:1079px),(pointer:coarse){.breadcrumbs a{padding-block:11px;margin-block:-8px}}
/* Product options: the Hungarian one-word names ("Kiértékelés", "Tanácsadás") keep their required marker on their line
   (English two-word names wrap between the words, the marker stays with the second one). */
@media (min-width:600px){:lang(hu) .buy-box .option-group legend{width:96px}}
/* While the first-visit cookie banner is open, focused controls scroll above it (WCAG 2.2 2.4.11). */
html:has(.cookie-consent:not([hidden])){scroll-padding-bottom:320px}
@media (min-width:720px){html:has(.cookie-consent:not([hidden])){scroll-padding-bottom:220px}}
/* The mobile buy bar is out of reach for focus and screen readers while it is slid away. */
.sticky-buy{visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s}
.sticky-buy.is-visible{visibility:visible;transition-delay:0s}
/* Escape closes a desktop dropdown opened by hover or focus (site.js sets is-dismissed). */
@media (min-width:1320px){
  .nav-item.is-dismissed>.submenu{opacity:0;visibility:hidden}
}
/* The mascot moves for a few seconds only (no motion longer than 5 s without a pause control);
   the loading tube keeps moving while the order is being processed. */
.ft-tube:not(.is-loading) *{animation-iteration-count:1!important}
/* Content headings re-levelled for a valid outline (ContentRenderer::outlineLevels) keep the look of their original level. */
.cms-h3{font-size:clamp(18px,1.8vw,22px)}
.cms-h4{font-size:18px}
.cms-h5{font-size:16px}
.cms-h6{font-size:14px}
.content .cms-h3{margin-top:1.5em}
.content :is(.cms-h4,.cms-h5,.cms-h6){margin-top:0}
.content .cms-h3:first-child,.content .cms-card .cms-h3{margin-top:0}
.content .cms-cards>.cms-col>:is(.cms-h3,.cms-h4){font-size:19px;margin-bottom:8px}

/* === UI audit (2026-10-17): overflow, spacing and readability at 360–1440px === */
/* No automatic hyphenation anywhere (owner decision 2026-10-23): words wrap whole; overflow-wrap on body only
   breaks a word that is wider than its box on its own. Headings wrap evenly. */
h1,h2,h3,h4{text-wrap:balance}
.content :is(p,li){text-wrap:pretty}
/* Fieldsets and auto-sized grid columns default to their content's width: radio cards could widen the checkout. */
fieldset{min-width:0}
.payment-methods{grid-template-columns:minmax(0,1fr)}
.payment-method .check>strong{min-width:0}
/* Breadcrumbs on phones: one line, the current page (repeated in the h1) is shortened. */
@media (max-width:719px){
  /* Clipped sideways only, so the 44px tall breadcrumb hit area is not cut off (hidden is the fallback). */
  .breadcrumbs ol{flex-wrap:nowrap;overflow:hidden;overflow:clip visible}
  .breadcrumbs li{flex:none;white-space:nowrap}
  .breadcrumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* Builder sections: a kicker line sits right above its heading, and section dividers are tighter. */
.content .cms-section{padding-block:clamp(6px,1.2vw,14px)}
.content .cms-section+.cms-section{margin-top:clamp(10px,1.5vw,18px);padding-top:clamp(20px,2.4vw,32px)}
.content .cms-lead:has(+:is(h2,h3,h4)),.content .cms-cards>.cms-col>.cms-lead:has(+:is(h2,h3,h4)){font-size:14.5px;line-height:1.4;font-weight:700;color:var(--food-text);margin-bottom:6px}
.content .cms-lead+:is(h2,h3,h4){margin-top:0}
nav:has(>.chip-list)+.layout-sidebar{padding-top:clamp(4px,1vw,12px)}
/* Heading-only teaser cards (symptom and trigger lists) are compact tiles, not tall cards. */
.content .cms-cards:not(:has(img,p,ul,ol,.button)){grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))!important;gap:10px!important;margin-inline:0!important}
@media (max-width:599px){.content .cms-cards:not(:has(img,p,ul,ol,.button)){grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))!important}}
.content .cms-cards:not(:has(img,p,ul,ol,.button))>.cms-col{grid-column:auto!important;justify-content:center;padding:12px 16px 12px 38px!important}
.content .cms-cards:not(:has(img,p,ul,ol,.button))>.cms-col::before{inset:0!important;border-radius:var(--radius);box-shadow:none}
.content .cms-cards:not(:has(img,p,ul,ol,.button))>.cms-col>:is(h2,h3,h4,h5){margin:0!important;font-size:15.5px!important;line-height:1.35;letter-spacing:-.01em;overflow-wrap:break-word}
.content .cms-cards:not(:has(img,p,ul,ol,.button))>.cms-col>:is(h2,h3,h4,h5)::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--food)}
/* Home steps on phones: the illustration is a banner, not a 4:3 picture. */
@media (max-width:599px){.step-art{aspect-ratio:2/1}}
/* Article images line up with the text column instead of floating in its middle. */
.layout-sidebar .content>img:first-child{margin-inline:0}

/* Post cards on phones: thumbnail beside the text, two-line teaser. */
@media (max-width:599px){
  .post-grid{gap:12px}
  .post-card{flex-direction:row;align-items:flex-start;gap:14px;padding:12px}
  .post-card-media{flex:0 0 92px;width:92px;border-radius:var(--radius-sm)}
  .post-card-body{padding:0;min-width:0}
  .post-card-cat{font-size:12.5px;margin-bottom:2px}
  .post-card-title{font-size:16px;line-height:1.3;margin-bottom:4px}
  .post-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.45;margin-bottom:4px}
  .post-card time{font-size:12.5px}
}

/* Content lists: brand bullets, a bold lead-in gets a little more air. */
.content ul:not([class]){list-style:none;padding-left:0}
.content ul:not([class])>li{position:relative;padding-left:1.45em}
.content ul:not([class])>li::before{content:"";position:absolute;left:.35em;top:.66em;width:.42em;height:.42em;border-radius:50%;background:var(--food)}
.content li ul:not([class])>li::before{background:transparent;border:1.5px solid var(--food)}
.content ol:not([class])>li::marker{color:var(--food-text);font-weight:700}
.content li:has(>strong:first-child){margin-bottom:.6em}
/* Highlighted statements (stored blockquotes) are callouts; quoted paragraphs (ContentRenderer::pullQuotes) are pull quotes. */
.content blockquote{position:relative;padding:16px 22px;border-left:4px solid var(--food);background:var(--food-tint);border-radius:0 var(--radius) var(--radius) 0}
.content blockquote>:last-child{margin-bottom:0}
.content blockquote.cms-quote{padding:2px 0 2px 50px;margin:1.8em 0;background:transparent;border:0;border-radius:0;font-size:clamp(17.5px,1.6vw,19.5px);line-height:1.55;font-weight:600;color:var(--heading)}
.content blockquote.cms-quote::before{content:"\201D";position:absolute;left:0;top:-6px;font-size:64px;line-height:1;font-weight:800;color:var(--food)}
.content blockquote.cms-quote :is(strong,b,em,i){font-weight:inherit;font-style:normal;color:inherit}
/* Summary sections ("Következtetések", "Összegzés": ContentRenderer::summaries) are a takeaway box. */
.content .cms-summary{margin:2em 0;padding:clamp(18px,2.6vw,26px);background:var(--cta-tint);border:1px solid var(--success-line);border-radius:var(--radius)}
.content .cms-summary>:first-child{margin-top:0}
.content .cms-summary>:last-child{margin-bottom:0}
.content .cms-summary>:is(h2,h3,h4):first-child{display:flex;align-items:flex-start;gap:10px;font-size:clamp(19px,1.8vw,22px)}
.content .cms-summary>:is(h2,h3,h4):first-child::before{content:"";flex:none;width:26px;height:26px;margin-top:-1px;border-radius:50%;background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat}
/* Table of contents on long pages: no sidebar on default pages, so the list stays in the text at every width. */
@media (min-width:900px){.toc-mobile.toc-page{display:block}}
.page-content-builder .toc-page{max-width:820px;margin-inline:auto}
/* Layout fixes (2026-10-18): stored job titles start lowercase; a lone-heading side column is a highlighted figure; stacked tight sections don't double their gap; task pages fit one screen. */
.content .cms-gallery p::first-letter{text-transform:uppercase}
.content .cms-col-stat{display:flex;align-items:center}
.content .cms-col-stat>:is(h2,h3,h4){width:100%;margin:0;padding:clamp(24px,3.5vw,44px) clamp(20px,3vw,36px);background:var(--bg);border:1px solid var(--line);border-left:5px solid var(--cta);border-radius:var(--radius-lg);font-size:clamp(22px,2.4vw,30px);line-height:1.25;text-wrap:balance}
.section-tight+.section-tight{padding-top:0}
.section-tight .quiz-cta{margin-bottom:0}
.section:not(.section-alt)+.section-tight:has(>.container>.quiz-cta){padding-top:0}
/* Two plain white sections in a row share one gap instead of stacking two paddings (2026-10-23). */
.section:not(.section-alt,.section-tint)+.section:not(.section-alt,.section-tint){padding-top:0}
.empty-state{padding:clamp(20px,4vw,44px) 16px}
.empty-state h2{margin-bottom:8px}
.empty-state .button{margin-top:6px}
/* Source lists (medical PR #117): a quiet footnote box; long DOIs and URLs wrap instead of overflowing. */
section.cms-references{margin:2.4em 0 1.2em;padding:18px 22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;line-height:1.55;color:var(--muted)}
section.cms-references>:is(h2,h3,h4,h5):first-child{margin:0 0 8px;font-size:15px;letter-spacing:0;color:var(--heading)}
section.cms-references :is(ul,ol){margin:0;padding-left:1.3em}
section.cms-references ul{padding-left:0}
section.cms-references li{margin:0 0 6px;max-width:none}
section.cms-references li::marker{color:var(--muted)}
section.cms-references p{margin:0 0 6px;max-width:none}
section.cms-references>:last-child,section.cms-references li:last-child{margin-bottom:0}
section.cms-references :is(li,p),.content .cms-source{overflow-wrap:anywhere}
section.cms-references a,.content .cms-source a{color:inherit;text-decoration-color:var(--line-strong)}
section.cms-references a:hover,.content .cms-source a:hover{color:var(--food-text)}
.content .cms-source{margin-top:-.4em;font-size:13.5px;line-height:1.5;color:var(--muted)}
.medical-note a{font-weight:600}
/* Image beside text (2026-10-20): a builder row whose column holds only an image no longer leaves a tall
   blank next to the shorter column. Side by side, both columns are vertically centred and the image is at
   most 420px tall (uncropped); the image column of a long product description stays in view while the
   text scrolls past. Photos that may be cropped (public/images/photos/crop) fill the height of the text, and
   become a short band when stacked. Stacked images are never taller than about two thirds of the screen.
   An image column taller than the window under the header scrolls with the text (site.js marks it .is-static). */
.content .cms-row:not(.cms-cards,.cms-row-single)>.cms-col:is(:has(>img:only-child),:has(>p:only-child>img:only-child)):not(.cms-col-1-4,.cms-col-1-5) img:not([src*="/images/photos/crop/"]){display:block;width:auto;height:auto;max-height:min(480px,65svh);margin:0 auto;object-fit:contain}
@media (min-width:860px){
  .content .cms-row:not(.cms-cards,.cms-row-single):has(>.cms-col>img:only-child,>.cms-col>p:only-child>img:only-child){align-items:center}
  .content .cms-row:not(.cms-cards,.cms-row-single)>.cms-col:is(:has(>img:only-child),:has(>p:only-child>img:only-child)):not(.cms-col-1-4,.cms-col-1-5) img:not([src*="/images/photos/crop/"]){max-height:420px}
}
@media (min-width:860px) and (min-height:760px){
  .product-description .cms-row:not(.cms-cards,.cms-row-merged)>.cms-col:has(>img:first-child):not(:has(>img:only-child)){align-self:start;position:sticky;top:var(--sticky-top)}
  .product-description .cms-row:not(.cms-cards,.cms-row-merged)>.cms-col:has(>img:first-child):not(:has(>img:only-child)).is-static{position:static}
}
.content .cms-row>.cms-col img[src*="/images/photos/crop/"]{width:100%;max-width:min(100%,520px);max-height:none;aspect-ratio:3/2;object-fit:cover;margin:0 0 4px;border-radius:var(--radius-lg)}
.content .cms-row>.cms-col>p:has(>img[src*="/images/photos/crop/"]){margin:0}
@media (min-width:860px){
  .content .cms-row>.cms-col:has(>img[src*="/images/photos/crop/"],>p>img[src*="/images/photos/crop/"]){align-self:stretch;position:relative;min-height:clamp(240px,18vw,300px)}
  .content .cms-row>.cms-col img[src*="/images/photos/crop/"]{position:absolute;top:0;bottom:0;left:calc(var(--col-gap)/2);width:calc(100% - var(--col-gap));height:100%;max-width:none;margin:0;aspect-ratio:auto}
}
@container (max-width:900px){
  .product-description .cms-row>.cms-col{position:static!important}
  .content .cms-row>.cms-col:has(>img[src*="/images/photos/crop/"],>p>img[src*="/images/photos/crop/"]){min-height:0;position:static}
  .content .cms-row>.cms-col img[src*="/images/photos/crop/"]{position:static;width:100%;max-width:min(100%,520px);height:auto;margin:0 0 4px;aspect-ratio:3/2}
}

/* === Checkout UX (2026-10-23): progress, numbered steps, wallet-first payment, inline errors, order add-on, trust, phone bar ===
   Kept to cart/checkout selectors so page-wide spacing passes elsewhere do not collide with it. */
.checkout-steps{margin:clamp(18px,3vw,26px) 0 0}
.checkout-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--muted)}
.checkout-steps li{display:flex;align-items:center;gap:8px;min-width:0}
.checkout-steps li+li::before{content:"";width:22px;height:1.5px;background:var(--line-strong);margin-right:4px}
.checkout-steps-marker{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);font-weight:700;font-size:13px;flex:none}
.checkout-steps .is-current{color:var(--heading);font-weight:700}
.checkout-steps .is-current .checkout-steps-marker{background:var(--test-dark);border-color:var(--test-dark);color:#fff}
.checkout-steps .is-done .checkout-steps-marker{background:var(--success-tint);border-color:var(--success-line);color:var(--success-text)}
.checkout-steps .is-done .icon{width:14px;height:14px;vertical-align:0}
.checkout-steps a{color:inherit}
@media (max-width:479px){.checkout-steps li+li::before{width:10px}.checkout-steps ol{gap:8px 10px;font-size:13.5px}}
@media (max-width:419px){.checkout-steps li+li::before{display:none}.checkout-steps ol{column-gap:8px}}
/* Phones: one line; the steps still ahead show only their number (the label stays for screen readers). */
@media (max-width:479px){
  .checkout-steps ol{flex-wrap:nowrap}
  .checkout-steps li:not(.is-current,.is-done) .checkout-steps-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.checkout-steps~.cart-layout,.checkout-steps~.checkout-coupon{margin-top:18px}

.checkout-section-title{display:flex;align-items:center;gap:12px}
.checkout-step-no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--test-tint);color:var(--heading);font-size:15px;font-weight:800;flex:none}
.checkout-section-lead{margin:-8px 0 16px;font-size:14.5px;color:var(--muted)}

/* Desktop: steps and the order button on the left, the summary sticky beside both; phones: steps, summary, button. */
@media (min-width:1000px){
  .checkout-form{grid-template-areas:"main aside" "final aside"}
  .checkout-form>.checkout-main{grid-area:main}
  .checkout-form>.summary-box{grid-area:aside;align-self:start}
  .checkout-form>.checkout-final{grid-area:final}
}
.checkout-form{row-gap:22px}
.checkout-form .checkout-section:last-child{margin-bottom:0}
.checkout-section .payment-methods{border:0;padding:0;margin:0}
.checkout-section[data-ship-section]{padding-block:16px}
.checkout-final{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,28px)}
.checkout-final .checkout-privacy{margin-top:0}

/* A correctly filled required field: green border and tick, the red * goes (the tick is not colour alone). */
.checkout-form .is-complete .req{display:none}
.checkout-form .is-complete>select{border-color:var(--success)}
.field-feedback.is-error{color:var(--danger);font-weight:650}
.field-feedback.is-error::before{content:"! ";font-weight:800}
.checkout-form .check+.field-feedback.is-error{margin-left:30px}

.checkout-note{margin:0 0 22px;padding:14px 18px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--bg)}
.checkout-note summary{cursor:pointer;font-weight:650;list-style:none}
.checkout-note summary::-webkit-details-marker{display:none}
.checkout-note summary::before{content:"+";display:inline-block;width:1.1em;font-weight:800;color:var(--link)}
.checkout-note[open] summary::before{content:"−"}
.checkout-note[open] summary{margin-bottom:10px}

/* Card payment: the wallets first, card entry last (Barion's own page decides its order). */
.wallet-marks{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 30px}
.wallet-mark{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border:1.5px solid var(--heading);border-radius:7px;font-size:13px;font-weight:750;color:var(--heading);background:var(--surface);white-space:nowrap}
.wallet-mark.is-card{border-color:var(--line-strong);color:var(--ink-soft);font-weight:650}
.payment-method .payment-method-note{font-size:13px}

.order-addon{margin-top:20px;padding:16px 18px;border:1.5px dashed var(--test-line);border-radius:var(--radius);background:var(--surface)}
.order-addon-eyebrow{margin:0 0 2px;font-size:12.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--link)}
.order-addon-title{font-size:16.5px;margin:0 0 4px}
.order-addon-title a{color:var(--heading);text-decoration:none}
.order-addon-title a:hover{text-decoration:underline}
.order-addon-reason{margin:0 0 12px;font-size:14px;color:var(--ink-soft)}
.order-addon-option{margin-bottom:12px}
.order-addon-option label{font-size:13.5px;font-weight:650}
.order-addon-option select{min-height:42px;padding-block:8px;font-size:14.5px}
.order-addon-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.order-addon-price{font-weight:700;color:var(--food-text);font-size:15px}
.cart-extras .order-addon{margin-top:24px}
.checkout-main>.order-addon{margin-top:0}
@media (min-width:720px){.cart-extras .order-addon{max-width:640px}}

.checkout-newsletter{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.checkout-newsletter:has(input:checked){border-color:var(--test-line);background:var(--test-tint)}
.checkout-submit{margin-top:4px}
.checkout-submit-note{margin:10px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.checkout-trust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14px;color:var(--ink-soft)}
.checkout-trust li{display:flex;gap:10px;align-items:flex-start}
.checkout-trust .icon{color:var(--success);margin-top:1px}
.checkout-trust strong{color:var(--heading)}
.icon-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.icon-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

.checkout-sticky .sticky-buy-info span{color:var(--muted);font-size:13px}
/* The total never shrinks or clips: the button gives way instead. */
.checkout-sticky .sticky-buy-info{flex:none}
.checkout-sticky .sticky-buy-info strong{font-size:17px;color:var(--heading);overflow:visible;text-overflow:clip}
.checkout-sticky .button{padding-inline:14px}
/* The checkout is one column (no sticky summary) up to 999px, so its bar stays until then. */
@media (min-width:960px) and (max-width:999px){.checkout-sticky{display:flex}body:has(.checkout-sticky) .site-footer{padding-bottom:84px}}
@media (min-width:1000px){.checkout-sticky{display:none}}

/* ==========================================================================
   === Csepi game (/jatek/, /en/game/): public/js/csepi-game.js ===
   Everything is scoped under .csepi-game (and .csepi-signup / .csepi-page). The game keeps its playful
   look in the site's type and colours: --g-* tokens map onto the site tokens, so dark mode follows the
   site. No inline styles (CSP): animation delays (--d) and bar widths (--w) are set through the CSSOM.
   The site-wide reduced-motion rule switches every animation and transition here off.
   ========================================================================== */
.csepi-game{
  --g-leaf:var(--cta);--g-leaf-ink:#fff;--g-mint:var(--food-tint);--g-line:var(--line-strong);--g-surface:var(--surface);--g-surface2:var(--bg);--g-bg:var(--bg-alt);
  --g-ink:var(--ink);--g-muted:var(--muted);--g-sky:var(--test);--g-sun:#f6c94a;--g-on-sun:#1f2d33;--g-berry:var(--danger);
  --g-hi:#f28aa0;--g-mid:#f6c94a;--g-lo:#8fd3a6;--g-shadow:0 3px 0 rgba(16,40,50,.14);
  position:relative;max-width:560px;margin:0 auto;color:var(--g-ink);font-size:16.5px;line-height:1.5
}
:root[data-theme="dark"] .csepi-game{--g-leaf:#6fb34a;--g-leaf-ink:#0f171a;--g-shadow:0 3px 0 rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .csepi-game{--g-leaf:#6fb34a;--g-leaf-ink:#0f171a;--g-shadow:0 3px 0 rgba(0,0,0,.4)}}
.csepi-game h2,.csepi-game h3{line-height:1.15;letter-spacing:-.01em;margin:0 0 .45em;font-weight:800}
.csepi-game h2{font-size:clamp(22px,5vw,27px)}
.csepi-game h3{font-size:18px}
.csepi-game p{margin:0 0 .8em}
.csepi-game :focus-visible{outline:3px solid var(--g-sky);outline-offset:3px;border-radius:10px}
.csepi-game [tabindex="-1"]:focus{outline:none}
.csepi-loading{text-align:center;color:var(--muted);padding:40px 0}
.csepi-game.is-ready .csepi-loading{display:none}

/* top bar: points, chapter dots, restart; sticks under the site header */
.csepi-top{position:sticky;top:73px;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 0;margin-bottom:8px;background:var(--surface);border-bottom:2px solid var(--g-line)}
.csepi-pts{display:flex;align-items:center;gap:6px;font-weight:800;background:var(--g-surface);border:2px solid var(--g-line);border-radius:999px;padding:4px 12px 4px 8px;min-height:40px}
.csepi-pts b{font-size:18px}
.csepi-pts small{font-size:12.5px;color:var(--g-muted);font-weight:700}
.csepi-dots{display:flex;gap:5px;margin:0 auto;align-items:center}
.csepi-dot{width:12px;height:12px;border-radius:50%;background:var(--g-line)}
.csepi-dot.is-done{background:var(--g-leaf)}
.csepi-dot.is-now{background:var(--g-sun);box-shadow:0 0 0 3px var(--g-mint)}
.csepi-icon-btn{width:44px;height:44px;border-radius:14px;border:2px solid var(--g-line);background:var(--g-surface);display:grid;place-items:center;cursor:pointer;font-size:20px;color:var(--g-ink)}

.csepi-screen{animation:csepi-in .35s ease both}
@keyframes csepi-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* buttons */
.csepi-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 22px;border-radius:18px;border:2px solid transparent;background:var(--g-leaf);color:var(--g-leaf-ink);font-weight:800;font-size:16.5px;line-height:1.2;cursor:pointer;box-shadow:var(--g-shadow);text-align:center}
.csepi-btn:active{transform:translateY(2px);box-shadow:none}
.csepi-btn:disabled{opacity:.5;cursor:not-allowed}
.csepi-btn.is-ghost{background:transparent;color:var(--g-ink);border-color:var(--g-line);box-shadow:none}
.csepi-btn.is-sun{background:var(--g-sun);color:var(--g-on-sun)}
.csepi-btn.is-wide{width:100%}
.csepi-btn.is-small{min-height:46px;margin-bottom:12px}
.csepi-btn.is-big{width:100%;min-height:68px;font-size:20px}
.csepi-controls{display:flex;gap:10px}
.csepi-controls .csepi-btn{flex:1}
.csepi-row-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.csepi-row-buttons .csepi-btn{flex:1 1 140px}

.csepi-muted{color:var(--g-muted)}
.csepi-small{font-size:14.5px}
.csepi-center{text-align:center}
.csepi-mt{margin-top:12px}
.csepi-mt-lg{margin-top:18px}
.csepi-mb-4{margin-bottom:4px!important}

/* title screen */
.csepi-title-art{display:flex;justify-content:center;margin:6px 0 4px}
.csepi-heroes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 18px}
.csepi-hero{background:var(--g-surface);border:3px solid var(--g-line);border-radius:22px;padding:12px 8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:19px;min-height:150px;color:var(--g-ink)}
.csepi-hero[aria-pressed="true"]{border-color:var(--g-leaf);background:var(--g-mint)}
.csepi-brand{font-weight:800;letter-spacing:.02em;color:var(--g-leaf);text-align:center;font-size:15px;margin:6px 0 0}

/* story */
.csepi-scene,.csepi-seq-art{background:var(--g-surface);border:2px solid var(--g-line);border-radius:26px;padding:12px;margin-bottom:12px;overflow:hidden}
.csepi-seq-art.is-tight{padding:4px}
.csepi-scene svg,.csepi-seq-art svg{display:block;width:100%;height:auto}
.csepi-talk{display:flex;gap:10px;align-items:flex-end;margin:10px 0 16px;min-height:120px}
.csepi-talk.is-center{justify-content:center}
.csepi-who{flex:0 0 76px}
.csepi-bubble{position:relative;background:var(--g-surface);border:2px solid var(--g-line);border-radius:20px 20px 20px 6px;padding:12px 16px;flex:1;font-size:16.5px;font-weight:600}
.csepi-bubble.is-narrator{border-style:dashed;color:var(--g-muted);border-radius:20px}
.csepi-bubble.is-left{text-align:left}
.csepi-name{display:block;font-weight:800;color:var(--g-leaf);font-size:14.5px}
.csepi-lines{display:flex;gap:4px;justify-content:center;margin:-4px 0 12px}
.csepi-lines i{width:18px;height:5px;border-radius:5px;background:var(--g-line)}
.csepi-lines i.is-on{background:var(--g-leaf)}

/* cards and choices */
.csepi-card{background:var(--g-surface);border:2px solid var(--g-line);border-radius:22px;padding:16px;margin-bottom:12px}
.csepi-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;background:var(--g-surface);color:var(--g-ink);border:3px solid var(--g-line);border-radius:22px;padding:16px;margin-bottom:12px;cursor:pointer}
.csepi-choice:hover,.csepi-choice:active{border-color:var(--g-leaf)}
.csepi-choice-title{font-weight:800;font-size:18px}
.csepi-choice-list{display:grid;gap:2px;margin:4px 0}
.csepi-choice-list span::before{content:"✓ ";color:var(--g-leaf);font-weight:800}
.csepi-choice-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;width:100%}
.csepi-choice-foot .price{font-size:20px}
.csepi-tag{display:inline-block;background:var(--g-sun);color:var(--g-on-sun);border-radius:999px;padding:1px 10px;font-weight:800;font-size:13px}
.csepi-pkg-name{font-size:22px;font-weight:800;color:var(--g-leaf);line-height:1.15}
.csepi-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.csepi-duo .csepi-card{margin:0}
.csepi-duo h3{font-size:17px}
.csepi-card.is-fast{border-left:6px solid var(--g-berry)}
.csepi-card.is-slow{border-left:6px solid var(--g-sun)}

/* sorter */
.csepi-bins{display:grid;gap:8px;margin-bottom:10px;grid-template-columns:1fr 1fr}
.csepi-bins.is-3{grid-template-columns:1fr 1fr 1fr}
.csepi-bin{min-height:96px;border:3px dashed var(--g-line);background:var(--g-surface2);color:var(--g-ink);border-radius:20px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;cursor:pointer;text-align:center}
.csepi-bin-title{font-weight:800;font-size:15px;line-height:1.2}
.csepi-bin-in{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:20px;min-height:1.6em}
.csepi-bin.is-over{border-color:var(--g-leaf);background:var(--g-mint);border-style:solid}
.csepi-bin.is-pulse{animation:csepi-pop-bin .4s ease}
@keyframes csepi-pop-bin{50%{transform:scale(1.04)}}
.csepi-tray{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.csepi-food{touch-action:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px;border-radius:16px;border:2px solid var(--g-line);background:var(--g-surface);color:var(--g-ink);cursor:grab;font-weight:700;font-size:14.5px;line-height:1.2;text-align:left;min-width:0}
.csepi-food-e{font-size:24px;flex:0 0 auto}
.csepi-food.is-selected{border-color:var(--g-leaf);background:var(--g-mint);box-shadow:0 0 0 3px var(--g-leaf) inset}
.csepi-food.is-shake{animation:csepi-shake .4s ease}
@keyframes csepi-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.csepi-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-60%) rotate(-3deg);box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:.95}
.csepi-hint{font-size:14.5px;color:var(--g-muted);margin:0 0 10px!important;text-align:center}
.csepi-tip{display:flex;gap:8px;align-items:center;margin-top:12px;border-radius:18px;font-weight:700;font-size:15.5px;text-align:left}
.csepi-tip.is-shown{padding:10px 12px;border:2px solid var(--g-line);background:var(--g-surface)}
.csepi-tip.is-good{border-color:var(--g-leaf)}
.csepi-tip.is-try{border-color:var(--g-sun)}
.csepi-tip svg{flex:0 0 40px}

/* toasts */
.csepi-toasts{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:60}
.csepi-toast{background:var(--ink);color:var(--surface);padding:8px 16px;border-radius:999px;font-weight:800;animation:csepi-toast 2.2s ease forwards}
@keyframes csepi-toast{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}

/* mini games */
.csepi-game-box{background:var(--g-surface);border:2px solid var(--g-line);border-radius:26px;padding:16px;text-align:center}
.csepi-breath{width:220px;height:220px;margin:6px auto 10px;position:relative;display:grid;place-items:center}
.csepi-ring{position:absolute;inset:0;border-radius:50%;border:3px dashed var(--g-line)}
.csepi-ball{width:100%;height:100%;border-radius:50%;background:var(--g-mint);border:4px solid var(--g-leaf);display:grid;place-items:center;font-weight:800;font-size:19px;transition:background .4s}
.csepi-ball.is-ready{background:var(--g-sun);color:var(--g-on-sun)}
.csepi-count{font-weight:800;margin:6px 0 12px!important}
.csepi-lab{position:relative;height:190px;margin:4px 0 14px}
.csepi-pip{position:absolute;top:0;width:44px;margin-left:-22px}
.csepi-wells{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:space-around;padding:12px 0;background:var(--g-surface2);border:2px solid var(--g-line);border-radius:18px}
.csepi-well{width:40px;height:40px;border-radius:50%;background:var(--g-bg);border:3px solid var(--g-line);transition:background .3s}
.csepi-well.is-full{background:var(--g-sky);border-color:var(--g-sky)}
.csepi-info{background:var(--g-mint);border-radius:18px;padding:10px 14px;font-weight:600;margin:0 0 12px;text-align:left}

/* phone and sample report */
.csepi-phone{background:var(--g-surface);border:3px solid var(--g-ink);border-radius:32px;padding:14px 14px 18px;max-width:380px;margin:0 auto}
.csepi-phone-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.csepi-logo{font-weight:800;font-size:17px}
.csepi-logo span{color:var(--g-leaf)}
.csepi-field{border:2px solid var(--g-line);border-radius:14px;padding:10px 12px;margin-bottom:8px;background:var(--g-surface2);color:var(--g-muted)}
.csepi-row{display:grid;grid-template-columns:32px minmax(0,1fr) 88px;align-items:center;gap:8px;width:100%;background:none;border:0;border-bottom:1px solid var(--g-line);padding:10px 2px;cursor:pointer;text-align:left;min-height:52px;color:var(--g-ink)}
.csepi-row-e{font-size:22px}
.csepi-row-name{font-weight:700;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
.csepi-row.is-seen .csepi-row-name::after{content:" ✓";color:var(--g-leaf)}
.csepi-bar{display:block;height:14px;border-radius:8px;background:var(--g-line);overflow:hidden}
.csepi-bar i{display:block;height:100%;width:var(--w,0);border-radius:8px;background:var(--g-leaf)}
.csepi-bar .is-hi,.csepi-legend .is-hi{background:var(--g-hi)}
.csepi-bar .is-mid,.csepi-legend .is-mid{background:var(--g-mid)}
.csepi-bar .is-lo,.csepi-legend .is-lo{background:var(--g-lo)}
.csepi-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:700;margin:8px 0}
.csepi-legend span{display:flex;align-items:center;gap:5px}
.csepi-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.csepi-detail{margin-top:10px;border-radius:18px;padding:12px 14px;background:var(--g-surface2);border:2px solid var(--g-line);min-height:70px}
.csepi-note{font-size:14px;color:var(--g-muted);border-top:1px dashed var(--g-line);margin:12px 0 0!important;padding-top:10px}
.csepi-collect{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.csepi-coll{background:var(--g-surface);border:2px solid var(--g-leaf);border-radius:18px;padding:12px;text-align:center;font-weight:800}
.csepi-coll-e{font-size:32px;display:block}
.csepi-coll.is-locked{border-style:dashed;border-color:var(--g-line);color:var(--g-muted);font-weight:700}
.csepi-bonus{border:2px solid var(--g-sun);background:var(--g-surface);border-radius:18px;padding:12px 14px;margin:12px 0}
.csepi-recipe{background:var(--g-surface);border:2px solid var(--g-line);border-radius:18px;padding:10px 14px;margin-bottom:8px}
.csepi-recipe summary{font-weight:800;cursor:pointer;min-height:36px;display:flex;align-items:center}
.csepi-recipe ul{margin:.4em 0;padding-left:1.2em}
.csepi-scroll{overflow-x:auto}
.csepi-diary{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.csepi-diary th,.csepi-diary td{border:1px solid var(--g-line);padding:6px;text-align:left;vertical-align:top}
.csepi-diary th{background:var(--g-mint)}

/* weeks later */
.csepi-meters{display:grid;gap:10px;margin:8px 0 14px}
.csepi-meter-label{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.csepi-meter .csepi-bar{height:18px}
.csepi-meter .csepi-bar i{transition:width 1s ease}
.csepi-opt{display:block;width:100%;text-align:left;min-height:60px;padding:12px 16px;border-radius:18px;border:3px solid var(--g-line);background:var(--g-surface);color:var(--g-ink);font-weight:700;margin-bottom:10px;cursor:pointer}
.csepi-opt:hover,.csepi-opt:active{border-color:var(--g-leaf)}

/* chapter done and end screen */
.csepi-badge-big{width:130px;height:130px;margin:6px auto 10px;border-radius:50%;background:var(--g-sun);display:grid;place-items:center;font-size:56px;border:6px solid var(--g-surface);box-shadow:0 0 0 4px var(--g-sun)}
.csepi-result{background:linear-gradient(160deg,var(--g-mint),var(--g-surface));border:3px solid var(--g-leaf);border-radius:28px;padding:18px;text-align:center;margin:10px 0 14px}
.csepi-result-art{display:flex;justify-content:center;align-items:flex-end;gap:4px}
.csepi-score{font-size:52px;font-weight:800;line-height:1;color:var(--g-leaf);margin-top:4px}
.csepi-score-unit{margin:0!important;font-weight:800}
.csepi-rank{font-size:22px;font-weight:800;margin:6px 0 0!important}
.csepi-badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 4px;padding:0;list-style:none}
.csepi-badge-row li{background:var(--g-surface);border:2px solid var(--g-line);border-radius:999px;padding:3px 10px;font-size:14px;font-weight:700}
.csepi-step-no{font-weight:800;color:var(--g-leaf);font-size:15px;margin:0 0 2px!important}
.csepi-cap{font-size:17px;font-weight:700;min-height:3.2em}
.csepi-cap small{display:block;font-weight:600;color:var(--g-muted);font-size:14.5px;margin-top:4px}
.csepi-seqbar{height:6px;border-radius:6px;background:var(--g-line);overflow:hidden;margin:0 0 12px}
.csepi-seqbar i{display:block;height:100%;width:0;background:var(--g-leaf);animation:csepi-seqbar 5.2s linear forwards}
@keyframes csepi-seqbar{to{width:100%}}
.csepi-steps{padding-left:1.3em;margin:.2em 0 0}
.csepi-steps li{margin-bottom:.4em}
.csepi-packages{display:grid;gap:10px;margin:0 0 14px}
.csepi-package{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;background:var(--g-surface);border:2px solid var(--g-line);border-radius:20px;padding:12px 14px}
.csepi-package .csepi-pkg-name{font-size:18px}
.csepi-package .csepi-small{grid-column:1;color:var(--g-muted)}
.csepi-package .price{grid-column:1;font-size:20px}
.csepi-package .button{grid-column:2;grid-row:1/span 3}
.csepi-package.is-chosen{border-color:var(--g-leaf);box-shadow:0 0 0 2px var(--g-leaf) inset}
.csepi-cta{text-align:center;margin:0 0 14px!important}
.csepi-disclaimer{font-size:14px;color:var(--g-muted);background:var(--g-surface2);border-radius:16px;padding:12px 14px;margin:16px 0 0!important}
.csepi-signup{max-width:560px;margin:0 auto var(--space-block)}
.csepi-game .csepi-signup{margin:6px 0 14px}

/* SVG art */
.csepi-van-text{font-family:var(--font);font-weight:800;font-size:14px;fill:#12301f}
.csepi-map-label{font-family:var(--font);font-weight:800;font-size:11px;fill:var(--g-ink)}
.csepi-map-label.is-12{font-size:12px}
.csepi-map-label.is-10{font-size:10px}
.csepi-map-label.is-9{font-size:9px}
.csepi-map-label.is-light{font-weight:700}
.csepi-bob{animation:csepi-bob 3s ease-in-out infinite}
@keyframes csepi-bob{50%{transform:translateY(-5px)}}
.csepi-van{animation:csepi-drive 3.2s ease-in-out .3s both}
@keyframes csepi-drive{0%{transform:translateX(-160px)}45%,55%{transform:translateX(0)}100%{transform:translateX(420px)}}
.csepi-pop{transform-box:fill-box;transform-origin:center;animation:csepi-popin .55s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both}
@keyframes csepi-popin{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.csepi-fillup{transform-box:fill-box;transform-origin:50% 100%;animation:csepi-fillup 2.6s ease-out var(--d,.6s) both}
@keyframes csepi-fillup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.csepi-slide-r{animation:csepi-slide-r 1s ease-out var(--d,0s) both}
@keyframes csepi-slide-r{from{transform:translateX(-70px);opacity:0}to{transform:none;opacity:1}}
.csepi-fade{animation:csepi-fade .8s ease var(--d,0s) both}
@keyframes csepi-fade{from{opacity:0}to{opacity:1}}
.csepi-spin{transform-box:fill-box;transform-origin:center;animation:csepi-spin 1.1s linear infinite}
@keyframes csepi-spin{to{transform:rotate(360deg)}}
.csepi-drive-out{animation:csepi-drive-out 2.2s ease-in 1.3s both}
@keyframes csepi-drive-out{from{transform:translateX(0)}to{transform:translateX(260px)}}
.csepi-route-van{animation:csepi-route 3.2s ease-in-out .4s both}
@keyframes csepi-route{from{transform:translate(0,0)}to{transform:translate(222px,-58px)}}
.csepi-beam{animation:csepi-beam 1.6s ease-in-out .9s 2 both}
@keyframes csepi-beam{0%,100%{opacity:.12}50%{opacity:.55}}
.csepi-fall{animation:csepi-fall 1.2s ease-in var(--d,0s) both}
@keyframes csepi-fall{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
.csepi-scanline{animation:csepi-scan 3s linear .3s both}
@keyframes csepi-scan{from{transform:translateX(0)}to{transform:translateX(212px)}}
.csepi-growx{transform-box:fill-box;transform-origin:0 50%;animation:csepi-growx 1s ease-out var(--d,0s) both}
@keyframes csepi-growx{from{transform:scaleX(0)}}
.csepi-fly{animation:csepi-fly 1.5s ease-in-out var(--d,0s) infinite}
@keyframes csepi-fly{0%{transform:translateX(0);opacity:0}30%{opacity:1}100%{transform:translateX(96px);opacity:0}}
.csepi-slide-down{animation:csepi-slide-down .6s ease-out .5s both}
@keyframes csepi-slide-down{from{transform:translateY(-40px);opacity:0}}
.csepi-shimmy{transform-box:fill-box;transform-origin:center;animation:csepi-shimmy .5s ease-in-out 1.3s 2}
@keyframes csepi-shimmy{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@media (max-width:360px){.csepi-tray{grid-template-columns:1fr}.csepi-duo{grid-template-columns:1fr}}

/* Apple Pay / Google Pay in place of the order button (wallet-pay.js): the wallets' own buttons, black, full width,
   as tall as the order button. Apple's is Safari's native button; Google's comes from Google's script. */
.wallet-pay{display:grid;gap:10px;margin-top:4px}
.wallet-pay-note{margin:0;font-size:13.5px;color:var(--muted);text-align:center}
.apple-pay-button{display:block;width:100%;height:54px;padding:0;border:0;border-radius:var(--radius-sm);cursor:pointer;-webkit-appearance:-apple-pay-button;-apple-pay-button-type:buy;-apple-pay-button-style:black}
.google-pay-button{height:54px}
.wallet-pay .field-error{margin:0;text-align:center}

/* Tested foods (ContentRenderer::foodGroups()): one card per group with its icon and food count. */
.content .food-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin:0 0 1.6em;padding:0}
.content .food-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:start;gap:10px 12px;margin:0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.content .food-group-title{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:17px;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
@media (max-width:400px){.content .food-group-count{grid-column:1/-1;justify-self:start}}
.food-group-icon{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--food-tint);font-size:19px;line-height:1}
.food-group-count{white-space:nowrap;padding:2px 10px;border-radius:999px;background:var(--bg);color:var(--food-text);font-size:12.5px;font-weight:700}
.content .food-group-list{grid-column:1/-1;margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* Promotions (Black Friday, monthly campaigns): top bar, home banner, card and price badges, countdowns.
   A bold promotion is near-black with a warm yellow accent; a subtle one keeps the site's own colours. */
:root{--promo-ink:#10181b;--promo-accent:#ffd04d}
.countdown{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.topbar-promo{display:flex;align-items:center;gap:10px;min-width:0;margin:0;white-space:nowrap;color:#fff}
.topbar .topbar-promo a{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;text-decoration:none}
.topbar .topbar-promo a:hover .topbar-promo-text{text-decoration:underline}
.topbar-promo-text{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.topbar-promo-clock{flex:none}
.topbar-promo-preview{flex:none;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11.5px;font-weight:700}
.topbar.is-promo{background:var(--promo-ink)}
.topbar.is-promo .topbar-promo strong{flex:none;padding:2px 10px;border-radius:999px;background:var(--promo-accent);color:var(--promo-ink);font-size:12px}
.topbar.is-promo .countdown{color:var(--promo-accent)}
@media (max-width:639px){.topbar.is-promo .topbar-promo-text,.topbar:not(.is-promo) .topbar-promo-clock{display:none}}
.promo-banner{padding-top:clamp(14px,2vw,22px)}
.promo-banner-inner{display:grid;gap:18px 32px;align-items:center;padding:clamp(20px,3vw,32px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);background:var(--promo-ink);color:#c9d6da;box-shadow:var(--shadow)}
@media (min-width:860px){.promo-banner-inner{grid-template-columns:minmax(0,1fr) auto}}
.promo-banner-name{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;background:var(--promo-accent);color:var(--promo-ink);font-size:13px;font-weight:800}
.promo-banner h2{margin:0 0 6px;color:#fff;font-size:clamp(22px,2.6vw,32px);text-wrap:balance}
.promo-banner p{margin:0}
.promo-banner-side{display:grid;gap:12px;justify-items:start}
@media (min-width:860px){.promo-banner-side{justify-items:end;text-align:right}}
.promo-banner-clock{display:grid;gap:2px}
.promo-banner-clock span{font-size:13px;color:#9fb1b7}
.promo-banner .countdown{font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--promo-accent)}
.product-card-promo{position:absolute;top:12px;left:14px;z-index:1;padding:5px 12px;border-radius:999px;background:var(--promo-ink);color:var(--promo-accent);font-size:12.5px;font-weight:800}
.sale-note.is-bold .sale-badge{border-color:var(--promo-ink);background:var(--promo-ink);color:var(--promo-accent)}
.promo-deadline{margin:0 0 14px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--warn-tint);color:var(--warn-text)}
.promo-deadline p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:14px;font-weight:600}
.promo-deadline .icon{width:16px;height:16px}
.promo-deadline small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.summary-box .promo-deadline{margin:12px 0 0}

/* Holiday themes (Ünnepi témák, SiteThemes): a colour band under the header and a slim greeting strip.
   Decoration only: prices, buttons and brand colours stay; the strip is skipped while a promotion bar shows. */
.season{--season-1:#c62828;--season-2:#2e6b3a;--season-line:#e3d3d3;--season-band:repeating-linear-gradient(90deg,var(--season-1) 0 28px,var(--season-2) 28px 56px)}
.season-new-year{--season-1:#c9a23a;--season-2:#1f3a68}
.season-valentine{--season-1:#d6336c;--season-2:#8f1d3f}
.season-womens-day{--season-1:#e9b100;--season-2:#7d5ba6}
.season-national-day{--season-1:#c8102e;--season-2:#2f7d32;--season-band:linear-gradient(90deg,#c8102e 0 33.34%,#fff 33.34% 66.67%,#2f7d32 66.67%)}
.season-easter{--season-1:#f0c845;--season-2:#6a9e3c}
.season-mothers-day{--season-1:#e5738f;--season-2:#b04565}
.season-pentecost{--season-1:#e06a8a;--season-2:#e2b53a;--season-band:linear-gradient(90deg,#6a9e3c,var(--season-1),#6a9e3c)}
.season-st-nicholas{--season-1:#c62828;--season-2:#fff;--season-band:repeating-linear-gradient(90deg,var(--season-1) 0 28px,#fff 28px 40px)}
.season .site-header::after{content:"";position:absolute;inset:auto 0 -1px;height:3px;background:var(--season-band);pointer-events:none}
.season-ribbon{background:color-mix(in srgb,var(--season-1) 13%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--season-1) 28%,var(--surface));color:var(--heading)}
.season-ribbon-inner{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;margin-block:0;padding-block:6px;font-size:14px;font-weight:650;line-height:1.35}
.season-ornament{flex:none;width:22px;height:22px}
.season-ribbon-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:639px){.season-ribbon-text{white-space:normal;text-wrap:balance}}
.season-ribbon-preview{flex:none;padding:1px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:700}
@media print{.season-ribbon,.season .site-header::after{display:none}}
.season-ornament .so-1{fill:var(--season-1)}
.season-ornament .so-2{fill:var(--season-2)}
.season-ornament .so-s1{stroke:var(--season-1)}
.season-ornament .so-s2{stroke:var(--season-2)}
.season-ornament .so-line{stroke:var(--season-line)}
/* Holiday theme extras (each switchable per theme): faint section tint, home hero ornaments, footer band and greeting, first-view animation. */
.season-tint{--bg:color-mix(in srgb,var(--season-1) 6%,var(--surface));--bg-alt:color-mix(in srgb,var(--season-1) 10%,var(--surface))}
.season-hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.season-hero-ornament{position:absolute;opacity:.16}
.season-hero-ornament.is-one{top:14px;right:4%;width:clamp(64px,9vw,120px);height:clamp(64px,9vw,120px);transform:rotate(12deg)}
.season-hero-ornament.is-two{bottom:18px;left:-14px;width:clamp(56px,7vw,96px);height:clamp(56px,7vw,96px);transform:rotate(-14deg)}
.season-hero-ornament.is-three{display:none;top:46%;right:47%;width:48px;height:48px;transform:rotate(-6deg);opacity:.11}
@media (min-width:960px){.season-hero-ornament.is-three{display:block}}
@media (max-width:719px){.season-hero-ornament.is-two{display:none}}
.site-footer.is-season{position:relative}
.site-footer.is-season::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--season-band)}
.footer-season{display:flex;align-items:center;justify-content:center;gap:10px;margin-block:0;padding-block:14px;border-top:1px solid rgba(255,255,255,.1);color:#fff;font-weight:650;text-align:center}
.season-fx{position:fixed;inset:0;z-index:35;overflow:hidden;pointer-events:none;transition:opacity 1.4s ease}
.season-fx.is-fading{opacity:0}
.season-fx-item{position:absolute;top:0;left:var(--x);width:calc(12px * var(--s));height:calc(12px * var(--s));opacity:0;animation:season-fall var(--d) linear var(--delay) 1 forwards}
.season-fx-snow{--snow:#8fc3dc}
:root[data-theme="dark"] .season-fx-snow{--snow:#e8f3f8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .season-fx-snow{--snow:#e8f3f8}}
.season-fx-snow .season-fx-item{width:calc(18px * var(--s));height:calc(18px * var(--s))}
.season-fx-snow .season-fx-item svg{display:block;width:100%;height:100%;fill:none;stroke:var(--snow);stroke-width:2;stroke-linecap:round}
.season-fx-mimosa .season-fx-item{border-radius:50%;background:#f2c12e;box-shadow:inset -2px -2px 0 rgba(160,110,0,.25)}
.season-fx-petals .season-fx-item{width:calc(10px * var(--s));height:calc(15px * var(--s));border-radius:80% 0 80% 0;background:var(--season-1)}
.season-fx-petals .season-fx-item:nth-child(3n){background:var(--season-2)}
.season-fx-confetti .season-fx-item{width:calc(6px * var(--s));height:calc(12px * var(--s));border-radius:2px;background:var(--season-1)}
.season-fx-confetti .season-fx-item:nth-child(2n){background:var(--season-2)}
.season-fx-confetti .season-fx-item:nth-child(5n){width:calc(8px * var(--s));height:calc(8px * var(--s));border-radius:50%;background:#f6d77a}
.season-fx-hearts .season-fx-item{top:auto;bottom:0;width:calc(16px * var(--s));height:calc(16px * var(--s));animation-name:season-rise}
.season-fx-hearts .season-fx-item svg{display:block;width:100%;height:100%;fill:var(--season-1)}
.season-fx-hearts .season-fx-item:nth-child(3n) svg{fill:var(--season-2)}
@keyframes season-fall{0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(0)}10%{opacity:.9}85%{opacity:.85}100%{opacity:0;transform:translate3d(var(--drift),104vh,0) rotate(var(--r))}}
@keyframes season-rise{0%{opacity:0;transform:translate3d(0,6vh,0) scale(.8)}15%{opacity:.85}80%{opacity:.7}100%{opacity:0;transform:translate3d(var(--drift),-100vh,0) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.season-fx{display:none}}
@media print{.season-hero,.footer-season,.season-fx{display:none!important}}

/* Builder rows of one-third columns holding only a heading (e.g. "Miben segíthet…" on the counselling
   product): short benefit tiles with a check mark, not a wall of big headings. Merged card rows
   (.cms-cards, the symptom pages' cause and sign lists) keep their own compact tiles, else the two
   frames nest and the text overflows on phones. */
.content .cms-row:not(.cms-cards)>.cms-col-1-3>.cms-h3:only-child{position:relative;display:flex;align-items:center;height:100%;margin:0;padding:14px 16px 14px 50px;font-size:16px;line-height:1.35;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.content .cms-row:not(.cms-cards)>.cms-col-1-3>.cms-h3:only-child::before{content:"";position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:var(--radius-sm);background:var(--test-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7d22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.content .cms-row:not(.cms-cards):has(>.cms-col-1-3>.cms-h3:only-child){row-gap:12px;margin-bottom:12px}
.content .cms-row-single:has(+.cms-row:not(.cms-cards)>.cms-col-1-3>.cms-h3:only-child){margin-top:clamp(28px,4vw,48px);margin-bottom:14px}
.content .cms-row:not(.cms-cards):has(>.cms-col-1-3>.cms-h3:only-child)+.cms-row:not(:has(>.cms-col-1-3>.cms-h3:only-child)){margin-top:clamp(32px,4vw,56px)}

/* Home: intolerance vs allergy comparison and grouped symptom links */
.compare-cards{display:grid;gap:16px;max-width:920px;margin:0 auto}
@media (min-width:720px){.compare-cards{grid-template-columns:1fr 1fr}}
.compare-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,26px)}
.compare-card.is-highlight{border:2px solid var(--food)}
.compare-card h3{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 10px}
.compare-card h3 .icon{color:var(--muted)}
.compare-card.is-highlight h3 .icon{color:var(--food-text)}
.compare-card dl{margin:0}
.compare-card dl div{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.compare-card dt{color:var(--muted);font-weight:600}
.compare-card dd{margin:0;color:var(--ink)}
@media (max-width:400px){.compare-card dl div{grid-template-columns:1fr;gap:2px}}
.compare-more{text-align:center;margin:14px 0 0}
.symptom-groups-wrap{margin-top:clamp(32px,5vw,52px)}
.symptom-groups-wrap>h3{text-align:center;font-size:20px;margin-bottom:16px}
.symptom-groups{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.symptom-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px}
.symptom-group h4{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 8px}
.symptom-group h4 .icon{color:var(--link)}
.symptom-group a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35}
.symptom-group li+li a{border-top:1px solid var(--line)}
.symptom-group a::after{content:" →";color:var(--cta)}
.symptom-group a:hover{color:var(--link)}
.symptom-groups-cta{text-align:center;margin:20px 0 0}