@font-face {
  font-family: "Vasa Grotesk";
  src: url("fonts/VasaGrotesk-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Vasa Grotesk";
  src: url("fonts/VasaGrotesk-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #080e45;
  --navy-2: #121b58;
  --red: #be0005;
  --light-blue: #dff5ff;
  --pale-blue: #f5fcff;
  --peach: #ffdfd1;
  --border: #e2e8f0;
  --muted: #314158;
  --white: #fff;
  --shadow: 0 4px 8px rgba(8, 14, 69, .12), 0 1px 2px rgba(8, 14, 69, .08);
  --shadow-xl: 0 10px 10px -5px rgba(0, 0, 0, .04), 0 20px 25px -5px rgba(0, 0, 0, .1);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 40px;
  --container: 1312px;
  --font: "Vasa Grotesk", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: var(--white); font-family: var(--font); font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.compact-container { width: min(1152px, calc(100% - 64px)); }
.section { padding-block: 64px; }
.center { display: flex; justify-content: center; margin-top: 56px; }
.divider { margin: 0; border: 0; border-top: 1px solid var(--border); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; }
h1, h2 { font-feature-settings: "ss02" 1; }
h2 { margin-bottom: 46px; font-size: clamp(42px, 4.2vw, 60px); line-height: 1; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--border); background: var(--white); }
.site-header:has(.desktop-nav a:hover) { box-shadow: var(--shadow-xl); }
.header-inner { display: flex; align-items: center; width: 100%; max-width: 1440px; min-height: 80px; margin-inline: auto; padding-inline: 64px; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 223px; white-space: nowrap; }
.brand-logo { width: 161px; height: 31px; object-fit: contain; }
.desktop-nav { display: flex; align-items: stretch; justify-content: center; flex: 1 0 0; min-width: 0; align-self: stretch; gap: 24px; }
.desktop-nav a { display: flex; align-items: center; justify-content: center; position: relative; padding-inline: 8px; font-size: 16px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.desktop-nav a::after { position: absolute; right: 50%; bottom: -1px; left: 50%; height: 1px; background: var(--red); content: ""; transition: .2s; }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { right: 0; left: 0; }
.desktop-nav a.is-active { color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 4px; }
.mobile-nav { display: none; margin-left: auto; }
.menu-icon { width: 20px; height: 20px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 56px; padding: 0 32px; border: 0; border-radius: 9999px; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: 0; text-align: center; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(8,14,69,.14); }
.button-primary { color: #f8fafc; background: var(--red); }
.button-primary:hover { background: #a80004; }
.button-secondary { background: #f1f5f9; }
.button-link { height: 48px; padding-inline: 24px; color: var(--red); font-size: 16px; line-height: 24px; }
.button-small { height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
.button-light { color: var(--navy); background: #f1f5f9; }
/* Figma: 1px obrys `theme/primary-foreground` (#f8fafc, nie čistá biela) + shadow/xs. */
.button-outline { color: #f8fafc; box-shadow: inset 0 0 0 1px #f8fafc, 0 1px 2px rgba(0, 0, 0, .05); }
.button-outline:hover { box-shadow: inset 0 0 0 1px #f8fafc, 0 6px 18px rgba(8,14,69,.14); }
.button-all-discounts { width: 312px; }
.button-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; }
.button-icon img { width: 16.5px; height: 13.5px; max-width: none; }
.hero .button-primary { width: 196px; }
.hero .button-secondary { width: 163px; }
.how-panel > .button { width: 293px; }
.button-row { display: flex; flex-wrap: wrap; gap: 16px; }
.hero .button-row { gap: 24px; }

.hero { padding-top: 128px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 32px; align-items: start; }
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-art { grid-column: 2; grid-row: 1 / span 2; }
.trust-list { grid-column: 1; grid-row: 2; }
.hero h1 { margin-bottom: 32px; font-size: clamp(64px, 6.65vw, 96px); line-height: 1; }
.lead { max-width: 624px; margin-bottom: 32px; font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.trust-list { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 20px; list-style: none; }
.trust-list li { display: flex; align-items: center; gap: 8px; }
.trust-icon { position: relative; display: block; flex: 0 0 24px; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: #ffdfd1; }
.trust-icon img { position: absolute; max-width: none; }
.trust-icon-outline { top: 7.29%; left: 7.29%; width: 85.42%; height: 85.42%; }
.trust-icon-check { top: 35.62%; left: 32.99%; width: 34.02%; height: 28.74%; }
.hero-art { position: relative; aspect-ratio: 624 / 520; overflow: visible; border-radius: var(--radius-lg); background: var(--light-blue); }
.hero-pattern { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hero-person { position: absolute; left: 0; bottom: 0; width: 100%; height: 117.5%; object-fit: contain; object-position: bottom; }
.floating-note { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); font-size: 20px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.floating-note img { flex: 0 0 32px; width: 32px; height: 32px; }
.floating-note::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: inherit; }
.note-benefits { top: 12.115%; left: -65px; color: var(--red); background: #fee7f1; }
.note-benefits::after { top: -10px; left: -10px; }
/* Presah 65px za obrázok platí pri 1512 (Figma). Užšie okno už na bočnom okraji kontejnera toľko
   miesta nemá a `overflow-x: clip` na `.hero` notu odreže (najprv € na konci) — presah sa preto
   plynulo zmenšuje podľa skutočne dostupného okraja.
   `max(32px, …)` = pod ~1390px je okraj kontejnera plných 32px (`.container` = `100% - 64px`),
   takže presah nesmie padnúť na nulu. `-9px` = rezerva na scrollbar (100vw ho počíta, my nie),
   `-18px` = bublina `::after` (10) + odstup od hrany (8). */
.note-savings { top: 78.654%; right: calc(-1 * clamp(0px, max(32px, (100vw - 1312px) / 2 - 9px) - 18px, 65px)); color: #329083; background: #e0faf1; }
.note-savings::after { right: -10px; bottom: -10px; }

/* Jemné "vznášanie" štítkov (Figma poznámka: Floating elements).
   Odlišná dĺžka, fáza a amplitúda — štítky sa nevznášajú naraz. */
@keyframes float-note { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--float-distance) * -1)); } }
.floating-note { --float-distance: 10px; animation: float-note 6s ease-in-out infinite; will-change: transform; }
.note-benefits { --float-distance: 12px; animation-duration: 6.5s; animation-delay: -2.4s; }
.note-savings { --float-distance: 9px; animation-duration: 5.2s; animation-delay: -.7s; }

.benefits { position: relative; min-height: 500px; overflow: hidden; padding-top: 64px; padding-bottom: 0; }
/* Kupola pozadia (Figma 6727:1483): 3268×1081 na x -897 / y 338 v sekcii 1512×576.
   `max-width: none` je nutné — inak ju `img { max-width: 100% }` zrazí na šírku sekcie. */
.benefits-wave { position: absolute; top: 58.68%; left: -59.33%; width: 216.14%; max-width: none; height: auto; object-fit: fill; }
.benefits-inner { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 500px; }
.benefits h2 { position: relative; z-index: 4; margin-bottom: -48px; text-align: center; }
.benefits-row { display: flex; align-items: center; width: 100%; min-height: 500px; }
.benefits-content { flex: 1 1 0; min-width: 0; }
/* Dlaždica (Figma 6729:1556): 182.23×216, padding 24/16, gap 16, radius 24, shadow/md,
   ikonový box 96×96 (padding 24 + ikona 48), titulok 18/28 na stred. */
.benefit-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.benefit-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 216px; padding: 24px 16px; border-radius: var(--radius); background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); text-align: center; }
.benefit-card h3 { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: 0; }
.benefit-icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--radius); }
.benefit-icon img { width: 48px; height: 48px; object-fit: contain; }
.icon-blue { color: #0878d1; background: #dff5ff; }.icon-orange { color: #ff6c43; background: #ffdfd1; }.icon-purple { color: #4445ad; background: #e6e5fd; }.icon-green { color: #249b83; background: #e0faf1; }.icon-pink { color: #d91f53; background: #fee7f1; }
.benefits-figure { flex: 0 0 384.848px; width: 384.848px; height: 500px; margin-right: -64px; }
.figma-lady { position: relative; width: 100%; height: 100%; overflow: hidden; transform: scaleX(-1); }
.lady-layer, .lady-mask-layer { position: absolute; display: block; max-width: none; }
.lady-layer { height: auto; }
.lady-layer-01 { top: 0; left: 25.29%; width: 65%; height: 76.43%; }
.lady-mask-layer { inset: 2.72% 13.86% 50.43% 29.77%; }
.lady-mask-layer img { width: 100%; height: 100%; max-width: none; }
.lady-layer-02 { top: 53.44%; left: .03%; width: 99.94%; height: 95.29%; }
.lady-layer-03 { top: 55.134%; left: 50.869%; width: 10.461%; height: 5.849%; }
.lady-layer-04 { top: 47.97%; left: 37.849%; width: 59.221%; height: 66.232%; }
.lady-layer-05 { top: 62.953%; left: 54.012%; width: 27.538%; height: 33.51%; }
.lady-layer-06 { top: 48.45%; left: 2.85%; width: 65.46%; height: 73.59%; }
.lady-layer-07 { top: 74.583%; left: 73.522%; width: 3.738%; height: 14.414%; }
.lady-layer-08 { top: 91.09%; left: 20.474%; width: 49.308%; height: 28.898%; }
.lady-layer-09 { top: 75.173%; left: 18.36%; width: 6.14%; height: 28.547%; }
.lady-layer-10 { top: 40.86%; left: 29.16%; width: 32.66%; height: 26.52%; }
.lady-layer-11 { top: 42.24%; left: 30.87%; width: 28.85%; height: 23.56%; }
.lady-layer-12 { top: 42.108%; left: 30.7%; width: 29.277%; height: 23.77%; }
.benefit-clouds { position: absolute; z-index: 3; top: 13px; left: calc(50% + 504px); width: 173px; height: 128px; transform: translateX(-50%); pointer-events: none; }
.benefit-clouds img { position: absolute; }
.benefit-clouds .cloud-large { top: 0; left: 0; width: 111px; height: 83px; }
.benefit-clouds .cloud-small { right: 0; bottom: 0; width: 69px; height: 54px; }

/* Zvislý rytmus sekcie (Figma 6721:6610): 128 → H2 60 → 64 → kategórie 160 → 64 → kupóny
   → 64 → tlačidlo 56 → 64. */
.discounts { padding-top: 128px; }
.discounts h2 { margin-bottom: 64px; text-align: center; }
.discounts h2 br { display: none; }
.discounts .center { margin-top: 64px; }
.category-list { display: grid; grid-template-columns: repeat(6, minmax(0, 160px)); justify-content: center; gap: 16px; }
.discounts .category-list { margin-bottom: 64px; }
/* Dlaždica (Figma 6721:6614 na homepage a 6777:14182 na Klubových zľavách — tá istá instancia
   toho istého komponentu, 160×160): padding 16, gap 16, radius 24, ikona 48,
   titulok 18/28 v zvyšnej výške zarovnaný na spodok (Title 128×64 @ 16,80). */
.category { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; height: 160px; padding: 16px; border: 0; border-radius: 24px; color: var(--navy); background: #ffdfd1; font-size: 18px; font-weight: 700; line-height: 28px; text-align: left; cursor: pointer; }
.category-label { display: flex; flex: 1 0 0; align-items: flex-end; width: 100%; min-height: 0; }
.category-icon { display: block; flex: 0 0 48px; width: 48px; height: 48px; }
.category-icon img { width: 48px; height: 48px; object-fit: contain; }
.category.is-active { background: #ffc2a8; }
.category:hover { background: #ffcbb6; }
.discount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.discount-card { display: flex; align-items: stretch; min-width: 0; height: 204px; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.product-visual { position: relative; z-index: 2; display: flex; flex: 0 0 208px; align-items: center; justify-content: center; min-width: 0; height: 204px; margin-right: -16px; padding: 8px; }
.product-visual::before { position: absolute; z-index: 0; top: -1px; right: -5px; bottom: -10px; left: -5px; background: url("assets/coupon-visual-bg.svg") center / 100% 100% no-repeat; content: ""; }
.product-visual span { position: absolute; z-index: 3; top: 8px; left: 8px; min-height: 36px; padding: 8px 16px; border-radius: 9999px; color: #f8fafc; background: #be0005; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0; white-space: nowrap; }
.product-visual > img { position: relative; z-index: 2; width: 192px; height: 192px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.product-copy { position: relative; z-index: 1; display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; height: 204px; padding: 16px 16px 16px 32px; gap: 8px; background: #fff; }
/* Názov produktu je vždy na dva riadky. Figma ho na mobile ukončuje trojbodkou (6732:7393),
   tvrdý orez bez nej vyzerá pri užších kartách ako chyba — preto line-clamp. */
.product-copy h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; height: 56px; margin: 0; overflow: hidden; font-size: 18px; line-height: 28px; letter-spacing: 0; }
.product-copy p { width: 100%; margin: 0; padding-bottom: 4px; font-family: var(--font); font-size: 14px; line-height: 20px; letter-spacing: 0; }
.product-copy a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 16px; border-radius: 9999px; color: #f8fafc; background: #be0005; font-size: 14px; font-weight: 700; line-height: 20px; }

.how-section { padding-top: 64px; }
.how-panel { position: relative; overflow: hidden; padding: 76px 64px 72px; border-radius: var(--radius-lg); color: white; background: var(--navy); text-align: center; }
.how-panel::before { position: absolute; inset: 0; background: url("assets/how-pattern.svg") center / cover no-repeat; opacity: .38; content: ""; }
.how-panel > * { position: relative; z-index: 1; }
.how-panel h2 { margin-bottom: 70px; }
.how-panel h2 br { display: none; }
.steps-dots { display: none; }
/* Bodky krokov sú na navy paneli, takže tie isté tlačidlá ako pri `.gallery-dots`, len biele
   (viď §18). Kontejner je mimo mobilu `display: none`, preto tu netreba media query; `[hidden]`
   má vyššiu špecificitu než `display: flex` z mobilného bloku, takže ho prebije bez ohľadu
   na poradie — skript ho nasadzuje, keď sa kroky vojdú a stránkovať nie je čo. */
.steps-dots[hidden] { display: none; }
.steps-dots button { display: grid; place-items: center; width: 24px; height: 24px; margin: -8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; }
.steps-dots button::before { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); content: ""; transition: background .3s ease, transform .3s ease; }
.steps-dots button:hover::before { background: rgba(255,255,255,.6); transform: scale(1.25); }
.steps-dots button[aria-current]::before { background: #fff; }
.steps-dots button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* `is-live` skript nasadzuje len keď pás naozaj pretečie, takže na desktopových mriežkach
   sa kurzor neukáže. Pásy sú síce mobilné, ale v úzkom okne na desktope sa dajú ťahať. */
.how-panel.is-live .steps, .how-panel.is-live .app-steps, .app-tiles-inner.is-live .app-tiles { cursor: grab; }
.how-panel.is-dragging .steps, .how-panel.is-dragging .app-steps, .app-tiles-inner.is-dragging .app-tiles { cursor: grabbing; }
/* Voľné pásy (kategórie, filtračné čipy, karty výhod v registrácii) sú koreňom samy sebe. */
[data-carousel="free"].is-live { cursor: grab; }
[data-carousel="free"].is-dragging { cursor: grabbing; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; margin-bottom: 52px; }
.step { position: relative; }
.step-art { position: relative; width: 230px; height: 155px; margin: 0 auto 24px; }
.step-register, .step-card, .step-coupon { width: 300px; justify-self: center; }
.register-art { width: 300px; height: 250px; overflow: hidden; }
.register-blob { position: absolute; top: 6.25px; left: 25px; width: 250px; max-width: none; height: 236.25px; }
.register-glass { position: absolute; z-index: 1; top: 31.25px; left: 32.5px; width: 231.25px; height: 247.5px; border-radius: 20px; background: rgba(255,255,255,.15); }
.register-field { position: absolute; z-index: 2; display: flex; align-items: center; height: 50px; padding: 10px 20px; border-radius: 20px; color: var(--navy); background: #fff; font-size: 17.5px; font-weight: 700; line-height: 25px; letter-spacing: 0; text-align: left; white-space: nowrap; }
.register-field-name { top: 48.75px; left: 127.5px; width: 166.25px; }
.register-field-surname { top: 113.75px; left: 1.25px; width: 177.5px; }
.register-field-email { top: 178.75px; left: 78.75px; width: 205px; }
.register-step-number { position: absolute; z-index: 3; top: 31.25px; left: 32.5px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #f8fafc; background: #be0005; font-size: 25px; font-weight: 700; line-height: 35px; }
.step.step-register h3, .step.step-card h3, .step.step-coupon h3 { margin-bottom: 16px; font-size: 20px; line-height: 28px; letter-spacing: 0; }
.step.step-register p, .step.step-card p, .step.step-coupon p { font-size: 18px; line-height: 28px; letter-spacing: 0; }
.card-art { width: 300px; height: 250px; overflow: hidden; }
.card-blob { position: absolute; top: 0; left: 24.581px; width: 250px; max-width: none; height: 242.5px; }
.member-card-wrap { position: absolute; top: 40.073px; left: 5.002px; display: flex; align-items: center; justify-content: center; width: 289.636px; height: 174.973px; }
.member-card { position: relative; flex: none; width: 277.5px; height: 151.364px; overflow: hidden; border-radius: 13.455px; background: #e2f6ff; box-shadow: 0 3.364px 5.045px -.841px rgba(0,0,0,.1), 0 1.682px 3.364px -.841px rgba(0,0,0,.06); transform: rotate(-5deg); }
.member-card-frame { position: absolute; top: -64.416px; left: -22.758px; width: 323.804px; max-width: none; height: 279.939px; }
.member-card-barcode-box { position: absolute; top: 14.3px; left: 41.205px; display: block; width: 194.25px; height: 97.545px; padding: 6.727px; border-radius: 8px; background: #fff; }
.member-card-barcode-box img { width: 180.796px; max-width: none; height: 84.091px; }
.member-card-logo { position: absolute; top: 121.93px; left: 97.545px; display: block; width: 83.25px; height: 16.547px; overflow: hidden; }
.member-card-logo img { position: absolute; top: .258px; left: 0; width: 83.083px; max-width: none; height: 16.03px; }
.card-step-number { position: absolute; z-index: 3; top: 31.25px; left: 32.081px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #f8fafc; background: #be0005; font-size: 25px; font-weight: 700; line-height: 35px; }
.coupon-art { width: 300px; height: 250px; overflow: hidden; }
.coupon-blob { position: absolute; top: -.625px; left: 35.625px; display: flex; align-items: center; justify-content: center; width: 236.25px; height: 250px; }
.coupon-blob img { flex: none; width: 250px; max-width: none; height: 236.25px; transform: rotate(90deg); }
.coupon-layer { position: absolute; display: flex; align-items: center; justify-content: center; }
.coupon-layer-back { z-index: 1; top: 78.589px; left: 13.287px; width: 277.5px; height: 117.938px; }
.coupon-layer-middle { z-index: 2; top: 61.34px; left: 10.78px; width: 282.38px; height: 129.93px; }
.coupon-layer-front { z-index: 3; top: 42.98px; left: 8.55px; width: 286.723px; height: 141.674px; }
.how-coupon { position: relative; display: flex; flex: none; isolation: isolate; align-items: center; width: 277.5px; height: 117.938px; overflow: hidden; border-radius: 13.875px; filter: drop-shadow(0 2.313px 1.734px rgba(0,0,0,.1)) drop-shadow(0 1.156px 1.156px rgba(0,0,0,.06)); }
.coupon-layer-middle .how-coupon { transform: rotate(2.5deg); }
.coupon-layer-front .how-coupon { transform: rotate(5deg); }
.how-coupon-visual { position: relative; z-index: 2; flex: 0 0 120.25px; align-self: stretch; height: 117.938px; margin-right: -9.25px; padding: 4.625px; }
.how-coupon-bg { position: absolute; z-index: 0; top: -3.014px; left: -2.97px; width: 126.047px; max-width: none; height: 129.152px; }
.how-coupon-product { position: absolute; z-index: 2; top: 4.625px; left: 4.625px; width: 111px; height: 108.688px; }
.how-coupon-product img { width: 100%; height: 100%; object-fit: contain; }
.how-coupon-ribbon { position: absolute; z-index: 3; top: 4.625px; left: 4.625px; padding: 4.625px 9.25px; border-radius: 999px; color: #f8fafc; background: #be0005; font-size: 8.09px; font-style: normal; font-weight: 700; line-height: 11.563px; letter-spacing: 0; white-space: nowrap; }
.how-coupon-copy { position: relative; z-index: 1; display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; height: 117.938px; padding: 9.25px 9.25px 9.25px 18.5px; gap: 4.625px; color: var(--navy); background: #fff; text-align: left; }
.how-coupon-copy strong { flex: 1 1 0; width: 100%; min-height: 0; overflow: hidden; font-size: 10.41px; font-style: normal; font-weight: 700; line-height: 16.188px; letter-spacing: 0; }
.how-coupon-copy > span { width: 100%; padding-bottom: 2.313px; font-size: 8.09px; font-style: normal; font-weight: 400; line-height: 11.563px; letter-spacing: 0; }
.how-coupon-copy > span b { font-weight: 700; }
.how-coupon-copy i { display: flex; align-items: center; justify-content: center; height: 20.813px; padding: 4.625px 9.25px; border-radius: 999px; color: #f8fafc; background: #be0005; font-size: 8.09px; font-style: normal; font-weight: 700; line-height: 11.563px; letter-spacing: 0; white-space: nowrap; }
.coupon-step-number { position: absolute; z-index: 4; top: 31.25px; left: 3.75px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #f8fafc; background: #be0005; font-size: 25px; font-weight: 700; line-height: 35px; }
.step h3 { margin-bottom: 12px; font-size: 19px; line-height: 1.3; }
.step p { margin: 0; color: #f2f5ff; font-family: var(--font); font-size: 15px; line-height: 1.45; }

.app-section { padding-block: 100px; }
/* Figma (6721:6676) delí kontejner na dva rovnaké stĺpce 624 s medzerou 64; `1.08fr` bol odhad
   z prvého exportu a kopírku zužoval na 600. */
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.app-copy h2 { margin-bottom: 32px; }
/* Medzery v kopírke sú vo Figme (6721:6677) rovnomerných 32, len medzi H3 a mriežkou featur 16.
   Predtým tu bolo 30 a 14, čo stĺpec skrátilo na 406 — a keďže pás snímok berie výšku práve
   z neho, slidy vychádzali 228.4 namiesto 231.75. */
.app-copy > p { margin-bottom: 32px; font-family: var(--font); font-size: 18px; line-height: 28px; }
.app-copy h3 { margin-bottom: 16px; font-size: 18px; line-height: 28px; }
/* Zoznam „V aplikácii nájdete“ používa zdieľaný `.app-icon-list` (Icon Box `6657:4988`) —
   je to tá istá komponenta ako na Mobilnej aplikácii, len s iným poradím popiskov. Predtým tu
   boli textové glyfy `▣ ✺ ◎ ♧` ako placeholder z prvého exportu. */
.store-buttons { display: flex; gap: 24px; }
.store-buttons img { height: 52px; width: auto; }
/* Figma má druhý badge v riadku (Google Play) prevrátený cez `-scale-y-100`, takže
   samotný exportovaný asset je zrkadlový — bez prevrátenia je „Google Play“ nad „GET IT ON“.
   Overené meraním ťažiska textu v assete: 39.4 % výšky (veľký text hore = zle) → po
   prevrátení 60.0 % (veľký text dole = správne). App Store variant zrkadlený nie je.
   Rovnaká pasť ako pri `.footer-social-links img` a `.cta-phone` (viď figma-readme §10). */
.store-buttons img[src*="google-play"] { transform: scaleY(-1); }
/* Google Play tu kedysi bol zástupný badge poskladaný z Arial textu a znaku „▶“ (placeholder
   z prvého exportu homepage). Figma na všetkých rámoch používa tú istú komponentu `Store Badges`
   ako App Store (166.5×48.1 na mobile, 180×52 na desktope), takže je nasadený reálny asset
   a zástupné pravidlá `.store-badge` sú odstránené — nová stránka nech siahne po `google-play.svg`. */
/* Galéria používa zdieľaný `.app-carousel` — Figma má aj tu (6732:4759 / 6732:7856) tú istú
   komponentu Carousel ako Mobilná aplikácia: šesť slidov v pomere 810/1440, medzera 8, výška
   podľa kopírovacieho stĺpca. Predtým tu bola mriežka troch slidov v pomere 248/440. */
.gallery-dots { position: absolute; bottom: 0; left: 50%; display: flex; gap: 16px; transform: translateX(-50%); }
.gallery-dots b, .gallery-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c5cbd8; }
.gallery-dots b { background: var(--navy); }
/* Po načítaní `carousel.js` sa `b`/`i` nahradia tlačidlami — tie zostávajú ako vzhľad bez JS.
   Kruh je stále 8px z Figmy, ale klikacia plocha je 24px: záporný okraj vráti tlačidlu v layoute
   pôvodných 8px, takže sa medzera 16 ani výška riadku bodiek nemenia. */
.gallery-dots[hidden] { display: none; }
.gallery-dots button { display: grid; place-items: center; width: 24px; height: 24px; margin: -8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; }
.gallery-dots button::before { width: 8px; height: 8px; border-radius: 50%; background: #c5cbd8; content: ""; transition: background .3s ease, transform .3s ease; }
.gallery-dots button:hover::before { background: #94a2bd; transform: scale(1.25); }
.gallery-dots button[aria-current]::before { background: var(--navy); }
.gallery-dots button:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }

.faq { padding-block: 96px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; }
.faq h2 { margin-bottom: 28px; }
.faq-intro > p { max-width: 540px; margin-bottom: 30px; font-family: var(--font); font-size: 18px; line-height: 1.55; }
.faq-intro > a { display: inline-flex; align-items: flex-start; gap: 8px; vertical-align: top; color: var(--red); font-weight: 800; }
.faq-intro > a img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 800; list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { flex: 0 0 16px; width: 16px; height: 16px; background: url("assets/chevron-down.svg") center / 16px 16px no-repeat; content: ""; }
.accordion details[open] summary::after { background-image: url("assets/chevron-up.svg"); }
.accordion details p { margin: 0; padding: 0 36px 24px 0; font-family: var(--font); line-height: 1.55; }
.accordion details p a { font-weight: 700; text-decoration: underline; }

/* Call to Action (Figma 6784:20613 desktop 1512×564 / 6784:20637 mobil 393×716).
   Panel 1312×436, stĺpce 656/656; kopírka má padding 48/64 a medzery 32 (nadpis → podnadpis 24). */
.cta-section { padding-top: 64px; }
.cta-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: 436px; border-radius: var(--radius); color: #f8fafc; background: var(--red); }
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px 64px; }
/* Figma dáva nadpisom `font/tracking/normal` = 0. Globálne -.035em by riadok „členom Vaša Klub“
   skrátilo z 523 na 489px, teda o 6.5 % proti zadaniu — v tejto sekcii je preto vypnuté. */
.cta-copy h2 { margin-bottom: 24px; letter-spacing: 0; }
.cta-copy > p { margin-bottom: 32px; font-size: 20px; font-weight: 700; line-height: 28px; }
/* Disclaimer je jediný text panelu s `theme/background` (čistá biela), zvyšok je #f8fafc. */
.cta-copy small { margin-top: 32px; color: var(--white); font-family: var(--font); font-size: 14px; line-height: 20px; }
.cta-copy small a { font-weight: 800; text-decoration: underline; }
/* Telefón prečnieva 74px nad hornú hranu panelu (510 vs 436), takže panel ani artwork nesmú
   orezávať — fotku si orezáva vlastný box, ktorý zároveň drží zaoblenie pravých rohov. */
.cta-art { position: relative; min-height: 436px; }
.cta-photo { position: absolute; inset: 0; overflow: hidden; border-radius: 0 var(--radius) var(--radius) 0; }
/* Kupola je 780×671 @ 23,−127 v boxe 656×436. Škáluje sa podľa výšky boxu (tá je stabilných 436)
   a šírka sa dopočíta z proporcií — v užšom okne sa teda neplošťuje a stále prekryje celý box.
   `max-width: none` je nutné, inak ju `img { max-width: 100% }` zrazí na šírku boxu. */
.cta-background { position: absolute; top: -29.1284%; left: 3.5061%; width: auto; height: 153.8991%; max-width: none; }
/* Instance telefónu má vo Figme scaleX(−1) a obrázok v nej je väčší než rám (111.19 × 112.86 %),
   posunutý o −11.19 % vľavo. Prevrátenie je na `<img>`, takže posun sa meria od pravej hrany. */
.cta-phone-frame { position: absolute; bottom: 0; left: 12.6524%; width: 77.2866%; aspect-ratio: 507 / 510; overflow: hidden; }
.cta-phone { position: absolute; top: -.03%; right: -11.19%; width: 111.19%; height: 112.86%; max-width: none; transform: scaleX(-1); }

.partners { overflow: hidden; padding-block: 64px; background: var(--pale-blue); }
.partners-inner { display: flex; align-items: center; gap: 64px; }
.partners-inner > p { flex: 0 0 auto; margin: 0; font-size: 18px; font-weight: 700; line-height: 28px; text-align: center; white-space: nowrap; }
/* Logo wall — nekonečný marquee s jemným fade out vľavo aj vpravo (Figma poznámka: Logo wall).
   Track obsahuje dve rovnaké skupiny loga, posun o -50 % = presne jedna skupina → bezšvový cyklus. */
@keyframes partner-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-logos { --fade: 100px; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.partner-logos::before, .partner-logos::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: var(--fade); content: ""; pointer-events: none; }
.partner-logos::before { left: 0; background: linear-gradient(to right, var(--pale-blue), transparent); }
.partner-logos::after { right: 0; background: linear-gradient(to left, var(--pale-blue), transparent); }
.partner-track { display: flex; width: max-content; animation: partner-marquee 30s linear infinite; will-change: transform; }
.partner-logos:hover .partner-track { animation-play-state: paused; }
.partner-group { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
/* Prirodzená šírka loga pri fixnej výške — presne ako vo Figme (32 px desktop, 24 px mobil). */
.partner-logos img { flex: 0 0 auto; width: auto; height: 32px; }

.site-footer { padding: 64px 0 24px; background: var(--light-blue); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 344px); align-items: start; gap: 64px; }
.footer-brand { margin-bottom: 16px; }
.footer-brand .brand-logo { width: 200px; height: auto; }
.footer-about p, .footer-help p { font-family: var(--font); font-size: 14px; line-height: 20px; }
.footer-about p { margin-bottom: 16px; }
.footer-about p + p { margin-bottom: 0; font-size: 12px; line-height: 16px; }
.footer-column { display: flex; flex-direction: column; gap: 8px; }
.footer-column h2, .footer-help h2 { margin-bottom: 8px; font-size: 16px; line-height: 24px; letter-spacing: 0; color: #000; }
.footer-column a, .footer-help a { font-family: var(--font); font-size: 14px; line-height: 20px; }
.footer-column a:hover, .footer-help a:hover { text-decoration: underline; }
.footer-column .is-current { color: var(--red); font-weight: 800; }
.footer-help { width: 100%; min-width: 0; }
.footer-help-top { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; width: 100%; min-height: 108px; }
.footer-help-copy { min-width: 0; padding-bottom: 8px; }
.footer-help h2 { margin: 0 0 16px; }
.footer-help p { margin: 0; }
.footer-help p a { font-weight: 800; text-decoration: underline; }
.footer-help-faq { display: flex; align-items: flex-end; width: 100%; height: 37px; border-top: 1px solid var(--border); line-height: 20px; }
.footer-illustration { position: relative; width: 128px; height: 108px; }
.footer-illustration img { position: absolute; top: -35px; left: 0; display: block; width: 128px; max-width: none; height: 157.22px; clip-path: inset(0 0 14.22px 0); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; font-size: 12px; font-weight: 700; line-height: 16px; color: #000; }
.footer-bottom p { margin: 0; }
.footer-socials { display: flex; align-items: center; gap: 24px; width: 224px; height: 30px; }
.footer-socials > span { flex: 0 0 89px; white-space: nowrap; }
.footer-social-links { display: flex; align-items: center; width: 111px; height: 30px; }
.footer-social-links a { display: block; flex: 0 0 37px; width: 37px; height: 30px; padding-right: 7px; opacity: .5; }
.footer-social-links img { display: block; width: 30px; height: 30.2637px; max-width: none; transform: scaleY(-1); }

/* ==========================================================================
   Klubové zľavy (klubove-zlavy.html) — Figma 6777:14170 desktop / 6760:8914 mobil,
   prázdny stav 6777:16540 / 6777:17805.
   Header, kupón, kategórie, CTA, logo wall a pätička sú zdieľané s homepage —
   tu je len to, čo homepage nemá.
   ========================================================================== */

/* Omrvinky (6777:14173): pruh 36 = 8 + 20 + 8, pozadie `theme/breadcrumbs-background`.
   Figma kreslí obrys dovnútra rozmeru, takže 1px linky sa odoberá zo spodného paddingu —
   inak by pruh vyšiel 37 a posunul celú stránku o pixel nižšie. */
.breadcrumbs { border-bottom: 1px solid var(--border); background: var(--pale-blue); padding: 8px 0 7px; }
.breadcrumbs ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; font-size: 14px; line-height: 20px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--navy); }
.breadcrumb-sep { justify-content: center; width: 20px; height: 20px; }
.breadcrumb-sep img { width: 14px; height: 14px; }

/* Modrý pruh s H1 (6777:14174): 128 → H1 → 32 → podnadpis → 160.
   Spodných 160 je zámerne veľa — do dolnej polovice sa zapustí pás kategórií. */
.page-hero { padding-block: 128px 160px; background: var(--light-blue); text-align: center; }
.page-hero h1 { margin-bottom: 32px; font-size: clamp(64px, 6.65vw, 96px); line-height: 1; }
.page-hero p { margin: 0; font-size: 20px; line-height: 28px; }
/* Figma láme nadpis inde na desktope („Exkluzívne zľavy / pre členov Vaša Klub“)
   než na mobile („Exkluzívne / zľavy pre členov / Vaša Klub“). */
.page-hero h1 .br-m { display: none; }

/* Pás kategórií sedí na spodnej hrane modrého pruhu — polovica v modrom, polovica v bielom
   (Figma: sekcia 80 vysoká s obsahom 160 posunutým o -80). */
.category-strip { position: relative; z-index: 2; margin-top: -80px; }

/* Filtre (6777:15799): chipy 40 vysoké, na desktope vycentrované s medzerou 16. */
.filter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.filter-chip { display: inline-flex; align-items: center; height: 40px; padding-inline: 16px; border: 0; border-radius: 9999px; color: var(--navy); background: #f1f5f9; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; cursor: pointer; }
.filter-chip:hover { background: #e2e8f0; }
.filter-chip.is-active { color: #f8fafc; background: var(--red); }

/* Počet výsledkov + radenie (6777:16301). */
.result-bar { display: flex; align-items: center; gap: 32px; }
/* Odstup patrí k filtrom, nie k riadku samotnému — v prázdnom stave (6777:16540) filtre nie sú
   a riadok začína hneď na hornom paddingu sekcie. */
.filter-chips + .result-bar { margin-top: 32px; }
.result-count { flex: 1 1 0; min-width: 0; margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.sort-select { position: relative; flex: 0 0 auto; }
/* Obrysy sú `inset box-shadow`, nie `border` — Figma ich kreslí dovnútra rozmeru, takže
   spúšťač musí byť presne 230×40 a rozbaľovacie menu 159 široké (rovnaký trik ako `.button-outline`). */
.sort-select > summary { display: flex; align-items: center; gap: 10px; height: 40px; padding: 8px 12px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-size: 14px; line-height: 20px; list-style: none; cursor: pointer; }
.sort-select > summary::-webkit-details-marker { display: none; }
.sort-select > summary > span { width: 180px; text-align: left; }
.sort-select > summary img { flex: 0 0 16px; width: 16px; height: 16px; opacity: .5; }
.sort-select[open] > summary img { transform: scaleY(-1); }
.sort-menu { position: absolute; z-index: 10; top: 40px; left: 0; width: 159px; padding: 4px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border), 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.sort-menu button { display: flex; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 2px; background: none; color: var(--navy); font-size: 14px; line-height: 20px; text-align: left; white-space: nowrap; cursor: pointer; }
.sort-menu button:hover { background: #f1f5f9; }

.query-grid { margin-top: 32px; }

/* Stránkovanie (6777:14211): 64 od poslednej karty (32 medzera + 32 padding rámu), potom
   tlačidlo 56, medzera 32 a riadok odkazov. */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 64px; }
.pagination-pages { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pagination-link, .pagination-page { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 6px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.pagination-link { gap: 4px; }
.pagination-prev { padding: 0 16px 0 10px; }
.pagination-next { padding: 0 10px 0 16px; }
.pagination-link img { flex: 0 0 16px; width: 16px; height: 16px; }
.pagination-page { width: 40px; }
.pagination-link:hover, .pagination-page:hover { background: #f1f5f9; }
/* Aktuálna strana je vo Figme odlíšená len 1px rámčekom, bez výplne a bez tučného písma. */
.pagination-page[aria-current="page"] { border: 1px solid var(--border); background: var(--white); }
.pagination-ellipsis { display: grid; place-items: center; width: 36px; height: 36px; }
.pagination-ellipsis img { width: 24px; height: 24px; }

/* Prázdny stav (6777:17108) — je to chybový stav načítania, nie „nič sa nenašlo“:
   vo Figme k nemu nepatria ani filtre, ani stránkovanie. */
.query-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; text-align: center; }
.query-empty img { width: 160px; height: 181.35px; }
.query-empty p { margin: 0; font-size: 20px; line-height: 28px; }
.button-compact { height: 36px; padding: 8px 16px; font-size: 14px; line-height: 20px; }

/* ==========================================================================
   Detail klubovej zľavy (klubove-zlavy-detail.html) — Figma 6777:9263 desktop,
   6777:11317 mobil. Desktopový rám je kreslený na 1440 (nie 1512 ako ostatné
   stránky), kontejner z toho aj tak vychádza na 1312, takže sa nič nemení.
   Omrvinky, kupón, logo wall a pätička sú zdieľané — nové je len samotné telo
   detailu a sekcia „Ďalšie klubové zľavy“.
   ========================================================================== */

/* Posledná omrvinka je názov produktu; Figma jej dáva `flex: 1` s trojbodkou.
   Na desktope sa nikdy neuplatní (1312 uživí celý názov), na mobile áno. */
.breadcrumb-current { flex: 1 1 0; min-width: 0; }
.breadcrumb-current span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modrá sekcia (6777:9272): 128 → karta 632 → 128. Dekoratívna kvapka (6777:12722) je
   1530.43×878, vycentrovaná s posunom +4.5px a zarovnaná na hornú hranu; do spodnej
   hrany sekcie jej chýba 10px. Je širšia než rám, takže ju sekcia musí orezať. */
.coupon-detail { position: relative; overflow: hidden; padding-block: 128px; background: var(--light-blue); }
.coupon-detail-blob { position: absolute; top: 0; left: calc(50% + 4.5px); width: auto; max-width: none; height: calc(100% - 10px); aspect-ratio: 1530.43 / 878; transform: translateX(-50%); }
/* Figma kreslí 1px obrys dovnútra rozmeru, takže karta musí zostať presne 1312 široká
   (rovnaký trik ako `.button-outline` a `.sort-select`). Tieň je shadow/2xl. */
.coupon-detail-card { position: relative; display: flex; align-items: flex-start; gap: 32px; padding: 32px; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--border), 0 25px 50px -12px rgba(0, 0, 0, .25); }

/* Stĺpce sú presne polovica obsahu karty (608 z 1248). `flex-basis: 0` sem nesedí — pri
   `box-sizing: border-box` sa základ vizuálu zväčší o jeho 8px padding a stĺpce vyjdú
   nerovnako (616 / 600). */
.coupon-detail-visual { position: relative; display: flex; flex: 1 1 calc(50% - 16px); align-items: center; align-self: stretch; min-width: 0; isolation: isolate; padding: 8px; }
/* Kupónový tvar (6777:10029) je 608×537 vycentrovaný v 608×568 boxe, teda 15.5px odsadenie
   zhora aj zdola. SVG má okolo tvaru ešte rezervu na tieň (5px po stranách, 1 hore, 8.5 dole),
   preto tie záporné okraje — presne ako `.product-visual::before` v kupóne. */
.coupon-detail-ticket { position: absolute; z-index: 0; top: 14.5px; right: -5px; bottom: 7px; left: -5px; background: url("assets/detail-ticket-bg.svg") center / 100% 100% no-repeat; }
.coupon-detail-ribbon { position: absolute; z-index: 3; top: 0; left: 32px; margin: 0; padding: 24px; border-radius: 0 0 var(--radius) var(--radius); color: #f8fafc; background: var(--red); font-size: 36px; font-weight: 700; line-height: 40px; letter-spacing: 0; text-align: center; font-feature-settings: "ss02" 1; }
.coupon-detail-photo { position: relative; z-index: 2; flex: 1 1 0; align-self: stretch; min-width: 0; }
/* Obrázok je vo Figme štvorec so šírkou celého kontejnera (592×592 v 592×552), takže o 20px
   prečnieva nad aj pod neho — karta si prečnievajúcu časť oreže. */
.coupon-detail-photo img { position: absolute; top: 50%; left: 0; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transform: translateY(-50%); }

.coupon-detail-copy { display: flex; flex: 1 1 calc(50% - 16px); flex-direction: column; gap: 24px; min-width: 0; }
.coupon-detail-head { display: flex; align-items: flex-start; gap: 8px; }
.coupon-detail-title { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
.coupon-detail-name { display: flex; flex-direction: column; gap: 8px; }
.coupon-detail-overline { margin: 0; color: var(--red); font-size: 18px; font-weight: 700; line-height: 28px; }
/* Figma dáva názvu produktu `font/tracking/normal` = 0 a žiadny `ss02` — globálne -.035em
   a ss02 z `h1` sa tu preto vypínajú (rovnaká výnimka ako v `.cta-copy h2`). */
.coupon-detail-copy h1 { margin: 0; font-size: 30px; line-height: 36px; letter-spacing: 0; font-feature-settings: normal; }
.coupon-detail-copy h2 { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: 0; font-feature-settings: normal; }
.coupon-detail-lead { margin: 0; font-size: 14px; line-height: 20px; }
.coupon-detail-lead strong { font-weight: 700; }
.coupon-detail-close { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 9999px; background: #f1f5f9; }
.coupon-detail-close:hover { background: var(--border); }
.coupon-detail-close img { width: 20px; height: 20px; }
.coupon-detail-benefit { display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow: hidden; border-radius: 12px; background: var(--light-blue); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.coupon-detail-benefit ul { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.coupon-detail-benefit li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 20px; }
.coupon-detail-benefit li img { flex: 0 0 20px; width: 20px; height: 20px; }
.coupon-detail-how { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.coupon-detail-how p { margin: 0; font-size: 14px; line-height: 20px; }
.coupon-detail-actions { align-items: center; gap: 24px; }

/* Oddeľovač je len v mobilnom ráme (6777:12354) — desktop ide z modrej sekcie rovno do bielej. */
.detail-divider { display: none; }

/* „Ďalšie klubové zľavy“ (6777:10076): 128 → H2 40 → 64 → 10 kupónov → 64 → tlačidlo 56 → 128.
   H2 je tu o stupeň menší než sekčné nadpisy zvyšku stránky (36/40 namiesto 42–60) a Figma mu
   dáva `font/tracking/normal` = 0, takže sa vypína aj globálne -.035em. */
.related-discounts { padding-block: 128px; }
.related-discounts h2 { margin-bottom: 64px; font-size: 36px; line-height: 40px; letter-spacing: 0; }
.related-discounts .center { margin-top: 64px; }

/* ==========================================================================
   Ako funguje Vaša Klub (ako-funguje.html) — Figma 6813:6245 desktop,
   6813:6042 mobil, FAQ v rozbalenom stave 6813:9646.
   Hlavička, omrvinky, CTA, logo wall, pätička, `.button`, `.container`,
   `.divider-row`, accordion aj tokeny sú zdieľané — nové je hero, pruh
   stackujúcich kariet a dvojstĺpec s carouselom aplikácie.
   Triedy sú zámerne jednoúrovňové (`.guide-faq`, nie `.page-… .faq`), aby
   neskoršie mobilné pravidlá zdieľaných komponentov normálne prebili tie tunajšie.
   ========================================================================== */

/* Hero (6813:6249): modrý pruh, 128 → H1 → 32 → podnadpis → 32 → tlačidlo 56 → 64. */
.guide-hero { padding-block: 128px 64px; background: var(--light-blue); text-align: center; }
/* Figma dáva nadpisu `font/tracking/normal` = 0 a na desktope mu `ss02` **nezapína**
   (na mobile áno — viď mobilný blok). Globálne -.035em aj ss02 z `h1` sa preto vypínajú. */
.guide-hero h1 { margin-bottom: 32px; font-size: 72px; line-height: 72px; letter-spacing: 0; font-feature-settings: normal; }
.guide-hero p { margin: 0 0 32px; font-size: 24px; line-height: 32px; }
.guide-hero .button-row { justify-content: center; gap: 24px; }

/* Pruh kariet (6813:6315): 64 → 3× karta 564 s medzerou 32 → 128.
   Karta je široká 1440 (nie 1312) a vnútorný padding 64 zarovná text presne na `.container`. */
.guide-stack { padding-block: 64px 0; background: var(--light-blue); }
/* Spodných 128px sekcie je zámerne `::after`, nie `padding-bottom`: `sticky` sa obmedzuje
   content-boxom rodiča, takže s paddingom by poslednej karte neostalo kam cestovať a plne
   stackovaný stav by nikdy nenastal. Ako súrodenec kariet dá tá istá výška 128px zábehu.
   Celková výška sekcie (1948) sa nemení. */
.guide-stack::after { display: block; height: 128px; content: ""; }
/* Stackovanie pri scrollovaní — Figma ho kreslí ako samostatný rám `6813:9730` (1512×934):
   tie isté tri karty cez seba na y 0 / 89 / 178, teda **odstup 89** a vrchná karta navrchu.
   Rám je vysoký presne ako viewport (64 nad prvou kartou + 742 stack + 128 pod), takže
   zarážky vychádzajú na 64 / 153 / 242. Platí len pre desktop, pri 980 sa `sticky` vypína. */
/* Šírka je `container/8xl` = 1440 rovnako ako `.header-inner`; s vnútorným paddingom 64 tak
   text karty lícuje presne s `.container` (1312) na oboch stranách. Rezerva 16px drží 8px okraj
   z mobilného rámu aj v úzkom okne, kde sa strop 1440 neuplatní. */
.guide-card { position: sticky; top: 64px; display: flex; align-items: center; width: min(1440px, 100% - 16px); margin-inline: auto; border-radius: var(--radius-lg); background: var(--white); }
.guide-card + .guide-card { margin-top: 32px; }
.guide-card:nth-child(2) { top: 153px; }
.guide-card:nth-child(3) { top: 242px; }
.guide-card-copy { display: flex; flex: 1 1 0; flex-direction: column; gap: 32px; min-width: 0; padding: 64px; }
.guide-card-copy h2 { margin: 0; font-size: 60px; line-height: 60px; letter-spacing: 0; }
.guide-card-copy h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: 0; }
.guide-card-copy p { margin: 0; font-size: 18px; line-height: 28px; }
.guide-card-copy .guide-lead { font-weight: 700; }
.guide-card-copy .button-row { gap: 24px; }
.guide-card-block { display: flex; flex-direction: column; gap: 16px; }
/* Stĺpce sú presne polovica karty (720 z 1440). Obrázok má vo Figme pevných 500,
   `min-height` ho drží aj vtedy, keď kopírka v užšom okne narastie — vtedy sa dotiahne
   na výšku karty namiesto toho, aby pod ním ostala prázdna biela plocha. */
.guide-card-media { display: flex; flex: 0 0 50%; flex-direction: column; align-self: stretch; padding: 32px; }
/* Stĺpcový flex + `flex-basis: 500px` — inak by si `<img>` vzal výšku z vlastného pomeru strán
   (fotky sú 4:3 aj na výšku) a karta by narástla na 630, resp. 1037 namiesto 564. */
.guide-card-media img { flex: 1 1 500px; width: 100%; min-height: 500px; border-radius: var(--radius); background: #d9d9d9; object-fit: cover; }

/* Zoznam „Po registrácii môžete svoj účet používať“ (6813:8267) — na desktope tri položky
   vedľa seba s medzerou 16; sú hug-content, takže `flex-wrap` ich zalomí presne tam,
   kde prestane byť miesto (mriežka s pevnými stĺpcami by v užšom okne pretiekla). */
.guide-inline-list { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.guide-inline-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 18px; font-weight: 700; line-height: 28px; }
.guide-inline-list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }

/* Výhody v tretej karte (6813:9358): 2 stĺpce, medzera 16, posledná položka cez oba. */
.guide-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.guide-benefit-grid li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.guide-benefit-grid li:last-child { grid-column: 1 / -1; }
.guide-benefit-grid img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
.guide-benefit-grid b { display: block; font-size: 18px; font-weight: 700; line-height: 28px; }
.guide-benefit-grid span { display: block; font-size: 16px; line-height: 24px; }

/* Mobilná aplikácia (6813:8151): 128 → dvojstĺpec 352 → 128, bodky visia 32 pod carouselom. */
.guide-app { padding-block: 128px; }
.guide-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.guide-app-copy { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.guide-app-copy h2 { margin: 0; font-size: 60px; line-height: 60px; letter-spacing: 0; }
.guide-app-copy h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: 0; }
.guide-app-copy p { margin: 0; font-size: 16px; line-height: 24px; }
.guide-app-block { display: flex; flex-direction: column; gap: 16px; }
.guide-app-copy .guide-m { display: none; }
/* Mriežka, nie `flex-wrap` — Figma jej dáva `fit-content` stĺpce a položky naprieč riadkami
   sa tak zarovnajú do spoločných stĺpcov (na mobile 2 × 2, kde je to najviac vidno). */
.guide-feature-grid { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 16px; margin: 0; padding: 0; list-style: none; }
.guide-feature-grid li { display: flex; align-items: flex-start; gap: 8px; font-size: 18px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.guide-feature-grid img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
.guide-badges { gap: 32px; }
.guide-badges img { width: auto; height: 52px; }
/* Slidy pretekajú za pravú hranu kontejnera až po okraj stránky (vo Figme ich orezáva až rám
   1512). `--guide-bleed` je skutočne dostupný bočný okraj; -9px je rezerva na posuvník,
   ktorý `100vw` počíta a layout nie — rovnaká konštanta ako pri plávajúcich notách hero. */
.guide-app-carousel { --guide-bleed: max(0px, (100vw - var(--container)) / 2 - 9px); position: relative; }
.guide-app-slides { display: flex; gap: 8px; margin-right: calc(-1 * var(--guide-bleed)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.guide-app-slides::-webkit-scrollbar { display: none; }
.guide-app-slides img { flex: 0 0 auto; width: auto; height: 352px; aspect-ratio: 811 / 1440; border-radius: var(--radius); background: #a8e3fb; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.guide-app-carousel .gallery-dots { bottom: -32px; }
/* Pás sa dá ťahať myšou (viď §18) — `.is-live` pridáva `carousel.js`, bez neho by bol kurzor klamlivý. */
.guide-app-carousel.is-live .guide-app-slides { cursor: grab; }
.guide-app-carousel.is-dragging .guide-app-slides { cursor: grabbing; }

/* Oddeľovač (6813:9642) je vo Figme samostatná sekcia 1512×129 = 64 + 1px linka + 64.
   Zdieľaný `.divider-row` desktopové odsadenie nemá (viď §11, otvorený bod na homepage),
   preto sa tu dopĺňa lokálne. */
.guide-divider { margin-block: 64px; }

/* FAQ (6813:9608): sekcia 416 = 64 + 288 + 64, dva rovnaké stĺpce s medzerou 64.
   Accordion je ten istý komponent ako na homepage, len s inými hodnotami:
   zatvorená položka 60 (16 + 28 + 16), otvorená 108 (+ odpoveď 24 + spodný padding 24). */
.guide-faq { padding-block: 64px; }
.guide-faq-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
.guide-faq h2 { margin-bottom: 32px; }
.guide-faq-intro > p { max-width: none; margin-bottom: 32px; font-size: 18px; line-height: 28px; }
.guide-faq-intro > a { font-size: 18px; line-height: 28px; }
/* Linka je `inset box-shadow`, nie `border` — Figma ju kreslí dovnútra rozmeru, takže položka
   musí zostať presne 60 (rozbalená 108). S `border` vyjde o pixel vyššia (rovnaký trik ako
   `.button-outline` a `.sort-select`). */
.guide-accordion details { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); }
.guide-accordion summary { padding: 16px 0; font-size: 18px; font-weight: 700; line-height: 28px; }
.guide-accordion details p { padding: 0 0 24px; font-size: 16px; line-height: 24px; }

/* Responzívne pravidlá tejto stránky sú zámerne tu, nie v spoločných blokoch nižšie:
   `.guide-*` sú jednoúrovňové triedy, takže neskoršie mobilné pravidlá zdieľaných
   komponentov (`.faq`, `.accordion`, `.divider-row`, `.store-buttons`) ich prebijú
   presne tam, kde to chceme. */

/* Figma definuje len 1512 a 393 — medzi nimi sa uťahuje rozostup, nie typografia
   (rovnaká logika ako pri `.cta-copy`, §10). */
@media (max-width: 1400px) {
  .guide-card-copy { padding: 40px; }
}

@media (max-width: 1230px) {
  /* Tri položky vedľa seba (183 + 16 + 177 + 16 + 150 = 542) sa do stĺpca dvojstĺpca
     zmestia po ~1215px; nižšie sa zalomia na 2 × 2 + 1. */
  .guide-feature-grid { grid-template-columns: repeat(2, max-content); }
}

@media (max-width: 1180px) {
  .guide-card-copy { padding: 32px; }
}

@media (max-width: 980px) {
  .guide-hero { padding-block: 64px; }
  /* Figma dáva 72/72 pri 1512 a 36/40 pri 393; medzi 980 a 680 sa hodnoty dopočítavajú,
     aby na hranici mobilu nebol skok (rovnako ako hero na homepage, §8). */
  .guide-hero h1 { font-size: clamp(36px, calc(12vw - 45.6px), 72px); line-height: clamp(40px, calc(10.667vw - 32.53px), 72px); }
  .guide-hero p { font-size: clamp(18px, calc(2vw + 4.4px), 24px); line-height: clamp(28px, calc(1.333vw + 18.93px), 32px); }

  .guide-stack { padding-block: 64px; }
  /* Stackovanie je podľa návrhu len desktopová vec — v jednostĺpcovej karte by sa aj tak
     nemalo čo prekrývať, takže so `sticky` mizne aj zábeh pre poslednú kartu. */
  .guide-stack::after { display: none; }
  .guide-card { position: static; flex-direction: column; align-items: stretch; width: min(1440px, 100% - 40px); }
  .guide-card-copy { padding: 40px 24px; }
  .guide-card-copy h2 { font-size: clamp(36px, calc(8vw - 18.4px), 60px); line-height: clamp(40px, calc(6.667vw - 5.33px), 60px); }
  .guide-card-media { flex: none; padding: 0 24px 24px; }
  .guide-card-media img { flex: none; min-height: 0; height: clamp(300px, calc(66.667vw - 153.3px), 500px); }

  .guide-app { padding-block: 64px; }
  .guide-app-grid { grid-template-columns: 1fr; gap: 32px; }
  .guide-app-copy h2 { font-size: clamp(30px, calc(10vw - 38px), 60px); line-height: clamp(36px, calc(8vw - 18.4px), 60px); }
  /* Dvojstĺpec sa zložil, takže na tri položky vedľa seba je opäť miesto. */
  .guide-feature-grid { grid-template-columns: repeat(3, max-content); }
  .guide-app-slides { margin-right: 0; }

  .guide-divider { margin-block: 32px; }
  .guide-faq { padding-block: 64px; }
}

/* Presne mobilný rám 6813:6042. */
@media (max-width: 680px) {
  .guide-hero { padding-block: 40px 20px; text-align: left; }
  /* Mobilný nadpis `ss02` má, desktopový nie (6813:9849 vs 6813:6253) — vo Figme
     preukázateľne, hoci to vyzerá skôr ako nedopatrenie v návrhu. */
  .guide-hero h1 { font-feature-settings: "ss02" 1; }
  .guide-hero h1 br, .guide-hero p br { display: none; }
  .guide-hero .button { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }

  .guide-stack { padding-block: 20px 40px; }
  .guide-card { width: min(1440px, 100% - 16px); }
  /* Mobilný rám má medzi kartami 16, desktopový 32 (6813:9874). */
  .guide-card + .guide-card { margin-top: 16px; }
  /* Len odstavce — `h3` („Po registrácii môžete svoj účet používať:“) zostáva podľa Figmy
     aj na mobile 18/28, rovnako ako zoznam pod ním (6813:9880). */
  .guide-card-copy p { font-size: 16px; line-height: 24px; }
  .guide-card-copy .button { height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  /* Zoznam v druhej karte drží na mobile desktopové hodnoty (ikona 24, text 18/28) —
     6813:9881 používa ten istý master Icon Boxu ako desktop, mení sa len smer a medzera. */
  .guide-inline-list { flex-direction: column; gap: 8px; }
  .guide-benefit-grid { grid-template-columns: 1fr; }
  .guide-benefit-grid img { flex-basis: 20px; width: 20px; height: 20px; margin-top: .833px; }
  .guide-benefit-grid b { font-size: 16px; line-height: 24px; }
  .guide-benefit-grid span { font-size: 14px; line-height: 20px; }

  .guide-app { padding-block: 40px 20px; }
  .guide-app-copy h3 { font-size: 16px; line-height: 24px; }
  .guide-app-copy .guide-d { display: none; }
  .guide-app-copy .guide-m { display: block; }
  .guide-app-block + .guide-app-block { gap: 12px; }
  .guide-feature-grid { grid-template-columns: repeat(2, max-content); gap: 12px; }
  .guide-feature-grid li { font-size: 16px; line-height: 24px; }
  .guide-feature-grid img { flex-basis: 20px; width: 20px; height: 20px; margin-top: .833px; }
  /* Mobilný rám má štyri položky — „Aktuálne výhody“ v ňom nie je. */
  .guide-feature-grid li:nth-child(5) { display: none; }
  .guide-badges a { flex: 1 1 0; min-width: 0; }
  .guide-badges img { width: 100%; height: auto; }
  .guide-app-slides { margin-right: -24px; }
  .guide-app-slides img { height: 296px; }
  /* Na mobile sú bodky súčasťou carouselu (6813:6233 je 320 = slidy 296 + 16 + bodky 8),
     nie zavesené pod ním ako na desktope — carousel si na ne drží miesto. */
  .guide-app-carousel { padding-bottom: 24px; }
  .guide-app-carousel .gallery-dots { bottom: 0; }
}

/* ==========================================================================
   Registrácia do Vaša Klub (registracia.html) — Figma 6784:21011 desktop /
   6799:8835 mobil. Kroky formulára: 6794:7319 (neplatné číslo karty),
   6794:7187 (platné), 6784:23494 (adresa + súhlasy prázdne), 6794:7391 (vyplnené).
   Hero stojí na zdieľanom `.hero-grid`, dlaždice na zdieľanom `.benefit-icon`,
   hlavička / omrvinky / logo wall / pätička sú nezmenené — tu je len to nové.
   ========================================================================== */

.page-register .br-m { display: none; }

/* --- Hero (6784:21014 / 6799:8838): sekcia 748 = 128 + 492 + 128 -------------------------- */
/* Kompozícia je tá istá ako v hero homepage — mení sa len artwork (624×492 namiesto 624×520),
   jeho pozadie (peach namiesto light-blue) a spodný padding sekcie. */
.reg-hero { padding-bottom: 128px; }
.reg-hero-art { aspect-ratio: 624 / 492; background: var(--peach); }
.reg-hero-blob { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: inherit; }
.reg-hero-blob-m { display: none; }

/* Telefón (6794:8708): 386×579 na spodnej hrane artworku, teda 87px nad jeho horný okraj.
   Bočné tlačidlá a biely obrys, ktoré Figma kreslí na x −7.53 / 380.85, ležia vo Figme mimo
   `overflow-clip` rámu telefónu, takže sú neviditeľné — nekreslia sa.
   Rádiusy sú v px z Figmy: pri 1512 sedia presne, v užšom okne sa artwork škáluje a rádius nie. */
.reg-phone { position: absolute; bottom: 0; left: 50%; width: 61.859%; height: 117.683%; overflow: hidden; border: 5.432px solid #534b5f; border-bottom: 0; border-radius: 60.656px 60.656px 0 0; background: #000; transform: translateX(-50%); }
.reg-phone-screen { position: absolute; top: 1.894%; left: 3.061%; width: 94.118%; height: 133.217%; max-width: none; border-radius: 44.36px; object-fit: cover; object-position: top; }
.reg-phone-pill { position: absolute; top: 3.63%; left: 34.674%; width: 30.649%; aspect-ratio: 114.974 / 32.591; border-radius: 9999px; background: #000; }

/* Plávajúce noty. Ružová je vo Figme dvojica pod sebou v jednom ráme (6802:10005) s medzerou 8;
   bublinu `::after` má len prvá z nich. Zelená (6784:21042) má ikonu check-circle 32px. */
.reg-note-stack { position: absolute; top: 26.829%; left: -65px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.reg-hero-art .note-benefits { position: relative; top: auto; left: auto; }
.reg-hero-art .note-benefits-2::after { display: none; }
/* Tá istá logika ako v `.note-savings` na homepage (viď §9 figma-readme), len presah je 64 nie 65. */
.reg-note-free { top: 63.211%; right: calc(-1 * clamp(0px, max(32px, (100vw - 1312px) / 2 - 9px) - 18px, 64px)); padding-left: 12px; }
/* Dve vrstvy ikony sa musia selektovať cez rodiča — `.floating-note img` má sizing na 32×32
   a vyššiu špecificitu, takže by inak obe vrstvy roztiahol na celý box. */
.reg-note-icon { position: relative; flex: 0 0 32px; width: 32px; height: 32px; }
.reg-note-icon img { position: absolute; max-width: none; }
.reg-note-icon .reg-note-icon-circle { top: 9.38%; left: 9.38%; width: 81.24%; height: 81.24%; }
.reg-note-icon .reg-note-icon-check { top: 35.62%; left: 32.99%; width: 34.02%; height: 28.74%; }

/* --- „Čo získate s Vaša Klub?“ (6784:21053 / 6799:8872) ----------------------------------- */
/* Sekcia 788 = 128 → H2 60 → 64 → dlaždice 352 → 64 → tlačidlo 56 → 64.
   Kupola je ten istý asset ako na homepage (3268×1081 na x −897), len začína na hornej hrane
   sekcie (y 0), nie až na 338. */
.reg-benefits { position: relative; overflow: hidden; padding-block: 128px 64px; }
.reg-benefits-wave { top: 0; left: -59.325%; width: 216.14%; height: auto; }
.reg-benefits-inner { position: relative; z-index: 2; }
.reg-benefits h2 { margin-bottom: 64px; text-align: center; }
/* Dlaždica (6784:21090): 236.8×352 = (1312 − 4×32) / 5, padding 24, gap 24, radius 24,
   shadow/md, ikonový box 96 (padding 24 + ikona 48), titulok 18/28 a popis 16/24 vľavo.
   Oproti homepage má popis, je zarovnaná vľavo a ikonový box sa nikde nezmenšuje. */
.reg-benefit-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.reg-benefit-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px; border-radius: var(--radius); background: var(--white); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.reg-benefit-text { display: flex; flex-direction: column; gap: 8px; }
.reg-benefit-card h3 { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: 0; }
.reg-benefit-card p { margin: 0; font-size: 16px; line-height: 24px; }
/* `.benefit-icon` sa na homepage pod 1400 / 1180 zmenšuje na 80 / 48 — tu má zostať 96 v celom
   rozsahu (mobilný rám 6799:9746 má rovnako 96 + 48), preto vlastná, silnejšia selekcia.
   `flex: none` je nutné: pravidlo pre homepage dáva pod 1180 `flex: 0 0 48px` a v stĺpcovom
   flexe je flex-basis hlavná os, teda výška — prebilo by `height: 96px` a dlaždica by vyšla 304. */
.page-register .benefit-icon { flex: none; width: 96px; height: 96px; border-radius: var(--radius); }
.page-register .benefit-icon img { width: 48px; height: 48px; }
.reg-benefit-dots { display: none; }
.reg-benefits-center { margin-top: 64px; }
.reg-benefits-button { width: 288px; }

/* --- Registračný formulár (6784:21208 / 6799:9815) ---------------------------------------- */
/* Sekcia 780 = 128 + 588 + 64. Kontejner je 1152 (`.compact-container`) s paddingom 64,
   teda obsah 1024 = kopírka 511 + medzera 64 + panel 449. */
.reg-form-section { padding-block: 128px 64px; }
.reg-form-grid { display: flex; align-items: flex-start; gap: 64px; padding-inline: 64px; }
.reg-form-copy { flex: 1 1 0; min-width: 0; }
.reg-form-copy h2 { margin-bottom: 32px; }
.reg-form-copy > p { margin: 0 0 32px; font-size: 18px; line-height: 28px; }
/* Icon Box (6784:21214) — ten istý vzor ako kontakt v „Časté otázky“ na homepage. */
/* `vertical-align: top` je nutné — pri baseline zarovnaní pridá strut riadka pod inline-flex
   ešte ~5px na dotah, a blok kopírky vyjde 333 namiesto 328 (rovnaká oprava ako `.faq-intro > a`). */
.reg-contact { display: inline-flex; align-items: flex-start; gap: 8px; vertical-align: top; color: var(--red); font-size: 18px; font-weight: 700; line-height: 28px; }
.reg-contact img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
.reg-contact:hover span { text-decoration: underline; }
/* Panel (6784:21215): padding 48 / 48 / 32 — potvrdzuje to aj rám kroku 6794:7319,
   kde 712 = 48 + formulár 632 + 32. Pozadie je `theme/secondary`: v rámoch krokov 3 a 4 nie je
   po tlačidle „Späť“ vidieť pilulku, hoci má `theme/secondary` výplň — teda splýva s panelom. */
.reg-form-panel { flex: 0 0 449px; padding: 48px 48px 32px; border-radius: var(--radius); background: #f1f5f9; }

/* Formulár (6784:23442 na stránke / 6794:7320 v ráme kroku): 353 široký, 24 medzi blokmi,
   16 medzi skupinami polí, 4 medzi popiskom a inputom. */
.signup-form, .signup-step { display: flex; flex-direction: column; gap: 24px; }
.signup-step { margin: 0; padding: 0; border: 0; }
.signup-step[hidden], .input-group[hidden] { display: none; }
.signup-fields { display: flex; flex-direction: column; gap: 16px; }
/* Krok 2 má polia 340 široké (6784:23305), súhlasy pod nimi zostávajú na plných 353. */
.signup-fields-narrow { max-width: 340px; }
.input-group { display: flex; flex-direction: column; gap: 4px; }
.input-label { font-size: 14px; line-height: 20px; }
.input { display: flex; align-items: center; gap: 8px; height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); }
/* Date Picker (2819:1826) má padding 16 a ikonu odtlačenú na pravú hranu, nie gap 8. */
.input-between { justify-content: space-between; padding-inline: 16px; }
.input:focus-within { border-color: var(--navy); }
.input input { flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; color: var(--navy); font: inherit; font-size: 14px; line-height: 20px; }
.input input:focus { outline: none; }
.input input::placeholder { color: var(--muted); opacity: 1; }
.input-status { flex: 0 0 20px; width: 20px; height: 20px; }
.input-calendar { flex: 0 0 18px; width: 18px; height: 18px; }
.input-action { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.input-action img { width: 20px; height: 20px; }
.input-help { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }

/* Checkbox (2674:2124): 16×16, radius 4, obrys `theme/primary`; zaškrtnutý má výplň
   `theme/primary` a 12px fajku. Riadok je `items-start` a checkbox má 2px odsadenie,
   takže sedí na strede prvého 20px riadku textu. */
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; }
.checkbox { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--red); border-radius: 4px; background: var(--white); cursor: pointer; }
.checkbox:checked { background: var(--red) url("assets/checkbox-check.svg") center / 12px 12px no-repeat; }
.checkbox:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.checkbox-row label { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 20px; cursor: pointer; }
.checkbox-row a { text-decoration: underline; }
.consent-list { display: flex; flex-direction: column; gap: 16px; }

/* reCAPTCHA v2 Invisible badge (6794:8378): box je 256×60, tieň pozadia prečnieva 5px na každú
   stranu, preto je zložený asset 266×70 a posúva sa o −5. Vrstva „reCAPTCHA“ pod logom sa
   nekreslí — Figma ju orezáva na 0.8px výšky, čiže je aj v návrhu neviditeľná. */
.recaptcha-badge { width: 256px; height: 60px; }
.recaptcha-badge img { width: 266px; height: 70px; max-width: none; margin: -5px; }

.signup-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.signup-actions-end { justify-content: flex-end; }
/* Tlačidlá vo formulári sú o stupeň menšie než sekčné (6784:23395): h40, padding 24, 14/20. */
.button-form { height: 40px; padding-inline: 24px; font-size: 14px; line-height: 20px; cursor: pointer; }
/* Neaktívne tlačidlo má vo Figme `opacity/50`, nie inú farbu. */
.button:disabled { opacity: .5; cursor: default; }
.button:disabled:hover { transform: none; box-shadow: none; }
.button-primary:disabled:hover { background: var(--red); }

/* --- „Už máte kartu / Už ste členom“ (6798:8809 / 6799:8952) ------------------------------ */
/* Sekcia 727 = 64 + 599 + 64, kontejner 1440 s paddingom 32 → panel 1376 `#080e45` radius 40,
   v ňom riadok 1248×407 s paddingom 96 / 64, stĺpce 321 + 64 + artwork 478 + 64 + 321.
   Na mobile má panel **radius 24**, nie 40 (6799:8954) — to je jediný rozdiel oproti desktopu
   okrem paddingu. Obe tlačidlá sú `theme/primary`, texty biele a na stred. */
.reg-activate { padding-block: 64px; }
.reg-activate > .container { width: min(1440px, calc(100% - 72px)); padding-inline: 32px; }
.reg-activate-panel { position: relative; padding: 96px 64px; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); background: var(--navy); }
/* Kupola (6798:8812): výška = celý panel, šírka z pomeru 1513/868, na stred. Panel ju oreže.
   Figma exportuje dve verzie (1044.11×599 desktop, 1394.47×800 mobil), ale je to **ten istý tvar
   v inej mierke** — po preškálovaní o 1.33556 sedia súradnice do 0.5px a fill aj opacity sú
   zhodné. Mobilná sa preto nenasadzuje (rovnako ako pri kupole v CTA, §10). */
.reg-activate-blob { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; max-width: none; aspect-ratio: 1513 / 868; transform: translateX(-50%); }
.reg-activate-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 64px; }
/* Stĺpce sú vo Figme `flex: 1 0 0` — pri riadku 1248 im vyjde presne 321, artwork si drží 478. */
.reg-activate-col { display: flex; flex-direction: column; align-items: center; flex: 1 0 0; min-width: 0; text-align: center; }
.reg-activate-col h3 { margin: 0 0 16px; font-size: 30px; line-height: 36px; letter-spacing: 0; font-feature-settings: "ss02" 1; }
.reg-activate-col p { margin: 0 0 24px; font-size: 18px; line-height: 28px; }
.reg-activate-figure { flex: 0 0 478px; width: 478px; height: 407px; object-fit: cover; }

/* Oddeľovač pred logo wallom je len v mobilnom ráme (6799:9027). */
.reg-divider { display: none; }

/* Figma defines the desktop header at 1512px only — below that the row is tightened progressively. */
@media (max-width: 1400px) {
  .header-inner { padding-inline: 32px; }
  .desktop-nav { gap: 8px; }
  .brand { flex-basis: auto; }
  /* Dlaždica z Figmy (182.23 široká) uživí titulok 18/28 na dva riadky len pokým je kontejner
     plných 1312px („zdravotné služby“ = 147.2px + 2×16 padding = 179.2 minimum).
     Pod tým sa uťahuje pani aj dlaždice, aby sa titulky nelámali na tri riadky. */
  .benefits-figure { flex-basis: 320px; width: 320px; height: 416px; margin-right: -48px; }
  .benefit-cards { gap: 16px; }
  .benefit-card { gap: 12px; min-height: 0; padding: 20px 12px; }
  .benefit-card h3 { font-size: 15px; line-height: 22px; }
  .benefit-icon { width: 80px; height: 80px; border-radius: 20px; }
  .benefit-icon img { width: 40px; height: 40px; }
  /* Riadok „členom Vaša Klub“ potrebuje pri 60px 523px. Kým je kontejner plných 1312 (do 1376px),
     zmestí sa aj s paddingom 64; nižšie sa stĺpec zužuje, tak sa uťahuje padding — nie typografia. */
  .cta-copy { padding-inline: 40px; }
}

@media (max-width: 1180px) {
  .header-inner { padding-inline: 24px; }
  .desktop-nav { gap: 0; }
  .desktop-nav a { padding-inline: 4px; }
  /* „Čo získate s Vaša Klub“ preberá mobilnú kompozíciu z Figmy (6732:6301): zvislý stĺpec dlaždíc
     238px a pani za nimi vpravo. Desktopový riadok (pani + 5 kariet vedľa seba) tu už nedáva zmysel
     — pod 1180px by karty klesli pod 150px a titulky by sa lámali na tri riadky.
     Blok má presnú šírku z Figmy (96 + 388 = 484px) a centruje sa, kým je okolo neho miesto;
     pod ~508px sa zaráža o ľavý okraj kontejnera a pani vybieha z obrazovky presne ako pri 393px. */
  .benefits { min-height: 0; padding-block: 48px 0; }
  /* Mobilná kupola (Figma 6732:6302): 1822×620 na x -733 / y 0 v sekcii 393×620 — vrchol je hneď
     pod horným okrajom, takže sekcia je celá modrá s tenkým bielym oblúkom navrchu. */
  .benefits-wave { top: 0; left: -186.51%; width: 463.61%; height: 100%; }
  .benefits-inner { min-height: 0; padding-bottom: 0; }
  .benefits h2 { margin-bottom: 32px; text-align: center; }
  .benefits-row { position: relative; display: block; width: 484px; max-width: 100%; min-height: 504px; margin-inline: auto; }
  .benefits-figure { position: absolute; z-index: 0; top: 0; left: 96px; display: block; flex: none; width: 388px; height: 504px; margin: 0; }
  /* Vo Figme je pani zrkadlená len na desktope (instance má scaleX -1), na mobile nie. */
  .figma-lady { transform: none; }
  .benefits-content { position: relative; z-index: 1; }
  .benefit-cards { grid-template-columns: 238px; gap: 16px; overflow: visible; padding: 0; }
  .benefit-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 80px; padding: 16px; text-align: left; }
  .benefit-card h3 { flex: 1 0 0; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; }
  .benefit-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; }
  .benefit-icon img { width: 24px; height: 24px; }
  .benefit-clouds { display: none; }
  /* Tlačidlá 196 + 16 + 163 potrebujú 375px — pri 981px (najužší dvojstĺpcový stav) ich padding 40
     nechá 371 a riadok by sa zlomil. 32 dá 387, takže dvojica zostane vedľa seba v celom rozsahu. */
  .cta-copy { padding-inline: 32px; }
  .footer-grid { gap: 32px; }
}

/* Hlavička sa prepína na mobilný layout skôr než zvyšok stránky — desktopový riadok
   sa nezmestí pod ~1080px bez toho, aby sa muselo ísť pod 16px typografiu z Figmy. */
@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .header-inner { max-width: 1280px; min-height: 64px; padding: 16px 24px; gap: 16px; }
  .brand { flex: 0 0 auto; }
  .site-header .brand-logo { width: 120.75px; height: 24px; }
  .header-actions { margin-left: auto; gap: 16px; }
  .header-actions .button-link { display: none; }
  .header-actions .button-small { width: auto; height: 32px; padding-inline: 12px; font-size: 14px; line-height: 20px; }
  .mobile-nav { display: block; margin-left: 0; }
  .mobile-nav summary { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0; font-size: 14px; font-weight: 700; line-height: 20px; list-style: none; cursor: pointer; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  /* Zatvorené `<details>` má `content-visibility: hidden`, čo z neho robí containing block —
     panel sa potom rozmeria podľa tlačidla MENU a na úzkom telefóne pretečie vpravo
     (a stránka dostane vodorovný posuvník, hoci panel nie je vidieť). */
  .mobile-nav:not([open]) .mobile-nav-panel { display: none; }
  .mobile-nav .menu-icon-close { display: none; }
  .mobile-nav[open] .menu-icon-open { display: none; }
  .mobile-nav[open] .menu-icon-close { display: block; }
  /* Figma kreslí panel len pri 393px, kde je full-bleed. Na tablete by full-bleed odhodil obsah
     na opačný konec obrazovky než je MENU toggle, preto je to tu presne tá istá 393px karta
     z Figmy, len zavesená pod toggle: pravá hrana lícuje s MENU (= padding hlavičky 24px).
     Vnútro tak zostáva pixel po pixli podľa spec-u (položky 24px, tlačidlá 361px). */
  .mobile-nav-panel { position: absolute; top: calc(100% + 1px); right: 24px; left: auto; width: min(393px, calc(100% - 48px)); display: flex; flex-direction: column; border-radius: 0 0 32px 32px; background: var(--white); box-shadow: var(--shadow-xl); }
  .mobile-nav-panel nav { display: flex; flex-direction: column; }
  .mobile-nav-panel nav a { display: flex; align-items: center; height: 56px; padding-inline: 24px; font-size: 16px; font-weight: 700; line-height: 24px; }
  .mobile-nav-panel nav a.is-active { color: var(--red); }
  .mobile-nav-actions { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 16px; }
  .mobile-nav-actions .button { width: 100%; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
}

/* Tri kroky v desktopovej veľkosti potrebujú 3×300 + 2×54 medzery + 2×64 padding panelu
   = 1136px kontejnera, teda okno ~1215px (hranica 1230 je rezerva na širší posuvník).
   Pod tým sa tretí krok orezával o `overflow: hidden`
   panelu. Berie sa preto mobilná mierka kroku z Figmy — artwork 240×200 (0.8) a texty 20/28
   + 16/24 — a panel sa zúži na padding 32; tri kroky sa tak zmestia až po ~900px. */
@media (max-width: 1230px) {
  .how-panel { padding-inline: 32px; }
  .steps { gap: 24px; }
  .step-register, .step-card, .step-coupon { width: 240px; }
  .register-art, .card-art, .coupon-art { margin: 0 -60px -18px 0; transform: scale(.8); transform-origin: top left; }
  .step.step-register p, .step.step-card p, .step.step-coupon p { font-size: 16px; line-height: 24px; }
}

@media (max-width: 980px) {
  .container, .compact-container { width: min(100% - 40px, var(--container)); }
  .hero-grid, .app-grid { grid-template-columns: 1fr; }
  .hero-grid { row-gap: 32px; }
  .hero-copy, .hero-art, .trust-list { grid-column: 1; grid-row: auto; }
  .hero { padding-top: 64px; }
  .hero-copy { max-width: 720px; }
  /* Figma definuje len 96/60 pri 1512 a 36/30 pri 393. Medzi 680 a 980 sa preto veľkosť plynulo
     dopočítava, aby na hranici 680 (kde nastupujú mobilné hodnoty) nebol skok 64 → 36. */
  .hero h1 { font-size: clamp(36px, calc(9.333vw - 27.47px), 64px); }
  h2 { font-size: clamp(30px, calc(4vw + 2.8px), 42px); }
  .hero-art { width: min(100%, 624px); margin-inline: auto; }
  /* Obrázok je tu vycentrovaný a užší, takže miesto po stranách sa počíta inak než na desktope —
     a odrezať sa môžu obe noty, nielen pravá. */
  .note-benefits { left: calc(-1 * clamp(0px, (100vw - 664px) / 2 - 15px, 65px)); }
  .note-savings { right: calc(-1 * clamp(0px, (100vw - 664px) / 2 - 15px, 65px)); }
  /* Mobilný rám oddeľovač medzi hero a „Čo získate“ nemá — sekcia tam ide rovno na hero. */
  .hero + .divider-row { display: none; }
  /* „Aktuálne klubové zľavy“ — Figma medzistav nekreslí.
     Kategórie: 6 vedľa seba sa zmestí len po ~953px (najdlhší riadok „starostlivosť“ = 98.8px
     + padding). Nižšie sa preto zalomia na 3 × 2 a riadok sa centruje presne tak, ako to robí
     desktop (tam je 1040 v 1312 kontejneri). Vodorovný scroll sem nepatrí — na tablete a v úzkom
     okne notebooku by bola šiesta dlaždica schovaná za posuvníkom, ktorý myšou nikto nenájde. */
  .discounts { padding-top: 64px; }
  .discounts h2 { margin-bottom: 48px; }
  .discounts .center { margin-top: 48px; }
  .category-list { grid-template-columns: repeat(3, minmax(0, 224px)); gap: 16px; }
  .discounts .category-list { margin-bottom: 48px; }
  .category { height: 144px; font-size: 16px; line-height: 24px; }
  /* Kupóny: mobilný formát karty (188 vysoká, vizuál 168). Jeden stĺpec by tu znamenal až 925px
     široký pruh, kde titulok sedí na jednom riadku a dve tretiny karty ostanú prázdne — preto
     `auto-fit` s minimom 345px, čo je presne šírka karty z Figmy. Dva stĺpce teda nastúpia až keď
     na ne je miesto (od ~746px) a karta nikdy neklesne pod svoju navrhnutú šírku; užšia sa
     rozsype, lebo cenový blok sa začne lámať a vytlačí titulok. Strop 460px drží proporcie
     karty aj v jednostĺpcovom stave. */
  .discount-grid { grid-template-columns: repeat(auto-fit, minmax(min(345px, 100%), 1fr)); gap: 16px; }
  .discount-card { height: 188px; max-width: 460px; margin-inline: auto; }
  .product-visual { flex: 0 0 168px; height: 188px; }
  .product-visual > img { width: 152px; height: 152px; }
  .product-copy { height: 188px; gap: 8px; }
  /* Poradie dôležitosti pri nedostatku miesta: názov a tlačidlo držia svoju výšku, uberá
     sa cenovému bloku. Bez toho by sa na úzkom telefóne zmrštil názov na jeden riadok. */
  .product-copy h3, .product-copy a { flex: none; }
  .product-copy h3 { height: 40px; font-size: 14px; line-height: 20px; }
  .product-copy p { flex: 0 1 auto; min-height: 0; overflow: hidden; font-size: 12px; line-height: 16px; }
  .product-copy a { width: 100%; height: 32px; min-height: 32px; padding: 6px 12px; }
  .step p br { display: none; }
  .step-register p br, .step-card p br, .step-coupon p br { display: initial; }
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Jednostĺpcový panel = mobilná varianta z Figmy (6784:20637): artwork 377×352, fotka v spodných
     320px a telefón na celý artwork. Panel tu už orezáva (mobilná instance má overflow-clip),
     inak by telefón vytiekol pod spodnú hranu. */
  .cta-panel { grid-template-columns: 1fr; overflow: hidden; }
  .cta-art { min-height: 0; height: 352px; }
  .cta-photo { top: auto; height: 320px; }
  /* Kupola 573.11×492.477 @ −98,0 v boxe 377×320 = presne na stred a zarazená navrch.
     Tu sa škáluje podľa šírky boxu, takže box prekryje pri každej šírke (152 % > 100 %). */
  .cta-background { top: 0; left: 50%; width: 152.0186%; height: auto; transform: translateX(-50%); }
  /* Rám telefónu drží pomer 377/352 z Figmy a centruje sa — pri 393px sedí presne na artwork,
     v širšom okne (tablet) zostane v mierke Figmy namiesto toho, aby sa obrázok rozťahoval. */
  .cta-phone-frame { top: 0; bottom: auto; left: 50%; width: auto; height: 100%; aspect-ratio: 377 / 352; transform: translateX(-50%); }
  .cta-phone { top: .03%; right: -12.24%; width: 102.98%; height: 112.86%; }
  .partners-inner { align-items: center; flex-direction: column; gap: 32px; }
  .partners-inner > p { flex-basis: auto; }
  .partner-logos { width: 100%; flex: 0 0 auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  /* Klubové zľavy — H1 sa dopočítava rovnako ako na homepage, aby na hranici 680 nebol skok. */
  .page-hero { padding-block: 64px; }
  .page-hero h1 { font-size: clamp(36px, calc(9.333vw - 27.47px), 64px); }
  /* Kategórie sú tu 3 × 2 (prevzaté z homepage), takže pás je 304 vysoký — zapustiť ho do
     modrého pruhu by zjedlo celý priestor pod podnadpisom. V tomto rozsahu preto sedí pod ním.
     Figma tento medzistav nekreslí; zapustenie sa vracia na telefóne, kde je pás jednoradový. */
  .category-strip { margin-top: 0; padding-top: 48px; }
  /* Detail zľavy — dvojstĺpcová karta je desktopová vec. Pod 980px (spoločná hranica celej
     stránky) sa stĺpce skladajú pod seba a kupónový pás preberá mobilné rozmery z Figmy:
     300 vysoký, obrázok škálovaný podľa výšky boxu, nie šírky. Modrá sekcia aj biela karta
     zostávajú až po telefón (680), kde nastupuje mobilný rám. Nadpis a stužka sa medzi 980
     a 680 dopočítavajú plynulo, aby na hranici nebol skok (30→24 a 36→20). */
  .coupon-detail { padding-block: 64px; }
  .coupon-detail-card { flex-direction: column; }
  .coupon-detail-visual { flex: none; width: 100%; height: 300px; align-self: auto; }
  .coupon-detail-ticket { top: -1px; right: -5px; bottom: -10px; left: -5px; background-image: url("assets/detail-ticket-bg-mobile.svg"); }
  .coupon-detail-ribbon { left: clamp(24px, calc(2.667vw + 5.87px), 32px); padding: clamp(10px, calc(4.667vw - 21.73px), 24px) clamp(16px, calc(2.667vw - 2.13px), 24px); font-size: clamp(20px, calc(5.333vw - 16.27px), 36px); line-height: clamp(28px, calc(4vw + .8px), 40px); }
  .coupon-detail-photo img { top: 0; left: 50%; width: auto; height: 100.7%; max-width: 100%; transform: translateX(-50%); }
  .coupon-detail-copy { flex: none; width: 100%; }
  .coupon-detail-copy h1 { font-size: clamp(24px, calc(2vw + 10.4px), 30px); line-height: clamp(32px, calc(1.333vw + 22.93px), 36px); }
  /* V mobilnom ráme sú tlačidlá súrodencom kopírky, nie jej súčasťou, takže nad nimi je
     medzera bloku (32), nie medzera kopírky (24) — 8px navrch to dorovná. */
  .coupon-detail-actions { margin-top: 8px; }
  .related-discounts { padding-block: 64px; }
}

/* Pod ~900px sa ani tri zmenšené kroky (3×240 + medzery = 768px) do panelu nezmestia.
   Dva vedľa seba a tretí vycentrovaný pod nimi potrebujú len 504px, takže to vydrží až po 681px —
   a panel je 752 namiesto 1520, ktoré by dal jeden stĺpec. Vodorovný carousel z Figmy nastupuje
   až na telefóne, kde sa listuje prstom. */
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .step:nth-child(3) { grid-column: 1 / -1; }
}

/* Kým je grid kupónov jednostĺpcový, drží sa mobilného výberu štyroch kariet (Figma 6732:7392);
   v dvoch stĺpcoch je priestor na celú desktopovú šesticu, teda tri riadky. */
@media (max-width: 745px) {
  .discounts .discount-card:nth-child(n+5) { display: none; }
  /* Mobilný rám detailu ukazuje v „Ďalších zľavách“ štyri kupóny (6777:18630), desktop desať. */
  .related-discounts .discount-card:nth-child(n+5) { display: none; }
}

@media (max-width: 680px) {
  .container, .compact-container { width: min(100% - 48px, var(--container)); }
  /* Na telefóne je full-bleed správne (a pri 393px presne podľa Figmy) — karta zarovnaná vpravo
     má zmysel len tam, kde je vedľa nej voľné miesto, teda na tablete. */
  .mobile-nav-panel { right: 0; left: 0; width: auto; }
  .section { padding-block: 48px; }
  .benefits { padding-block: 48px 0; }
  /* Oddeľovač je vo Figme samostatná sekcia s 20px nad aj pod (6745:8144). */
  .divider-row { margin-block: 20px; }
  h2 { margin-bottom: 32px; font-size: 30px; line-height: 36px; }
  .hero { padding-block: 40px; }
  .hero-copy { padding-bottom: 12px; }
  .hero h1 { margin-bottom: 16px; font-size: 36px; line-height: 40px; }
  .lead { margin-bottom: 32px; font-size: 18px; line-height: 28px; }
  .hero .button-row { gap: 16px; }
  .hero .button-row .button { flex: 1 1 0; min-width: 0; width: auto; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  .hero .button-primary { order: 2; }
  .hero .button-secondary { order: 1; }
  .hero-art { aspect-ratio: 345 / 309; }
  .hero-person { height: 109.32%; }
  .floating-note { padding: 8px 16px; font-size: 14px; line-height: 20px; }
  .floating-note img { flex-basis: 24px; width: 24px; height: 24px; }
  .floating-note::after { display: none; }
  .note-benefits { top: 25.89%; left: -12px; --float-distance: 8px; }
  .note-savings { top: 74.757%; left: auto; right: -12px; --float-distance: 6px; }
  .trust-list { gap: 8px; justify-content: center; }
  .trust-icon { flex-basis: 16px; width: 16px; height: 16px; }
  .discounts { padding-top: 40px; padding-bottom: 20px; }
  .discounts h2 { margin-bottom: 32px; text-align: left; }
  .discounts h2 br { display: inline; }
  /* Na telefóne je vodorovný pás dlaždíc správny — je to návrh z Figmy a posúva sa prstom. */
  .category-list { grid-template-columns: repeat(6, 144px); justify-content: start; gap: 8px; overflow-x: auto; }
  .discounts .category-list { margin-bottom: 32px; }
  /* Figma pod carouselmi scrollbar nekreslí — posúva sa dotykom. */
  .category-list { scrollbar-width: none; }
  .category-list::-webkit-scrollbar { display: none; }
  .discounts .center { margin-top: 32px; }
  .button-all-discounts { width: 272px; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  .button-all-discounts { width: 272px; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  /* „Ako funguje Vaša Klub“ (Figma 6732:7655): panel 377 široký (8px od hrany rámu), padding 40/24,
     kroky sú vodorovný carousel — jeden 240px slide v zábere, ďalší vykúka spoza pravej hrany. */
  .how-section { padding-block: 20px; }
  .how-section > .container { width: calc(100% - 16px); }
  .how-panel { padding: 40px 24px; border-radius: 32px; }
  .how-panel h2 { margin-bottom: 32px; }
  .how-panel h2 br { display: inline; }
  .how-panel > .button { width: 252px; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  /* padding 45px zľava = (329 − 239) / 2, teda prvý slide sedí presne tam, kde ho kreslí Figma (x 69). */
  .steps { display: flex; grid-template-columns: none; gap: 24px; margin: 0 -24px 32px; padding-inline: 69px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step-register, .step-card, .step-coupon { flex: 0 0 240px; width: 240px; scroll-snap-align: center; }
  /* Artwork je desktopových 300×250 zmenšených na 0.8 (Figma 240×200); záporné okraje vracajú
     layoutu skutočnú, teda zmenšenú veľkosť — dole zostane presne 32px medzera na titulok. */
  .register-art, .card-art, .coupon-art { margin: 0 -60px -18px 0; transform: scale(.8); transform-origin: top left; }
  .step.step-register p, .step.step-card p, .step.step-coupon p { font-size: 16px; line-height: 24px; }
  .steps-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 44px; }
  .steps-dots b, .steps-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
  .steps-dots b { background: #fff; }
  /* Mobilná aplikácia (Figma 6732:7841): 2 stĺpce featur, oba store badge vedľa seba,
     galéria je carousel so slidmi 166.5px a bodkami pod ním. */
  .app-section { padding-block: 20px; }
  .app-grid { gap: 32px; }
  .app-copy h2 { margin-bottom: 16px; }
  .app-copy > p { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
  .app-copy h3 { margin-bottom: 12px; font-size: 16px; line-height: 24px; }
  /* Zoznam featur aj galéria bežia na zdieľaných `.app-icon-list` a `.app-carousel`, ktoré
     majú mobilné pravidlá nižšie v bloku Mobilnej aplikácie — tu už netreba nič. */
  /* Badge sú na mobile pružné — Figma im dáva `flex: 1`, takže sa dopočítajú podľa šírky
     bloku: 166.5 v 345px sekcii, 158.5 v 329px obsahu navy panelu na Mobilnej aplikácii.
     Výška z pomeru 180/52 potom vyjde na 48.1 resp. 45.79, presne ako v mobilných rámoch.
     Fixná výška 48 by dvojicu roztiahla na 344.3 + medzeru, teda cez okraj kontejnera. */
  .store-buttons { flex-wrap: nowrap; gap: 12px; }
  .store-buttons a { flex: 1 1 0; min-width: 0; }
  .store-buttons img { width: 100%; height: auto; }
  .faq { padding-block: 20px; }
  .faq-grid { gap: 32px; }
  .faq h2 { margin-bottom: 16px; }
  .faq-intro > p { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
  .faq-intro > a { font-size: 18px; line-height: 28px; }
  /* Zatvorená položka má vo Figme (6745:8117) presne 60px vrátane spodnej linky. */
  .accordion summary { padding: 17.5px 0; font-size: 16px; font-weight: 700; line-height: 24px; }
  .accordion details p { padding: 0 0 20px; font-size: 14px; line-height: 20px; }
  .cta-section { padding-block: 20px 8px; }
  .cta-section > .container { width: calc(100% - 16px); }
  .cta-copy { padding: 40px 24px 20px; }
  .cta-copy h2 { margin-bottom: 16px; }
  .cta-copy > p { margin-bottom: 32px; font-size: 18px; line-height: 28px; }
  .cta-copy .button-row { width: 100%; gap: 16px; }
  .cta-copy .button-row .button { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  /* Na mobile Figma tlačidlá vymieňa: obrys „Prihlásiť sa“ je prvý, plné „Stať sa členom“ druhé. */
  .cta-copy .button-outline { order: 1; }
  .cta-copy .button-light { order: 2; }
  .cta-copy small { margin-top: 32px; font-size: 14px; line-height: 20px; }
  /* Logo wall (Figma 6777:10600): sekcia 192 = 40 + nadpis 56 + 32 + logá 24 + 40. */
  .partners { padding-block: 40px; }
  .partners-inner { gap: 32px; }
  .partners-inner > p { font-size: 18px; line-height: 28px; }
  .partner-logos { --fade: 40px; }
  .partner-group { gap: 16px; padding-right: 16px; }
  .partner-logos img { flex: 0 0 auto; width: auto; height: 24px; }
  /* Pätička (Figma 6745:9511): padding 40/24, stĺpce s medzerou 16px medzi položkami,
     spodná lišta zostáva jednoriadková (©2026 vľavo, siete vpravo) — 118 + 24 + 203 = 345. */
  .site-footer { padding: 40px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-column { gap: 16px; }
  .footer-column h2 { margin-bottom: 0; }
  .footer-help { min-height: 144px; }
  .footer-bottom { margin-top: 32px; }

  /* --- Klubové zľavy, mobil (Figma 6760:8914) --- */
  /* Omrvinky sú 24 vysoké (4 + 16 + 4) a text je o stupeň menší než na desktope.
     Odsadenie 20px je z Figmy — je o 4px užšie než 24px, ktoré má na mobile zvyšok stránky. */
  .breadcrumbs { padding-block: 4px; }
  .breadcrumbs > .container { width: calc(100% - 40px); }
  .breadcrumbs ol { gap: 4px; }
  .breadcrumbs li { font-size: 12px; line-height: 16px; }
  .breadcrumb-sep, .breadcrumb-sep img { width: 16px; height: 16px; }
  /* Modrý pruh: 40 → H1 36/40 → 16 → podnadpis 18/28 → 112, text vľavo (na desktope na stred). */
  .page-hero { padding-block: 40px 112px; text-align: left; }
  .page-hero h1 { margin-bottom: 16px; font-size: 36px; line-height: 40px; }
  .page-hero h1 .br-m { display: inline; }
  .page-hero h1 .br-d { display: none; }
  .page-hero p { font-size: 18px; line-height: 28px; }
  /* Jednoradový pás sa opäť zapúšťa do modrého pruhu: 73 hore, 71 dole, pod ním ešte 20
     zvyšku sekcie (Figma: sekcia 91 s obsahom 144 posunutým o -73). */
  .category-strip { margin-top: -73px; margin-bottom: 20px; padding-top: 0; }
  .discounts-query { padding-block: 20px; }
  .filter-chips { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .sort-select { flex: 0 1 156.5px; min-width: 0; }
  .sort-select > summary > span { flex: 1 1 auto; width: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .query-grid { margin-top: 16px; }
  .pagination { margin-top: 32px; }
  .pagination > .button { height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  .pagination-pages { width: 100%; }

  /* --- Detail klubovej zľavy, mobil (Figma 6777:11317) --- */
  /* Mobilný rám nemá ani modrý pruh, ani bielu kartu — obsah ide priamo na bielu stránku.
     Sekcia 24 → blok 952 (medzery 32) → 20. */
  .coupon-detail { padding-block: 24px 20px; background: var(--white); }
  .coupon-detail-blob { display: none; }
  /* Bez paddingu karty by `overflow: hidden` odrezal 5px rezervu na tieň kupónového tvaru. */
  .coupon-detail-card { padding: 0; overflow: visible; border-radius: 0; box-shadow: none; }
  /* Mobilná stužka (6777:11901) na rozdiel od desktopovej (6777:10026) `ss02` nemá. */
  .coupon-detail-ribbon { left: 24px; padding: 10px 16px; font-size: 20px; line-height: 28px; font-feature-settings: normal; }
  .coupon-detail-overline { font-size: 14px; line-height: 20px; }
  .coupon-detail-copy h1 { font-size: 24px; line-height: 32px; }
  /* Zatváracie „ד je len v desktopovom ráme (6777:10040) — mobilná hlavička detailu ho nemá,
     názov produktu tam ide na celú šírku (345, teda 4 riadky namiesto 5). */
  .coupon-detail-close { display: none; }
  .coupon-detail-actions .button { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  /* Na mobile Figma tlačidlá vymieňa: „Prihlásiť sa“ je prvé (rovnako ako v CTA sekcii). */
  .coupon-detail-actions .button-primary { order: 2; }
  .coupon-detail-actions .button-light { order: 1; }
  /* Mobilný rám dáva omrvinke „Klubové zľavy“ farbu aktívnej položky, hoci je to odkaz
     (na desktope má `theme/muted-foreground`) — verne podľa Figmy, viď figma-readme §12. */
  .page-discount-detail .breadcrumb-parent a { color: var(--navy); }
  .detail-divider { display: block; }
  /* Sekcia „Ďalšie klubové zľavy“ má v mobilnom ráme odsadenie 20px, kým zvyšok stránky 24 —
     tá istá odchýlka ako pri omrvinkách (kupón je preto 353, nie 345). */
  .related-discounts { padding-block: 20px 40px; }
  .related-discounts > .container { width: calc(100% - 40px); }
  .related-discounts h2 { margin-bottom: 32px; font-size: 30px; line-height: 36px; }
  .related-discounts .center { margin-top: 32px; }
}

/* Pod 393px (referencia z Figmy) sa kopírovací stĺpec kupónu zúži natoľko, že sa „Platnosť do…“
   (124.3px pri 12px) zalomí na dva riadky a vytlačí názov produktu. Miesto sa berie z obrázka,
   nie z textu — 152 namiesto 168 dá stĺpcu 136px a všetko sa zmestí. */
@media (max-width: 380px) {
  .product-visual { flex-basis: 152px; }
  .product-copy { padding-left: 24px; }
}

/* ==========================================================================
   Mobilná aplikácia (mobilna-aplikacia.html) — Figma 6809:5127 desktop /
   6809:5581 mobil.
   Zdieľané a nekopírované: hlavička, omrvinky, `.hero-art` s plávajúcimi notami,
   `.trust-list`, navy panel `.how-panel` aj s jeho vzorom, `.gallery-dots`,
   `.steps-dots`, `.icon-*` farby ikonových boxov, logo wall, pätička, tokeny.
   Zvislý rytmus sekcií (Figma): hero 96/128 → dlaždice 128/64 → kroky 32/128 →
   stiahnutie 128/128; na mobile 40/40, 48/40, 20/40, 40/40.
   ========================================================================== */

/* Dva nadpisy majú v mobilnom ráme iný text než v desktopovom („Čo nájdete
   v aplikácii?“ / „Čo získate s Vaša Klub?“ a „Ako to funguje“ / „Ako funguje
   Vaša Klub“). Rovnaký princíp ako `.br-d` / `.br-m` na Klubových zľavách. */
.txt-m { display: none; }

/* --- Hero (6809:5131) --- */
/* Kopírka a artwork sú dva pružné stĺpce po 624 vycentrované na výšku: blok kopírky
   má 392, artwork 520, takže Figma kopírku posadí na y 64. */
.hero.app-hero { padding-block: 96px 128px; }
.app-hero-grid { display: flex; align-items: center; gap: 64px; }
.app-hero-copy { flex: 1 1 0; min-width: 0; }
.app-hero-grid .hero-art { flex: 1 1 0; min-width: 0; }
.app-hero-copy .store-buttons { margin-bottom: 32px; }
/* Fotka pozadia je väčšia než artwork a orezáva ju jeho zaoblenie — vlastný box,
   pretože `.hero-art` orezávať nesmie (noty z neho vytŕčajú 65px). */
.app-hero-bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.app-hero-bg img { position: absolute; top: -2.58%; left: -60.02%; width: 175.72%; max-width: none; height: 140.59%; }
/* Ruka s telefónom (6809:6256): box 624×592 zarovnaný na spodok, teda 72px nad hornou
   hranou artworku, s vlastným radiusom 40. Obrázok v ňom je 104.97 × 112.74 %. */
.app-hero-photo { position: absolute; right: 0; bottom: 0; left: 0; aspect-ratio: 624 / 592; overflow: hidden; border-radius: var(--radius-lg); }
.app-hero-photo img { position: absolute; top: -.19%; left: -14.92%; width: 104.97%; max-width: none; height: 112.74%; }
/* Figma dáva pravej note `bottom: 63px`; zdieľané pravidlo ju drží za hornú hranu
   (78.654 %), čo je o 4px inde. Vodorovný presah aj clamp na úzke okno zostávajú. */
.page-app .note-savings { top: auto; bottom: 63px; }
/* Store badge sú v celom ráme 180×52 s medzerou 32 (homepage má 24). */
.page-app .store-buttons { gap: 32px; }

/* --- „Čo nájdete v aplikácii?“ (6809:5208) --- */
/* Tá istá kupola ako v „Čo získate s Vaša Klub“ na homepage (3268×1081 @ x −897),
   len posadená na hornú hranu sekcie (y 0, nie 338) — sekcia ju musí orezať. */
.app-tiles-section { position: relative; overflow: hidden; padding-block: 128px 64px; }
.app-tiles-wave { position: absolute; top: 0; left: -59.33%; width: 216.14%; max-width: none; height: auto; object-fit: fill; }
.app-tiles-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.app-tiles-inner h2 { margin: 0; text-align: center; }
.app-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; width: 100%; }
/* Dlaždica (6809:5213): padding 24, radius 24, shadow/md, ikonový box 96 s medzerou 24
   k titulku a 8 medzi titulkom a textom — preto margin ikony 16 a gap 8.
   Výšku 300 dá najvyšší obsah, ostatné dlaždice sa dotiahnu (Figma: self-stretch). */
.app-tile { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius); background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.app-tile-icon { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 16px; border-radius: var(--radius); }
.app-tile-icon img { width: 48px; height: 48px; }
.app-tile h3 { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: 0; }
.app-tile p { margin: 0; font-size: 16px; line-height: 24px; }
/* Bodky patria k mobilnému pásu — na desktope je vidieť všetkých päť dlaždíc. */
.app-tiles-dots { display: none; gap: 16px; }
.app-tiles-dots b, .app-tiles-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c5cbd8; }
.app-tiles-dots b { background: var(--navy); }
/* Tlačidlá po načítaní `carousel.js` — to isté ako pri `.gallery-dots` (viď §18). */
.app-tiles-dots[hidden] { display: none; }
.app-tiles-dots button { display: grid; place-items: center; width: 24px; height: 24px; margin: -8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; }
.app-tiles-dots button::before { width: 8px; height: 8px; border-radius: 50%; background: #c5cbd8; content: ""; transition: background .3s ease, transform .3s ease; }
.app-tiles-dots button:hover::before { background: #94a2bd; transform: scale(1.25); }
.app-tiles-dots button[aria-current]::before { background: var(--navy); }
.app-tiles-dots button:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }

/* --- „Ako to funguje“ (6809:7449) --- */
/* Panel je tu 1448 široký (sekcia má bočný padding 32), nie 1312 ako na homepage.
   Vzor je ten istý súbor — `how-pattern.svg` má priehľadnosť .07 zapečenú v sebe,
   takže tu ide bez ďalšieho tlmenia a natiahnutý presne na rozmer panelu
   (Figma 6809:7452 = 1446.76×830, teda ten istý pomer ako panel pri 1512). */
.app-how { padding-block: 32px 128px; }
.app-how > .container { width: min(1448px, calc(100% - 64px)); }
.app-how-panel { padding: 96px 64px; }
/* Vzor si vo Figme drží pomer 1513/868, je vysoký na celý panel a vycentrovaný — zdedené
   `center / cover` robí presne to (panel je vždy „užší“ než vzor, takže cover ide podľa
   výšky). Mení sa len priehľadnosť: .07 má SVG v sebe, homepage ju ešte tlmí na .38. */
.app-how-panel::before { opacity: 1; }
.app-how-panel h2 { margin-bottom: 64px; }
/* Badge sú vo Figme vycentrované (x 464 v 1320); `text-align: center` panelu na flex
   kontejner neplatí, takže centrovanie musí byť explicitné. */
.app-how-panel .store-buttons { justify-content: center; }
/* Tri kroky po 300 s medzerou 96, vycentrované v 1320 (Figma: x 114 / 510 / 906).
   `repeat(3, 1fr)` sem nesedí — ten by artwork posadil o 76px vľavo. Riadok má
   navyše 24px horného paddingu. */
.app-steps { display: flex; justify-content: center; gap: 96px; padding-top: 24px; margin-bottom: 64px; }
.app-step { width: 300px; }
.app-step h3 { margin: 0 0 16px; font-size: 20px; line-height: 28px; letter-spacing: 0; }
.app-step p { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: 0; }
.app-step-art { position: relative; width: 300px; height: 250px; margin-bottom: 24px; overflow: hidden; }
.app-step-blob { position: absolute; max-width: none; }
/* Kvapky 1 a 3 sú byte-identické s tými z homepage (`how-register-blob`,
   `how-coupon-blob`); dvojka je tá istá kvapka ako `how-card-blob`, len peach
   namiesto modrej. Trojka je vo Figme otočená o 90°. */
.app-blob-1 { top: 6.25px; left: 25px; width: 250px; height: 236.25px; }
.app-blob-2 { top: 0; left: 24.581px; width: 250px; height: 242.5px; }
.app-blob-3 { top: -.625px; left: 35.625px; display: flex; align-items: center; justify-content: center; width: 236.25px; height: 250px; }
.app-blob-3 img { flex: none; width: 250px; max-width: none; height: 236.25px; transform: rotate(90deg); }
/* Telefón (6809:9128): 195.856×373, obrys 12.475px `#52c1ef`, radius 40, zapichnutý
   39px od hornej hrany artworku — spodných 162px mu artwork oreže. Vnútro sa polohuje
   od paddingového boxu, teda spoza obrysu; presne tak to počíta aj Figma
   (x 29.427 od vonkajšej hrany = left 50 % − polovica šírky vnútra). */
.app-phone { position: absolute; top: 39px; left: calc(50% - .07px); width: 195.856px; height: 373px; overflow: hidden; border: 12.475px solid #52c1ef; border-radius: 40px; background: #fff; transform: translateX(-50%); }
.app-phone-notch { position: absolute; top: 12.53px; left: calc(50% + .5px); width: 36px; height: 16px; transform: translateX(-50%); }
.app-phone-screen { position: absolute; top: 36.52px; left: 50%; display: flex; flex-direction: column; width: 137px; gap: 8px; transform: translateX(-50%); }
.app-phone-screen.is-wide { left: calc(50% + .07px); width: 146px; }
.app-phone-field { display: flex; align-items: center; height: 30px; padding: 5.915px 11.831px; border-radius: 11.831px; color: #fff; background: #52c1ef; font-size: 10.352px; font-weight: 700; line-height: 14.789px; letter-spacing: 0; white-space: nowrap; }
.app-phone-field.is-dim { opacity: .6; }
.app-phone-field.is-dimmer { opacity: .4; }
.app-phone-field.is-primary { justify-content: center; background: var(--red); }
.app-phone-title { color: var(--navy); font-size: 10.352px; font-weight: 700; line-height: 14.789px; letter-spacing: 0; text-align: center; }
/* Zoznam výhod v treťom telefóne (6809:9314): fotka 146×263.4 orezaná boxom
   a štyri kupónové kartičky 62×36 pri pravej hrane. */
.app-phone-list { position: relative; display: block; width: 100%; height: 263.413px; overflow: hidden; }
.app-phone-list > img { position: absolute; top: -16.3%; left: -4.83%; width: 109.57%; max-width: none; height: 131.03%; }
.app-phone-card { position: absolute; left: 77px; width: 62px; height: 36px; background: #ffbfa4; }
.app-phone-card:nth-of-type(1) { top: 4px; }
.app-phone-card:nth-of-type(2) { top: 69px; }
.app-phone-card:nth-of-type(3) { top: 134px; }
.app-phone-card:nth-of-type(4) { top: 201px; }
.app-phone-card i { position: absolute; left: 1px; display: flex; flex-direction: column; gap: 2px; }
.app-phone-card i:first-of-type { top: 2px; width: 53px; }
.app-phone-card i:last-of-type { top: 22px; width: 34px; }
.app-phone-card i::before, .app-phone-card i::after { border-radius: 999px; content: ""; }
.app-phone-card i:first-of-type::before, .app-phone-card i:first-of-type::after { height: 6px; background: #0b1461; }
.app-phone-card i:first-of-type::before { width: 100%; }
.app-phone-card i:first-of-type::after { width: 42px; }
.app-phone-card i:last-of-type::before, .app-phone-card i:last-of-type::after { height: 4px; background: rgba(11, 20, 97, .29); }
.app-phone-card i:last-of-type::before { width: 19px; }
.app-phone-card i:last-of-type::after { width: 27px; }
.app-step-number { position: absolute; z-index: 3; top: 31.25px; left: 32.5px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #f8fafc; background: var(--red); font-size: 25px; font-weight: 700; line-height: 35px; }

/* --- „Stiahnite si Vaša Klub“ (6809:7746) --- */
.app-download { padding-block: 128px; }
.app-download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.app-download-copy h2 { margin-bottom: 32px; }
.app-download-copy > p { margin-bottom: 32px; font-size: 18px; line-height: 28px; }
.app-download-copy h3 { margin: 0 0 16px; font-size: 18px; line-height: 28px; letter-spacing: 0; }
/* Icon Box (6657:4988): ikona 24 s 1px odsadením zhora, medzera 8, popisok 18/28 Bold.
   Stĺpce sú `max-content` — to je presne `fit-content` mriežka z Figmy (163 a 183). */
.app-icon-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px; margin: 0 0 32px; padding: 0; list-style: none; }
.app-icon-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 18px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.app-icon-list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
/* Pás snímok je vo Figme vysoký presne ako kopírovací stĺpec (self-stretch) a posledné
   slidy vytŕčajú za pravú hranu. Track je preto absolútny — inak by do výšky riadku
   vstúpila vlastná veľkosť obrázkov (811×1440) a sekcia by narástla na 1440. */
.app-carousel { position: relative; align-self: stretch; min-width: 0; }
.app-carousel-track { position: absolute; inset: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.app-carousel-track::-webkit-scrollbar { display: none; }
/* `min-width: 0` — bez toho automatická minimálna veľkosť flex itemu (u obrázka jeho
   vlastná šírka, zastropovaná `max-width: 100%`) prebije `flex-basis` a slide sa
   roztiahne na celú šírku pásu. Tá istá pasť ako v galérii na homepage. */
/* Zarážka je `start`, nie `center` — pás sa stránkuje po celých slidoch a v oboch Figma
   rámoch je prvý slide zarovnaný s ľavou hranou kopírky. `carousel.js` posúva presne na
   tie isté pozície, takže po dobehnutí prechodu nič nepreskočí. Tak to má aj galéria na
   „Ako funguje Vaša Klub“ (`.guide-app-slides`). */
.app-carousel-track img { flex: none; width: auto; min-width: 0; height: 100%; aspect-ratio: 810 / 1440; border-radius: var(--radius); background: #a8e3fb; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.app-carousel .gallery-dots { bottom: -32px; }
/* Pás sa dá ťahať myšou (bez JS ho posunie len trackpad, shift+koliesko alebo prst). */
.app-carousel.is-live .app-carousel-track { cursor: grab; }
.app-carousel.is-dragging .app-carousel-track { cursor: grabbing; }

/* Dlaždica z Figmy (236.8) uživí titulok „Rezervácia liekov“ (18/28) len pokým má
   kontejner aspoň ~1136; nižšie sa mriežka zalamuje s minimom 250px, čo je presne
   šírka dlaždice z mobilného rámu. */
@media (max-width: 1180px) {
  .app-tiles { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
  /* Zalomené dlaždice sekciu predĺžia nad to, čo pokryje pomer strán kupoly, takže sa
     naťahuje na výšku sekcie — tá istá úprava ako na homepage. */
  .app-tiles-wave { left: -186.51%; width: 463.61%; height: 100%; }
}

/* Tri kroky v mierke Figmy potrebujú 3×300 + 2×96 = 1092 obsahu, teda panel 1220
   a okno ~1284 + posuvník; hranica 1310 je rezerva na širší posuvník (rovnaká logika
   ako pri 1230 nižšie). Najprv sa uťahuje len medzera, potom nastupuje mobilná
   mierka kroku 0.8 — typografia sa nikde nezmenšuje. */
@media (max-width: 1310px) {
  .app-steps { gap: 56px; }
}

@media (max-width: 1230px) {
  .app-how-panel { padding-inline: 32px; }
  .app-steps { gap: 24px; }
  .app-step { width: 240px; }
  /* Artwork je desktopových 300×250 v mierke 0.8 (Figma mobil 240×200); záporné okraje
     vracajú layoutu skutočnú veľkosť — dole zostane presne 32px medzera na titulok. */
  .app-step-art { margin: 0 -60px -18px 0; transform: scale(.8); transform-origin: top left; }
  .app-step p { font-size: 16px; line-height: 24px; }
}

@media (max-width: 980px) {
  .hero.app-hero { padding-block: 64px; }
  /* Jednostĺpcový hero: z kopírky sa stane `display: contents`, takže artwork prepadne
     medzi store badge a trust list — presne poradie z mobilného rámu. Medzery drží
     margin (32), nie gap, aby sa margin a gap nesčítali. */
  .app-hero-grid { flex-direction: column; align-items: stretch; gap: 0; }
  .app-hero-copy { display: contents; }
  /* Blok kopírky má v mobilnom ráme `padding-bottom: 12` (6809:5587), takže pod store
     badge je 32 medzery kontejnera + 12 = 44. Keďže z kopírky je tu `display: contents`,
     jej vlastný padding by sa nevykreslil — 12px preto nesie spodný margin badge. */
  .app-hero-copy .store-buttons { margin-bottom: 44px; }
  .app-hero-grid .hero-art { flex: none; margin-bottom: 32px; }
  .app-hero-grid .trust-list { order: 1; }
  .app-tiles-section { padding-block: 64px; }
  .app-how { padding-block: 64px; }
  .app-how > .container { width: min(1448px, calc(100% - 40px)); }
  .app-download { padding-block: 64px; }
  .app-download-grid { grid-template-columns: 1fr; }
  /* V jednom stĺpci už pás nemá od koho zdediť výšku — slide si ju dopočíta zo šírky
     z Figmy (231.75) a bodky sa vracajú do toku pod neho. */
  .app-carousel { align-self: auto; padding-bottom: 32px; }
  .app-carousel-track { position: static; }
  .app-carousel-track img { flex: 0 0 231.75px; height: auto; }
  .app-carousel .gallery-dots { bottom: 0; }
}

/* Ani tri zmenšené kroky (3×240 + 2×24 = 768) sa do panelu nezmestia — dva vedľa seba
   a tretí pod nimi potrebujú 504. Tá istá hranica ako na homepage. */
@media (max-width: 900px) {
  .app-steps { flex-wrap: wrap; gap: 48px 24px; }
}

@media (max-width: 680px) {
  .hero.app-hero { padding-block: 40px; }
  .app-hero-bg img { top: .08%; left: -50.87%; width: 158.01%; height: 117.63%; }
  .page-app .note-savings { bottom: 38px; }
  /* Pružné badge sú od tejto chvíle zdieľané (viď `.store-buttons` vyššie) — tu už stačí
     zrušiť desktopovú medzeru 32, ktorú má táto stránka navyše oproti zvyšku. */
  .page-app .store-buttons { gap: 12px; }

  /* Dlaždice: vodorovný pás 250px kariet a pod ním päť bodiek (Figma 6809:5644). */
  .app-tiles-section { padding-block: 48px 40px; }
  .app-tiles-inner { gap: 32px; }
  /* `overflow-x: auto` robí z pásu scroll kontejner, a ten orezáva aj ink overflow — teda
     `box-shadow` dlaždíc. Riadok je presne taký vysoký ako dlaždica, takže tieň sa pri
     zaoblených rohoch useká rovnou čiarou (na desktope, kde pás nepreteká, je celý).
     8px vnútorného odsadenia mu dá priestor a rovnaký záporný okraj vráti pásu pôvodnú
     veľkosť — dlaždice aj medzera 32 k bodkám zostávajú na tom istom mieste. */
  .app-tiles { grid-template-columns: repeat(5, 250px); gap: 16px; margin-block: -8px; padding-block: 8px; overflow-x: auto; scrollbar-width: none; }
  .app-tiles::-webkit-scrollbar { display: none; }
  .app-tiles-dots { display: flex; }

  /* Kroky: carousel s prvým slidom na x 69 v 377 širokom paneli — rovnaká geometria
     ako „Ako funguje Vaša Klub“ na homepage (padding 69 = (329 − 239) / 2 + 24). */
  .app-how { padding-block: 20px 40px; }
  .app-how > .container { width: calc(100% - 16px); }
  .app-how-panel { padding: 40px 24px; }
  .app-how-panel h2 { margin-bottom: 32px; }
  /* Mobilný rám nemá nad krokmi 24px odsadenie, ktoré má desktopový riadok. */
  .app-steps { flex-wrap: nowrap; justify-content: flex-start; gap: 24px; margin: 0 -24px; padding: 0 69px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .app-steps::-webkit-scrollbar { display: none; }
  .app-step { flex: 0 0 240px; scroll-snap-align: center; }
  .page-app .steps-dots { margin-top: 32px; }

  .app-download { padding-block: 40px; }
  .app-download-grid { gap: 32px; }
  .app-download-copy h2 { margin-bottom: 16px; }
  .app-download-copy > p { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
  .app-download-copy h3 { margin-bottom: 12px; font-size: 16px; line-height: 24px; }
  .app-icon-list { gap: 12px; }
  .app-icon-list li { font-size: 16px; line-height: 24px; }
  .app-icon-list img { flex-basis: 20px; width: 20px; height: 20px; margin-top: .833px; }
  .app-carousel { padding-bottom: 24px; }
  .app-carousel-track img { flex-basis: 166.5px; }

  .txt-d { display: none; }
  .txt-m { display: inline; }
}

/* ==========================================================================
   Registrácia — medzistavy. Figma kreslí len 1512 a 393, hranice nižšie sú body,
   kde sa daný prvok prestane zmestiť (rovnaká logika ako §8 figma-readme).
   ========================================================================== */

/* 1376 je presne šírka okna, pri ktorej `.container` prestane byť plných 1312 — a dlaždica
   236.8 z Figmy sa vojde päťkrát len pri plnom kontejneri (5 × 236.8 + 4 × 32 = 1312). */
@media (max-width: 1376px) {
  .reg-benefit-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Riadok tmavého panelu má vo Figme 1248 (321 + 64 + 478 + 64 + 321), čo pri paddingu 64
   potrebuje kontejner 1440, teda okno ≥ 1512. Nižšie sa uťahuje len rozostup, nie typografia. */
@media (max-width: 1400px) {
  .reg-activate-panel { padding: 64px 32px; }
  .reg-activate-row { gap: 32px; }
}

@media (max-width: 1180px) {
  /* Kopírka aj panel sa zmestia vedľa seba až po 981px, ale padding 64 im uberá 128 —
     pri 1000px by na nadpis zostalo 295px. Uťahuje sa teda padding, typografiu drží `clamp`. */
  .reg-form-grid { padding-inline: 32px; }
  /* Tri stĺpce z Figmy pod 1181px nechajú artworku menej než 280px — berie sa mobilná
     kompozícia (stĺpec pod stĺpcom), artwork si drží svoju šírku z Figmy a centruje sa. */
  .reg-activate-row { flex-direction: column; gap: 32px; }
  .reg-activate-col { flex: 0 0 auto; width: 100%; }
  .reg-activate-figure { flex: 0 0 auto; width: 100%; max-width: 478px; height: auto; margin-inline: auto; }
}

@media (max-width: 980px) {
  .reg-hero { padding-bottom: 64px; }
  /* Telefón trčí 87px nad artwork (Figma 6794:8708). V stĺpcovom rozložení už nad artworkom
     nie je prázdno, ale kopírka — bez rezervy prekryl tlačidlá „Stať sa členom“ / „Prihlásiť sa“
     o 55px. Artwork je v tomto pásme vždy 624 široký (`min(100%, 624px)` pri kontejneri ≥ 626),
     takže presah je presne 87 a vyhradí sa pevným odsadením; nad telefónom tak zostane 32,
     teda `row-gap` mriežky. */
  .reg-hero-art { margin-top: 87px; }
  /* Ružové noty vytŕčajú 65px vľavo z vycentrovaného artworku, takže pri užšom okne im miesto
     zmizne a text sa odreže za hranou obrazovky (pri 700 chýbalo 35px). Rovnaká clamp logika
     ako u `.note-benefits` na homepage — musí sa však napísať na `.reg-note-stack`, lebo
     `.reg-hero-art .note-benefits` má `left: auto` a vyššiu špecificitu. */
  .reg-note-stack { left: calc(-1 * clamp(0px, (100vw - 664px) / 2 - 15px, 65px)); }
  /* Panel formulára ide pod kopírku; šírku z Figmy (449) si drží, kým je na ňu miesto.
     Stĺpec sa zúži na šírku kopírky z Figmy (511) a vycentruje sa (`.container` má
     `margin-inline: auto`). Bez toho `align-items: flex-start` zo základného pravidla —
     v stĺpcovom flexe je to vodorovné zarovnanie — nechá kopírku aj panel visieť pri ľavej
     hrane a vpravo zostane prázdna polovica okna (vidno napr. pri 900). */
  .reg-form-grid { flex-direction: column; gap: 48px; max-width: 511px; padding-inline: 0; }
  .reg-form-panel { flex: 0 0 auto; width: 100%; max-width: 449px; }
}

@media (max-width: 900px) {
  .reg-benefit-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Telefón — presne mobilný rám (393): sekcia 745, artwork 345×309, formulár 305 široký. */
@media (max-width: 680px) {
  .reg-hero { padding-bottom: 40px; }
  /* Mobilný telefón trčí nad artwork len 6.796% výšky (~21px pri 393), čo pokryje `row-gap`
     aj `padding-bottom` kopírky — rezerva 87 z pásma nad 680 sa tu ruší. */
  .reg-hero-art { aspect-ratio: 345 / 309; margin-top: 0; }
  .reg-hero-blob-d { display: none; }
  .reg-hero-blob-m { display: block; }
  /* Telefón 208×330 (6799:9716) — rovnaká mierka rádiusov aj obrysu ako na desktope (÷1.856). */
  .reg-phone { width: 60.29%; height: 106.796%; border-width: 2.927px; border-bottom: 0; border-radius: 32.689px 32.689px 0 0; }
  .reg-phone-screen { top: 1.79%; left: 2.91%; width: 94.131%; height: 125.901%; border-radius: 23.907px; }
  /* Mobilné noty sú 14/20 a bez bubliny — to už rieši `.floating-note` z homepage. */
  .reg-note-stack { top: 20.712%; left: -12px; }
  .reg-note-free { top: 74.757%; right: -12px; }
  .reg-note-icon { flex-basis: 24px; width: 24px; height: 24px; }

  /* Dlaždice: vodorovný pás 250px kariet a pod ním päť bodiek (6799:9744 + 6799:9794).
     48 → H2 36 → 32 → dlaždice 352 → 32 → bodky 8 → 32 → tlačidlo 48 → 40 = 628. */
  .reg-benefits { padding-block: 48px 40px; }
  .reg-benefits h2 { margin-bottom: 32px; text-align: left; }
  /* Tá istá pasť ako pri `.app-tiles` — scroll kontejner useká tieň kariet (viď §20). */
  .reg-benefit-cards { grid-template-columns: repeat(5, 250px); gap: 16px; margin-block: -8px; padding-block: 8px; overflow-x: auto; scrollbar-width: none; }
  .reg-benefit-cards::-webkit-scrollbar { display: none; }
  .reg-benefit-dots { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
  .reg-benefit-dots b, .reg-benefit-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c5cbd8; }
  .reg-benefit-dots b { background: var(--navy); }
  .reg-benefits-center { margin-top: 32px; }
  .reg-benefits-button { width: 247px; height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }

  /* Formulár: sekcia 864 = 40 + 804 + 20. Odsadenie kontejnera je 20, nie 24 ako inde —
     je to hodnota z Figmy (obsah 353 v 393), rovnaká odchýlka ako u omrviniek (§11). */
  .reg-form-section { padding-block: 40px 20px; }
  .reg-form-section > .container { width: calc(100% - 40px); }
  /* Na telefóne je blok na plnú šírku kontejnera (Figma: obsah 353 v 393), takže sa ruší
     zúženie na 511 z pásma nad 680. */
  .reg-form-grid { gap: 32px; max-width: none; }
  .reg-form-copy h2 { margin-bottom: 16px; }
  .reg-form-copy > p { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
  /* Mobilný Icon Box (6799:9821) je 153×24 — ikona tam nemá 1px odsadenie ako na desktope. */
  .reg-contact { font-size: 16px; line-height: 24px; }
  .reg-contact img { margin-top: 0; }
  .reg-form-panel { max-width: none; padding: 24px; }

  .reg-activate { padding-block: 20px; }
  .reg-activate > .container { width: calc(100% - 16px); padding-inline: 0; }
  /* Mobilný panel má radius 24 (`radius/3xl`), nie 40 ako desktopový — 6799:8954. */
  .reg-activate-panel { padding: 40px 24px; border-radius: var(--radius); }
  .reg-activate-figure { max-width: none; }
  .reg-activate .button { height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }

  .reg-divider { display: block; }
  .page-register .br-d { display: none; }
  .page-register .br-m { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .floating-note { animation: none; }
  .partner-logos { overflow: visible; }
  .partner-logos::before, .partner-logos::after { display: none; }
  .partner-track { width: 100%; animation: none; }
  .partner-track .partner-group + .partner-group { display: none; }
  .partner-group { flex-wrap: wrap; justify-content: center; width: 100%; padding-right: 0; }
}

/* ==========================================================================
   Podstránka „Lekárne“ (lekarne.html) — Figma 6843:7191 desktop, 6843:7136 mobil.
   Hlavička, omrvinky, modrý pruh s H1, CTA, logo wall, pätička, `.button`
   a `.container` sú zdieľané. Nové je len zapustená mapa, riadok filtrov
   a karta lekárne.
   ========================================================================== */

/* Modrý pruh je 540 vysoký rovnako ako na Klubových zľavách, ale nadpis má len jeden riadok
   (96 namiesto 192) — rozdiel absorbuje spodný padding: 128 + 96 + 32 + 28 + 256 = 540.
   Prepisuje sa aj v oboch mobilných rozsahoch: tento blok je v súbore neskôr než media
   queries `.page-hero`, a pri rovnakej špecificite by ich inak prebil. */
.pharmacies-hero { padding-bottom: 256px; }

/* Mapa (6843:8483): sekcia je vo Figme 360 vysoká a obrázok 1312×518.13 v nej sedí na spodnej
   hrane (`justify-end`), takže hore prečnieva 158.13 do modrého pruhu. Tu to isté — pevná výška
   riadku + `align-items: flex-end`. Presah sa tak dopočíta z pomeru strán pri každej šírke
   a nemusí byť nikde hardkódovaný. */
.map-row { position: relative; z-index: 2; display: flex; align-items: flex-end; height: 360px; }
.map-row > .container { flex: 0 0 auto; }
.map-figure { margin: 0; width: 100%; aspect-ratio: 1889 / 746; box-shadow: 0 2px 4px -1px rgba(0,0,0,.06), 0 4px 6px -1px rgba(0,0,0,.1); }
.map-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Filtre (6843:8669): dva vycentrované riadky, medzera 32 vo vnútri aj medzi nimi. */
.pharmacy-filters { display: flex; flex-direction: column; gap: 32px; }
/* Riadok sa zalamuje: tri polia 340 + dve medzery 32 = 1084, čo sa do kontejnera zmestí len
   do ~1148px okna. Nižšie ide tretie pole pod ne (2 + 1), potom každé na vlastný riadok —
   `max-width` drží šírku 340 z Figmy vo všetkých troch stavoch. */
.pharmacy-selects { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
/* Obrys je `inset box-shadow`, nie `border` — Figma ho kreslí dovnútra rozmeru, takže pole
   musí vyjsť presne 340×40 (ten istý trik ako `.sort-select`, §11). */
.pharmacy-select, .pharmacy-search { flex: 1 1 340px; max-width: 340px; height: 40px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-size: 14px; line-height: 20px; }
.pharmacy-select { position: relative; }
.pharmacy-select select { appearance: none; width: 100%; height: 100%; padding: 8px 36px 8px 12px; border: 0; border-radius: inherit; background: none; color: var(--navy); font: inherit; cursor: pointer; }
/* Chevron má vo Figme `opacity/50`. Na natívnom `<select>` sa priehľadnosť nedá dať na
   `background-image`, preto je to prekrytý `<img>` — rovnako ako v `.sort-select`. */
.pharmacy-select img { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; opacity: .5; pointer-events: none; }
.pharmacy-search { padding: 8px 12px; border: 0; color: var(--navy); font-family: inherit; }
.pharmacy-search::placeholder { color: var(--muted); opacity: 1; }

/* Prepínače (6843:8657): 16px štvorček s 1px obrysom `theme/primary`, zaškrtnutý má výplň
   a 12px fajku. Figma mu dáva `padding-top 2`, aby sedel na účiare popisku. */
/* Zalamuje sa tiež — štyri prepínače merajú s medzerami 680, čo pod ~720px okna nevyjde. */
.pharmacy-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.pharmacy-toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.pharmacy-toggle input { appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; border-radius: 4px; background: var(--white); box-shadow: inset 0 0 0 1px var(--red); cursor: pointer; }
.pharmacy-toggle input:checked { background: var(--red) url("assets/checkbox-check.svg") center / 12px 12px no-repeat; }

/* Mriežka (6843:8274): 3 × 416 s medzerou 32 = presne kontejner 1312, 64 od filtrov.
   Počet stĺpcov nerieši media query, ale `auto-fit` — minimum 397 je namerané minimum karty
   (viď `.pharmacy-card` nižšie). Dôvod: `@media` v Chrome počíta šírku **vrátane** zvislého
   scrollbaru, kým `.container` (`100% - 64px`) sa počíta bez neho, takže pevná hranica by
   sedela len pri jednej šírke scrollbaru. `auto-fit` sa rozhoduje podľa reálne dostupnej
   šírky. Pri kontejneri 1312 vyjdú presne 3 × 416 z Figmy.
   `min(397px, 100%)` je nutné — bez neho by pri kontejneri 345 (mobil) zostal stĺpec 397 široký
   a pretiekol by. Rovnaký vzor ako kupóny v §11. */
.pharmacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(397px, 100%), 1fr)); gap: 32px; margin-top: 64px; }

/* Karta (6843:9498) — na desktope pevných 356. Názov má vo Figme pevný dvojriadkový box 56,
   takže kontakty začínajú vo všetkých kartách na tej istej výške bez ohľadu na dĺžku názvu.
   **Minimum karty je 396.6.** Stĺpce tela sú rovnaké (`flex: 1 1 0`), takže rozhoduje širší
   obsah: `emailova@adresa.sk` = 158.3 (hodiny potrebujú len 138, riadok „Po: 07:00 - 15:30“ 135).
   Karta teda potrebuje 48 paddingu + 32 medzery + 2 × 158.3. Užšia karta zalomí e-mail a prestane
   byť 356 vysoká — pri 1181px to bolo 548. Toto číslo je minimum v `.pharmacy-grid`. */
.pharmacy-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: var(--light-blue); word-break: break-word; }
.pharmacy-card p { margin: 0; }
.pharmacy-card-head { display: flex; flex-direction: column; gap: 4px; }
.pharmacy-region { font-size: 14px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
/* Figma dáva názvu `font/tracking/normal`; projekt má globálne -.035em na h1–h3.
   Box je pevných 56 (dva riadky), preto je tu poistka `line-clamp: 2` — s obsahom z návrhu
   sa neuplatní (najdlhší názov meria 489, na dva riadky mu stačí karta 292.5, a tá nikdy
   neklesne pod 396.6), ale reálne dlhšie meno by inak z boxu vytieklo. Trojbodka namiesto
   tvrdého rezu je rovnaké riešenie ako pri titulku kupónu, §11. */
.pharmacy-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 56px; margin: 0; color: var(--red); font-size: 20px; line-height: 28px; letter-spacing: 0; }
.pharmacy-name a:hover { text-decoration: underline; }
.pharmacy-body { display: flex; gap: 32px; }
.pharmacy-contact, .pharmacy-hours { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.pharmacy-contact { gap: 20px; }
.pharmacy-contact > div { display: flex; flex-direction: column; gap: 4px; }
.pharmacy-hours { gap: 4px; }
.pharmacy-label { font-weight: 700; }
.pharmacy-hours dl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pharmacy-hours dl > div { display: flex; gap: 4px; }
.pharmacy-hours dt { flex: 0 0 38px; font-weight: 700; }
.pharmacy-hours dd { margin: 0; }

.pharmacy-more { display: flex; justify-content: center; margin-top: 64px; }

/* ==========================================================================
   Lekárne — medzistavy. Figma kreslí len 1512 a 393; hranice nižšie sú body,
   kde sa daný prvok prestane zmestiť (rovnaká logika ako §8).
   ========================================================================== */

@media (max-width: 980px) {
  /* V tomto rozsahu je `.page-hero` 64/64, takže na zapustenie mapy nie je miesto — nasadí sa
     pod pruh s odstupom 48, presne ako pás kategórií na Klubových zľavách (§11). */
  .pharmacies-hero { padding-bottom: 64px; }
  .map-row { display: block; height: auto; padding-top: 48px; }
}

/* Telefón — presne mobilný rám (393). */
@media (max-width: 680px) {
  .pharmacies-hero { padding-bottom: 112px; }
  .map-figure { aspect-ratio: 482 / 346; }
  .pharmacies-query { padding-block: 20px 40px; }
  .pharmacy-filters { gap: 16px; }
  /* Figma necháva poliam šírku 340 aj v kontejneri 345, takže po stranách zostávajú 2.5px.
     Drží sa to verne, len cez `max-width`, aby sa pole zmestilo aj pod 388px. */
  .pharmacy-selects { flex-direction: column; align-items: center; gap: 16px; }
  /* V stĺpci by `flex-basis: 340` platil na výšku — preto sa tu základ ruší. */
  .pharmacy-select, .pharmacy-search { flex: 0 0 auto; width: 100%; max-width: 340px; }
  /* 2 × 2 vyjde samo zalomením: 168 + 16 + 149 = 333 a 147 + 16 + 120 = 283 sa do 345 zmestia. */
  .pharmacy-toggles { flex-wrap: wrap; justify-content: flex-start; gap: 16px; }
  .pharmacy-grid { gap: 16px; margin-top: 32px; }
  /* Na mobile Figma pevnú výšku názvu nedáva — karta rastie podľa textu (556 až 584). */
  .pharmacy-name { height: auto; }
  .pharmacy-body { flex-direction: column; gap: 16px; }
  .pharmacy-contact { gap: 16px; }
  .pharmacy-contact, .pharmacy-hours { flex: 0 0 auto; width: 100%; }
  .pharmacy-more { margin-top: 32px; }
}

/* Zapustenie mapy sa vracia až tu, nie na 680. Mobilný výrez je takmer štvorcový (482/346),
   takže s rastúcou šírkou rýchlo pribúda na výške: pri 393 prečnieva do pruhu 80.66 (presne
   Figma), ale pri 680 by to bolo 286.7 — teda viac, než je celý pruh (236), a mapa by prekryla
   nadpis aj podnadpis. Strop je 112 (spodný padding pruhu, t. j. voľné modré pod podnadpisom),
   čo zodpovedá obrázku 279 vysokému, kontejneru 388.7 a oknu **436.7**. Nad touto hranicou
   platí tabletové riešenie z bloku 980 — mapa je pod pruhom s odstupom 48, bez zapustenia. */
@media (max-width: 436px) {
  .map-row { display: flex; height: 187px; padding-top: 0; padding-bottom: 20px; }
  /* Bez tohto by odstup mapy od podnadpisu klesal z 31.4 (393, Figma) na 0.5 pri 436 — a to sú
     bežné šírky telefónov (412, 414, 428, 430). Spodný padding pruhu preto rastie s výškou mapy
     tak, aby odstup zostal 31.36: padding = (šírka kontejnera / 1.3931 − 167) + 31.36, kde
     1.3931 = 482/346 je pomer mobilného výrezu a 167 je obsahová výška riadku mapy (187 − 20).
     Pri 393 vyjde presne 112, teda hodnota z Figmy, a `max()` ju drží ako podlahu pre užšie
     obrazovky. `100vw` počíta aj scrollbar, takže na desktope vyjde padding o niečo väčší —
     to je bezpečný smer (viac modrej), nie menej. */
  .pharmacies-hero { padding-bottom: max(112px, calc((100vw - 48px) / 1.3931 - 135.64px)); }
}

/* ==========================================================================
   Stránky z adminu (`/{slug}`) — právne texty z pätičky. Vo Figme návrh nemajú,
   je to dokumentový layout poskladaný z konštánt dizajnu (farby, písmo, odsadenia).
   Obsah je HTML z RichEditora, preto sa štýluje po značkách vnútri `-body`.
   ========================================================================== */
.static-page { padding-block: 64px 96px; }
.static-page .container { max-width: 808px; }
.static-page-head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.static-page h1 { margin-bottom: 12px; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.05; }
.static-page-updated { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.static-page-body { font-size: 16px; line-height: 1.6; }
/* Globálne `h2` je marketingový nadpis sekcie (60 px) — v dokumente platí menšia škála. */
.static-page-body h2 { margin: 40px 0 16px; font-size: 28px; line-height: 1.15; }
.static-page-body h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.3; }
.static-page-body h2:first-child, .static-page-body h3:first-child { margin-top: 0; }
.static-page-body p { margin: 0 0 16px; }
.static-page-body ul, .static-page-body ol { margin: 0 0 16px; padding-left: 24px; }
.static-page-body li { margin-bottom: 8px; }
/* TipTap balí obsah položky zoznamu do <p> — bez tohto by mal dvojité odsadenie. */
.static-page-body li p { margin: 0; }
.static-page-body a { font-weight: 700; text-decoration: underline; }
/* Tabuľky typu zoznam cookies (názov, účel, platnosť). */
.static-page-body table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.static-page-body th, .static-page-body td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.static-page-body th { background: var(--pale-blue); }

@media (max-width: 680px) {
  .static-page { padding-block: 40px 64px; }
  .static-page-head { margin-bottom: 32px; padding-bottom: 20px; }
  .static-page h1 { font-size: 36px; }
  .static-page-body h2 { font-size: 24px; }
  .static-page-body h3 { font-size: 18px; }
  /* Široká tabuľka sa na telefóne posúva vodorovne, nepretečie mimo obrazovku. */
  .static-page-body table { display: block; overflow-x: auto; }
}