/* ---------------------------------------------------------------
   Fitotal, doplnok k spoločnému štýlu webu.
   Stránka je postavená z komponentov zo style.css (.hero, .section,
   .card, .grid, .check-list, .timeline, .pkg, .faq-item, .method-strip),
   takže sa na mobile správa rovnako ako zvyšok webu. Tu sú len drobnosti,
   ktoré spoločný štýl nemá: veľké číslo v karte, obrázky produktu
   a pár odsekov v cenovej karte.
   --------------------------------------------------------------- */

/* Veľké číslo v karte (8 rastlín, 12,5 ml a podobne).
   Veľkosť drží mierku nadpisov webu, aby neprebilo h2. */
.fit-cislo {
  margin: 0 0 0.2em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1;
  color: var(--lavender-ink);
}

/* Fľaše v úvodnom páse. Fotka je vyrezaná a má priehľadné pozadie, preto
   nesmie ísť do bieleho rámu .photo-frame: ten by ju orezal na pomer 4:5
   a okolo vyrezaných fliaš by nechal biely štvorec. Namiesto rámu dávame
   len mäkký tieň, takže fľaše ležia priamo na levanduľovom páse. */
.fit-hero-foto { margin: 0; justify-self: center; }
.fit-hero-foto img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 26px 30px rgba(15, 87, 87, 0.35));
}

/* Fotky produktu. Majú priehľadné pozadie, takže nepotrebujú rám,
   len strop na šírku, aby na mobile nezaberali celú obrazovku. */
.fit-figure { margin: 0; }
.fit-figure img { width: 100%; height: auto; }
.fit-figure--center {
  margin: var(--space-lg) auto 0;
  max-width: 420px;
}

/* Zoznam 8 rastlín. V jednom stĺpci to bol úzky prút a vedľa vznikala
   veľká prázdna plocha, preto od 520 px ide do dvoch stĺpcov. */
.fit-rastliny { display: grid; gap: 0 var(--space-md); }
@media (min-width: 520px) {
  .fit-rastliny { grid-template-columns: repeat(2, 1fr); }
}

/* Sekcia o zásaditosti */
.fit-ph {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--lavender-ink);
}
.fit-ph-pozn { color: var(--muted); font-size: 0.9rem; }
.fit-ph-foto img { max-width: 420px; margin-inline: auto; }

/* Podpis pod textom Anny */
.fit-podpis {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.fit-podpis-rola {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Box so skladovaním pod dávkovaním */
.fit-sklad { margin-top: var(--space-md); padding: var(--space-md); }
.fit-sklad p { margin: 0; }
.fit-sklad-pod { color: var(--muted); font-size: 0.92rem; }

/* Cenová karta */
.fit-pkg-foto {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto var(--space-sm);
}
.fit-pkg-objem { color: var(--muted); font-size: 0.9rem; margin-top: -0.6em; }
.fit-pkg-balik {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.fit-pkg-pozn {
  color: var(--muted);
  font-size: 0.8rem;
  margin: var(--space-xs) 0 0;
}

.fit-formular { padding: var(--space-md); }

/* Na mobile fotky trochu zmenšíme, aby text ostal hneď na začiatku obrazovky. */
@media (max-width: 899px) {
  .fit-hero-foto img { max-width: 230px; }
  .fit-figure--center { margin-top: var(--space-md); }
  .fit-pkg-foto { max-width: 200px; }
}