/* ===========================================================================
   TOPNATUR — CSS pro POPIS PRODUKTU

   Vyčištěno 2026-08-24 — odstraněno CSS bloků, které nejsou pro popis
   produktu v editoru zapnuté (Funkce editoru → Popis produktu):
   Produkty v článku, FAQ skupiny, Tlačítko, Karty vedle sebe, Ikona + text.
   Kdybys některý z nich zapnul, je potřeba jeho CSS vrátit.

   Dál odsud zmizela pravidla `.mm-article-wrapper …` — patří do článkového
   CSS a jsou tam přesunutá. Ležela tu duplicitně a měla VYŠŠÍ specificitu než
   článková verze, takže přebíjela to, co jsi upravil v článkovém CSS.

   Zachováno vše vlastní: FAQ s růžovou pilulkou, výživová tabulka i její
   rozklik na mobilu, odznaky, `.ingredience`, `.slozeni`, `#mm-s-slozeni`,
   mřížka mikronutrientů a celý přepínač balení/příchutí (`.mm-pack-*`).
   =========================================================================== */

.mm-product {
  --mm-radius: 16px;
  --mm-radius-rounded: 16px;
  --mm-gap: 28px;
  --mm-green: #1c4434;
  --mm-text: #161616;
  --mm-muted: #557367;
  --mm-highlight-bg: #fcd6df;
  --mm-border: #d1d1d1;
  --mm-table-bg: #fcd6df;
  margin: 0 auto;
  color: var(--mm-text);
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Inter", sans-serif;
}

.mm-product.mm-corners-square { --mm-radius: 0px; }
/* Per-blok override zaoblení (třída na konkrétním bloku) */
.mm-product .mm-corners-rounded { --mm-radius: var(--mm-radius-rounded); }
.mm-product .mm-corners-square { --mm-radius: 0px; }

.mm-product > * + * { margin-top: var(--mm-gap); }

/* Nadpisy — Inter Bold, tmavě zelená */
.mm-product .mm-heading,
.mm-product .mm-main-heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mm-green);
  margin: 0;
}
.mm-product h2.mm-heading { font-size: 1.75rem; }
.mm-product h3.mm-heading { font-size: 1.375rem; }
.mm-product h4.mm-heading { font-size: 1.125rem; }
.mm-product h5.mm-heading { font-size: 1rem; }
/* Projektová zelená pro VŠECHNY nadpisy v popisu (i uvnitř richtextu / media-textu) */
.mm-product h2,
.mm-product h3,
.mm-product h4,
.mm-product h5 { color: var(--mm-green); }

/* Text */
.mm-product .mm-text-block { color: var(--mm-text); }
.mm-product .mm-paragraph { margin: 0 0 12px; }
.mm-product .mm-paragraph:last-child { margin-bottom: 0; }
.mm-product .mm-list { margin: 0 0 12px; padding-left: 1.25rem; }
.mm-product .mm-list-item { margin: 4px 0; }
.mm-product .mm-text-bold { font-weight: 700; }
.mm-product a { color: var(--mm-green); text-decoration: underline; }

/* Obrázky / média */
.mm-product .mm-image,
.mm-product .mm-video,
.mm-product .mm-iframe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mm-radius);
}
.mm-product .mm-media-wrapper { margin: 0; }
.mm-product .mm-media-grid-2,
.mm-product .mm-media-grid-3 { display: grid; gap: var(--mm-gap); }
.mm-product .mm-media-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mm-product .mm-media-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mm-product .mm-media-item { margin: 0; }
.mm-product .mm-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media(max-width:767px){
.mm-product .mm-media-text {
gap:32px;
}
}
.mm-product .mm-media-text.mm-reverse { direction: rtl; }
.mm-product .mm-media-text.mm-reverse > * { direction: ltr; }
/* Textová část media-textu — nadpis nahoře, odstavce/řádky s rozestupem */
.mm-product .mm-media-text .mm-text-part > * { margin: 0; }
.mm-product .mm-media-text .mm-text-part > * + * { margin-top: 16px; }
.mm-product .mm-media-text .mm-text-part .mm-heading { margin-bottom: 4px; }

/* Podbarvený box (Ingredience) — barvu pozadí volí uživatel v paletě (růžová) */
.mm-product .mm-highlight {
  background: var(--mm-highlight-bg);
  border-radius: var(--mm-radius);
  padding: 22px 26px;
}
.mm-product .mm-highlight .mm-heading { color: var(--mm-green); }

/* FAQ */
.mm-product .mm-faq-title { font-size: 1.75rem; margin: 0 0 8px; }
.mm-product .mm-faq-list { display: flex; flex-direction: column; }
.mm-product .mm-faq-item { border-bottom: 1px solid var(--mm-border); }
.mm-product .mm-faq-question {
  cursor: pointer;
  list-style: none;
  padding: 16px 36px 16px 0;
  position: relative;
  font-weight: 700;
  color: var(--mm-text);
}
.mm-product .mm-faq-question::-webkit-details-marker { display: none; }
.mm-product .mm-faq-question::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: normal;
  color: var(--mm-green);
font-size: 14px;

    color: var(--mm-green);
    background-color: #FFD3DE;
 
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.mm-product .mm-faq-item[open] .mm-faq-question::after { content: "\2212"; }
.mm-product .mm-faq-answer { padding: 0 0 16px; color: var(--mm-text); }

/* Odznaky — kroužkové ikony s popiskem (tmavě zelená) */
.mm-product .mm-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.mm-product .mm-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 110px;
}
.mm-product .mm-badge-icon { width: 64px; height: 64px; object-fit: contain; }
.mm-product .mm-badge-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mm-green);
  line-height: 1.3;
}

/* Výživová tabulka — růžový kontejner, zebra řádky (dle Figmy) */
.mm-product .mm-table-block {
  background: var(--mm-table-bg);
  border-radius: var(--mm-radius);
  padding: 24px;
  overflow: hidden;
}
.mm-product .mm-table-title { display: block; font-size: 1.5rem; color: var(--mm-green); margin: 0 0 16px; }
.mm-product .mm-table {
  width: 100%;
  border-collapse: collapse;
}
.mm-product .mm-table td {
  padding: 6px 24px;
  font-size: 1rem;
  line-height: 1.4;
  vertical-align: middle;
  background: transparent;
}
.mm-product .mm-table td.mm-table-label { font-weight: 700; color: var(--mm-text); }
.mm-product .mm-table td.mm-table-value {
  text-align: right;
  white-space: nowrap;
  color: var(--mm-text);
  font-weight: 500;
}
/* Zebra — každý sudý řádek bílý */
.mm-product .mm-table tr:nth-child(even) td { background: #fff; }
/* Energetická hodnota — zvýrazněný (větší) řádek */
.mm-product .mm-table tr.mm-row-emphasis td { font-size: 1rem; }
/* Pod-řádky (z toho…) — odsazené, ne tučné */
.mm-product .mm-table tr.mm-row-indent .mm-table-label { padding-left: 40px; font-weight: 500; }

/* Dva sloupce vedle sebe */
.mm-product .mm-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mm-cols-gap, var(--mm-gap));
  align-items: start;
}
/* Podbarvení přes celou šířku obrazovky (full-bleed mimo container) */
.mm-product .mm-highlight.mm-highlight-full {

  padding-left: max(24px, calc(50vw - 50%));
  padding-right: max(24px, calc(50vw - 50%));
  border-radius: 0;
}
.mm-product .mm-columns .mm-col > * + * { margin-top: var(--mm-gap); }

/* Mezera (spacer) — sama tvoří rozestup, ruší výchozí gap okolo sebe */
.mm-product .mm-spacer { width: 100%; }
.mm-product .mm-spacer-sm { height: 16px; }
.mm-product .mm-spacer-md { height: 32px; }
.mm-product .mm-spacer-lg { height: 48px; }
.mm-product .mm-spacer-xl { height: 88px; }
.mm-product > * + .mm-spacer,
.mm-product > .mm-spacer + *,
.mm-product .mm-col > * + .mm-spacer,
.mm-product .mm-col > .mm-spacer + * { margin-top: 0; }

/* Výživová tabulka — přepínač rozkliku (skrytý; aktivní jen na mobilu) */
.mm-product .mm-table-toggle { display: none; }
/* Ochrana proti přetékání na úzkých displejích */
.mm-product { overflow-wrap: break-word; }
.mm-product .mm-image,
.mm-product .mm-video,
.mm-product .mm-iframe { max-width: 100%; }

@media (max-width: 640px) {
  .mm-product .mm-media-grid-2,
  .mm-product .mm-media-grid-3,
  .mm-product .mm-media-text,
  .mm-product .mm-columns {
    grid-template-columns: 1fr;
  }
  .mm-product .mm-columns { gap: var(--mm-gap); }
  /* Výživová tabulka — rozklikávací hlavička */
  .mm-product .mm-table-title {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
    margin-bottom: 0;
    display: block;
  }
  .mm-product .mm-table-title::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
  }
  .mm-product .mm-table-toggle:checked ~ .mm-table-title { margin-bottom: 16px; }
  .mm-product .mm-table-toggle:checked ~ .mm-table-title::after { content: "\2212"; }
  .mm-product .mm-table-toggle:not(:checked) ~ .mm-table { display: none; }
  .mm-product .mm-table-value { white-space: normal; }
}
.mm-highlight:has(.ingredience){
padding:16px;
}
.ingredience{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
}
.slozeni{
padding:32px 0;
align-items:center !important;
}

/* Nadpisy vepsané uvnitř textového bloku (H2–H5 z formátovací lišty) */
.mm-product .mm-text-block :is(h2, h3, h4, h5) {
  font-weight: 700;
  line-height: 1.25;
  color: var(--mm-green);
}
.mm-product .mm-text-block h2 { font-size: 1.6rem; margin: 24px 0 10px; }
.mm-product .mm-text-block h3 { font-size: 1.35rem; margin: 20px 0 8px; }
.mm-product .mm-text-block h4 { font-size: 1.15rem; margin: 18px 0 8px; }
.mm-product .mm-text-block h5 { font-size: 1rem; margin: 16px 0 6px; }
.mm-product .mm-text-block :is(h2, h3, h4, h5):first-child { margin-top: 0; }


/* Dvě výživové tabulky (hlavní + vitaminy) vedle sebe na desktopu,
   pod sebou na menších displejích */
.mm-product .mm-col:has(.mm-table-block.micronutrients) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-gap, 16px);
  align-items: flex-start;
}
.mm-product .mm-col:has(.mm-table-block.micronutrients) > * {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}
@media (max-width: 640px) {
  .mm-product .mm-col:has(.mm-table-block.micronutrients) {
    display: block;
  }
  .mm-product .mm-col:has(.mm-table-block.micronutrients) > * + * {
    margin-top: var(--mm-gap, 16px);
  }
}
@media (min-width: 767px) {
#mm-s-slozeni:has(.micronutrients){
grid-template-columns: 1fr 2fr;
}
}
.slozeni .mm-table-title:before,.slozeni input[type=checkbox]:checked+label:after{
display:none}

.slozeni .mm-table-title{padding-left:0}
.slozeni .mm-product .mm-highlight{padding:0;}
/* Velikost balení — přepínač na propojené produkty */
/* Velikost balení — přepínač na propojené produkty */
.mm-pack-sizes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Popisek („Velikost balení", „Varianty") — dle Figmy 18/28 Medium, tmavá.
   Nutný, když má produkt obě osy a řádky jsou dva pod sebou. */
.mm-pack-sizes-title {
  /* Font se DĚDÍ (Figma: proměnná "body"). */
  display: block;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 28px;
  color: #161616;
}
.mm-pack-sizes + .mm-pack-sizes { margin-top: 16px; }
.mm-pack-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 28px;
  text-decoration: none;
  background: var(--mm-pack-bg, #f6f7f8);
  color: var(--mm-green, #1c4434);
  transition: opacity 0.15s;
}
a.mm-pack-size:hover { opacity: 0.8; text-decoration: none; }
.mm-pack-size-current {
  background: var(--mm-green, #1c4434);
  color: #fff;
}
/* Příchutě — mřížka karet s obrázkem (Figma node 11231:43794).
   Karta 120x120, radius 8, podklad #f6f7f8, popisek 16/24 pod obrázkem,
   aktivní varianta má růžový rámeček. */
.mm-pack-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  align-items: flex-start;
    width: 100%;
}
.mm-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  /* Šířku určuje sloupec mřížky (min 120px dle Figmy). Pevných 120px by se
     s minmax(120px, 1fr) pralo — sloupec by se roztáhl, karta ne, a vznikly
     by nerovné mezery. */
  width: 100%;
  text-decoration: none;
  color: #161616;
}
a.mm-pack-card:hover { text-decoration: none; }
a.mm-pack-card:hover .mm-pack-card-media { opacity: 0.85; }
.mm-pack-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #f6f7f8;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: opacity 0.15s;
}
.mm-pack-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  /* Bílé pozadí produktových fotek splyne s podkladem karty. */
  mix-blend-mode: multiply;
}
.mm-pack-card-label {
  /* Font se DĚDÍ — dle Figmy je to proměnná "body" (u Topnaturu Manrope),
     ne "headline" (Inter), kterou mají pilulky velikostí balení. */
  font-weight: 500;
  font-size: 1rem;
  line-height: 24px;
  text-align: center;
}
/* Aktivní varianta — růžový rámeček dle Figmy */
.mm-pack-card-current .mm-pack-card-media {
  border-color: #e86b87;
}
/* Řádek pilulek (velikost balení) — Figma node 11231:43762.
   ZÁMĚRNĚ jednotřídní selektor a AŽ ZA .mm-pack-cards: element nese obě třídy
   (společný kontejner, aby šlo rozvržení řešit na jednom místě). Vlastní
   pravidlo .mm-pack-cards s display: grid dopsané na konec CSS tak přebije
   i tenhle řádek — jinak by grid chytl jen na příchutě. */
@media (max-width: 640px) {
  .mm-pack-sizes-flavor .mm-pack-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;

    /* Wrapper je flex sloupec s align-items: flex-start, takže by se řada
       roztáhla podle obsahu a PŘETEKLA stránku místo posouvání. */
    align-self: stretch;
    max-width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
scrollbar-width:none;
    scroll-padding-left: 0;
  }
  .mm-pack-sizes-flavor .mm-pack-card {
    flex: 0 0 100px;
    width: 100px;
    scroll-snap-align: start;
  }
  .mm-pack-card-label {
    font-size: 0.875rem;
    line-height: 20px;
  }
}
.mm-pack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}