/* ==========================================================================
   Envy Therapy — LED 2.0 Biohack Mask — landing page
   ==========================================================================

   Zdroj: Figma "Envy LP (Copy)" — https://www.figma.com/design/yjo2Gj67slRSapAZGxMEGH/
     · Desktop  1440 px  (node 68:3915)
     · Mobile    375 px  (node 49:1409)

   Všetko je zapuzdrené pod .envy-lp, takže sa to nebije so štýlmi webu
   (Bootstrap 3 / theme.css). Hlavička a pätička webu sa NEGENERUJÚ.

   Obsah
     1. Tokeny (farby, typografia, spacing)
     2. Reset v rámci .envy-lp
     3. Layout — kontajner, sekcie
     4. Opakované prvky — tlačidlá, karty, citácie, karusel
     5. Sekcie (v poradí ako na stránke)
     6. Sticky lišta
   ========================================================================== */

/* ==========================================================================
   1. TOKENY
   ========================================================================== */

.envy-lp {
  /* --- Farby (názvy podľa premenných vo Figme) --- */
  --envy-black: #000000;
  --envy-white: #ffffff;
  --envy-blue: #0000ff;          /* blue 1   — primárna akčná farba */
  --envy-red: #ff0000;           /* red 2    — akcenty, badge, CTA */
  --envy-red-light: #ff9999;     /* red 1    — pozadie ANTI-AGE */
  --envy-purple: #9999ff;        /* purple   — pozadie ANTI-ACNE */
  --envy-yellow: #f7e399;        /* yellow 2 — pozadie ANTI-PIGMENT */
  --envy-yellow-strong: #eab801; /* yellow 1 — zvýraznenie ANTI-PIGMENT */
  --envy-gray-1: #f7f7f7;
  --envy-gray-2: #eeeeee;
  --envy-gray-3: #dfdfdf;        /* všetky rámčeky kariet */
  --envy-gray-4: #838383;        /* drobné poznámky pod čiarou */
  --envy-gray-5: #696969;        /* bežný sekundárny text */
  --envy-hero-bg: #f8f8f8;       /* pozadie hero na mobile */

  --envy-border: 1px solid var(--envy-gray-3);

  /* --- Typografia ---
     Web už servíruje Univers LT Pro, ale LEN rez 45 Light (font-weight 300).
     Dizajn stojí na 55 Roman (400) a 65 Bold (700) — pozri README, treba
     doplniť dva woff2 súbory, inak prehliadač váhy nasyntetizuje. */
  --envy-font: "Univers LT Pro", "Helvetica Neue", Arial, sans-serif;
  --envy-tracking: 0.01em;       /* vo Figme "letterSpacing: 1" = 1 % */

  --envy-fs-h1: 4rem;          /* 40px — čísla v štatistikách */
--envy-fs-h3: 1.8rem;        /* 18px mobil → 20px desktop (nižšie) */
--envy-fs-h4: 1.8rem;        /* 18px — kroky rituálu */
--envy-fs-lg: 1.6rem;        /* 16px — cena (bold) */
--envy-fs-md: 1.5rem;        /* 15px — popisky pod obrázkami */
--envy-fs-base: 1.4rem;      /* 14px — základný text */
--envy-fs-sm: 1.3rem;        /* 13px — ceny v balíčkoch */
--envy-fs-xs: 1.2rem;        /* 12px — drobný text, badge */
--envy-fs-2xs: 1.1rem;         /* 10px — zdroje, disclaimery */
    
  --envy-lh-tight: 1.4;
  --envy-lh-snug: 1.5;
  --envy-lh-base: 1.6;
  --envy-lh-loose: 1.7;

  /* --- Spacing --- */
  --envy-gap-section: 80px;      /* medzera medzi sekciami — mobil */
  --envy-pad-x: 12px;            /* bočný odsadenie — mobil */
  --envy-card-pad: 24px;

  /* --- Ostatné --- */
  --envy-focus: 2px solid var(--envy-blue);
  --envy-transition: 160ms ease;
}

@media (min-width: 1024px) {
  .envy-lp {
    --envy-fs-h3: 2.25rem;       /* 20px */
    --envy-gap-section: 140px;
    --envy-pad-x: 50px;
    --envy-card-pad: 50px;
  }
}

/* ==========================================================================
   2. RESET (len v rámci .envy-lp, nech to neuteká do zvyšku webu)
   ========================================================================== */

/* #################### JB ################## */
.envy-lp blockquote {
border:0px;
}
/* #################### JB ################## */


.envy-lp {
  font-family: var(--envy-font);
  font-size: var(--envy-fs-base);
  font-weight: 400;
  line-height: var(--envy-lh-base);
  letter-spacing: var(--envy-tracking);
  color: var(--envy-black);
  background-color: var(--envy-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.envy-lp *,
.envy-lp *::before,
.envy-lp *::after { box-sizing: border-box; }

.envy-lp :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }

.envy-lp :where(ul, ol) { list-style: none; }

/* height: auto ruší HTML atribút height="…" — ten by inak prebil aspect-ratio.
   Atribúty width/height na <img> necháme kvôli rezervácii miesta (CLS). */
.envy-lp :where(img, svg) { display: block; max-width: 100%; height: auto; }

.envy-lp :where(button) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.envy-lp :where(a) { color: inherit; }

.envy-lp :focus-visible {
  outline: var(--envy-focus);
  outline-offset: 2px;
}

/* Heading — jednotný vzhľad všetkých nadpisov sekcií */
.envy-lp :where(h1, h2, h3) {
  font-size: var(--envy-fs-h3);
  font-weight: 400;
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

.envy-lp__lead {
  color: var(--envy-gray-5);
  line-height: var(--envy-lh-base);
}

.envy-lp__note {
  font-size: var(--envy-fs-2xs);
  line-height: var(--envy-lh-base);
  color: var(--envy-gray-4);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.envy-lp__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--envy-pad-x);
}

/* Sekcie na plnú šírku (hero, video, produkt, CTA) majú menšie odsadenie */
.envy-lp__container--wide { padding-inline: 12px; }

.envy-lp__sections {
  display: flex;
  flex-direction: column;
  gap: var(--envy-gap-section);
  padding-block: 12px;
}

/* Nadpis sekcie + perex, vycentrované */
.envy-lp__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  max-width: 500px;
  margin-inline: auto;
}

.envy-lp__heading h2 { max-width: 24em; }

/* ==========================================================================
   4. OPAKOVANÉ PRVKY
   ========================================================================== */

/* --- Tlačidlá ------------------------------------------------------------ */

.envy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 32px;
  font-size: var(--envy-fs-base);
  line-height: var(--envy-lh-snug);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--envy-transition), color var(--envy-transition);
}

.envy-btn--primary {
  width: 100%;
  background-color: var(--envy-blue);
  color: var(--envy-white);
}
.envy-btn--primary:hover,
.envy-btn--primary:focus-visible { background-color: #0000cc; }

.envy-btn--red {
  background-color: var(--envy-red);
  color: var(--envy-white);
}
.envy-btn--red:hover,
.envy-btn--red:focus-visible { background-color: #cc0000; }

.envy-btn--dark {
  background-color: var(--envy-black);
  color: var(--envy-white);
  padding: 12px 32px;
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
}
.envy-btn--dark:hover,
.envy-btn--dark:focus-visible { background-color: #333; }

/* Textový odkaz s podčiarknutím (napr. "Napísať hodnotenie") */
.envy-btn--link {
  padding: 0;
  color: var(--envy-blue);
  border-bottom: 1px solid currentColor;
  line-height: var(--envy-lh-snug);
}

/* Rámčekové tlačidlo v balíčkoch */
.envy-btn--outline {
  padding: 4px 8px;
  font-size: var(--envy-fs-sm);
  line-height: var(--envy-lh-snug);
  color: var(--envy-blue);
  border: 1px solid var(--envy-blue);
  text-transform: none;
}
.envy-btn--outline:hover,
.envy-btn--outline:focus-visible {
  background-color: var(--envy-blue);
  color: var(--envy-white);
}

/* --- Mriežka kariet s 1px rámčekom ---------------------------------------
   Karty susedia hranami; negatívna medzera zabráni zdvojeniu čiary. */

.envy-cards {
  display: grid;
  gap: 0;
}

.envy-cards > * {
  border: var(--envy-border);
  margin: 0 0 -1px 0;
}

@media (min-width: 768px) {
  .envy-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .envy-cards > * { margin: 0 -1px -1px 0; }
}

/* --- Citácia (recenzie lekárok aj zákazníčok) ---------------------------- */

.envy-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: var(--envy-card-pad);
  background-color: var(--envy-white);
}

.envy-quote__mark {
  width: 15px;
  height: 10px;
  flex: none;
}

.envy-quote__text {
  line-height: var(--envy-lh-loose);
  text-transform: uppercase;
}

.envy-quote__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-quote__person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.envy-quote__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.envy-quote__name { line-height: var(--envy-lh-base); }
.envy-quote__role { color: var(--envy-gray-5); line-height: var(--envy-lh-base); }

/* --- Hodnotenie: päť bodiek --------------------------------------------- */

.envy-rating {
  display: flex;
  align-items: center;
  gap: 12px;
}

.envy-rating__dots {
  display: flex;
  gap: 6px;
}

.envy-rating__dots::before {
  /* päť bodiek vykreslených cez box-shadow — žiadny obrázok netreba */
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--envy-black);
  box-shadow: 12px 0 var(--envy-black), 24px 0 var(--envy-black),
              36px 0 var(--envy-black), 48px 0 var(--envy-black);
  margin-right: 48px;
}

.envy-rating__value { color: var(--envy-gray-5); }

/* --- Karusel (vodorovné posúvanie s prichytávaním) ----------------------- */

.envy-carousel { position: relative; }

.envy-carousel__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* posun cez okraj kontajnera, aby ďalšia karta "vykúkala" */
  margin-inline: calc(-1 * var(--envy-pad-x));
  padding-inline: var(--envy-pad-x);
}

.envy-carousel__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.envy-carousel__btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--envy-black);
  transition: opacity var(--envy-transition);
}

.envy-carousel__btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.envy-carousel__btn--prev { left: -41px; }
.envy-carousel__btn--prev::before { transform: rotate(45deg); }
.envy-carousel__btn--next { right: -41px; }
.envy-carousel__btn--next::before { transform: rotate(-135deg); }

.envy-carousel__btn[disabled] { opacity: 0.25; cursor: default; }

@media (min-width: 1024px) {
  .envy-carousel__btn { display: flex; }
  .envy-carousel__track {
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .envy-carousel__track > * { flex: 1 1 0; min-width: 0; }
}

/* --- Prehrávacie tlačidlo nad videom ------------------------------------- */

.envy-play {
  position: absolute;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8.67px);
  backdrop-filter: blur(8.67px);
  transition: background-color var(--envy-transition);
}

.envy-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13.5px;
  border-color: transparent transparent transparent var(--envy-white);
}

.envy-play:hover,
.envy-play:focus-visible { background-color: rgba(255, 255, 255, 0.25); }

/* ==========================================================================
   5. SEKCIE
   ========================================================================== */

/* --- 5.1 Hero ------------------------------------------------------------ */

.envy-hero {
  position: relative;
  background-color: var(--envy-hero-bg);
  padding-block: 24px 50px;
  overflow: hidden;
}

.envy-hero__eyebrow {
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

/* Spoločná scéna pre pás obrázkov, kartu a odznak — odznak sa tak polohuje
   voči rovnakému bodu ako vo Figme, nie voči karte samotnej. */
.envy-hero__stage { position: relative; }

/* Pás obrázkov. Na mobile tri zábery vedľa seba, prostredný v strede
   a bočné len "vykukujú". Na desktope dva na plnú šírku. */
.envy-hero__media {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 13px;
}

.envy-hero__media img {
  flex: 0 0 auto;
  width: 230px;
  height: 280px;
  object-fit: cover;
}

.envy-hero__media img:first-child { object-position: bottom; }

.envy-hero__card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.envy-hero__badge {
  position: absolute;
  z-index: 2;
  top: 15px;            /* Figma mobil: x = 11, y = 15 od vrchu pásu obrázkov */
  left: 11px;
  width: 106px;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 50%;
  background-color: var(--envy-red);
  color: var(--envy-gray-1);
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(0.55deg);
}

.envy-hero__content {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  text-align: center;
}

.envy-hero__content h1 { max-width: 265px; }

.envy-hero__kicker {
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  text-transform: uppercase;
}

.envy-hero__buy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.envy-hero__price {
  font-weight: 700;
  font-size: var(--envy-fs-lg);
  line-height: var(--envy-lh-snug);
}

.envy-hero__instalment {
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  text-transform: uppercase;
  text-align: center;
}

.envy-hero__instalment strong { font-weight: 700; }

/* Na mobile je produktová fotka už v páse obrázkov, v karte sa nezobrazuje */
.envy-hero__product-img { display: none; }

@media (min-width: 1024px) {
  .envy-hero {
    background-color: transparent;
    padding-block: 0;
  }

  /* Popisok leží nad scénou, preto je kontajner referenčným bodom */
  .envy-hero > .envy-lp__container { position: relative; }

  /* Obrázky a karta sa prekrývajú v jednej bunke mriežky */
  .envy-hero__stage {
    display: grid;
    min-height: 840px;
  }

  /* Dva zábery na pozadí cez celú šírku */
  .envy-hero__media {
    grid-area: 1 / 1;
    gap: 8px;
    margin: 0;
    align-items: stretch;
  }

  .envy-hero__media img {
    flex: 1 1 0;
    width: auto;
    height: 840px;
  }

  /* Tretí (mobilný) záber sa na desktope nezobrazuje */
  .envy-hero__media img:nth-child(2) { display: none; }

  .envy-hero__eyebrow {
    position: absolute;
    top: 40px;
    left: 28px;      /* Figma: 40 od okraja rámu, mínus 12 px odsadenie kontajnera */
    margin: 0;
    z-index: 3;
  }

  /* Biela karta s produktom, vycentrovaná nad obrázkami */
  .envy-hero__card {
    grid-area: 1 / 1;
    z-index: 1;
    position: relative;
    width: 500px;
    height: 680px;
    justify-self: center;
    align-self: start;
    margin-top: 80px;
    justify-content: space-between;
    padding: 50px 20px 20px;
    background-color: var(--envy-white);
  }

  /* Figma: odznak je 23 / −30 voči obsahu karty, ktorý má odsadenie 50 / 20.
     Voči scéne to je 73 px od ľavého okraja karty a 20 px od jej vrchu,
     pričom karta začína 80 px pod vrchom scény a je vycentrovaná. */
  .envy-hero__badge {
    top: 100px;
    left: calc(50% - 177px);
    width: 120px;
    height: 120px;
    font-size: var(--envy-fs-base);
    line-height: var(--envy-lh-snug);
  }

  .envy-hero__product-img {
    display: block;
    width: 200px;
    height: 220px;
    object-fit: cover;
  }

  .envy-hero__content { gap: 13px; }
  .envy-hero__content h1 { max-width: 354px; }
  .envy-hero__content .envy-lp__lead { max-width: 363px; }
  .envy-hero__buy { gap: 24px; }
  .envy-hero__instalment { text-align: left; }
}

/* --- 5.2 LED režimy ------------------------------------------------------ */

.envy-modes {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Mobil: nadpis → náhľady → veľký panel, medzery podľa Figmy (28 / 24 px) */
.envy-modes__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.envy-modes__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.envy-modes__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-modes__intro .envy-lp__lead { max-width: 300px; }

/* Prepínač režimov — tri náhľady */
.envy-modes__tabs {
  display: flex;
  gap: 4px;
}

.envy-modes__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* Farba zvýraznenia zodpovedá vlnovej dĺžke režimu */
.envy-modes__tab--anti-age { --envy-mode-color: var(--envy-red); }
.envy-modes__tab--anti-acne { --envy-mode-color: var(--envy-blue); }
.envy-modes__tab--anti-pigment { --envy-mode-color: var(--envy-yellow-strong); }

.envy-modes__thumb {
  position: relative;
  aspect-ratio: 186 / 183;
  background-color: var(--envy-gray-1);
  border: 1px solid transparent;
  overflow: hidden;
  transition: border-color var(--envy-transition);
}

.envy-modes__tab:hover .envy-modes__thumb { border-color: var(--envy-gray-3); }

.envy-modes__tab[aria-selected="true"] .envy-modes__thumb,
.envy-modes__tab[aria-selected="true"]:hover .envy-modes__thumb {
  border-color: var(--envy-mode-color);
}

/* Žiara za maskou — SVG obsahuje aj rozostrený presah, preto > 100 % */
.envy-modes__glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 162%;
  height: 193%;
  object-fit: contain;
}

/* Zdrojový obrázok je štvorec; výrez na výšku robí object-fit: cover,
   rovnako ako orez vo Figme. */
.envy-modes__thumb-mask {
  position: absolute;
  left: 50%;
  top: 15.2%;
  transform: translateX(-50%);
  width: 49%;
  height: 69.8%;
  object-fit: cover;
  object-position: 49% 55%;
}

.envy-modes__tab-label {
  font-size: var(--envy-fs-sm);
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

.envy-modes__tab-label span { display: block; }

/* Veľký panel s vybraným režimom */
.envy-modes__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.envy-modes__panel[hidden] { display: none; }

/* Obal videa a panelov — video je spoločné, panely sa pod ním prepínajú */
.envy-modes__display {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.envy-modes__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 351 / 280;
}

.envy-modes__figure img {
  width: 43.6%;
  height: 76.4%;
  object-fit: cover;
  object-position: 49% 55%;
}

/* Variant s videom má rovnaký pomer strán na mobile aj na desktope, aby bol
   záber rovnaký. Video je na výšku (9:16) a nie je orezané — zmestí sa celé
   (object-fit: contain). Pozadie je biele, rovnaké ako pozadie v ateliéri,
   takže po stranách nevidno žiadne pruhy. */
.envy-modes__figure--video {
  aspect-ratio: 380 / 459;
  overflow: hidden;
  background-color: var(--envy-white);
}

.envy-modes__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.envy-modes__detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-modes__wavelength { color: var(--envy-blue); }
.envy-modes__desc { color: var(--envy-gray-5); }

/* Štatistiky */
.envy-modes__stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Figma: 380 px — určuje zalomenie na tri riadky */
.envy-modes__stats .envy-lp__note { max-width: 380px; }

/* Nadpis nad štatistikami — nie je vo Figme, doplnený na žiadosť.
   Zarovnanie aj veľkosť kopírujú ostatné nadpisy v sekcii. */
.envy-modes__stats-title { margin-bottom: 12px; }

.envy-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: var(--envy-card-pad);
  width: 280px;
}

.envy-stat__value {
  font-size: var(--envy-fs-h1);
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

.envy-stat__bar {
  width: 100%;
  height: 10px;
  background-color: var(--envy-gray-2);
}

.envy-stat__bar > span {
  display: block;
  height: 100%;
  background-color: var(--envy-blue);
}

.envy-stat__desc { color: var(--envy-gray-5); }

/* Šírky textu sú z Figmy — určujú, kde sa veta zalomí */
.envy-stat:nth-child(1) .envy-stat__desc { max-width: 230px; }
.envy-stat:nth-child(2) .envy-stat__desc,
.envy-stat:nth-child(3) .envy-stat__desc { max-width: 259px; }

@media (min-width: 1024px) {
  .envy-modes { gap: 80px; }

  .envy-modes__top {
    flex-direction: row;
    gap: 100px;
    align-items: center;
  }

  .envy-modes__tabs { gap: 8px; }
  .envy-modes__tab { gap: 16px; }
  .envy-modes__tab-label { font-size: var(--envy-fs-md); }

  .envy-modes__glow { width: 125%; height: 148%; }

  .envy-modes__thumb-mask {
    top: 13%;
    width: 51.5%;
    height: 73%;
  }

  .envy-modes__figure { aspect-ratio: 380 / 459; }
  .envy-modes__figure img { width: 61%; height: 70.4%; }

  .envy-modes__display {
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
  }

  .envy-modes__left {
    gap: 80px;
    width: 574px;
    flex: none;
  }

  .envy-modes__intro { max-width: 350px; }

  .envy-modes__panel {
    width: 206px;
    flex: none;
  }

  .envy-modes__figure {
    width: 380px;
    flex: none;
  }

  .envy-modes__detail {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .envy-modes__stats { gap: 20px; }
  .envy-stat { width: auto; }
}

/* --- 5.3 Technológia ------------------------------------------------------ */

.envy-tech {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-tech__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.envy-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 25px 11px;
  min-height: 175px;
  text-align: center;
}

.envy-benefit__icon {
  width: 53px;
  height: 46px;
  object-fit: contain;
}

/* Porovnanie spektra */
.envy-tech__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.envy-tech__benefits > * { margin: 0 -1px -1px 0; }

.envy-spectrum {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40px 16px;
  background-image: linear-gradient(182.5deg, #000000 53%, #8e0606 140%);
  color: var(--envy-white);
}

.envy-spectrum__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-spectrum__title {
  font-weight: 700;
  font-size: var(--envy-fs-lg);
  line-height: var(--envy-lh-base);
  text-transform: none;   /* vo Figme nie je verzálkami */
}

.envy-spectrum__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.envy-spectrum__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--envy-fs-sm);
  line-height: var(--envy-lh-tight);
}

.envy-spectrum__legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background-color: var(--envy-dot, var(--envy-red));
}

.envy-spectrum__legend li:nth-child(n + 2) { --envy-dot: #ff587f; }

.envy-spectrum__chart { display: flex; flex-direction: column; gap: 4px; }

/* Mierka nie je lineárna — pozície sú prevzaté 1:1 z Figmy a nesené
   v premennej --x (percento šírky pruhu). */
.envy-spectrum__scale {
  position: relative;
  height: 1.6em;
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  color: rgba(255, 255, 255, 0.8);
}

.envy-spectrum__scale span {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  white-space: nowrap;
}

.envy-spectrum__scale span:first-child { transform: none; }
.envy-spectrum__scale span:last-child { transform: translateX(-100%); }

.envy-spectrum__scale .is-highlight { color: var(--envy-red); }

.envy-spectrum__bar { width: 100%; height: 36px; }
.envy-spectrum__bar img { width: 100%; height: 100%; }

.envy-spectrum__axis {
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

@media (min-width: 1024px) {
  .envy-tech__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .envy-tech__benefits { flex: 1 1 0; min-width: 0; }

  .envy-benefit {
    gap: 32px;
    padding: 50px 32px;
    min-height: 0;
  }

  .envy-benefit__icon { width: 58px; height: 50px; }

  .envy-spectrum {
    flex: 1 1 0;
    min-width: 0;
    gap: 60px;
    padding: 84px 34px;
  }
}

/* --- 5.4 Recenzie lekárok ------------------------------------------------- */

.envy-reviews {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- 5.5 Videá (dve veľké) ------------------------------------------------ */

.envy-videos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.envy-video {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-video__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 704 / 425;
  overflow: hidden;
  background-color: var(--envy-gray-2);
}

.envy-video__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Platí pre <iframe> (YouTube) aj <video> (vlastný súbor) */
.envy-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #000;
  object-fit: contain;
}

.envy-video__caption {
  font-size: var(--envy-fs-md);
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .envy-videos { flex-direction: row; gap: 8px; }
  .envy-video { flex: 1 1 0; min-width: 0; }
}

/* --- 5.6 Rituál ----------------------------------------------------------- */

.envy-ritual {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.envy-ritual__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.envy-ritual__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-ritual__img {
  width: 100%;
  aspect-ratio: 351 / 300;
  object-fit: cover;
}

.envy-ritual__steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--envy-gray-2);
}

.envy-ritual__steps > .envy-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.envy-step__num {
  width: 24px;
  flex: none;
  font-size: var(--envy-fs-h4);
  line-height: var(--envy-lh-tight);
  color: var(--envy-red);
  text-transform: uppercase;
}

.envy-step__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

.envy-step__title {
  font-size: var(--envy-fs-h4);
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

.envy-step__text { color: var(--envy-gray-5); max-width: 462px; }

.envy-step__text a {
  color: var(--envy-blue);
  text-decoration: underline;
}

.envy-ritual__quote { border: var(--envy-border); }

@media (min-width: 1024px) {
  .envy-ritual {
    flex-direction: row;
    gap: 225px;
    align-items: center;
  }

  .envy-ritual__intro {
    width: 450px;
    flex: none;
    align-self: stretch;
  }

  /* flex-basis 0 → výšku riadku určí pravý stĺpec a spodok fotky
     sa zarovná so spodkom recenzie, presne ako vo Figme */
  .envy-ritual__img {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-height: 0;
  }

  .envy-ritual__right { align-self: stretch; }

  .envy-ritual__right {
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex: 1 1 0;
    min-width: 0;
  }

  .envy-step { gap: 40px; }
  .envy-ritual__quote { padding: 32px 50px; }
}

/* --- 5.7 Výsledky (pred/po) ----------------------------------------------- */

.envy-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-results__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-results__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 280px;
}

.envy-result__media {
  position: relative;
  aspect-ratio: 982 / 626;
}

/* absolútne, aby si obrázok nevnucoval vlastný pomer strán rodičovi —
   inak majú karty s rôzne veľkými zdrojmi rôznu výšku */
.envy-result__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.envy-result__tag {
  position: absolute;
  top: 4px;
  padding: 4px 6px;
  background-color: var(--envy-white);
  color: var(--envy-blue);
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
}

.envy-result__tag--before { left: 4px; }
.envy-result__tag--after { left: 51%; }

.envy-result__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.envy-result__title {
  font-size: var(--envy-fs-md);
  line-height: var(--envy-lh-tight);
  text-transform: uppercase;
}

.envy-result__meta { display: flex; flex-direction: column; gap: 2px; }
.envy-result__meta span:last-child { color: var(--envy-gray-5); }

@media (min-width: 1024px) {
  .envy-results__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .envy-results__head .envy-lp__note { width: 237px; flex: none; }
  .envy-results__heading { max-width: 383px; }
  .envy-result { width: auto; }
}

/* --- 5.8 Hodnotenia zákazníčok -------------------------------------------- */

.envy-testimonials {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-testimonials__list { align-items: stretch; }

.envy-testimonials .envy-quote {
  width: 280px;
  border: var(--envy-border);
}

.envy-testimonials__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.envy-testimonial__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.envy-testimonial__name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.envy-testimonial__verified { width: 16px; height: 16px; flex: none; }

@media (min-width: 1024px) {
  .envy-testimonials .envy-quote { width: auto; }
}

/* --- 5.9 Produkt ---------------------------------------------------------- */

.envy-product {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-product__gallery {
  position: relative;
  width: 100%;
}

/* Fotky idú vedľa seba a posúvajú sa ťahaním — rovnako ako galéria na
   detaile produktu na e-shope. Pri jednej fotke sa nedeje nič. */
.envy-product__stage {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.envy-product__stage::-webkit-scrollbar { display: none; }

.envy-product__image {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--envy-gray-1);
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ťahanie myšou dorába JS — natívny scroll ho na desktope nevie.
   Triedu pridáva JS, takže pri jednej fotke kurzor neklame. */
.envy-product__stage.is-draggable { cursor: grab; }
.envy-product__stage.is-dragging { cursor: grabbing; }

/* Čiarky pod fotkou a šípky po stranách. Obe sú priamo na fotke a vidno ich
   až pri prejdení myšou (alebo keď na ne skočí klávesnica). Na dotykových
   zariadeniach nie je hover, tam sú čiarky vidno stále — šípky netreba,
   listuje sa prstom. Odkryje ich JS, len ak je fotiek viac ako jedna. */

.envy-product__bars {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--envy-transition);
}

.envy-product__bars[hidden] { display: none; }

.envy-product__bars > li { flex: 1 1 0; min-width: 0; display: block; }

.envy-product__bar {
  display: block;
  position: relative;
  width: 100%;
  height: 12px;   /* väčšia plocha na kliknutie, vidieť je len čiara vnútri */
}

.envy-product__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.22);
  transition: background-color var(--envy-transition), height var(--envy-transition);
}

.envy-product__bar:hover::before { background-color: rgba(0, 0, 0, 0.45); }

.envy-product__bar[aria-current="true"]::before {
  height: 2px;
  background-color: var(--envy-black);
}

.envy-product__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--envy-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--envy-transition);
}

.envy-product__arrow[hidden] { display: none; }

/* Rovnaká šipka ako pri ostatných karuseloch na stránke */
.envy-product__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.envy-product__arrow--prev { left: 8px; }
.envy-product__arrow--prev::before { transform: rotate(45deg); }
.envy-product__arrow--next { right: 8px; }
.envy-product__arrow--next::before { transform: rotate(-135deg); }

.envy-product__gallery:hover .envy-product__bars,
.envy-product__gallery:focus-within .envy-product__bars,
.envy-product__gallery:hover .envy-product__arrow,
.envy-product__gallery:focus-within .envy-product__arrow {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .envy-product__bars { opacity: 1; }
  .envy-product__arrow { display: none; }
}

.envy-product__detail {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.envy-product__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.envy-product__title-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.envy-product__spec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.envy-product__spec dt {
  line-height: var(--envy-lh-loose);
  text-transform: uppercase;
}

.envy-product__spec dd {
  margin: 0;
  color: var(--envy-gray-5);
}

.envy-product__buy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-product__price-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.envy-product__price {
  font-weight: 700;
  font-size: var(--envy-fs-lg);
  line-height: var(--envy-lh-snug);
}

.envy-product__skippay {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: var(--envy-border);
}

.envy-product__skippay dt {
  line-height: var(--envy-lh-loose);
  text-transform: uppercase;
}

.envy-product__skippay dd { margin: 0; color: var(--envy-gray-5); }

/* Balíčky */
.envy-bundles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-bundles__intro { color: var(--envy-blue); }

.envy-bundle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 24px;
  border-bottom: var(--envy-border);
}

.envy-bundles > .envy-bundle:first-of-type { border-top: var(--envy-border); }

.envy-bundle__title {
  font-size: var(--envy-fs-base);
  line-height: var(--envy-lh-base);
  text-transform: none;   /* verzálky sú súčasťou textu, nie štýlu */
}

.envy-bundle__items {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-inline: calc(-1 * var(--envy-pad-x));
  padding-inline: var(--envy-pad-x);
}

.envy-bundle__item {
  flex: 0 0 124px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.envy-bundle__item img {
  width: 100%;
  height: 125px;
  object-fit: cover;
  background-color: var(--envy-gray-1);
}

.envy-bundle__item figcaption {
  font-size: var(--envy-fs-xs);
  line-height: var(--envy-lh-base);
}

/* Znamienko "+" medzi produktmi — čisté CSS, žiadny obrázok */
.envy-bundle__plus {
  flex: 0 0 10px;
  align-self: flex-start;
  margin-top: 56px;
  position: relative;
  height: 10px;
  color: var(--envy-blue);
}

.envy-bundle__plus::before,
.envy-bundle__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: currentColor;
}

.envy-bundle__plus::before { width: 10px; height: 1px; }
.envy-bundle__plus::after { width: 1px; height: 10px; }

.envy-bundle__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-size: var(--envy-fs-sm);
  line-height: var(--envy-lh-snug);
}

.envy-bundle__old {
  text-decoration: line-through;
  opacity: 0.6;
}

.envy-bundle__new { color: var(--envy-blue); }

.envy-bundles__more[hidden] { display: none; }

.envy-bundles__toggle {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .envy-product { flex-direction: row; gap: 50px; align-items: flex-start; }
  .envy-product__gallery { width: 662px; flex: none; }
  .envy-product__image { aspect-ratio: 662 / 737; }

  .envy-product__detail { flex: 1 1 0; min-width: 0; }
  .envy-product__head { max-width: 462px; }

  .envy-bundle__title {
  font-size: var(--envy-fs-base);
  line-height: var(--envy-lh-base);
  text-transform: none;   /* verzálky sú súčasťou textu, nie štýlu */
}

.envy-bundle__items { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
}

/* --- 5.10 Videá zákazníčok (UGC) ------------------------------------------ */

.envy-ugc {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-ugc__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 220px;
}

.envy-ugc__frame {
  position: relative;
  aspect-ratio: 329 / 585;
  overflow: hidden;
  background-color: var(--envy-gray-2);
}

.envy-ugc__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.envy-ugc__frame .envy-play { top: 20px; left: 20px; }

/* Citáty majú rôzny počet riadkov, preto sa meno pritláča na spodok karty —
   inak by každé meno začínalo inde podľa dĺžky citátu a šírky okna. */
.envy-ugc__body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.envy-ugc__body > p:last-child { margin-top: auto; }
.envy-ugc__quote { line-height: var(--envy-lh-loose); text-transform: uppercase; }

@media (min-width: 1024px) {
  .envy-ugc__item { width: auto; }
}

/* --- 5.11 Porovnanie nákladov --------------------------------------------- */

.envy-cost {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}

.envy-cost__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cena za jedno ošetrenie. Na desktope stojí priamo naproti tabuľke so 610
   a 1 770 EUR, takže kontrast vznikne sám. Veľkosť čísla je rovnaká ako pri
   štatistikách (81 % / 76 % / 90 %), aby to zostalo v dizajnovom systéme. */
.envy-cost__unit {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.envy-cost__unit-value {
  font-size: var(--envy-fs-h1);
  line-height: var(--envy-lh-tight);
  color: var(--envy-blue);
  white-space: nowrap;
}

.envy-cost__unit-label {
  color: var(--envy-gray-5);
  line-height: var(--envy-lh-base);
  max-width: 30ch;
}

.envy-cost__main {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Na mobile sa riadky posúvajú do strany, na desktope sú pod sebou */
.envy-cost__rows {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-inline: calc(-1 * var(--envy-pad-x));
  padding-inline: var(--envy-pad-x);
}

.envy-cost__row {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}

.envy-cost__label {
  display: flex;
  align-items: center;
  padding: 22px 32px;
  border: var(--envy-border);
  line-height: var(--envy-lh-snug);
  text-transform: uppercase;
}

.envy-cost__row--highlight .envy-cost__label {
  background-color: var(--envy-blue);
  border-color: var(--envy-blue);
  color: var(--envy-white);
}

.envy-cost__value {
  font-weight: 700;
  font-size: var(--envy-fs-lg);
  line-height: var(--envy-lh-snug);
}

.envy-cost__row--highlight .envy-cost__value { color: var(--envy-blue); }

.envy-cost__main .envy-lp__note { max-width: 380px; }

@media (min-width: 1024px) {
  .envy-cost { gap: 32px; align-items: center; }

  /* Nadpis cez celú šírku a vycentrovaný, obrázok vpravo vedľa riadkov */
  .envy-cost__heading {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    max-width: 383px;
    margin-inline: auto;
  }

  .envy-cost__unit { grid-column: 2; grid-row: 2; }
  .envy-cost__unit-label { max-width: 200px; }

  .envy-cost__main { grid-column: 1; grid-row: 2; }

  .envy-cost__rows {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .envy-cost__row {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .envy-cost__label { height: 64px; padding-block: 0; }
  .envy-cost__row:nth-child(1) .envy-cost__label { width: 465px; }
  .envy-cost__row:nth-child(2) .envy-cost__label { width: 671px; border-bottom: 0; }
  .envy-cost__row:nth-child(3) .envy-cost__label { width: 900px; }
}

/* --- 5.12 FAQ ------------------------------------------------------------- */

.envy-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.envy-faq__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}

.envy-faq__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

/* Dva nezávislé stĺpce — rozbalenie otázky v jednom stĺpci nemení výšku
   toho druhého (pri mriežke rástol celý riadok). */
.envy-faq__cols {
  display: flex;
  flex-direction: column;
}

/* Mobil: stĺpce sa „rozpustia", položky sa stanú priamymi potomkami
   a ich poradie určí CSS vlastnosť order (1 → 13). */
.envy-faq__col { display: contents; }

.envy-faq__item {
  border: var(--envy-border);
  margin-bottom: -1px;
}

.envy-faq__q {
  display: flex;
  font-size: var(--envy-fs-base);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 16px;
  text-align: left;
  line-height: var(--envy-lh-snug);
  text-transform: uppercase;
}

/* Ikona +/− kreslená v CSS, aby sa dala animovať a zdedila farbu */
.envy-faq__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--envy-blue);
}

.envy-faq__icon::before,
.envy-faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: currentColor;
  transition: transform var(--envy-transition), opacity var(--envy-transition);
}

.envy-faq__icon::before { width: 14px; height: 1px; }
.envy-faq__icon::after { width: 1px; height: 14px; }

.envy-faq__q[aria-expanded="true"] .envy-faq__icon::after { transform: rotate(90deg); opacity: 0; }

.envy-faq__a {
  padding: 0 46px 18px 16px;
  color: var(--envy-gray-5);
  line-height: var(--envy-lh-base);
}

.envy-faq__a[hidden] { display: none; }

.envy-faq__a p + p,
.envy-faq__a ul + p { margin-top: 12px; }

.envy-faq__a ul { display: flex; flex-direction: column; gap: 4px; }

.envy-faq__a li::before {
  content: "— ";
  color: var(--envy-gray-4);
}

.envy-faq__a a {
  color: var(--envy-blue);
  text-decoration: underline;
}

.envy-faq__more {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.envy-faq__more button::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.envy-faq__more button[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

@media (min-width: 768px) {
  .envy-faq__cols { flex-direction: row; align-items: flex-start; }

  .envy-faq__col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
  }

  /* prekryť susediace 1px rámčeky stĺpcov */
  .envy-faq__col:first-child { margin-right: -1px; }
  .envy-faq__q { padding: 22px; }
  .envy-faq__a { padding: 0 52px 22px 22px; }
  .envy-faq__more { display: none; }
}

/* --- 5.13 Záverečné CTA + pätička ----------------------------------------- */

.envy-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envy-cta__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 600px;
  padding: 40px 16px 50px;
  overflow: hidden;
  background-image: linear-gradient(182.5deg, #000000 53%, #8e0606 140%);
  color: var(--envy-white);
}

/* Rozmery a posun sú prepočítané z Figmy na percentá šírky boxu, takže
   kompozícia drží pri akejkoľvek šírke (mobil 351 px, desktop 1416 px). */
.envy-cta__img {
  position: absolute;
  top: 0;
  left: -38.19%;   /* Figma: x = -134 z 351 */
  width: 176.8%;   /* Figma: w = 620,5 z 351 */
  max-width: none;
  height: auto;
  pointer-events: none;
}

.envy-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}

.envy-cta__heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.envy-cta__lead {
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--envy-lh-base);
}

.envy-cta__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.envy-cta__price strong { font-weight: 700; }

.envy-cta__footnote {
  text-align: center;
  line-height: var(--envy-lh-base);
}

@media (min-width: 1024px) {
  .envy-cta__box {
    min-height: 406px;
    justify-content: center;
    padding: 60px 100px;
  }

  .envy-cta__img {
    left: 25.07%;        /* Figma: x = 355 z 1416 */
    width: 94.07%;       /* Figma: w = 1332 z 1416 */
    margin-top: -3.32%;  /* Figma: y = -47 z 1416 (percento sa počíta zo šírky) */
  }

  .envy-cta__content { align-items: flex-start; text-align: left; max-width: 460px; }
  .envy-cta__info { align-items: flex-start; }
  .envy-cta__lead { max-width: 364px; }
}

/* ==========================================================================
   6. STICKY LIŠTA
   ========================================================================== */

.envy-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--envy-pad-x);
  background-color: var(--envy-white);
  border-top: var(--envy-border);
  transform: translateY(100%);
  transition: transform 220ms ease;
}

.envy-sticky.is-visible { transform: translateY(0); }

.envy-sticky__product {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: var(--envy-lh-snug);
}

.envy-sticky__name { text-transform: uppercase; }

.envy-sticky__price {
  font-weight: 700;
  font-size: var(--envy-fs-sm);
}

.envy-sticky .envy-btn { flex: none; }

@media (min-width: 1024px) {
  .envy-sticky { padding: 14px 50px; }
  .envy-sticky .envy-btn--dark { width: 168px; padding-inline: 0; }
}

/* ==========================================================================
   Prístupnosť — rešpektuj vypnuté animácie
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .envy-lp *,
  .envy-lp *::before,
  .envy-lp *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Záloha pre staršie Safari (iPadOS 14 a staršie) — bez aspect-ratio

   Bez aspect-ratio majú tieto boxy nulovú výšku a obrázky v nich (sú
   absolútne pozicované) nie je vidieť — ostane len text pod nimi. Presne to
   hlásil klient z iPadu pri náhľadoch troch režimov. Padding hack im výšku
   vráti, moderné prehliadače celý blok ignorujú.
   ========================================================================== */

@supports not (aspect-ratio: 1 / 1) {
  .envy-modes__thumb::before,
  .envy-ugc__frame::before {
    content: "";
    display: block;
  }

  .envy-modes__thumb::before { padding-top: 98.39%; }  /* 183 / 186 */
  .envy-ugc__frame::before { padding-top: 177.81%; }   /* 585 / 329 */
}