/* =========================================================
   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 */
.ec-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  border-top-left-radius: 10px;
}

/* 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:
    linear-gradient(to right, #00B1B1 0 10px, transparent 10px),
    linear-gradient(to bottom, #00B1B1 0 10px, transparent 10px);
}
.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:
    linear-gradient(to right, #B8E5E5 0 10px, transparent 10px),
    linear-gradient(to bottom, #B8E5E5 0 10px, transparent 10px);
}
.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;
  }
  .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: #00B1B1;
  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='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: #1D1D1D;
  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'><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 v outline 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;
}

/* Fajfka v outline kruhu */
.ec-list-feat > li::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #00B1B1;
  border-radius: 50%;
  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.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    center / 12px no-repeat;
  margin-top: 2px;
}

.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: 22px;
    height: 22px;
    background-size: 11px;
  }
  .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 – Rozcestník Soft pro Shoptet
   Cílí na ručně vložené (.seo-subcategories) i defaultní (.subcategories)
   Shoptet rozcestníky. Pokud někde použijete:
   <style>.subcategories {display:none;}</style>
   defaultní rozcestník se skryje a zůstane jen ručně vložený.
   ========================================================= */

ul.seo-subcategories.with-image,
ul.subcategories.with-image {
  list-style: none !important;
  margin: 32px -5px 24px !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
}

ul.seo-subcategories.with-image > li,
ul.subcategories.with-image > li {
  list-style: none !important;
  padding: 0 5px !important;
  margin: 0 0 10px !important;
  background: none !important;
}
ul.seo-subcategories.with-image > li::before,
ul.seo-subcategories.with-image > li::marker,
ul.subcategories.with-image > li::before,
ul.subcategories.with-image > li::marker {
  content: none !important;
  display: none !important;
}

/* Karta (a tag) — Soft styl */
ul.seo-subcategories.with-image > li > a,
ul.subcategories.with-image > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  background: #E6F7F7;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #1D1D1D !important;
  text-decoration: none !important;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: all .2s ease;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

ul.seo-subcategories.with-image > li > a:hover,
ul.subcategories.with-image > li > a:hover {
  background: #CFF0F0;
  border-color: #00B1B1;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Ikona kategorie (s textem) — odstraněné bílé pozadí přes blend mode */
ul.seo-subcategories.with-image .image,
ul.subcategories.with-image .image {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
ul.seo-subcategories.with-image .image img,
ul.subcategories.with-image .image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
}

/* Varianta s logem značky — odstraněné bílé pozadí přes blend mode */
ul.seo-subcategories.with-image .imageznacka,
ul.subcategories.with-image .imageznacka {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 !important;
}
ul.seo-subcategories.with-image .imageznacka img,
ul.subcategories.with-image .imageznacka img {
  max-width: 80%;
  max-height: 40px;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
}

/* Text vedle ikony */
ul.seo-subcategories.with-image .text,
ul.subcategories.with-image .text {
  display: block;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
}

/* --- Responzivita --- */
@media (max-width: 480px) {
  ul.seo-subcategories.with-image,
  ul.subcategories.with-image {
    margin: 24px -5px 20px !important;
  }
  ul.seo-subcategories.with-image > li,
  ul.subcategories.with-image > li {
    margin-bottom: 8px !important;
  }
  ul.seo-subcategories.with-image > li > a,
  ul.subcategories.with-image > li > a {
    font-size: 12px;
    padding: 12px 14px;
    min-height: 56px;
  }
  ul.seo-subcategories.with-image .image,
  ul.subcategories.with-image .image {
    width: 36px;
    height: 36px;
  }
  ul.seo-subcategories.with-image .imageznacka img,
  ul.subcategories.with-image .imageznacka img {
    max-height: 32px;
  }
  ul.seo-subcategories.with-image .text,
  ul.subcategories.with-image .text {
    font-size: 12px;
  }
}








/* =========================================================
   PAROLEK – Parametrické pilulky: Filled hover
   Outline tyrkysové, na hover se vybarví plně.
   ========================================================= */
.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: #fff;
  border: 1px solid #B8E5E5;
  border-radius: 999px;
  color: #1994A1;
  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;
}
.ec-pills > a:hover {
  background: #00B1B1;
  border-color: #00B1B1;
  color: #fff !important;
}

@media (max-width: 480px) {
  .ec-pills > a { font-size: 11px; padding: 7px 13px; }
}





/* =========================================================
   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 */
.ec-trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  border-top-left-radius: 12px;
  background:
    linear-gradient(to right, #00B1B1 0 10px, transparent 10px),
    linear-gradient(to bottom, #00B1B1 0 10px, transparent 10px);
}

.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;
    border-top-left-radius: 10px;
  }
  .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;
  }
}