/* =========================================================
   TORDA – Mikroelemekkel dúsított szelet
   Megosztott stíluslap (természetes, letisztult újragondolás)
   ========================================================= */

/* ---------- Design tokenek ---------- */
:root{
  /* Természetes alap-paletta */
  --ink:        #16263f;   /* mély navy – márka tinta */
  --ink-soft:   #3c4a60;
  --muted:      #6b7280;
  --line:       #e7e0d2;   /* homokos vonalak */
  --bg:         #faf7f0;   /* meleg törtfehér */
  --bg-warm:    #f3ede0;   /* homok felület */
  --surface:    #ffffff;
  --leaf:       #4f7a4e;   /* természetes zöld */
  --leaf-deep:  #3c6140;

  /* Termékszínek (a dobozokról) */
  --kerecseny:  #119c95;   /* türkiz */
  --kerecseny-d:#0c7a74;
  --turan:      #2a57c4;   /* kék */
  --turan-d:    #1e3f94;
  --toldi:      #b81e96;   /* magenta */
  --toldi-d:    #8c1572;

  /* Alapból a navy az aktív akcentus; oldalanként felülírható */
  --accent:     var(--ink);
  --accent-d:   #0d1a2e;

  --radius:   18px;
  --radius-sm:12px;
  --shadow-sm: 0 2px 10px rgba(22,38,63,.06);
  --shadow:    0 14px 40px rgba(22,38,63,.10);
  --shadow-lg: 0 30px 70px rgba(22,38,63,.16);

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --black: "UnifrakturMaguntia", "Spectral", serif;

  /* Szekció-gradiens – a hangoló panel állítja, böngészőben mentve */
  --grad-c1:    #f7f0e2;   /* 0%  */
  --grad-c2:    #ede4d0;   /* 45% */
  --grad-c3:    #dde6cf;   /* 100% */
  --grad-angle: 280deg;
}

/* gradiens-hátterű szekciók (a hangoló ezeket frissíti) */
.grad-bg{ background:linear-gradient(var(--grad-angle), var(--grad-c1) 0%, var(--grad-c2) 45%, var(--grad-c3) 100%); }
/* tükrözött irány – a tápérték szekciókhoz, hogy megmaradjon az eredeti ritmus */
.grad-bg.grad-mirror{ background:linear-gradient(calc(var(--grad-angle) + 180deg), var(--grad-c1) 0%, var(--grad-c2) 45%, var(--grad-c3) 100%); }
/* a gradiens záró-színével megegyező tömör háttér (rendelés-szekció) */
.grad-end-bg{ background:var(--grad-c3); }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,5.2vw,3.7rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
p{ margin:0 0 1.1em; }
strong,b{ font-weight:700; color:var(--ink); }
em,i{ font-style:italic; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.section{ padding:clamp(54px,8vw,108px) 0; }
.section--warm{ background:var(--bg-warm); }

/* parallax section (javasolt alkalmazás) */
.section--parallax{ position:relative; overflow:hidden; isolation:isolate; }
.section--parallax .wrap{ position:relative; z-index:1; }
.parallax-bg{
  position:absolute; left:0; right:0; top:-18%; height:136%;
  background:url("../images/fa.jpg") center 30% / cover no-repeat;
  will-change:transform; z-index:0;
}
.parallax-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(250,247,240,.30), rgba(250,247,240,.55));
}
@media (max-width:700px){
  .parallax-bg::after{ background:rgba(250,247,240,.45); }
}
.lead{ font-size:1.12rem; color:var(--ink-soft); }
.center{ text-align:center; }
.eyebrow{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:.74rem; color:var(--accent);
  margin:0 0 14px; display:inline-block;
}
.section-head{ max-width:680px; margin:0 auto clamp(36px,5vw,58px); text-align:center; }

/* ---------- Top contact bar ---------- */
.topbar{
  background:var(--ink); color:#e9eef6;
  font-size:.82rem; letter-spacing:.01em;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:42px; flex-wrap:wrap;
}
.topbar a{ color:#e9eef6; }
.topbar .order{ font-weight:700; }
.topbar .order em{ color:#b9c6da; font-weight:400; }
.topbar-info{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.topbar-info span{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-info b{ color:#fff; font-weight:700; }
.topbar .ico{ width:15px; height:15px; opacity:.7; flex:none; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(250,247,240,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{ box-shadow:var(--shadow-sm); background:rgba(250,247,240,.95); }
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{
  font-family:var(--black);
  font-size:2.15rem; line-height:1; color:var(--ink);
  letter-spacing:.02em; padding-top:4px;
}
.brand .mark .dot{ color:var(--leaf); }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:inline-block; padding:10px 14px; border-radius:10px;
  font-weight:700; font-size:.96rem; color:var(--ink-soft);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(22,38,63,.06); }
.nav-links a.active{ color:var(--accent); }
.nav-links a.active::after{
  content:""; display:block; height:2px; border-radius:2px;
  background:var(--accent); margin-top:3px;
}
.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:var(--surface); border-radius:12px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before{ transform:translateY(-6px); }
.nav-toggle span::after{ transform:translateY(4px); }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ transform:translateY(0) rotate(45deg); }
body.nav-open .nav-toggle span::after{ transform:translateY(-2px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-family:var(--sans);
  font-weight:800; font-size:.96rem; letter-spacing:.01em; cursor:pointer;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 32%, transparent); }
.btn-primary:hover{ background:var(--accent-d); }
.btn-leaf{ background:var(--leaf); color:#fff; box-shadow:0 10px 24px rgba(79,122,78,.3); }
.btn-leaf:hover{ background:var(--leaf-deep); }
.btn-ghost{ background:transparent; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%, transparent); }
.btn-ghost:hover{ background:color-mix(in srgb,var(--accent) 8%, transparent); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(22,38,63,.35) 0%, rgba(22,38,63,.18) 40%, rgba(22,38,63,.55) 100%);
}
.hero-inner{ padding:clamp(80px,13vw,150px) 0 clamp(64px,10vw,120px); }
.hero-card{
  max-width:720px; margin:0 auto; text-align:center; color:#fff;
}
.hero-card h1{ color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.3); }
.hero-card p{ color:#f2f5fa; font-size:1.1rem; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* element badges */
.elements{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:30px 0 0; padding:0; list-style:none; }
.el-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%; color:#fff; line-height:1.05;
  box-shadow:0 8px 22px rgba(0,0,0,.22); border:2px solid rgba(255,255,255,.35);
}
.el-badge .sym{ font-family:var(--serif); font-weight:700; font-size:1.12rem; }
.el-badge .nm{ font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; opacity:.95; }
.el-c{ background:#d5483b; } .el-se{ background:var(--kerecseny); }
.el-ca{ background:var(--turan); } .el-mg{ background:var(--leaf); }
.el-fe{ background:#9a5b2e; } .el-zn{ background:#5b6e86; } .el-d3{ background:#e0a32a; }

/* element icons (image badges) */
.el-ico{ display:flex; align-items:center; justify-content:center; }
.el-ico img{
  display:block; height:78px; width:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));
  transition:transform .25s var(--ease);
}
.el-ico:hover img{ transform:translateY(-4px) scale(1.05); }

/* brand logo (header) */
.brand-logo{ display:block; height:38px; width:auto; }

/* footer logo */
.footer-logo{ display:block; height:42px; width:auto; filter:brightness(0) invert(1); }

/* logo under callout */
.callout-logo{ display:flex; justify-content:center; margin-top:34px; }
.callout-logo img{ display:block; height:46px; width:auto; opacity:.9; }

/* curved divider */
.curve-top{ display:block; width:100%; height:60px; margin-bottom:-1px; }

/* ---------- Product cards ---------- */
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcard{
  position:relative; background:var(--surface); border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:30px 26px 30px; text-align:center; overflow:hidden;
  transition:transform .6s var(--ease), box-shadow 1s var(--ease);
  display:flex; flex-direction:column;
}
.pcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--c, var(--ink));
}
.pcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pcard .glow{
  position:absolute; inset:0 0 auto 0; height:230px; z-index:0;
  background:radial-gradient(120% 120% at 50% -20%, color-mix(in srgb,var(--c) 16%, transparent), transparent 70%);
  pointer-events:none;
}
.pcard > *{ position:relative; z-index:1; }
.pcard .box-wrap{ height:230px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.pcard .box-wrap img{ max-height:230px; width:auto; filter:drop-shadow(0 18px 26px rgba(22,38,63,.22)); transition:transform .65s var(--ease); }
.pcard:hover .box-wrap img{ transform:translateY(-6px) scale(1.03); }
.pcard h3{ color:var(--c); font-style:italic; margin-bottom:6px; }
.pcard .tagline{ font-weight:800; color:var(--ink); margin-bottom:8px; font-size:1rem; }
.pcard .desc{ color:var(--muted); font-size:.95rem; flex:1; }
.pcard .price{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:13px 24px; border-radius:999px; font-weight:800; color:#fff;
  background:var(--c); box-shadow:0 10px 22px color-mix(in srgb,var(--c) 34%, transparent);
  transition:transform .25s var(--ease), filter .25s var(--ease); align-self:center;
}
.pcard .price:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.pcard .price .i{ width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-family:var(--serif);font-style:italic;}
.theme-k{ --c:var(--kerecseny); } .theme-t{ --c:var(--turan); } .theme-d{ --c:var(--toldi); }

/* Toldi háttér – eltávolítva (a kártyán nincs háttérkép) */
.theme-d::after{ display:none; }

/* Toldi háttér beállító – ideiglenes segéd-vezérlő */
.toldi-tuner{
  position:fixed; left:18px; bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:12px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px;
  padding:11px 15px; box-shadow:0 16px 40px -14px rgba(22,38,63,.5);
  font:600 .8rem/1 system-ui, sans-serif; color:var(--ink);
}
.toldi-tuner label{ white-space:nowrap; letter-spacing:.01em; }
.toldi-tuner input[type=range]{ width:150px; accent-color:var(--toldi); cursor:pointer; }
.toldi-tuner .val{ min-width:34px; text-align:right; font-variant-numeric:tabular-nums; color:var(--toldi); }
.toldi-tuner .x{
  border:none; background:transparent; color:var(--muted, #888);
  font-size:1.05rem; line-height:1; cursor:pointer; padding:2px 4px; border-radius:6px;
}
.toldi-tuner .x:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
@media print{ .toldi-tuner{ display:none; } }
/* ha a gradiens-hangoló is jelen van, a Toldi-hangoló feljebb csúszik */
body:has(.grad-tuner) .toldi-tuner{ bottom:84px; }

/* Gradiens-háttér hangoló – ideiglenes segéd-vezérlő */
.grad-tuner{
  position:fixed; left:18px; bottom:18px; z-index:9999; width:250px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 40px -14px rgba(22,38,63,.5);
  font:600 .8rem/1.35 system-ui, sans-serif; color:var(--ink); overflow:hidden;
}
.grad-tuner .gt-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; cursor:pointer; background:color-mix(in srgb, var(--ink) 4%, #fff);
  border-bottom:1px solid var(--line);
}
.grad-tuner .gt-head .gt-prev{ width:34px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.12); }
.grad-tuner .gt-head b{ flex:1; letter-spacing:.01em; }
.grad-tuner .gt-x{ border:none; background:none; cursor:pointer; font-size:1.15rem; color:var(--muted); line-height:1; padding:0 2px; }
.grad-tuner .gt-x:hover{ color:var(--ink); }
.grad-tuner .gt-body{ padding:12px 13px; display:grid; gap:10px; }
.grad-tuner.collapsed .gt-body{ display:none; }
.grad-tuner .gt-row{ display:flex; align-items:center; gap:10px; }
.grad-tuner .gt-row label{ flex:1; font-weight:600; color:var(--ink-soft); }
.grad-tuner input[type=color]{ width:40px; height:26px; border:1px solid var(--line); border-radius:7px; background:none; cursor:pointer; padding:2px; }
.grad-tuner input[type=range]{ flex:1; accent-color:var(--ink); cursor:pointer; }
.grad-tuner .gt-val{ min-width:46px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.grad-tuner .gt-reset{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px; cursor:pointer;
  font:inherit; color:var(--ink-soft); margin-top:2px;
}
.grad-tuner .gt-reset:hover{ background:color-mix(in srgb, var(--ink) 6%, #fff); }
@media print{ .grad-tuner{ display:none; } }

/* sport badge */
.sport-tag{
  position:absolute; top:24px; right:-42px; transform:rotate(45deg);
  background:var(--toldi); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 50px; z-index:3;
  box-shadow:0 4px 12px rgba(0,0,0,.2); white-space:nowrap;
}

/* ---------- Callout (alkalmazás) ---------- */
.callout{
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--line); border-left:5px solid var(--leaf);
  border-radius:var(--radius); padding:clamp(26px,4vw,44px); box-shadow:0 30px 70px -18px rgba(22,38,63,.45), 0 12px 28px -12px rgba(22,38,63,.3);
}
.callout h2{ display:flex; align-items:center; gap:14px; font-size:1.6rem; }
.callout .badge-ico{
  flex:none; width:46px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--leaf) 14%, #fff);
  display:flex; align-items:center; justify-content:center; color:var(--leaf);
}
.callout .badge-ico-img{
  width:34px; height:34px; background:#4f7a4e;
  -webkit-mask:url("../images/info-icon.png") center / contain no-repeat;
  mask:url("../images/info-icon.png") center / contain no-repeat;
}
.callout p{ font-size:1rem; color:var(--ink-soft); }

/* unscoped badge-ico (prose headings) */
.prose h2.with-ico{ display:flex; align-items:center; gap:14px; }
.with-ico .badge-ico{
  flex:none; width:46px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--leaf) 14%, #fff);
  display:flex; align-items:center; justify-content:center; color:var(--leaf);
}
.with-ico .badge-ico-img{
  width:34px; height:34px; background:#4f7a4e;
  -webkit-mask:url("../images/info-icon.png") center / contain no-repeat;
  mask:url("../images/info-icon.png") center / contain no-repeat;
}
.callout .hl{ background:linear-gradient(180deg, transparent 62%, color-mix(in srgb,var(--leaf) 26%, transparent) 0); }

/* dosage steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 6px; }
.step{ background:var(--bg-warm); border-radius:var(--radius-sm); padding:18px 18px; text-align:center; }
.step .day{ font-family:var(--serif); font-weight:700; color:var(--leaf); font-size:1.05rem; }
.step .amt{ font-size:.92rem; color:var(--ink-soft); margin-top:4px; }
.step .big{ font-size:1.5rem; }

/* ---------- Tordáról leírás + Javasolt alkalmazás (egymás mellett) ---------- */
.alkalmazas-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:980px){ .alkalmazas-grid{ grid-template-columns:1fr; } }

/* ---------- About teaser ---------- */
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.about .mark-big{ font-family:var(--black); font-size:clamp(3rem,7vw,5rem); color:var(--ink); line-height:.9; margin-bottom:18px; }
.about ul{ margin:0 0 22px; padding:0; list-style:none; display:grid; gap:14px; }
.about li{ position:relative; padding-left:34px; color:var(--ink-soft); }
.about li::before{
  content:""; position:absolute; left:0; top:9px; width:18px; height:18px;
  background:var(--leaf); border-radius:50% 50% 50% 0; transform:rotate(45deg);
}
.about .quote{ font-style:italic; color:var(--ink); border-top:1px solid var(--line); padding-top:20px; }
.about-media{ position:relative; }
.about-media .falcon-wrap{
  background:radial-gradient(120% 100% at 70% 30%, #fff, var(--bg-warm));
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); padding:18px;
}
.about-media img{ width:100%; height:auto; display:block; }

/* ---------- FAQ ---------- */
.parallax-bg--faq{ background-image:url("../images/mezo.jpg"); background-position:center 40%; }
.parallax-bg--faq::after{ background:linear-gradient(180deg, rgba(250,247,240,.26), rgba(250,247,240,.46)); }
.faq{ max-width:820px; margin:0 auto; display:grid; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
#gyik .faq-item{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-color:rgba(255,255,255,.5);
}
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:20px 56px 20px 22px; font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink);
  position:relative; line-height:1.35;
}
.faq-q::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--leaf); border-bottom:2px solid var(--leaf);
  transform:translateY(-65%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq-item.open .faq-q::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 22px 20px; margin:0; color:var(--ink-soft); font-size:1rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:920px; margin:0 auto; }
.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  text-align:center; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.contact-card .ic{ width:48px; height:48px; border-radius:14px; background:color-mix(in srgb,var(--leaf) 12%,#fff); color:var(--leaf); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.contact-card .lbl{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; }
.contact-card .val{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin-top:4px; }

/* ---------- Product page ---------- */
.prod-hero{ background:var(--bg-warm); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.prod-hero.has-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:.16;
}
.prod-hero .wrap{ position:relative; z-index:1; }
.prod-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,66px); align-items:center; padding:clamp(40px,6vw,76px) 0; }
.prod-figure{ display:flex; align-items:center; justify-content:center; }
.prod-figure img{ max-height:440px; width:auto; filter:drop-shadow(0 30px 50px rgba(22,38,63,.25)); }
.prod-intro .kicker{ display:inline-flex; align-items:center; gap:9px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; margin-bottom:8px; }
.prod-intro h1{ color:var(--accent); font-style:italic; }
.price-pill{
  display:inline-flex; align-items:center; gap:10px; margin:8px 0 22px;
  background:var(--accent); color:#fff; font-weight:800; font-size:1.15rem;
  padding:12px 26px; border-radius:999px; box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 32%, transparent);
}

/* info blocks */
.info-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow-sm); }
.info-card h3{ color:var(--accent); margin-bottom:12px; }
.info-card ul{ margin:0; padding-left:20px; color:var(--ink-soft); }
.info-card ul li{ margin-bottom:7px; }

/* címikon + áttetsző (jegelt) kártyák – Kerecseny */
.info-card h3{ display:flex; align-items:center; gap:11px; }
.info-ico{
  flex:none; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, #fff);
  color:var(--accent);
}
.info-ico svg{ width:23px; height:23px; }
.info-card--glass{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-color:color-mix(in srgb, #fff 55%, transparent);
}

/* nutrition tables */
.tables{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.nut{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.nut h4{ margin:0; padding:16px 20px; background:var(--accent); color:#fff; font-family:var(--serif); font-size:19px; }
.nut h4 small{ display:block; font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.8; opacity:.82; letter-spacing:.01em; margin-top:2px; }
table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.nut th, .nut td{ padding:11px 20px; text-align:left; border-bottom:1px solid var(--line); }
.nut thead th{ background:color-mix(in srgb,var(--accent) 8%, #fff); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.nut td:last-child, .nut th:last-child{ text-align:right; }
.nut tbody tr:last-child td{ border-bottom:0; }
.nut tbody tr:nth-child(even){ background:color-mix(in srgb,var(--accent) 4%, transparent); }
.nut td.val{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.nut .nrv{ color:var(--accent); font-weight:800; }

.note-strip{
  background:color-mix(in srgb,var(--accent) 9%, #fff); border:1px dashed color-mix(in srgb,var(--accent) 40%, transparent);
  border-radius:var(--radius); padding:22px 26px; text-align:center; color:var(--ink-soft); font-style:italic;
}

/* order strip */
.order-strip{
  background:var(--accent); color:#fff; border-radius:var(--radius); padding:clamp(30px,5vw,52px);
  text-align:center; box-shadow:var(--shadow); background-image:linear-gradient(135deg, var(--accent), var(--accent-d));
}
.order-strip h2{ color:#fff; }
.order-strip p{ color:rgba(255,255,255,.85); }
.order-strip .btn-primary{ background:#fff; color:var(--accent); box-shadow:0 12px 26px rgba(0,0,0,.2); }
.order-strip .btn-primary:hover{ background:#fff; filter:brightness(.96); }
.order-strip .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.order-strip .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.order-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* rendelés-strip halvány futár-képpel + zöldes fátyollal (Kerecseny) */
.order-strip--courier{
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--accent) 90%, transparent), color-mix(in srgb,var(--accent-d) 95%, transparent)),
    url("../images/tordaszelet-rendeles.jpg") center/cover no-repeat;
}

/* prose for long text */
.prose{ max-width:780px; margin:0 auto; }
.prose p{ color:var(--ink-soft); }
.prose .pull{
  font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.4; color:var(--ink);
  text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 0; margin:34px 0;
}
.prose blockquote{
  margin:30px 0; padding:18px 26px; border-left:4px solid var(--leaf);
  background:var(--bg-warm); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic; color:var(--ink);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#cdd6e4; padding:clamp(46px,6vw,72px) 0 34px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; }
.site-footer .mark{ font-family:var(--black); font-size:2.4rem; color:#fff; line-height:1; }
.site-footer h4{ color:#fff; font-family:var(--sans); font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:16px; }
.site-footer a{ color:#cdd6e4; transition:color .2s var(--ease); }
.site-footer a:hover{ color:#fff; }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-list li{ display:flex; align-items:center; gap:10px; }
.footer-list .ico{ width:16px; height:16px; opacity:.6; flex:none; }
.foot-social{ display:flex; gap:12px; margin-top:8px; }
.foot-social a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.foot-social a:hover{ background:rgba(255,255,255,.18); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:22px; font-size:.82rem; color:#9aa6ba; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- Scroll-up ---------- */
.scrollup{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:var(--leaf); color:#fff; box-shadow:0 12px 28px rgba(60,97,64,.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .25s;
}
.scrollup.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.scrollup:hover{ background:var(--leaf-deep); transform:translateY(-3px); }
.scrollup svg{ width:22px; height:22px; }

/* ---------- Cookie bar ---------- */
.cookie{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
  z-index:95; max-width:680px; width:calc(100% - 40px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:18px 22px; display:flex; gap:16px; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  flex-wrap:wrap;
}
.cookie.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.cookie p{ margin:0; font-size:.88rem; color:var(--ink-soft); flex:1; min-width:200px; }
.cookie .cookie-btns{ display:flex; gap:10px; }
.cookie .btn{ padding:10px 20px; font-size:.85rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .products{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .about{ grid-template-columns:1fr; }
  .about-media{ order:-1; max-width:460px; margin:0 auto; }
  .prod-grid{ grid-template-columns:1fr; text-align:center; }
  .prod-intro .kicker{ justify-content:center; }
  .prod-figure{ order:-1; }
  .info-cols{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  /* a fejléc backdrop-filtere fixed befoglalót hozna létre, ami a mobilmenüt a fejléc magasságába zárná – mobilon kikapcsoljuk */
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(250,247,240,.97); }
  .site-header.scrolled{ background:rgba(250,247,240,.98); }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,330px);
    background:var(--surface); flex-direction:column; align-items:stretch;
    padding:90px 22px 30px; gap:6px; box-shadow:var(--shadow-lg);
    transform:translateX(105%); transition:transform .4s var(--ease); z-index:70;
  }
  body.nav-open .nav-links{ transform:none; }
  .nav-links a{ padding:14px 16px; font-size:1.05rem; border-radius:12px; }
  .nav-links a.active::after{ display:none; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(22,38,63,.4); opacity:0; visibility:hidden; transition:opacity .3s; z-index:60; }
  body.nav-open .nav-scrim{ opacity:1; visibility:visible; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .topbar .wrap{ gap:4px 14px; min-height:0; padding-top:8px; padding-bottom:8px; }
  .topbar-info{ gap:4px 14px; }
  .topbar .order{ display:block; width:100%; }
  .tables{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .el-badge{ width:62px; height:62px; }
  .scrollup{ right:16px; bottom:16px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* =========================================================
   Egységes finomítások – minden oldalon azonos megjelenés
   (a főoldalon kézzel beállított értékek átemelése)
   ========================================================= */
/* Felső információs sáv – azonos a főoldallal */
.topbar .order strong,
.topbar .order em{ color:#fff; }
.topbar-info b{ font-weight:300; }

/* Menü – azonos betűsúly minden oldalon */
.nav-links a{ font-weight:500; }

/* Lábléc – kézzel beállított betűméretek minden oldalon */
.footer-logo + p{ font-size:17px; }
.site-footer .footer-list,
.site-footer .footer-list a{ font-size:15px; }

/* Ár betűtípusa – a főoldali termékárral egységes (Spectral) */
.pcard .price,
.price-pill{ font-family:var(--serif); }

/* Logó a „Torda” felirat helyén (Tordáról-blokk) */
.about .mark-big img{ display:block; height:clamp(54px,9vw,88px); width:auto; }