/* Superhuman Laboratories — design tokens (ported 1:1 from the design system) */
:root{
  --sh-gold-050:#FBF6EA; --sh-gold-100:#F3E7C7; --sh-gold-300:#D8B764;
  --sh-gold-400:#C9A227; --sh-gold-500:#B4832E; --sh-gold-600:#9C6E24; --sh-gold-700:#7C551B;
  --sh-gold-metal:linear-gradient(135deg,#E7CE82 0%,#C9A227 42%,#8E6620 100%);
  --sh-gold-button:linear-gradient(180deg,#BC8737 0%,#A26E1F 100%);
  --sh-ink-900:#141414; --sh-ink-800:#1F1F1F; --sh-ink-700:#2B2B2B;
  --sh-ink-500:#6E6A63; --sh-ink-400:#8F8A82;
  --sh-line:#E7E3DC; --sh-line-strong:#D9D4CC;
  --sh-surface:#FFFFFF; --sh-surface-2:#FAF9F7; --sh-surface-3:#F4F1EC;
  --sh-success:#2F8F5B; --sh-success-bg:#EAF5EE; --sh-success-line:#CBE8D6;
  --sh-info-bg:#FBF3E3; --sh-info-line:#F0E1C4; --sh-danger:#C0492F;
  --sh-font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --sh-font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --sh-radius-sm:6px; --sh-radius-md:10px; --sh-radius-lg:14px; --sh-radius-pill:999px;
  --sh-shadow-sm:0 1px 3px rgba(20,20,20,.06);
  --sh-shadow-md:0 4px 16px rgba(20,20,20,.08);
  --sh-shadow-lg:0 10px 30px rgba(20,20,20,.10);
  --sh-space-1:4px; --sh-space-2:8px; --sh-space-3:12px; --sh-space-4:16px;
  --sh-space-5:24px; --sh-space-6:32px; --sh-space-7:48px; --sh-space-8:64px;
}

/* Global base styles (ported from the design's helmet <style> block) */
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
/* safety net: no stray element may cause horizontal scroll on mobile
   (clip keeps sticky/vertical scroll intact, unlike overflow:hidden) */
html{overflow-x:clip}
body{font-family:var(--sh-font-body);color:var(--sh-ink-700);background:var(--sh-surface-2);-webkit-font-smoothing:antialiased}
a{color:var(--sh-gold-600);text-decoration:none}
a:hover{color:var(--sh-gold-700)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sh-gold-500) !important;box-shadow:0 0 0 3px var(--sh-gold-050)}
button:focus-visible{outline:2px solid var(--sh-gold-500);outline-offset:2px}
.sh-cols{display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:start}
.sh-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.sh-pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.sh-listing{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.sh-nav-desktop{display:flex}
.sh-burger{display:none}
.sh-util-right{display:flex}
/* Sticky header block (logo bar + nav + mobile drawer) on every screen; the
   trust bar above it is outside this wrapper and scrolls away. */
.sh-sticky{position:sticky;top:0;z-index:50;background:var(--sh-surface);box-shadow:0 2px 12px rgba(0,0,0,.06)}
@media(max-width:980px){
  .sh-cols{grid-template-columns:1fr}
  .sh-summary{order:-1}
  .sh-hero{grid-template-columns:1fr}
  .sh-pdp{grid-template-columns:1fr}
  .sh-listing{grid-template-columns:1fr}
  .sh-nav-desktop{display:none !important}
  .sh-burger{display:inline-flex !important}
  .sh-util-right{display:none !important}
  /* trust badges: centred, compact, each on its own unbroken chip */
  .sh-util-left{width:100%;justify-content:center;gap:8px 18px}
  .sh-util-left>span{white-space:nowrap}
}
@media(max-width:640px){
  h1{font-size:34px !important}
  .sh-util-left{font-size:10.5px;gap:7px 14px}
  .sh-hero{gap:24px}
}
/* Cross-document view transitions: same-origin navigations crossfade instead
   of hard-cutting. Browsers without support simply ignore this. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

@keyframes trustMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sh-marquee:hover .sh-marquee-track{animation-play-state:paused}

/* Nav link states (ported from navStyle()) */
.sh-nav-link{font-family:var(--sh-font-display);font-weight:600;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;padding:6px 4px;
  border-bottom:2px solid transparent;color:var(--sh-ink-800);transition:color .15s ease;display:inline-block}
.sh-nav-link.active{border-bottom:2px solid var(--sh-gold-500);color:var(--sh-gold-600)}
.sh-nav-link.pep{display:inline-flex;align-items:center;gap:5px}
.sh-nav-link.pep,.sh-nav-link.pep.active{color:var(--sh-gold-600)}
.sh-drawer-link{font-family:var(--sh-font-display);font-weight:600;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;padding:12px 0;cursor:pointer;color:var(--sh-ink-800);
  border-bottom:1px solid var(--sh-line);display:block}
.sh-drawer-link.active,.sh-drawer-link.pep{color:var(--sh-gold-600)}
.sh-drawer-link.pep{display:inline-flex;align-items:center;gap:5px}
.sh-drawer-link.last{border-bottom:none}

/* ── Mobile drawer: subtle slide + fade open/close ── */
.sh-drawer{
  background:var(--sh-surface);
  display:flex;flex-direction:column;gap:2px;
  overflow:hidden;
  max-height:0;opacity:0;
  padding:0 24px;
  border-bottom:0 solid var(--sh-line);
  transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .26s ease,padding .34s ease;
}
.sh-drawer.open{
  max-height:80vh;opacity:1;
  padding:8px 24px 16px;
  border-bottom:1px solid var(--sh-line);
}
/* links ease in with a gentle stagger once the drawer is open */
.sh-drawer .sh-drawer-link{
  opacity:0;transform:translateY(-7px);
  transition:opacity .3s ease,transform .3s ease;
}
.sh-drawer.open .sh-drawer-link{opacity:1;transform:none}
.sh-drawer.open .sh-drawer-link:nth-child(1){transition-delay:.06s}
.sh-drawer.open .sh-drawer-link:nth-child(2){transition-delay:.10s}
.sh-drawer.open .sh-drawer-link:nth-child(3){transition-delay:.14s}
.sh-drawer.open .sh-drawer-link:nth-child(4){transition-delay:.18s}
.sh-drawer.open .sh-drawer-link:nth-child(5){transition-delay:.22s}
.sh-drawer.open .sh-drawer-link:nth-child(6){transition-delay:.26s}
.sh-drawer.open .sh-drawer-link:nth-child(7){transition-delay:.30s}

/* ── Hamburger bars morph into an X when open ── */
.sh-burger span{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;transform-origin:center}
.sh-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sh-burger.open span:nth-child(2){opacity:0}
.sh-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (prefers-reduced-motion: reduce){
  .sh-drawer,.sh-drawer .sh-drawer-link,.sh-burger span{transition:none !important}
}

/* ── Footer: tidy 2-column grid on mobile (logo included) ── */
@media(max-width:640px){
  .sh-foot-trust{grid-template-columns:1fr 1fr !important;gap:20px 16px}
  .sh-foot-cols{grid-template-columns:1fr 1fr !important;gap:26px 18px}
  /* row 1 = logo + contact details; row 2 = products + info links */
  .sh-foot-cols>div:nth-child(1){order:1}  /* logo */
  .sh-foot-cols>div:nth-child(4){order:2}  /* ügyfélszolgálat (kapcsolat) */
  .sh-foot-cols>div:nth-child(2){order:3}  /* termékek */
  .sh-foot-cols>div:nth-child(3){order:4}  /* információk */
  .sh-foot-bottom{justify-content:center !important;text-align:center}
  /* home category strip: left-align each icon+label so the icons line up in
     tidy columns instead of floating (centre shifts with each label's width) */
  .sh-cat-strip>a{justify-content:flex-start !important}
}

/* Icon helper (mirrors the design's inline mask spans) */
.sh-ico{display:inline-block;width:1.66em;height:1.66em;vertical-align:-0.38em;
  background:currentColor;mask:var(--ico) center / contain no-repeat;
  -webkit-mask:var(--ico) center / contain no-repeat}