/* =========================================================
   PAROLEK-SHOP.cz | styly.css
   VERZE: 1.03 (31. 7. 2026)

   KONVENCE NÁZVŮ TŘÍD
   Nové komponenty mají prefix parol- (parol-serv, parol-usp, ...).
   Původní sada s prefixem ec- zůstává beze změny, nepřejmenovává se.
   Třídy s prefixem mime- spravuje jiná agentura, nesahat na ně.

   Historie verzí:
   1.00 : výchozí sada komponent ec-
   1.01 : + servisní pruh s ikonami
          + obrázek s fajfkovým seznamem, varianta --product
   1.02 : přejmenování obou nových komponent na parol-serv a parol-usp
          (zavedení prefixu parol- pro všechny další nové prvky)
   1.03 : parol-usp odladěno podle předlohy
          kulatá fajfka místo zaobleného čtverce
          vzdušnější rozestupy a širší sloupec s obrázkem (1.25fr : 1fr)
   ========================================================= */

/* =========================================================
   PAROLEK – Perex článku: Quote style (oprava)
   Uvozovka v tyrkysovém kruhu vlevo, text vedle.
   Robustnější než float/absolute — funguje i v Shoptet šabloně.
   ========================================================= */

.ec-perex {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 24px 0 32px;
  padding: 4px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-perex__mark {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #E6F7F7;
  color: #00B1B1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  padding-top: 16px;
  box-sizing: border-box;
}

.ec-perex__text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #1D1D1D;
  font-style: italic;
  font-weight: 400;
  margin: 4px 0 0;
  flex: 1;
  min-width: 0;
}

.ec-perex__text strong {
  font-weight: 700;
  color: #1994A1;
  font-style: normal;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-perex {
    gap: 14px;
  }
  .ec-perex__mark {
    width: 42px;
    height: 42px;
    font-size: 36px;
    padding-top: 14px;
  }
  .ec-perex__text {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .ec-perex {
    gap: 12px;
  }
  .ec-perex__mark {
    width: 36px;
    height: 36px;
    font-size: 30px;
    padding-top: 11px;
  }
  .ec-perex__text {
    font-size: 16px;
    line-height: 1.55;
  }
}






/* =========================================================
   PAROLEK – Infoboxy: Brandový (tip) + Neutrální (poznámka)
   - Tip: tyrkysový box + sytě tyrkysový rohový dekor
   - Neutral: šedý box + světle tyrkysový rohový dekor
   ========================================================= */
/* --- Společný základ --- */
.ec-info {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 26px;
  margin: 20px 0;
  border-radius: 10px;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1D1D1D;
  overflow: hidden;
}
/* Dekorativní L tvar vlevo nahoře – konce zkosené přes clip-path */
.ec-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  clip-path: polygon(0px 0px, 64px 0px, 54px 10px, 10px 10px, 10px 54px, 0px 64px);
}
/* Ikona — bez kruhu, jen SVG */
.ec-info__icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 2px;
}
.ec-info__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.ec-info__title {
  display: block;
  margin: 0 0 6px;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ec-info p {
  margin: 0 0 8px !important;
  font-size: 15px;
  line-height: 1.6;
}
.ec-info p:last-child { margin-bottom: 0 !important; }
.ec-info strong { font-weight: 700; color: #1D1D1D; }
.ec-info a { color: #1994A1; text-decoration: underline; }
.ec-info a:hover { color: #00B1B1; }
/* --- Varianta TIP (tyrkysový box + sytě tyrkysový roh + tyrkysová ikona) --- */
.ec-info--tip {
  background: #E6F7F7;
}
.ec-info--tip::before {
  background: #00B1B1;
}
.ec-info--tip .ec-info__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2300B1B1' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4 a10 10 0 0 0 -6 18 c1 .8 2 1.6 2 3 v2 h8 v-2 c0 -1.4 1 -2.2 2 -3 a10 10 0 0 0 -6 -18 z'/><line x1='16' y1='32' x2='24' y2='32'/><line x1='17' y1='36' x2='23' y2='36'/></svg>");
}
.ec-info--tip .ec-info__title {
  color: #1994A1;
}
/* --- Varianta NEUTRAL (šedý box + světle tyrkysový roh + černá ikona) --- */
.ec-info--neutral {
  background: #F5F5F5;
}
.ec-info--neutral::before {
  background: #B8E5E5;
}
.ec-info--neutral .ec-info__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%231D1D1D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 8 L32 8 L32 24 L22 24 L14 30 L14 24 L8 24 Z'/></svg>");
}
.ec-info--neutral .ec-info__title {
  color: #1D1D1D;
}
/* --- Responzivita --- */
@media (max-width: 480px) {
  .ec-info {
    padding: 18px 20px;
    gap: 14px;
    font-size: 14px;
  }
  .ec-info::before {
    width: 50px;
    height: 50px;
    clip-path: polygon(0px 0px, 50px 0px, 42px 8px, 8px 8px, 8px 42px, 0px 50px);
  }
  .ec-info__icon {
    width: 32px;
    height: 32px;
  }
  .ec-info__title { font-size: 14px; }
  .ec-info p { font-size: 14px; }
}






/* =========================================================
   PAROLEK – Výhody a nevýhody: Dvě karty s ikonou v kruhu
   - Ikony zabudované v CSS přes background-image
   - HTML zůstává čisté (prázdný span)
   ========================================================= */
.ec-prc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.ec-prc__col {
  background: #fff;
  border: 1px solid #E5EBEB;
  border-radius: 12px;
  padding: 22px 24px;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}
.ec-prc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5EBEB;
}
.ec-prc__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
.ec-prc__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #1D1D1D !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}
/* Reset Shoptet defaults na <ul>/<li> */
.ec-prc__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ec-prc__list > li {
  list-style: none !important;
  position: relative;
  padding: 7px 0 7px 24px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 15px;
  line-height: 1.5;
  color: #1D1D1D;
}
.ec-prc__list > li::before,
.ec-prc__list > li::marker {
  content: none !important;
  display: none !important;
}
/* --- VÝHODY (tyrkys) --- */
.ec-prc--pro .ec-prc__icon {
  background-color: #E6F7F7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231994A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.ec-prc--pro .ec-prc__title { color: #1994A1 !important; }
.ec-prc--pro .ec-prc__list > li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 12px;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
/* --- NEVÝHODY (černá) --- */
.ec-prc--con .ec-prc__icon {
  background-color: #F5F5F5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.ec-prc--con .ec-prc__list > li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 2px;
  top: 16px;
  width: 12px;
  height: 2px;
  background: #1D1D1D;
  border-radius: 2px;
}
/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-prc {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ec-prc__col {
    padding: 20px 22px;
  }
}
@media (max-width: 480px) {
  .ec-prc__col {
    padding: 18px 18px;
    border-radius: 10px;
  }
  .ec-prc__icon {
    width: 26px;
    height: 26px;
    background-size: 14px 14px;
  }
  .ec-prc__title {
    font-size: 13px !important;
  }
  .ec-prc__list > li {
    font-size: 14px;
    padding-left: 22px !important;
  }
}




/* =========================================================
   PAROLEK – Tabulky: Clean + Porovnávací
   Sdílený základ + dvě varianty modifikátorem .ec-tbl--XX.
   Obě tabulky ladí: stejný font prvního sloupce, žádné šedé pozadí,
   tučnější záhlaví u Clean varianty.
   ========================================================= */

/* --- Společný základ --- */
.ec-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1D1D1D;
  background: #fff;
}

.ec-tbl th,
.ec-tbl td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

.ec-tbl th {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   CLEAN
   ───────────────────────────────────────────── */
.ec-tbl--clean {
  border: 1px solid #E5EBEB;
  border-radius: 10px;
  overflow: hidden;
}
.ec-tbl--clean thead {
  background: #00B1B1;
}
.ec-tbl--clean thead th {
  color: #fff;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
}
.ec-tbl--clean tbody tr {
  border-bottom: 1px solid #E5EBEB;
  transition: background .15s ease;
}
.ec-tbl--clean tbody tr:last-child {
  border-bottom: 0;
}
.ec-tbl--clean tbody tr:hover {
  background: #F7FCFC;
}
.ec-tbl--clean tbody td:first-child {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  color: #1D1D1D;
}

/* ─────────────────────────────────────────────
   POROVNÁVACÍ
   ───────────────────────────────────────────── */
.ec-tbl--compare {
  border: 1px solid #E5EBEB;
  border-radius: 10px;
  overflow: hidden;
}

.ec-tbl--compare thead {
  background: #fff;
  border-bottom: 1px solid #E5EBEB;
}
.ec-tbl--compare thead th {
  padding: 16px 14px;
  text-align: center;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: none;
  color: #1D1D1D;
  border-left: 1px solid #E5EBEB;
  vertical-align: bottom;
}
.ec-tbl--compare thead th:first-child {
  border-left: 0;
  background: #fff;
  text-align: left;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #1D1D1D;
}

/* Zvýrazněný sloupec (Doporučujeme) */
.ec-tbl--compare thead th.ec-tbl__best {
  background: #00B1B1;
  color: #fff;
  padding-top: 14px;
}
.ec-tbl__label {
  display: inline-block;
  background: #1D1D1D;
  color: #fff;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* Tělo tabulky */
.ec-tbl--compare tbody tr {
  border-bottom: 1px solid #E5EBEB;
  transition: background .15s ease;
}
.ec-tbl--compare tbody tr:last-child {
  border-bottom: 0;
}
.ec-tbl--compare tbody tr:hover {
  background: #F7FCFC;
}
.ec-tbl--compare tbody td {
  padding: 12px 14px;
  text-align: center;
  border-left: 1px solid #E5EBEB;
  font-size: 14px;
}

/* První sloupec = popisek řádku — stejný styl jako u Clean */
.ec-tbl--compare tbody td:first-child {
  background: transparent;
  text-align: left;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: #1D1D1D;
  border-left: 0;
}

/* Zvýrazněné buňky doporučeného sloupce */
.ec-tbl--compare tbody td.ec-tbl__best {
  background: #F0FAFA;
  font-weight: 700;
  color: #1994A1;
}

/* Ikony ano / ne */
.ec-tbl__yes {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  vertical-align: middle;
}
.ec-tbl__no {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: #999;
  border-radius: 2px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────
   RESPONZIVITA
   ───────────────────────────────────────────── */
.ec-tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}
.ec-tbl-wrap .ec-tbl {
  margin: 0;
  min-width: 480px;
}

@media (max-width: 768px) {
  .ec-tbl {
    font-size: 14px;
  }
  .ec-tbl th,
  .ec-tbl td {
    padding: 10px 12px;
  }
  .ec-tbl--compare thead th { font-size: 13px; }
  .ec-tbl--compare tbody td { font-size: 13px; }
}

@media (max-width: 480px) {
  .ec-tbl--clean thead th { padding: 12px 10px; font-size: 12px; }
  .ec-tbl--compare thead th { padding: 14px 10px; }
  .ec-tbl--compare tbody td { padding: 10px 8px; font-size: 12px; }
  .ec-tbl--compare tbody td:first-child { font-size: 12px; }
  .ec-tbl__label { font-size: 9px; padding: 3px 8px; }
}







/* =========================================================
   PAROLEK – Výčet vlastností: Title + Subtitle s fajfkou
   Tyrkysová fajfka ve světle tyrkysovém kruhu, tučný název + popis.
   ========================================================= */
.ec-list-feat {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}
.ec-list-feat > li {
  list-style: none !important;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}
.ec-list-feat > li::marker {
  content: none !important;
  display: none !important;
}
/* Tyrkysová fajfka ve světle tyrkysovém kruhu */
.ec-list-feat > li::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #E6F7F7;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-size: 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}
.ec-list-feat__body {
  flex: 1;
  min-width: 0;
}
.ec-list-feat__title {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1D1D1D;
  margin: 0 0 4px;
  line-height: 1.3;
}
.ec-list-feat__text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  color: #555;
  line-height: 1.55;
  margin: 0;
}
/* --- Responzivita --- */
@media (max-width: 480px) {
  .ec-list-feat { gap: 18px; }
  .ec-list-feat > li::before {
    width: 24px;
    height: 24px;
    background-size: 13px;
  }
  .ec-list-feat__title { font-size: 16px; }
  .ec-list-feat__text { font-size: 14px; }
}






/* =========================================================
   PAROLEK – Box "Věděli jste, že..."
   Jednoduchý info box se světle šedým pozadím,
   tyrkysovým nadpisem a tučným textem pod ním.
   ========================================================= */

.ec-didyou {
  background: #F5F5F5;
  border-radius: 12px;
  padding: 28px 32px;
  margin: 28px 0;
  text-align: center;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-didyou__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #00B1B1 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}

.ec-didyou__text {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1D1D1D;
  line-height: 1.55;
  margin: 0;
}

.ec-didyou__text strong {
  font-weight: 700;
  color: #1994A1;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-didyou {
    padding: 24px 22px;
  }
  .ec-didyou__title { font-size: 20px !important; }
  .ec-didyou__text { font-size: 15px; }
}

@media (max-width: 480px) {
  .ec-didyou {
    padding: 20px 18px;
    border-radius: 10px;
  }
  .ec-didyou__title { font-size: 18px !important; }
  .ec-didyou__text { font-size: 14px; }
}





/* =========================================================
   PAROLEK – Popis produktu / shrnutí
   Světle šedý box s tučným nadpisem a tělem textu vlevo.
   ========================================================= */

.ec-prod-desc {
  background: #F5F5F5;
  border-radius: 12px;
  padding: 36px 44px;
  margin: 28px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-prod-desc__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #1D1D1D !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

.ec-prod-desc__text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 17px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

.ec-prod-desc__text + .ec-prod-desc__text {
  margin-top: 12px;
}

.ec-prod-desc__text strong {
  font-weight: 700;
  color: #1D1D1D;
}

.ec-prod-desc__text a {
  color: #1994A1;
  text-decoration: underline;
}
.ec-prod-desc__text a:hover {
  color: #00B1B1;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-prod-desc {
    padding: 28px 30px;
  }
  .ec-prod-desc__title { font-size: 22px !important; }
  .ec-prod-desc__text { font-size: 14px; }
}

@media (max-width: 480px) {
  .ec-prod-desc {
    padding: 22px 20px;
    border-radius: 10px;
  }
  .ec-prod-desc__title { font-size: 19px !important; }
  .ec-prod-desc__text { font-size: 14px; line-height: 1.6; }
}







/* =========================================================
   PAROLEK – Postup krok za krokem: Velký krok
   Editoriální styl s velkými tyrkysovými čísly vlevo.
   ========================================================= */

.ec-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: ec-step-counter;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-steps > li {
  list-style: none !important;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 22px 0;
  margin: 0 !important;
  background: none !important;
  border: 0;
  border-bottom: 1px solid #E5EBEB;
}
.ec-steps > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ec-steps > li:first-child {
  padding-top: 0;
}
.ec-steps > li::before,
.ec-steps > li::marker {
  content: none !important;
  display: none !important;
}

/* Velké tyrkysové číslo */
.ec-steps__num {
  flex-shrink: 0;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: .85;
  color: #00B1B1;
  min-width: 64px;
}

/* Alternativa: automatické číslování přes counter()
   — uncomment pokud chcete místo <span class="ec-steps__num">01</span>
   psát jen prázdný element a CSS si dosadí čísla 01, 02, 03 samo.
   Tady necháváme manuální čísla pro maximální kontrolu.
*/

.ec-steps__body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.ec-steps__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #1D1D1D !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}

.ec-steps__text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}
.ec-steps__text + .ec-steps__text {
  margin-top: 10px;
}
.ec-steps__text strong {
  font-weight: 700;
  color: #1D1D1D;
}
.ec-steps__text a {
  color: #1994A1;
  text-decoration: underline;
}
.ec-steps__text a:hover {
  color: #00B1B1;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-steps > li {
    gap: 20px;
    padding: 18px 0;
  }
  .ec-steps__num {
    font-size: 44px;
    min-width: 54px;
  }
  .ec-steps__title { font-size: 17px !important; }
}

@media (max-width: 480px) {
  .ec-steps > li {
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
  }
  .ec-steps__num {
    font-size: 36px;
    min-width: auto;
    line-height: 1;
  }
  .ec-steps__title { font-size: 16px !important; }
  .ec-steps__text { font-size: 14px; }
}






/* =========================================================
   PAROLEK – Blogové obrázky: Brand / Magazín / Karta
   Společný základ + tři varianty modifikátorem .ec-img--XX.
   ========================================================= */

/* --- Společný základ --- */
.ec-img {
  margin: 24px 0 !important;
  padding: 0;
  background: none;
}
.ec-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --- Tyrkysový rámeček s tagem --- */
.ec-img--brand {
  position: relative;
}
.ec-img--brand img {
  border-radius: 12px;
  border: 4px solid #00B1B1;
  box-sizing: border-box;
}
.ec-img--brand .ec-img__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #1D1D1D;
  color: #fff;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.ec-img--brand figcaption {
  margin-top: 12px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* --- Magazinový s tyrkysovým proužkem --- */
.ec-img--mag {
  padding-left: 18px;
  border-left: 4px solid #00B1B1;
}
.ec-img--mag img {
  border-radius: 8px;
}
.ec-img--mag figcaption {
  margin-top: 12px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  font-style: italic;
}
.ec-img--mag figcaption strong {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #1994A1;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 8px;
}

/* --- Karta s popiskem do strany --- */
.ec-img--side {
  background: #E6F7F7;
  border-radius: 14px;
  padding: 18px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: center;
}
.ec-img--side img {
  border-radius: 10px;
}
.ec-img--side .ec-img__caption {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 14px;
  color: #1D1D1D;
  line-height: 1.6;
}
.ec-img--side .ec-img__caption-title {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1994A1;
  margin-bottom: 6px;
}
.ec-img--side .ec-img__caption strong {
  color: #1D1D1D;
  font-weight: 700;
}

/* --- Responzivita --- */
@media (max-width: 640px) {
  .ec-img--side {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .ec-img--brand img { border-radius: 10px; border-width: 3px; }
  .ec-img--brand .ec-img__tag {
    top: 12px; left: 12px;
    font-size: 10px; padding: 5px 10px;
  }
  .ec-img--mag {
    padding-left: 14px;
    border-left-width: 3px;
  }
  .ec-img--brand figcaption,
  .ec-img--mag figcaption,
  .ec-img--side .ec-img__caption { font-size: 13px; }
}









/* =========================================================
   PAROLEK – Obrázek + text na střídačku (zigzag): 3 varianty
   .ec-zz wrapper + .ec-zz--clean / --soft / --mag
   .ec-zz__row třída pro každou dvojici, .ec-zz__row--reverse
   pro převrácené pořadí (obrázek vpravo).
   ========================================================= */

/* --- Společný základ --- */
.ec-zz {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-zz__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

.ec-zz__row--reverse > :first-child {
  order: 2;
}

.ec-zz img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.ec-zz__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

.ec-zz__text {
  font-family: "Source Sans 3", sans-serif;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
.ec-zz__text strong { font-weight: 700; color: #1D1D1D; }

/* ─────────────────────────────────────────────
   CLEAN ZIGZAG
   ───────────────────────────────────────────── */
.ec-zz--clean {
  gap: 32px;
}
.ec-zz--clean img {
  border-radius: 12px;
}
.ec-zz--clean .ec-zz__title { font-size: 22px !important; }
.ec-zz--clean .ec-zz__text { font-size: 15px; }

/* ─────────────────────────────────────────────
   SOFT POZADÍ + KICKER
   ───────────────────────────────────────────── */
.ec-zz--soft {
  gap: 18px;
}
.ec-zz--soft .ec-zz__row {
  background: #E6F7F7;
  border-radius: 14px;
  padding: 24px;
  gap: 24px;
}
.ec-zz--soft img {
  border-radius: 10px;
}
.ec-zz--soft .ec-zz__kicker {
  display: inline-block;
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00B1B1;
  margin-bottom: 8px;
}
.ec-zz--soft .ec-zz__title { font-size: 20px !important; }
.ec-zz--soft .ec-zz__text { font-size: 15px; color: #1D1D1D; }

/* ─────────────────────────────────────────────
   MAGAZÍN S TYRKYSOVOU LINKOU
   ───────────────────────────────────────────── */
.ec-zz--mag {
  gap: 36px;
}
.ec-zz--mag .ec-zz__row {
  gap: 32px;
}
.ec-zz--mag img {
  border-radius: 4px;
}
.ec-zz--mag .ec-zz__body {
  position: relative;
  padding-left: 18px;
}
.ec-zz--mag .ec-zz__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: #00B1B1;
}
.ec-zz--mag .ec-zz__kicker {
  display: block;
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1994A1;
  margin-bottom: 8px;
}
.ec-zz--mag .ec-zz__title { font-size: 24px !important; }
.ec-zz--mag .ec-zz__text { font-size: 16px; line-height: 1.65; }

/* ─────────────────────────────────────────────
   RESPONZIVITA
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .ec-zz--clean .ec-zz__title,
  .ec-zz--mag .ec-zz__title { font-size: 20px !important; }
}

@media (max-width: 640px) {
  .ec-zz__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Na mobilu zruš převrácení – obrázek vždy nahoře, text dole */
  .ec-zz__row--reverse > :first-child {
    order: 0;
  }
  .ec-zz--soft .ec-zz__row { padding: 20px; }
  .ec-zz--clean .ec-zz__title,
  .ec-zz--mag .ec-zz__title,
  .ec-zz--soft .ec-zz__title { font-size: 18px !important; }
  .ec-zz__text { font-size: 14px !important; }
}

@media (max-width: 480px) {
  .ec-zz--mag .ec-zz__body { padding-left: 14px; }
}









/* =========================================================
   PAROLEK – Obrázek + text na střídačku (zigzag)
   Druhá dvojice má světle šedé pozadí, první bez pozadí.
   Vizuál podle screenshotu z produktové stránky.
   ========================================================= */

.ec-feat {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ec-feat__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 50px 40px;
}

/* Sudé řádky (2., 4., …) mají šedé pozadí */
.ec-feat__row:nth-child(even) {
  background: #F5F5F5;
  border-radius: 12px;
  margin: 12px 0;
}

/* Reverzní řád = obrázek vpravo */
.ec-feat__row--reverse > :first-child {
  order: 2;
}

.ec-feat__img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}

.ec-feat__body {
  padding: 0;
}

.ec-feat__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: #1D1D1D !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

.ec-feat__text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 17px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

.ec-feat__text strong {
  font-weight: 700;
  color: #1D1D1D;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-feat__row {
    gap: 36px;
    padding: 36px 24px;
  }
  .ec-feat__title { font-size: 21px !important; }
}

@media (max-width: 640px) {
  .ec-feat__row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
  }
  /* Na mobilu zruš převrácení – obrázek vždy nahoře */
  .ec-feat__row--reverse > :first-child {
    order: 0;
  }
  .ec-feat__row:nth-child(even) {
    margin: 8px 0;
  }
  .ec-feat__title { font-size: 19px !important; }
  .ec-feat__text { font-size: 14px; }
}

@media (max-width: 480px) {
  .ec-feat__row {
    padding: 24px 16px;
  }
  .ec-feat__title { font-size: 18px !important; }
}








/* =========================================================
   PAROLEK – CTA tlačítka pro blog: 4 varianty
   - Ikony zabudované v CSS přes background-image
   - HTML zůstává čisté (žádné inline SVG)
   ========================================================= */

/* --- Wrapper: zarovnání na střed --- */
.ec-cta {
  text-align: center;
  margin: 32px 0;
  padding: 0;
}

/* --- Sdílený základ tlačítek --- */
.ec-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Exo 2", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 32px;
  min-height: 48px;
  border-radius: 999px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .2s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
}

/* Šipka vpravo (chevron-right) — zobrazená jako pseudo-element */
.ec-cta__btn::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .2s ease;
}

/* ─────────────────────────────────────────────
   SOLID PILL
   ───────────────────────────────────────────── */
.ec-cta__btn--solid {
  background: #00B1B1;
  border-color: #00B1B1;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 177, 177, .25);
}
.ec-cta__btn--solid::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
.ec-cta__btn--solid:hover {
  background: #1994A1;
  border-color: #1994A1;
  box-shadow: 0 8px 22px rgba(0, 177, 177, .35);
  transform: translateY(-1px);
  color: #fff !important;
}

/* ─────────────────────────────────────────────
   GHOST OUTLINE
   ───────────────────────────────────────────── */
.ec-cta__btn--ghost {
  background: transparent;
  border-color: #00B1B1;
  color: #00B1B1 !important;
  padding: 12px 32px;
}
.ec-cta__btn--ghost::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
.ec-cta__btn--ghost:hover {
  background: #00B1B1;
  color: #fff !important;
}
.ec-cta__btn--ghost:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* ─────────────────────────────────────────────
   KARTA S TEXTEM
   ───────────────────────────────────────────── */
.ec-cta__card {
  display: block;
  max-width: 580px;
  margin: 0 auto;
  background: #E6F7F7;
  border-radius: 16px;
  padding: 30px 32px;
  text-align: center;
}
.ec-cta__card-title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #1D1D1D !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}
.ec-cta__card-text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 18px;
}
.ec-cta__card .ec-cta__btn {
  padding: 12px 28px;
  font-size: 14px;
  min-height: 44px;
}

/* ─────────────────────────────────────────────
   TMAVÝ BANNER S IKONOU
   ───────────────────────────────────────────── */
.ec-cta__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  background: #1D1D1D;
  color: #fff;
  border-radius: 14px;
  padding: 20px 28px;
  text-align: left;
}

/* Ikona telefonu vlevo */
.ec-cta__banner-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background-color: #00B1B1;
  border-radius: 50%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

.ec-cta__banner-body {
  flex: 1;
  min-width: 0;
}
.ec-cta__banner-title {
  font-family: "Exo 2", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}
.ec-cta__banner-sub {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}

.ec-cta__banner .ec-cta__btn {
  flex-shrink: 0;
  padding: 11px 22px;
  font-size: 13px;
  min-height: 42px;
}
.ec-cta__banner .ec-cta__btn--solid:hover {
  background: #fff;
  border-color: #fff;
  color: #00B1B1 !important;
}
.ec-cta__banner .ec-cta__btn--solid:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* ─────────────────────────────────────────────
   RESPONZIVITA
   ───────────────────────────────────────────── */
@media (max-width: 560px) {
  .ec-cta__btn {
    font-size: 14px;
    padding: 12px 24px;
  }
  .ec-cta__btn--ghost { padding: 10px 24px; }

  .ec-cta__card {
    padding: 24px 22px;
    border-radius: 14px;
  }
  .ec-cta__card-title { font-size: 19px !important; }
  .ec-cta__card-text { font-size: 14px; }

  .ec-cta__banner {
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    text-align: center;
  }
  .ec-cta__banner-body { text-align: center; }
  .ec-cta__banner .ec-cta__btn { width: 100%; }
}











/* =========================================================
   PAROLEK – Trust/USP sekce: varianta Soft (dvousloupcová)
   Světle tyrkysový blok s rohovým L dekorem.
   Levý sloupec vypráví, pravý vypíchne 4 hlavní USP.
   Ikony jsou zabudované v CSS přes background-image.
   ========================================================= */

.ec-trust {
  position: relative;
  background: #E6F7F7;
  border-radius: 12px;
  padding: 32px 36px;
  margin: 32px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  color: #1D1D1D;
  overflow: hidden;
}

/* Dekorativní L tvar vlevo nahoře – konce zkosené přes clip-path */
.ec-trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  background: #00B1B1;
  clip-path: polygon(0px 0px, 64px 0px, 54px 10px, 10px 10px, 10px 54px, 0px 64px);
}

.ec-trust__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

/* --- Levý sloupec --- */
.ec-trust__badge {
  display: inline-block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00B1B1;
  background: #fff;
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.ec-trust__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

.ec-trust__text {
  font-size: 15px;
  color: #1D1D1D;
  line-height: 1.6;
  margin: 0;
}

.ec-trust__text strong {
  font-weight: 700;
  color: #1994A1;
}

/* --- Pravý sloupec: seznam USP --- */
.ec-trust__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ec-trust__list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.ec-trust__list li::before,
.ec-trust__list li::marker {
  content: none !important;
  display: none !important;
}

.ec-trust__item {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
}

/* Ikona — kruh s SVG na pozadí */
.ec-trust__item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.ec-trust__item-text {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1D1D1D;
  line-height: 1.3;
  padding-top: 8px;
}

.ec-trust__item-sub {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
  margin-top: 3px;
}

/* --- Konkrétní ikony pro USP body --- */

/* Hvězda — hodnocení */
.ec-trust__item--rating .ec-trust__item-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2300B1B1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4 L24 14 L34 15 L26 22 L29 32 L20 26 L11 32 L14 22 L6 15 L16 14 Z'/></svg>");
}

/* Domeček — showroom */
.ec-trust__item--showroom .ec-trust__item-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2300B1B1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 L20 6 L34 18 L34 32 L6 32 Z'/><rect x='16' y='22' width='8' height='10'/></svg>");
}

/* Účtenka/papír — cenové nabídky */
.ec-trust__item--offer .ec-trust__item-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2300B1B1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='12' width='32' height='16' rx='2'/><line x1='4' y1='20' x2='36' y2='20'/><circle cx='14' cy='20' r='1.5' fill='%2300B1B1'/><circle cx='26' cy='20' r='1.5' fill='%2300B1B1'/></svg>");
}

/* Štít s fajfkou — garantovaný původ */
.ec-trust__item--guarantee .ec-trust__item-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2300B1B1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4 L34 10 L34 20 Q34 30 20 36 Q6 30 6 20 L6 10 Z'/><path d='M14 20 L18 24 L26 16'/></svg>");
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-trust {
    padding: 26px 24px;
    border-radius: 10px;
  }
  .ec-trust::before {
    width: 50px;
    height: 50px;
    clip-path: polygon(0px 0px, 50px 0px, 42px 8px, 8px 8px, 8px 42px, 0px 50px);
  }
  .ec-trust__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ec-trust__title { font-size: 21px !important; }
  .ec-trust__text { font-size: 14px; }
}

@media (max-width: 480px) {
  .ec-trust {
    padding: 22px 18px;
  }
  .ec-trust__title { font-size: 19px !important; }
  .ec-trust__text { font-size: 14px; }
  .ec-trust__item-icon {
    width: 36px;
    height: 36px;
    background-size: 18px 18px;
  }
  .ec-trust__item-text { font-size: 13px; padding-top: 7px; }
  .ec-trust__item-sub { font-size: 12px; }
  .ec-trust__list { gap: 14px; }
}








/* =========================================================
   PAROLEK – Průvodce výběrem (rozbalovací)
   Sbalovací tlačítko skáče: nahoře když zavřeno, dole když otevřeno.
   ========================================================= */

.ec-guide {
  background: #E6F7F7;
  border-radius: 16px;
  padding: 32px 36px;
  margin: 28px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  color: #1D1D1D;
  line-height: 1.65;
}

.ec-guide__badge {
  display: inline-block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00B1B1;
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.ec-guide__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.ec-guide__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #CFF0F0
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v.3h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/></svg>")
    center / 28px no-repeat;
}

.ec-guide__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  border: 0 !important;
  padding: 0 !important;
}

.ec-guide__intro {
  font-size: 16px;
  margin: 0 0 18px;
}

/* --- Rychlé body (5 vždy viditelných) --- */
.ec-guide__quick {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.ec-guide__quick li {
  list-style: none !important;
  position: relative;
  padding: 8px 0 8px 36px !important;
  margin: 0 !important;
  background: none !important;
  border-bottom: 1px solid rgba(0, 177, 177, .15);
  font-size: 16px;
}
.ec-guide__quick li:last-child { border-bottom: 0; }
.ec-guide__quick li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    center / 14px no-repeat;
  border-radius: 50%;
}
.ec-guide__quick li strong {
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  color: #1D1D1D;
}

/* --- Rozbalovací část: flex column, aby šel summary přeskládat --- */
.ec-guide__more {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

/* Summary když je zavřené – stojí samo nahoře, zarovnané vlevo */
.ec-guide__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1994A1;
  background: #fff;
  border: 2px solid #00B1B1;
  padding: 12px 22px;
  border-radius: 999px;
  user-select: none;
  transition: background .2s ease, color .2s ease;
  min-height: 44px;
  box-sizing: border-box;
  align-self: flex-start;
  order: 1;
}
.ec-guide__more > summary::-webkit-details-marker { display: none; }
.ec-guide__more > summary:hover {
  background: #00B1B1;
  color: #fff;
}
.ec-guide__more > summary::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231994A1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    center / contain no-repeat;
  transition: transform .25s ease;
}
.ec-guide__more[open] > summary::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231994A1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transform: rotate(180deg);
}
.ec-guide__more > summary:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Když je otevřené – summary se posune NA KONEC a vycentruje se */
.ec-guide__more[open] > summary {
  order: 99;
  align-self: center;
  margin-top: 28px;
}

.ec-guide__more .ec-guide__lbl-open { display: inline; }
.ec-guide__more .ec-guide__lbl-close { display: none; }
.ec-guide__more[open] .ec-guide__lbl-open { display: none; }
.ec-guide__more[open] .ec-guide__lbl-close { display: inline; }

/* --- Obsah po rozbalení --- */
.ec-guide__body {
  order: 2;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 177, 177, .25);
}
.ec-guide__body h3 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1994A1 !important;
  margin: 22px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
}
.ec-guide__body h3:first-child { margin-top: 0 !important; }
.ec-guide__body p {
  margin: 0 0 12px !important;
  font-size: 16px;
}
.ec-guide__body strong { font-weight: 700; color: #1D1D1D; }

/* CTA proužek – sedí mezi obsahem a sbalovacím tlačítkem */
.ec-guide__cta {
  order: 3;
  margin-top: 24px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ec-guide__cta-text {
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1D1D1D;
}
.ec-guide__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  background: #00B1B1;
  color: #fff !important;
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .2s ease;
}
.ec-guide__cta-btn:hover { background: #1994A1; }

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-guide { padding: 24px 22px; border-radius: 14px; }
  .ec-guide__title { font-size: 22px !important; }
  .ec-guide__icon { width: 48px; height: 48px; background-size: 24px; }
  .ec-guide__body h3 { font-size: 17px !important; }
}
@media (max-width: 480px) {
  .ec-guide { padding: 20px 16px; }
  .ec-guide__header { gap: 12px; }
  .ec-guide__title { font-size: 19px !important; }
  .ec-guide__icon { width: 42px; height: 42px; background-size: 22px; }
  .ec-guide__intro,
  .ec-guide__quick li,
  .ec-guide__body p { font-size: 15px; }
  .ec-guide__more > summary { width: 100%; justify-content: center; align-self: stretch; }
  .ec-guide__cta { flex-direction: column; align-items: stretch; text-align: center; }
  .ec-guide__cta-btn { width: 100%; }
}








/* =========================================================
   PAROLEK – FAQ: Numbered + Box nadpis s počtem
   Pure CSS, <details>/<summary>, bez JS.
   ========================================================= */

/* ---------- Wrapper ---------- */
.ec-faq {
  margin: 32px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

/* ---------- Nadpis ---------- */
.ec-faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ec-faq__head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ec-faq__badge {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #00B1B1;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
}

.ec-faq__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

.ec-faq__count {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  color: #777;
  white-space: nowrap;
}

/* ---------- Seznam otázek ---------- */
.ec-faq__list {
  counter-reset: ec-faq-counter;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ec-faq__list > li {
  list-style: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  border: 0 !important;
}
.ec-faq__list > li::before,
.ec-faq__list > li::marker {
  content: none !important;
  display: none !important;
}

.ec-faq__list > li:last-child { margin-bottom: 0 !important; }

/* ---------- Jednotlivá <details> ---------- */
.ec-faq__item {
  background: #fff;
  border: 1px solid #E5EBEB;
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ec-faq__item:hover {
  border-color: #B8E5E5;
}
.ec-faq__item[open] {
  border-color: #00B1B1;
  box-shadow: 0 4px 14px rgba(0, 177, 177, .08);
}

/* ---------- Summary (klikatelná otázka) ---------- */
.ec-faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 14px;
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #1D1D1D;
  user-select: none;
  min-height: 44px;
  line-height: 1.35;
}
.ec-faq__q::-webkit-details-marker { display: none; }

/* Číslo v kruhu */
.ec-faq__q::before {
  counter-increment: ec-faq-counter;
  content: counter(ec-faq-counter, decimal-leading-zero);
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: #E6F7F7;
  color: #1994A1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  font-size: 13px;
  transition: background .2s ease, color .2s ease;
}
.ec-faq__item[open] .ec-faq__q::before {
  background: #00B1B1;
  color: #fff;
}

/* Šipka vpravo */
.ec-faq__q::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  transition: transform .25s ease;
}
.ec-faq__item[open] .ec-faq__q::after {
  transform: rotate(180deg);
}

/* ---------- Odpověď ---------- */
.ec-faq__a {
  padding: 0 20px 18px 62px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.65;
}
.ec-faq__a p { margin: 0 0 10px; }
.ec-faq__a p:last-child { margin-bottom: 0; }
.ec-faq__a strong { color: #1D1D1D; font-weight: 700; }
.ec-faq__a a { color: #1994A1; text-decoration: underline; }
.ec-faq__a a:hover { color: #00B1B1; }

/* ---------- Responzivita ---------- */
@media (max-width: 768px) {
  .ec-faq__title { font-size: 21px !important; }
  .ec-faq__badge { width: 42px; height: 42px; font-size: 13px; }
  .ec-faq__q { font-size: 14px; }
  .ec-faq__a { padding-left: 56px; }
}

@media (max-width: 480px) {
  .ec-faq__head { gap: 12px; margin-bottom: 16px; }
  .ec-faq__head-left { gap: 10px; }
  .ec-faq__badge { width: 38px; height: 38px; font-size: 12px; border-radius: 10px; }
  .ec-faq__title { font-size: 18px !important; }
  .ec-faq__count { font-size: 12px; width: 100%; }
  .ec-faq__q {
    font-size: 13px;
    padding: 12px 14px 12px 12px;
    gap: 10px;
  }
  .ec-faq__q::before { width: 30px; height: 30px; font-size: 11px; }
  .ec-faq__a {
    padding: 0 14px 14px 52px;
    font-size: 13px;
  }
}






/* =========================================================
   PAROLEK – Magazinové nadpisy (Sada E)
   Krátký tyrkysový "kicker" pruh nad H2,
   čistá typografická hierarchie, brandové barvy.
   ========================================================= */

/* === H2 — Hlavní nadpis sekce ===
   Krátký teal pruh nad nadpisem jako magazinový kicker */
.ec-h2 {
  position: relative !important;
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #1D1D1D !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  margin: 56px 0 14px !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}
.ec-h2::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 4px !important;
  background: #00B1B1 !important;
  border-radius: 2px !important;
  display: block !important;
}

/* === H3 — Podsekce v brandové tyrkysové === */
.ec-h3 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1994A1 !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  margin: 36px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}

/* === H4 — Pod-podsekce, černá === */
.ec-h4 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  line-height: 1.35 !important;
  margin: 28px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}

/* === H5 — Drobný teal capitalizovaný nadpis === */
.ec-h5 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00B1B1 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  line-height: 1.3 !important;
  margin: 24px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* === H6 — Nejnižší úroveň, šedá === */
.ec-h6 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  line-height: 1.3 !important;
  margin: 22px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* === První nadpis v kontejneru — bez horního marginu === */
.ec-h2:first-child,
.ec-h3:first-child,
.ec-h4:first-child,
.ec-h5:first-child,
.ec-h6:first-child {
  margin-top: 0 !important;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-h2 {
    font-size: 26px !important;
    margin-top: 44px !important;
    padding-top: 14px !important;
  }
  .ec-h2::before {
    width: 32px !important;
    height: 3px !important;
  }
  .ec-h3 { font-size: 20px !important; margin-top: 30px !important; }
  .ec-h4 { font-size: 17px !important; margin-top: 24px !important; }
  .ec-h5 { font-size: 12px !important; margin-top: 20px !important; }
  .ec-h6 { font-size: 11px !important; margin-top: 18px !important; }
}

@media (max-width: 480px) {
  .ec-h2 {
    font-size: 22px !important;
    margin-top: 36px !important;
    padding-top: 12px !important;
  }
  .ec-h2::before {
    width: 28px !important;
    height: 3px !important;
  }
  .ec-h3 { font-size: 18px !important; margin-top: 26px !important; }
  .ec-h4 { font-size: 16px !important; margin-top: 22px !important; }
  .ec-h5 { font-size: 11px !important; margin-top: 18px !important; letter-spacing: .1em !important; }
  .ec-h6 { font-size: 11px !important; letter-spacing: .1em !important; }
}











/* =========================================================
   PAROLEK – Magazinové nadpisy (Sada E)
   Krátký tyrkysový "kicker" pruh nad H2,
   čistá typografická hierarchie, brandové barvy.
   ========================================================= */

/* === H2 — Hlavní nadpis sekce ===
   Krátký teal pruh nad nadpisem jako magazinový kicker */
.ec-h2 {
  position: relative !important;
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #1D1D1D !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  margin: 56px 0 14px !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}
.ec-h2::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 4px !important;
  background: #00B1B1 !important;
  border-radius: 2px !important;
  display: block !important;
}

/* === H3 — Podsekce v brandové tyrkysové === */
.ec-h3 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1994A1 !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  margin: 36px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}

/* === H4 — Pod-podsekce, černá === */
.ec-h4 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D1D1D !important;
  line-height: 1.35 !important;
  margin: 28px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-transform: none !important;
}

/* === H5 — Drobný teal capitalizovaný nadpis === */
.ec-h5 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00B1B1 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  line-height: 1.3 !important;
  margin: 24px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* === H6 — Nejnižší úroveň, šedá === */
.ec-h6 {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  line-height: 1.3 !important;
  margin: 22px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* === První nadpis v kontejneru — bez horního marginu === */
.ec-h2:first-child,
.ec-h3:first-child,
.ec-h4:first-child,
.ec-h5:first-child,
.ec-h6:first-child {
  margin-top: 0 !important;
}

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-h2 {
    font-size: 26px !important;
    margin-top: 44px !important;
    padding-top: 14px !important;
  }
  .ec-h2::before {
    width: 32px !important;
    height: 3px !important;
  }
  .ec-h3 { font-size: 20px !important; margin-top: 30px !important; }
  .ec-h4 { font-size: 17px !important; margin-top: 24px !important; }
  .ec-h5 { font-size: 12px !important; margin-top: 20px !important; }
  .ec-h6 { font-size: 11px !important; margin-top: 18px !important; }
}

@media (max-width: 480px) {
  .ec-h2 {
    font-size: 22px !important;
    margin-top: 36px !important;
    padding-top: 12px !important;
  }
  .ec-h2::before {
    width: 28px !important;
    height: 3px !important;
  }
  .ec-h3 { font-size: 18px !important; margin-top: 26px !important; }
  .ec-h4 { font-size: 16px !important; margin-top: 22px !important; }
  .ec-h5 { font-size: 11px !important; margin-top: 18px !important; letter-spacing: .1em !important; }
  .ec-h6 { font-size: 11px !important; letter-spacing: .1em !important; }
}


















/* =========================================================
   PAROLEK – Rozcestník (parametrické kategorie)
   <ul class="seo-subcategories with-image">
   Varianta: Boční čárový indikátor
   V klidu: tenká šedá čárka vlevo
   Hover: ztmavne a zesílí
   Layout: CSS Grid (PC 4, mobil 2)
   ========================================================= */

ul.seo-subcategories.with-image {
  list-style: none !important;
  margin: 32px 0 24px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Wrapper od Shoptetu (div.subcategories-group) musí být taky na celou šířku,
   jinak se rozcestník uvnitř zmenší. Cílíme jen na group s naším rozcestníkem. */
.subcategories-group:has(> ul.seo-subcategories.with-image) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.seo-subcategories.with-image > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
  float: none !important;
  box-sizing: border-box !important;
}
ul.seo-subcategories.with-image > li::before,
ul.seo-subcategories.with-image > li::marker {
  content: none !important;
  display: none !important;
}

/* ============ PC / DESKTOP ============ */
ul.seo-subcategories.with-image > li > a,
ul.seo-subcategories.with-image > li > a:link,
ul.seo-subcategories.with-image > li > a:visited {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
  padding: 14px 18px 14px 22px !important;
  background: #F6F6F6 !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #202020 !important;
  text-decoration: none !important;
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Tenká svislá čárka vlevo — v klidu šedá, hover tmavá */
ul.seo-subcategories.with-image > li > a::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  left: 12px !important;
  width: 2px !important;
  background: #C0C0C0 !important;
  transition: background-color .25s ease, width .25s ease !important;
  z-index: 3 !important;
  pointer-events: none !important;
  display: block !important;
}

ul.seo-subcategories.with-image > li > a:hover,
ul.seo-subcategories.with-image > li > a:hover:link,
ul.seo-subcategories.with-image > li > a:focus,
ul.seo-subcategories.with-image > li > a:active {
  color: #202020 !important;
  background: #F6F6F6 !important;
  text-decoration: none !important;
  border-color: transparent !important;
  outline: none !important;
}

ul.seo-subcategories.with-image > li > a:hover::after {
  background: #202020 !important;
  width: 3px !important;
}

ul.seo-subcategories.with-image > li > a:hover,
ul.seo-subcategories.with-image > li > a:hover *,
ul.seo-subcategories.with-image > li > a:hover .text {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* === Ikona kategorie === */
ul.seo-subcategories.with-image .image {
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #F6F6F6 !important;
  background-color: #F6F6F6 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
ul.seo-subcategories.with-image .image::before,
ul.seo-subcategories.with-image .image::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
ul.seo-subcategories.with-image .image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: multiply !important;
}

/* === Logo značky === */
ul.seo-subcategories.with-image .imageznacka {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #F6F6F6 !important;
  background-color: #F6F6F6 !important;
  background-image: none !important;
}
ul.seo-subcategories.with-image .imageznacka::before,
ul.seo-subcategories.with-image .imageznacka::after {
  content: none !important;
  display: none !important;
}
ul.seo-subcategories.with-image .imageznacka img {
  max-width: 80% !important;
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  mix-blend-mode: multiply !important;
}

ul.seo-subcategories.with-image > li > a:has(.imageznacka) .text,
ul.seo-subcategories.with-image > li > a:has(.imageznacka) .image {
  display: none !important;
}
ul.seo-subcategories.with-image > li > a:has(.imageznacka) {
  justify-content: center !important;
  padding: 12px 14px 12px 22px !important;
}

/* Text */
ul.seo-subcategories.with-image .text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  max-width: none !important;
}

@supports (font-size: clamp(11px, 1.05vw, 13px)) {
  ul.seo-subcategories.with-image .text {
    font-size: clamp(11px, 1.05vw, 13px) !important;
  }
}

/* ============ MOBIL (≤768px) – 2 vedle sebe + výška dle reference ============ */
@media (max-width: 768px) {
  ul.seo-subcategories.with-image {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 20px 0 24px !important;
  }
  ul.seo-subcategories.with-image > li > a,
  ul.seo-subcategories.with-image > li > a:link,
  ul.seo-subcategories.with-image > li > a:visited {
    min-height: 48px !important;
    height: auto !important;
    padding: 8px 10px 8px 18px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  ul.seo-subcategories.with-image > li > a::after {
    top: 10px !important;
    bottom: 10px !important;
    left: 9px !important;
    width: 2px !important;
  }
  ul.seo-subcategories.with-image > li > a:hover::after {
    width: 2px !important;
  }
  ul.seo-subcategories.with-image .image {
    width: 30px !important;
    height: 30px !important;
  }
  ul.seo-subcategories.with-image .imageznacka {
    min-height: 30px !important;
  }
  ul.seo-subcategories.with-image .imageznacka img {
    max-height: 30px !important;
  }
  ul.seo-subcategories.with-image .text {
    font-size: 11px !important;
  }
}

/* ============ MALÝ MOBIL (≤480px) – 2 vedle sebe, menší text ============ */
@media (max-width: 480px) {
  ul.seo-subcategories.with-image {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 20px 0 22px !important;
  }
  ul.seo-subcategories.with-image > li > a,
  ul.seo-subcategories.with-image > li > a:link,
  ul.seo-subcategories.with-image > li > a:visited {
    min-height: 48px !important;
    padding: 8px 9px 8px 16px !important;
    font-size: 10px !important;
  }
  ul.seo-subcategories.with-image .text {
    font-size: 10px !important;
    letter-spacing: .01em !important;
  }
}














/* =========================================================
   PAROLEK – Parametrické pilulky: Šedé pozadí (stejné jako rozcestníky)
   Pozadí #F6F6F6 sjednocené s kartami rozcestníku, hover černá.
   ========================================================= */
.ec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none !important;
}
.ec-pills > a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  min-height: 36px;
  background: #F6F6F6;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #202020;
  text-decoration: none !important;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  transition: all .15s ease;
  box-sizing: border-box;
}
.ec-pills > a:hover {
  background: #202020;
  color: #fff !important;
}
@media (max-width: 480px) {
  .ec-pills > a { font-size: 11px; padding: 7px 13px; }
}







/* =========================================================
   PAROLEK – Názor specialisty (Martin Parolek)
   Ve stylu infoboxů: kulatá fotka vlevo, rohový L dekor
   se zkosenými konci. Dvě varianty: tyrkysová + šedá.
   ========================================================= */

.ec-expert {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px;
  margin: 28px 0;
  border-radius: 12px;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1D1D1D;
  overflow: hidden;
}

/* Rohový L dekor vlevo nahoře, konce zkosené přes clip-path */
.ec-expert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  clip-path: polygon(0px 0px, 64px 0px, 54px 10px, 10px 10px, 10px 54px, 0px 64px);
}

/* Kulatá fotka */
.ec-expert__photo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  margin-top: 2px;
}
.ec-expert__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  margin: 0 !important;
}

.ec-expert__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.ec-expert__title {
  display: block;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}

.ec-expert__name {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.ec-expert p {
  margin: 0 0 10px !important;
  font-size: 15px;
  line-height: 1.6;
}
.ec-expert p:last-child { margin-bottom: 0 !important; }
.ec-expert strong { font-weight: 700; color: #1D1D1D; }
.ec-expert a { color: #1994A1; text-decoration: underline; }
.ec-expert a:hover { color: #00B1B1; }

/* --- Varianta TYRKYSOVÁ --- */
.ec-expert--tip {
  background: #E6F7F7;
}
.ec-expert--tip::before {
  background: #00B1B1;
}
.ec-expert--tip .ec-expert__title { color: #1994A1; }
.ec-expert--tip .ec-expert__name { color: #00B1B1; }

/* --- Varianta ŠEDÁ --- */
.ec-expert--neutral {
  background: #F5F5F5;
}
.ec-expert--neutral::before {
  background: #C0C0C0;
}
.ec-expert--neutral .ec-expert__title { color: #1D1D1D; }
.ec-expert--neutral .ec-expert__name { color: #606060; }

/* --- Responzivita --- */
@media (max-width: 768px) {
  .ec-expert {
    padding: 20px 22px;
    gap: 16px;
  }
  .ec-expert::before {
    width: 50px;
    height: 50px;
    clip-path: polygon(0px 0px, 50px 0px, 42px 8px, 8px 8px, 8px 42px, 0px 50px);
  }
  .ec-expert__photo {
    width: 56px;
    height: 56px;
  }
  .ec-expert__title { font-size: 18px !important; }
}

@media (max-width: 480px) {
  .ec-expert {
    flex-direction: column;
    padding: 20px 18px;
    gap: 12px;
    font-size: 14px;
  }
  .ec-expert__photo {
    width: 52px;
    height: 52px;
  }
  .ec-expert__title { font-size: 17px !important; }
  .ec-expert p { font-size: 14px; }
}


/* =========================================================
   PAROLEK – Servisní pruh "Nechte to celé na nás"
   Řada dlaždic: tyrkysová ikona v zaobleném čtverci + popisek.
   Ikony jsou zabudované v CSS přes background-image,
   HTML zůstává čisté (prázdný span).
   6 sloupců desktop / 3 tablet / 2 mobil.
   ========================================================= */

.parol-serv {
  margin: 40px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.parol-serv__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: #1D1D1D !important;
  text-align: center !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

/* Reset Shoptet defaults na <ul>/<li> */
.parol-serv__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 14px;
}

.parol-serv__list > li {
  list-style: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.parol-serv__list > li::marker {
  content: none !important;
  display: none !important;
}

.parol-serv__icon {
  display: block;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 22px;
  background-color: #00B1B1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 38px 38px;
  margin-bottom: 14px;
}

.parol-serv__text {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #1994A1;
}

.parol-serv__note {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 13px !important;
  color: #777 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 26px 0 0 !important;
}

/* --- Konkrétní ikony --- */

/* Dodávka: doručení */
.parol-serv__item--delivery .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='10' width='19' height='16' rx='2'/><path d='M22 15h6.5l5 5.5V26H22z'/><circle cx='11' cy='29.5' r='3.2'/><circle cx='28' cy='29.5' r='3.2'/><path d='M14.2 29.5h10.6'/></svg>");
}

/* Hodiny: provozní doba rozvozu */
.parol-serv__item--hours .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='20' cy='20' r='14'/><path d='M20 11.5V20l6 3.5'/></svg>");
}

/* Balík: vynesení spotřebiče */
.parol-serv__item--carry .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 5l13 6.5v13L20 31 7 24.5v-13z'/><path d='M7 11.5L20 18l13-6.5'/><path d='M20 18v13'/></svg>");
}

/* Klíč: demontáž a montáž */
.parol-serv__item--install .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M31.5 7.5a7 7 0 0 0-9.4 9.4L9.4 29.6a3.2 3.2 0 0 0 4.5 4.5l12.7-12.7a7 7 0 0 0 9.4-9.4l-4.9 4.9-4.5-4.5z'/></svg>");
}

/* Koš: úklid obalového materiálu */
.parol-serv__item--cleanup .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 12h26'/><path d='M16 12V8h8v4'/><path d='M10 12l1.7 20a2 2 0 0 0 2 1.8h12.6a2 2 0 0 0 2-1.8L30 12'/><path d='M17 18v10M23 18v10'/></svg>");
}

/* Spotřebič se šipkou: odvoz starého kusu */
.parol-serv__item--takeaway .parol-serv__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='8' width='16' height='24' rx='2'/><path d='M5 15h16'/><path d='M9 11.5h4'/><path d='M26 20h8'/><path d='M30.5 16.5L34 20l-3.5 3.5'/></svg>");
}

/* --- Responzivita --- */
@media (max-width: 1024px) {
  .parol-serv__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 18px;
  }
  .parol-serv__title { font-size: 26px !important; margin-bottom: 30px !important; }
}

@media (max-width: 560px) {
  .parol-serv__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 12px;
  }
  .parol-serv__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background-size: 32px 32px;
    margin-bottom: 11px;
  }
  .parol-serv__title { font-size: 22px !important; margin-bottom: 24px !important; }
  .parol-serv__text { font-size: 13px; }
  .parol-serv__note { font-size: 12px !important; margin-top: 20px !important; }
}








/* =========================================================
   PAROLEK – USP blok: obrázek + fajfkový seznam
   .parol-usp wrapper + .parol-usp__row pro každou dvojici,
   .parol-usp__row--reverse pro obrázek vpravo.
   Varianta .parol-usp--product pro produktové fotky
   (větší nadpis, širší mezera, bílé pozadí médií).
   Fajfka je zabudovaná v CSS, HTML zůstává čisté.
   ========================================================= */

.parol-usp {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin: 48px 0;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.parol-usp__row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Reverzní řád = obrázek vpravo, širší sloupec jde s ním */
.parol-usp__row--reverse {
  grid-template-columns: 1fr 1.25fr;
}

.parol-usp__row--reverse > :first-child {
  order: 2;
}

.parol-usp__media {
  margin: 0;
  min-width: 0;
}

.parol-usp__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
}

.parol-usp__body {
  min-width: 0;
}

.parol-usp__title {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #1D1D1D !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

/* Reset Shoptet defaults na <ul>/<li> */
.parol-usp__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.parol-usp__list > li {
  list-style: none !important;
  display: flex !important;
  gap: 16px;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.parol-usp__list > li::marker {
  content: none !important;
  display: none !important;
}

/* Tyrkysová fajfka ve světle tyrkysovém kruhu */
.parol-usp__list > li::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #E6F7F7;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B1B1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-size: 14px;
  background-repeat: no-repeat;
  margin-top: 2px;
}

.parol-usp__item-body {
  flex: 1;
  min-width: 0;
}

.parol-usp__label {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1D1D1D;
  line-height: 1.3;
  margin: 0 0 5px;
}

.parol-usp__text {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  color: #555;
  line-height: 1.55;
  margin: 0;
}

.parol-usp__text strong {
  font-weight: 700;
  color: #1D1D1D;
}

/* --- Varianta PRODUKT --- */
.parol-usp--product .parol-usp__row {
  gap: 84px;
}
.parol-usp--product .parol-usp__media {
  background: #fff;
  border-radius: 8px;
}
.parol-usp--product .parol-usp__media img {
  border-radius: 8px;
}
.parol-usp--product .parol-usp__title {
  font-size: 30px !important;
  margin-bottom: 28px !important;
}
.parol-usp--product .parol-usp__list {
  gap: 28px;
}

/* --- Responzivita --- */
@media (max-width: 1024px) {
  .parol-usp { gap: 56px; }
  .parol-usp__row { grid-template-columns: 1.15fr 1fr; gap: 40px; }
  .parol-usp__row--reverse { grid-template-columns: 1fr 1.15fr; }
  .parol-usp--product .parol-usp__row { gap: 44px; }
  .parol-usp__title { font-size: 23px !important; margin-bottom: 24px !important; }
  .parol-usp--product .parol-usp__title { font-size: 25px !important; }
  .parol-usp__list { gap: 22px; }
  .parol-usp--product .parol-usp__list { gap: 24px; }
}

@media (max-width: 640px) {
  .parol-usp { gap: 40px; }
  .parol-usp__row,
  .parol-usp__row--reverse,
  .parol-usp--product .parol-usp__row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* Na mobilu zruš převrácení: obrázek vždy nahoře, text dole */
  .parol-usp__row--reverse > :first-child {
    order: 0;
  }
  .parol-usp__title,
  .parol-usp--product .parol-usp__title {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }
  .parol-usp__list,
  .parol-usp--product .parol-usp__list { gap: 20px; }
  .parol-usp__label { font-size: 16px; }
  .parol-usp__text { font-size: 14px; }
  .parol-usp__list > li::before {
    width: 22px;
    height: 22px;
    background-size: 13px;
  }
}