@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-italic-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-italic-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-normal-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-normal-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;
}

/* =====================================================================
   FELKER STUDIO – fitness-v1 sablon (Studio-parametrizált; váza a Health Fitness
   Veszprém redesign). A tartalom a config tokenjeiből jön (index.html).
   Alap: a melod.hu világos témájának meleg, szürkés törtfehérje (#EEF0EA,
   papír #F6F7F2, mélyebb sáv #E4E7DF, tinta #191E1C) finom szemcsével. Ez
   minden témában AZONOS; a html[data-szin="..."] kapcsoló csak a pasztell
   akcentet cseréli (zsálya / púderkék / barack / levendula / vaj), az viszont
   a gombokon túl a hero-derengésen, a vélemény-sávon és a tónusos paneleken
   is látszik. A „--orange*" tokennevek a régi sablonból maradtak, ma már az
   adott téma akcentjét jelentik. A választót a .szinv lebegő widget adja.
   Gombok: neobrutál (2px tintakeret, 4px tömör árnyék, hoverre „lenyomódik").
   Type: Archivo variable (width axis for the condensed display cut).
   Motion: CSS scroll-driven animations where supported, IntersectionObserver
   reveals elsewhere, everything off under prefers-reduced-motion.
   ===================================================================== */

:root {
  color-scheme: light only;  /* stop phone browsers from auto-darkening the page */
  --white: #FFFFFF;
  --dark: #17181A;
  --dark-2: #232427;
  --dark-3: #2E3034;
  --on-dark: #F5F5F3;
  --on-dark-2: #A8A9AD;

  /* ── Semleges alap (melod.hu világos): minden témában ugyanez ── */
  --bg: #EEF0EA;             /* meleg, szürkés törtfehér */
  --paper: #F6F7F2;          /* a „fehér" sávok és kártyák: nem vakító fehér */
  --surface: #F6F7F2;
  --surface-2: #E4E7DF;      /* mélyebb, kőszürke panel */
  --ink: #191E1C;
  --ink-2: #454D49;
  --ink-3: #5F6763;
  --line: rgb(25 30 28 / .11);
  --line-2: rgb(25 30 28 / .2);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .11  0 0 0 .09 0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");

  /* ── Akcent: alap téma ZSÁLYA. A ?szin= / localStorage / választó
        a <html data-szin> attribútumot írja át, a többi téma lejjebb. ── */
  --orange: #B4CFA8;         /* gombkitöltés: pasztell, rajta tinta felirat (10:1) */
  --orange-hover: #A1BA97;   /* kicsit mélyebb pasztell (címkék hoverje) */
  --orange-deep: #3A6135;    /* akcent-szöveg/fókusz, AA a papíron és a tinten is */
  --orange-tint: #E1EADA;    /* nagyon halvány akcent-panel */

  --r: 16px;
  --r-btn: 6px;              /* neobrutál gomb: alig lekerekített */
  --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap-max: 1320px;
  --wrap-w: min(100vw - 2 * var(--gutter), var(--wrap-max));
  --nav-h: 68px;
  --sec-pad: clamp(4.5rem, 9vw, 8.5rem);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgb(25 30 28 / .04), 0 16px 40px -16px rgb(25 30 28 / .16);
  --brut: 4px 4px 0 0 var(--ink);  /* neobrutál tömör árnyék */
}

/* ── Pasztell akcent-témák: csak az akcent-tokeneket írják felül, az alap
      (háttér, papír, tinta) marad. Az --orange-deep minden témában AA fölött
      olvasható a papíron, az alapon és a tinten (ellenőrizve: 5.5–7.5:1). ── */
html[data-szin="zold"]      { --orange:#B4CFA8; --orange-hover:#A1BA97; --orange-deep:#3A6135; --orange-tint:#E1EADA; }
html[data-szin="kek"]       { --orange:#A9C8E6; --orange-hover:#98B4CE; --orange-deep:#2D5A84; --orange-tint:#DDE8EE; }
html[data-szin="barack"]    { --orange:#F4BFA0; --orange-hover:#DAAC90; --orange-deep:#94431C; --orange-tint:#F5E5D8; }
html[data-szin="levendula"] { --orange:#C6B8EC; --orange-hover:#B1A6D3; --orange-deep:#57409A; --orange-tint:#E7E3F0; }
html[data-szin="vaj"]       { --orange:#E6E296; --orange-hover:#CDCA87; --orange-deep:#5E5A12; --orange-tint:#F1F0D5; }
/* A témaváltás lágy átúszása (csak ha a felhasználó engedi a mozgást) */
@media (prefers-reduced-motion:no-preference){
  html.szin-valt, html.szin-valt body, html.szin-valt *{
    transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease) !important;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg) var(--grain);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
em { font-style: italic; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.anchor-alias { position: absolute; }
.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: 0 0 auto; }
.ic-badge {
  box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: .62rem;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

::selection { background: var(--orange); color: var(--ink); }
img::selection, svg::selection, picture::selection { background: transparent; }
.brand { -webkit-user-select: none; user-select: none; }
.brand__mark img { -webkit-user-drag: none; }
.brand { -webkit-tap-highlight-color: transparent; }
.band-amber ::selection { background: var(--ink); color: var(--orange); }

:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Section bands ----------
   Sections alternate grey and white; cards inside a white band switch to grey so they still read as cards.
   One full-bleed amber band (reviews) puts the logo colour on stage; the footer is graphite. */
.band-white { background: var(--paper) var(--grain); --surface: var(--bg); }
.band-amber {
  background: var(--orange); color: var(--ink);
  --ink-from: rgb(23 24 26 / .3); --ink-to: var(--ink);
}
.band-amber .dot { color: var(--orange-deep); }
.band-amber :focus-visible { outline-color: var(--ink); }

/* ---------- Layout ---------- */
main, .footer { position: relative; z-index: 0; isolation: isolate; }
.wrap { width: var(--wrap-w); margin-inline: auto; }
.sec { padding-block: var(--sec-pad); }
.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.lead { margin-top: 1rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }

/* ---------- Type ---------- */
.display {
  font-stretch: 80%;
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}
h2.display { font-size: clamp(2.3rem, 4.4vw, 3.9rem); }
h3.display { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.02; }
.dot { color: var(--orange); }

/* ---------- Buttons & links ----------
   Neobrutál gombok (a shadcn/neobrutalism Button vanilla CSS-portja):
   2px tintakeret, 4px tömör tinta-árnyék; hoverre a gomb az árnyék helyére
   csúszik, mintha megnyomnák. Változatok:
     .btn-orange  = default  (pasztell akcent kitöltés)
     .btn-ghost   = neutral  (papír kitöltés)
     .btn-reverse = reverse  (nyugalomban lapos, hoverre felemelkedik)
     .btn-flat    = noShadow (keret, árnyék nélkül) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 1.35rem;
  border-radius: var(--r-btn); border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--brut);
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.btn .ic { width: 1.15em; height: 1.15em; }
.btn-lg { height: 3.5rem; padding: 0 1.75rem; font-size: 1.02rem; }
.btn-orange { background: var(--orange); }
.btn-ghost { background: var(--paper); }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 0 var(--orange-deep); }
.btn-flat { box-shadow: none; }
.btn-reverse { box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--r-btn); }
@media (hover: hover) {
  .btn:not(.btn-flat):not(.btn-reverse):hover { transform: translate(4px, 4px); box-shadow: none; }
  .btn-reverse:hover { transform: translate(-4px, -4px); box-shadow: var(--brut); }
}
.btn:not(.btn-flat):not(.btn-reverse):active { transform: translate(4px, 4px); box-shadow: none; }
/* A vélemény-sáv maga az akcent: ott a kitöltött gomb papírszínű, hogy kiváljon. */
.band-amber .btn-orange { background: var(--paper); }

.link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.link:hover { border-color: var(--orange); color: var(--orange-deep); }
.link .ic { width: 1.25em; height: 1.25em; }
.link--light { color: var(--on-dark); border-color: rgb(255 255 255 / .25); }
.link--light:hover { color: var(--orange); border-color: var(--orange); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav.is-scrolled { background: rgb(238 240 234 / .92); }
}
.nav-progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--orange); transform-origin: left; transform: scaleX(0);
}
.nav-in { height: 100%; display: flex; align-items: center; gap: 1.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink); line-height: 1;
}
/* Logó (generator/logo.py): letöltött kép, monogram vagy a szegmens ikonja */
.brand__mark {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--ink); border-radius: var(--r-btn); background: var(--orange); color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink); overflow: hidden;
}
.brand__mark .ic { width: 1.4rem; height: 1.4rem; }
.brand__mark.logo-kep { background: #fff; }
.brand__mark.logo-kep img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__mark.logo-kep.logo-szeles { width: auto; min-width: 44px; max-width: 120px; padding: 0 4px; }
.brand__mark.logo-kep.logo-sotet { background: var(--ink); }
.brand__mark .logo-mono-betu { font-weight: 800; font-size: .95rem; line-height: 1; font-style: normal; letter-spacing: .02em; color: inherit; }
.brand__mark.logo-mono-1 .logo-mono-betu { font-size: 1.15rem; }
.brand-text { display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap; min-width: 0; }
.brand-name { font-weight: 800; font-stretch: 84%; letter-spacing: -0.02em; font-size: 1.32rem; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.brand-city { color: var(--ink-2); font-weight: 600; font-stretch: 92%; font-size: 1.02rem; letter-spacing: -0.005em; }
.footer .brand-text { flex-direction: column; align-items: flex-start; gap: .15rem; }
.nav-links { margin-left: auto; display: flex; gap: clamp(1rem, 1.8vw, 1.7rem); }
.nav-links a {
  position: relative; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: .35rem 0; white-space: nowrap; transition: color .2s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-cta { flex: 0 0 auto; }
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); cursor: pointer;
}
.nav-toggle .ic { width: 24px; height: 24px; }
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded="true"] .ic-open { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: block; }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s ease, transform .4s var(--ease), visibility 0s linear .4s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  font-stretch: 80%; font-weight: 740; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(2.2rem, 9vw, 3.4rem); text-decoration: none; color: var(--ink);
  padding: .45rem 0; border-bottom: 1px solid var(--line);
}
.menu-foot { margin-top: auto; display: grid; gap: 1rem; padding-top: 2rem; }
.menu-foot .btn { width: 100%; }
.menu-addr { color: var(--ink-2); font-size: .95rem; }

@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: var(--nav-h); min-height: 100dvh; display: grid; align-items: center;
  /* Fakó akcent-tónus: a hero az egyetlen teljes felület, amit a választott szín
     megfest (a papírral kevert pasztell), egy erősebb derengéssel a szöveg mögött. */
  background:
    radial-gradient(52% 58% at 20% 40%, color-mix(in srgb, var(--orange) 55%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--orange) 34%, #F7F8F3) 0%, color-mix(in srgb, var(--orange) 24%, var(--bg)) 100%);
  background-color: var(--orange-tint);
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: 2rem 2.5rem;
}
.hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.hero-copy h1 { font-size: clamp(2.7rem, 4.6vw, 4.6rem); letter-spacing: -0.03em; }
.hero-media { grid-column: 2; grid-row: 1; }

.hero-copy p {
  margin-top: 1.5rem; font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--ink-2); max-width: 42ch; text-wrap: pretty;
}
.hero-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-copy .hero-eyebrow {
  margin: 0 0 1.25rem; display: inline-flex; align-items: center; gap: .5rem; max-width: none;
  padding: .4rem .85rem .4rem .5rem; border: 2px solid var(--ink); border-radius: var(--r-pill);
  background: var(--paper); font-size: .95rem; color: var(--ink);
}
.hero-stars { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--orange); }
.hero-stars .ic { width: .95rem; height: .95rem; }
.hero-promise { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.hero-promise li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .98rem; }
.hero-promise .ic { width: 1.1rem; height: 1.1rem; color: var(--orange-deep); }
.hero-copy .hero-note { margin-top: 1rem; font-size: .92rem; color: var(--ink-2); max-width: 52ch; }
.hero-copy .hero-note--demo { display: inline-block; padding: .35rem .7rem; border-radius: var(--r-btn); background: var(--paper); border: 1px dashed var(--line-2); }
/* Helyi, beszédes alcím a szekciócímek fölött (SEO: szolgáltatás + település) */
.sec-kicker { margin-bottom: .75rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.band-amber .sec-kicker { color: var(--ink); }
.hero-media {
  height: min(78vh, 760px); min-height: 480px;
  border-radius: var(--r) 0 0 var(--r); overflow: hidden;
  margin-right: calc((100vw - var(--wrap-w)) / -2);
  background: var(--surface-2);
}
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-media { animation: fade 1s ease both .1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-in { grid-template-columns: 1fr; padding-block: 2rem 3rem; gap: 2rem; }
  .hero-media { height: auto; min-height: 0; aspect-ratio: 4 / 3; margin-right: 0; border-radius: var(--r); }
  .hero-copy h1 { font-size: clamp(2.3rem, 9.6vw, 4rem); }
  .hero-media { grid-column: 1; grid-row: 2; }
}

/* ---------- Statement + facts ---------- */
.statement { padding-block: clamp(4rem, 10vw, 8.5rem) var(--sec-pad); }
.statement-text {
  font-size: clamp(1.5rem, 3.1vw, 2.85rem);
  font-weight: 560; font-stretch: 92%; letter-spacing: -0.018em; line-height: 1.18;
  max-width: 1120px; text-wrap: pretty;
}
.statement-text em { font-style: italic; }
.facts {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line-2);
}
.fact { display: flex; flex-direction: column; padding: 1.5rem 1.25rem 0 0; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.fact-n { font-size: clamp(2rem, 3.6vw, 3.3rem); }
.fact-n small { font-size: .45em; color: var(--ink-3); margin-left: .1em; }
.fact-l { color: var(--ink-2); font-size: .95rem; margin-top: .35rem; }
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; border-top: 0; gap: 0 1.25rem; }
  .fact { border-top: 1px solid var(--line); padding: 1rem 0 1rem; }
  .fact + .fact { border-left: 0; padding-left: 0; }
  .fact:last-child { grid-column: 1 / -1; }
}

/* ---------- Gallery ---------- */
.gallery { padding-block: var(--sec-pad); }
.gallery-head { margin-bottom: 2rem; }
.gallery-track {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: calc((100vw - var(--wrap-w)) / 2);
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 auto; width: min(80vw, 560px); scroll-snap-align: start; }
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); background: var(--surface-2);
}
.gallery-item figcaption { margin-top: .75rem; font-size: .92rem; color: var(--ink-2); }

/* ---------- Services: 2×2 rács, a csempék színe a sorrendből jön ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tile {
  background: var(--surface); border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: .8rem; min-width: 0;
}
.tile p { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.tile-ic {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border: 2px solid var(--ink); border-radius: var(--r-btn); background: var(--paper); color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}
.tile-ic .ic { width: 1.45rem; height: 1.45rem; }
.tile-tag { margin-top: auto; padding-top: .8rem; font-size: .92rem; font-weight: 600; color: var(--ink-3); }
.svc-grid .tile:nth-child(4n+1) { background: var(--orange-tint); }
.svc-grid .tile:nth-child(4n+1) .tile-tag { color: var(--orange-deep); }
.svc-grid .tile:nth-child(4n+2) { background: var(--surface-2); }
.svc-grid .tile:nth-child(4n) { background: var(--orange); }
.svc-grid .tile:nth-child(4n) p, .svc-grid .tile:nth-child(4n) .tile-tag { color: var(--ink-2); }
@media (max-width: 699px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Opening hours ---------- */
.hours-grid {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "week today" "week classes";
}
.hours-grid:has(> .today[hidden]) { grid-template-areas: "week classes"; }
.week { grid-area: week; }
.today { grid-area: today; }
.classes { grid-area: classes; }

.week { background: var(--surface); border-radius: var(--r); padding: .35rem clamp(1.25rem, 3vw, 2.25rem); }
.week-row {
  display: grid; grid-template-columns: 10rem auto minmax(0, 1fr);
  column-gap: 1.5rem; align-items: center; padding-block: .95rem;
}
.week-row + .week-row { border-top: 1px solid var(--line); }
.week-row--text { grid-template-columns: 1fr; }
.week-row--text .week-day { font-weight: 600; }
.week-day { font-weight: 600; }
.week-time {
  font-stretch: 84%; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.week-time small { display: block; font-size: .78em; color: var(--ink-2); font-weight: 600; }
.week-row--closed .week-day, .week-row--closed .week-time { color: var(--ink-3); font-weight: 500; }
.week-tag {
  justify-self: start; display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: var(--r-pill);
  background: var(--orange-tint); color: var(--orange-deep);
  font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.week-tag:hover { background: var(--orange); color: var(--ink); }
.week-row.is-today .week-day { color: var(--orange-deep); }
.week-row.is-today .week-day::after {
  content: "ma"; margin-left: .5rem; padding: .1rem .45rem; border-radius: var(--r-pill);
  background: var(--orange-tint); color: var(--orange-deep);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}

.today {
  /* Status colours: the only green and red on the page, used purely to signal open or closed. */
  --st-bg: var(--surface); --st-line: var(--orange); --st-fg: var(--ink); --st-dot: var(--ink-3); --st-ring: transparent;
  background: var(--st-bg); border: 2px solid var(--st-line); border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .4rem;
  transition: background-color .6s ease, border-color .6s ease;
}
.today.is-open { --st-bg: #E4F3E3; --st-line: #3E9B57; --st-fg: #1D5A2E; --st-dot: #2F8A49; --st-ring: rgb(47 138 73 / .2); }
.today.is-closed { --st-bg: #FBE8E5; --st-line: #D2574A; --st-fg: #8C2A1F; --st-dot: #C2453A; --st-ring: rgb(194 69 58 / .16); }
.today-label { font-weight: 600; color: var(--ink-2); }
.today-time { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-variant-numeric: tabular-nums; }
.today-status { display: flex; align-items: flex-start; gap: .6rem; margin-top: .3rem; font-weight: 600; color: var(--st-fg); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st-dot, var(--ink-3)); box-shadow: 0 0 0 4px var(--st-ring, transparent); flex: 0 0 auto; margin-top: .5em; }

.classes {
  background: var(--orange-tint); border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
}
.classes h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.classes-note { color: var(--ink-2); font-size: .95rem; }
.classes .btn { margin-top: .25rem; }

@media (max-width: 899px) {
  .hours-grid { grid-template-columns: 1fr; grid-template-areas: "today" "week" "classes"; }
  .hours-grid:has(> .today[hidden]) { grid-template-areas: "week" "classes"; }
}
@media (max-width: 560px) {
  .week-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .week-time { font-size: 1.25rem; }
  .week-tag { grid-column: 1 / -1; grid-row: 2; margin-top: .45rem; }
}

/* ---------- Prices ---------- */
.prices-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; align-items: start; }
.price-panel { background: var(--surface); border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2.25rem); }
.price-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 1rem; align-items: baseline; padding-block: 1rem;
}
.price-list li + li { border-top: 1px solid var(--line); }
.pl-name { font-weight: 600; font-size: 1.05rem; grid-column: 1; }
.pl-note { grid-column: 1; font-size: .86rem; color: var(--ink-3); }
.pl-price {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-stretch: 84%; font-weight: 700; letter-spacing: -0.02em; font-size: 1.55rem; font-variant-numeric: tabular-nums;
}
.price-side { display: grid; gap: 1rem; }
.price-panel--group { background: var(--orange-tint); }
.price-panel--group .price-list li + li { border-top-color: var(--line-2); }
.price-panel-lead { margin: .6rem 0 .25rem; color: var(--ink-2); text-wrap: pretty; }
.price-panel-cta { margin-top: 1.25rem; }
.price-note { border: 1px solid var(--line-2); border-radius: var(--r); padding: clamp(1.25rem, 3vw, 1.75rem); }
.price-note h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.price-note p { color: var(--ink-2); text-wrap: pretty; }
.price-note-link { margin-top: 1rem; }
.price-note-sub { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .95rem; }
@media (max-width: 899px) { .prices-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews: valódi Google-vélemények kártyán, az akcent-sávon ---------- */
.rev-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink); }
.rev-stars { display: inline-flex; gap: 2px; }
.rev-stars .ic { width: 1.1rem; height: 1.1rem; }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: start; }
.rev-card {
  margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--brut); padding: clamp(1.25rem, 2.6vw, 1.75rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.rev-card blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; text-wrap: pretty; }
.rev-card figcaption { font-weight: 700; display: flex; flex-direction: column; gap: .1rem; }
.rev-card figcaption span { font-weight: 500; font-size: .88rem; color: var(--ink-3); }

/* ---------- Jelentkezés (próbaedzés-űrlap + irányár) ---------- */
.join-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.join-copy { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.5rem; }
.est {
  display: grid; gap: .3rem; padding: 1.25rem 1.4rem; border-radius: var(--r);
  background: var(--orange-tint); border: 2px solid var(--ink); box-shadow: var(--brut);
}
.est__k { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-deep); }
.est__v { font-stretch: 84%; font-weight: 760; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.est__note { color: var(--ink-2); font-size: .95rem; }
.join-call { color: var(--ink-2); }
.join-form {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 0 var(--ink);
  padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.25rem;
}
.fset { border: 0; margin: 0; padding: 0; display: grid; gap: .7rem; min-width: 0; }
.fset legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .7rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1rem;
  border: 2px solid var(--ink); border-radius: var(--r-btn); background: var(--paper);
  font-weight: 600; font-size: .95rem; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover span { background: var(--orange-tint); }
.chip input:checked + span { background: var(--orange); box-shadow: 3px 3px 0 0 var(--ink); transform: translate(-2px, -2px); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.rowf { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fld { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
.fld i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.fld input, .fld textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); border-radius: var(--r-btn); padding: .75rem .9rem; min-height: 3rem; width: 100%;
}
.fld textarea { resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 1px; }
.fld input[aria-invalid="true"], .chips[aria-invalid="true"] .chip span { border-color: #B3261E; }
.agree { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.agree input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--ink); flex: none; }
.agree a { color: var(--ink); }
.formmsg { font-weight: 600; color: #8C1D18; }
.formmsg:empty { display: none; }
.join-send { justify-self: start; }
.privacy-note { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-3); }
.success { display: grid; gap: 1rem; justify-items: start; }
.success__ic { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); }
.success__ic .ic { width: 1.5rem; height: 1.5rem; }
.success h3 { font-size: 1.6rem; }
.success p { color: var(--ink-2); }
@media (max-width: 899px) { .join-grid { grid-template-columns: 1fr; } .join-copy { position: static; } }
@media (max-width: 520px) { .rowf { grid-template-columns: 1fr; } .join-send { width: 100%; } }
.booking-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.booking-grid .hero-promise { margin-top: 1.25rem; }
.booking-card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 0 var(--ink); padding: clamp(1rem, 2.5vw, 1.5rem); min-height: 22rem; }
@media (max-width: 899px) { .booking-grid { grid-template-columns: 1fr; } }

/* ---------- GYIK ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; font-weight: 700; font-size: 1.08rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 500; color: var(--orange-deep); transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.addr { margin-top: 1.75rem; display: grid; gap: .35rem; }
.addr a { display: inline-flex; align-items: center; gap: .9rem; font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.addr a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.addr .pin.ic-badge { width: 3.1rem; height: 3.1rem; padding: .62rem; }
/* Map pin: Lucide geometry (ISC) with pqoqubbw-style motion (MIT). It hops once when the
   address scrolls into view and again on hover, pointing the eye at the address. */
.pin { overflow: visible; }
.pin-body { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .addr.is-in .pin-body { animation: pin-hop .7s var(--ease) .45s; }
  .addr.is-in .pin-dot { animation: pin-dot .7s ease .45s; }
  .addr.is-in a:hover .pin-body, .addr a:focus-visible .pin-body { animation: pin-hop-again .6s var(--ease); }
  .addr.is-in a:hover .pin-dot, .addr a:focus-visible .pin-dot { animation: pin-dot-again .6s ease; }
  @keyframes pin-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-3px); } 65% { transform: translateY(-1.5px); } }
  @keyframes pin-hop-again { 0%, 100% { transform: none; } 35% { transform: translateY(-3px); } 65% { transform: translateY(-1.5px); } }
  @keyframes pin-dot { 0%, 100% { opacity: 1; } 40% { opacity: .25; } }
  @keyframes pin-dot-again { 0%, 100% { opacity: 1; } 40% { opacity: .25; } }
}
.addr-sub { color: var(--ink-3); font-size: .92rem; }
.contact-links { margin-top: 2rem; border-top: 1px solid var(--line-2); }
.contact-links a {
  display: flex; align-items: center; gap: 1rem; padding: .7rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; color: var(--ink);
  transition: color .2s ease;
}
.contact-links a:hover { color: var(--orange-deep); }
.contact-links .ic-end { margin-left: auto; width: 1.35rem; height: 1.35rem; color: var(--ink-3); transition: transform .3s var(--ease), color .2s ease; }
.contact-links a:hover .ic-badge, .contact-links a:focus-visible .ic-badge { background: var(--orange); color: var(--ink); box-shadow: inset 0 0 0 1px var(--orange); }
.ic-badge { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.addr .pin.ic-badge { color: var(--orange-deep); }
.addr a:hover .pin.ic-badge { background: var(--orange); color: var(--ink); box-shadow: inset 0 0 0 1px var(--orange); }
.contact-links a:hover .ic-end { transform: translate(2px, -2px); color: var(--orange-deep); }
.contact-cta { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contact-cta-note { color: var(--ink-2); font-size: .95rem; max-width: 36ch; text-wrap: pretty; }
.map { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--r); background: var(--surface-2); filter: saturate(.9); }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .brand-city { display: none; } }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--paper) var(--grain); color: var(--ink); border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; }
.footer .brand { color: var(--ink); }
.footer .brand-city { color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem 3rem; align-items: start; }
.footer-brand .footer-note { font-size: .85rem; color: var(--ink-3); max-width: 60ch; }
.footer-brand p { margin-top: 1rem; color: var(--ink-2); font-size: .95rem; }
.footer-nav { display: grid; gap: .45rem; }
.footer-nav a { text-decoration: none; color: var(--ink-2); font-size: .95rem; }
.footer-nav a:hover { color: var(--ink); }
.footer-copy {
  grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-3);
}
.footer-copy a { color: var(--ink-2); text-decoration: none; }
.footer-copy a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Reveal on enter (JS adds .is-in via IntersectionObserver) ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Scroll-driven animations (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reading progress: tells you where you are on a long single page. */
    .nav-progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Hero photo drifts slower than the page: depth between copy and image. */
    .hero-media img {
      scale: 1.1; animation: hero-drift linear both;
      animation-timeline: scroll(root); animation-range: 0 100vh;
    }
    @keyframes hero-drift { from { translate: 0 -4%; } to { translate: 0 6%; } }

    /* Statement: words ink in as they pass the middle of the viewport, reading pace. */
    .statement-text.is-split .w {
      color: var(--ink-from, var(--ink-3));
      animation: ink linear both; animation-timeline: view();
      animation-range-start: calc(30% + var(--i, 0) * 0.45%);
      animation-range-end: calc(44% + var(--i, 0) * 0.45%);
    }
    @keyframes ink { to { color: var(--ink-to, var(--ink)); } }

    /* Live "open now" dot breathes gently: it is a real status, not decoration. */
    .today.is-open .status-dot { animation: breathe 2.4s ease-in-out infinite; }
    @keyframes breathe { 50% { box-shadow: 0 0 0 7px var(--st-ring); } }

    /* Gallery: the page pins and the photos pan sideways, a walk through the gym. */
    @media (min-width: 900px) {
      .gallery { padding-block: 0; }
      .gallery-pin { height: 340vh; view-timeline-name: --gal; view-timeline-axis: block; }
      .gallery-sticky {
        position: sticky; top: 0; height: 100vh;
        display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
        overflow: hidden;
      }
      .gallery-head { margin-bottom: 0; }
      .gallery-track {
        overflow: visible; width: max-content; scroll-snap-type: none;
        animation: gal-pan linear both; animation-timeline: --gal;
        animation-range: contain 0% contain 100%;
      }
      .gallery-item { width: clamp(380px, 42vw, 640px); }
      @keyframes gal-pan { to { transform: translateX(calc(-100% + 100vw)); } }
    }
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .menu { transition: none; }
  .nav-links a::after, .contact-links .ic-end, .btn, .chip span { transition: none; }
}

/* ---------- Színválasztó (lebegő widget, demó) ----------
   A ?szin= és a korábbi választás a localStorage-ben; a .szinv a bal alsó
   sarokban ül, a három korong a kék / zöld / szürke pasztell téma. Nyomtatásban
   és képernyőolvasón is rendben: a korongok valódi gombok, aria-pressed jelzéssel. */
.szinv{
  position:fixed; left:16px; bottom:16px; z-index:55;
  display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px);
  padding:8px 12px 8px 16px; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); font-family:var(--font);
  border:2px solid var(--ink); box-shadow:var(--brut);
}
.szinv__t{
  display:inline-flex; align-items:center; gap:8px; min-height:2.25rem;
  padding:0 2px 0 0; border:0; background:none; font:inherit; font-size:.95rem;
  font-weight:700; line-height:1.2; color:var(--ink); white-space:nowrap; cursor:pointer;
}
.szinv__dot{ width:13px; height:13px; border-radius:50%; background:var(--orange); flex:none; }
.szinv__n{ font-weight:500; color:var(--ink-3); }
.szinv__g{ display:flex; align-items:center; gap:8px; }
.szinv.is-min{ padding-right:16px; }
.szinv.is-min .szinv__g, .szinv.is-min .szinv__n{ display:none; }
.szinv__b{
  position:relative; width:34px; height:34px; padding:0;
  border:3px solid var(--paper); border-radius:50%; background:var(--sw);
  box-shadow:0 0 0 1.5px var(--ink); cursor:pointer; flex:none;
  -webkit-tap-highlight-color:transparent; transition:transform .2s var(--ease);
}
.szinv__b::after{ content:""; position:absolute; inset:-6px; }
.szinv__b:active{ transform:scale(.94); }
.szinv__b[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--ink); transform:scale(1.08); }
.szinv .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:767px){
  .szinv{ left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:6px 10px 6px 12px; }
  .szinv__g{ gap:6px; }
  .szinv__b{ width:28px; height:28px; }
}
@media print{ .szinv{ display:none !important; } }