/* ============================================================
   EC-INFOBOX — informační box s barevným štítkem nahoře
   - 4 varianty: --tip / --note / --warn / --important
   - štítek: ikona (z varianty) + popisek (píše se ručně do .ec-infobox__tag)
   - nadpis volitelný; text 1–3 věty
   - font i velikost se dědí z webu, barvy z palety Dupeto
   ============================================================ */


.ec-infobox {
  margin: 20px 0;
  padding: 14px 18px 16px;
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  background: #fafafa;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: #424242;
}


/* štítek – popisek napíšeš ručně do spanu, ikonu doplní varianta */
.ec-infobox__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 4px 11px 4px 9px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  background: #E2E2E2;
  color: #424242;
}
.ec-infobox__tag::before {
  content: "";
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}


.ec-infobox__title {
  margin: 0 0 4px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}


/* reset Shoptet defaultů pro text uvnitř */
.ec-infobox__text,
.ec-infobox p {
  margin: 0;
  color: inherit;
}
.ec-infobox__text + .ec-infobox__text,
.ec-infobox p + p {
  margin-top: 6px;
}


/* odkazy uvnitř – drží barvu a zůstávají čitelné */
.ec-infobox a {
  color: inherit;
  text-decoration: underline;
}


/* ---------- TIP (olivová) ---------- */
.ec-infobox--tip .ec-infobox__tag {
  background: #999903;
  color: #fff;
}
.ec-infobox--tip .ec-infobox__tag::before {
  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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 21h4'/><path d='M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z'/></svg>");
}


/* ---------- POZNÁMKA (šedá) ---------- */
.ec-infobox--note .ec-infobox__tag {
  background: #6e6e6e;
  color: #fff;
}
.ec-infobox--note .ec-infobox__tag::before {
  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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8h.01'/><path d='M12 11v5'/></svg>");
}


/* ---------- VAROVÁNÍ (žlutá) ---------- */
.ec-infobox--warn .ec-infobox__tag {
  background: #fec700;
  color: #424242;
}
.ec-infobox--warn .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23424242' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2 20h20L12 3z'/><path d='M12 10v4'/><path d='M12 17h.01'/></svg>");
}


/* ---------- DŮLEŽITÉ (tmavý štítek + žlutý rámeček) ---------- */
.ec-infobox--important {
  border-color: #fec700;
}
.ec-infobox--important .ec-infobox__tag {
  background: #424242;
  color: #fec700;
}
.ec-infobox--important .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fec700' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6'/><path d='M12 16h.01'/></svg>");
}


/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-infobox {
    padding: 12px 14px 14px;
  }
}
























/* ============================================================
   EC-GUIDE — krokový rozbalovací průvodce (čisté CSS, bez JS)
   STRUKTURA: nadpis + intro + tlačítko (nahoře) → rozbalí číslované kroky.
   Každý krok = číslo (auto counter) + nadpis + tělo (text / odrážky /
   tabulka / tip box). Tlačítko Rozbalit/Sbalit nahoře (přirozený tok <details>).
   - hlavní nadpis h2 dědí VELIKOST z webu, barvu drží jako text; paleta Dupeto
   ============================================================ */

.ec-guide {
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: #424242;
}

/* hlavní nadpis = reálný H2; velikost/font dědí z h2 šablony (stejně velký
   jako h2 na webu), barvu držíme jako text (#424242 – ne olivová/jiná) */
.ec-guide h2,
.ec-guide h2.ec-guide__title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #424242 !important;         /* originální barva textu, ne olivová */
  /* font-size, font-family, font-weight ZÁMĚRNĚ neuvedeny → dědí se z h2 šablony */
}

/* úvodní odstavec */
.ec-guide__intro {
  margin: 0 0 14px;
  color: inherit;
}

/* odkazy – olivová, čitelné */
.ec-guide a {
  color: #999903;
  text-decoration: underline;
}

/* ---------- rozbalovací tlačítko (nahoře, žlutá pilulka) ---------- */
.ec-guide details {
  margin: 0;
}
.ec-guide summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  min-height: 24px;                  /* + padding = ~44 px tap target */
  border-radius: 100px;
  background: #fec700;
  color: #424242;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;                  /* skryje default trojúhelník */
  transition: filter .15s;
}
.ec-guide summary:hover { filter: brightness(0.95); }
.ec-guide summary::-webkit-details-marker { display: none; }
.ec-guide summary::after { content: "Rozbalit průvodce"; }
.ec-guide details[open] summary::after { content: "Sbalit průvodce"; }

/* šipka – otáčí se při rozbalení */
.ec-guide__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: transform .2s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23424242' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.ec-guide details[open] .ec-guide__chevron { transform: rotate(180deg); }

/* ---------- KROKY ---------- */
.ec-guide__steps {
  margin-top: 18px;
  counter-reset: ec-step;            /* nastartuje číslování */
}
.ec-guide__step {
  counter-increment: ec-step;        /* +1 za každý krok */
  border-top: 1px solid #E2E2E2;
  padding-top: 18px;
  margin-top: 18px;
}
.ec-guide__step:first-child { margin-top: 0; }

/* hlavička kroku: číslo + nadpis */
.ec-guide__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ec-guide__num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #999903;
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ec-guide__num::before { content: counter(ec-step); }  /* vykreslí číslo */

/* nadpis kroku = H3; reset + olivová (přebíjí Shoptet h3 styly) */
.ec-guide h3.ec-guide__step-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #999903 !important;
}

/* tělo kroku – odsazené pod nadpis, jednotné mezery mezi bloky */
.ec-guide__step-body { padding-left: 34px; }
.ec-guide__step-body > * + * { margin-top: 10px; }
/* víc vzduchu nad odrážkami, ať nejsou nalepené na předchozí větě */
.ec-guide__step-body > * + .ec-guide__points { margin-top: 16px; }
.ec-guide__step-body p { margin: 0; color: inherit; }

/* ---------- ODRÁŽKY ---------- */
.ec-guide__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ec-guide__points li {
  margin: 0;
  padding: 0 0 0 20px;
  position: relative;
  list-style: none;
}
.ec-guide__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999903;
}

/* ---------- TABULKA ---------- */
.ec-guide__table-wrap {
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  overflow: auto;                    /* na úzkém mobilu horizontální scroll */
}
.ec-guide table {
  width: 100%;
  border-collapse: collapse;
}
.ec-guide th,
.ec-guide td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E2E2E2;
  vertical-align: top;
}
.ec-guide thead th {
  background: rgba(153, 153, 3, 0.10);
  color: #999903;
  font-weight: 700;
}
.ec-guide tbody tr:last-child td { border-bottom: none; }

/* ---------- TIP BOX ---------- */
.ec-guide__tip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 14px;
  background: rgba(153, 153, 3, 0.08);
  border: 1px solid rgba(153, 153, 3, 0.35);
  border-radius: 6px;
}
.ec-guide__tip::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999903' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg>");
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-guide { padding: 14px 15px; }
  .ec-guide summary {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .ec-guide__step-body { padding-left: 0; }   /* tabulka/tip dostanou plnou šířku */
}
}



/* ============================================================
   EC-TABLE — samostatná běžná tabulka, žlutá varianta (čisté CSS)
   - žlutá hlavička s tmavým textem, jemné šedé linky, ZAOBLENÝ rámeček
   - rohy zaobluje SAMA TABULKA (border-collapse: separate + rohové buňky),
     takže to funguje i když Shoptet editor smaže obalový div ec-table-wrap
   - obal ec-table-wrap je teď NEPOVINNÝ – slouží jen k vodorovnému scrollu
     na úzkém mobilu (nemá vlastní rámeček, ať není dvojitý)
   - modifikátor --zebra (jemně žluté pruhování řádků)
   - třída buňky ec-table__rh = řádkové záhlaví (ztučnění)
   - font i velikost se dědí z webu; barvy z palety Dupeto
   ============================================================ */

/* NEPOVINNÝ obal – jen vodorovný scroll na úzkém mobilu (bez rámečku) */
.ec-table-wrap {
  margin: 20px 0;
  overflow-x: auto;
  box-sizing: border-box;
}

.ec-table {
  width: 100%;
  margin: 20px 0;                    /* drží odstup i bez obalu */
  border-collapse: separate;         /* NUTNÉ, aby border-radius fungoval */
  border-spacing: 0;
  border: 1px solid #E2E2E2;
  border-radius: 8px;                /* zaoblení přímo na tabulce */
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: #424242;
}
/* uvnitř obalu už vlastní margin tabulky nepotřebujeme (má ho obal) */
.ec-table-wrap > .ec-table { margin: 0; }

/* buňky */
.ec-table th,
.ec-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #E2E2E2;
  vertical-align: top;
}

/* hlavička – plná žlutá, tmavý text (kvůli kontrastu) */
.ec-table thead th {
  background: #fec700;
  color: #424242;
  font-weight: 700;
}

/* poslední řádek bez spodní linky */
.ec-table tbody tr:last-child td {
  border-bottom: none;
}

/* zaoblení rohových buněk – ořeže hlavičku i poslední řádek do oblouku */
.ec-table thead th:first-child { border-top-left-radius: 8px; }
.ec-table thead th:last-child  { border-top-right-radius: 8px; }
.ec-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.ec-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }

/* řádkové záhlaví (první buňka řádku) – ztučnění */
.ec-table__rh {
  font-weight: 700;
}

/* odkazy uvnitř – olivové, čitelné */
.ec-table a {
  color: #999903;
  text-decoration: underline;
}

/* ---------- MODIFIKÁTOR: zebra (jemně žluté pruhy) ---------- */
.ec-table--zebra tbody tr:nth-child(even) td {
  background: rgba(254, 199, 0, 0.12);
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-table th,
  .ec-table td {
    padding: 9px 11px;
  }
}



/* ============================================================
   EC-STEPS — průvodce krok za krokem (timeline, čisté CSS, bez JS)
   STRUKTURA: hlavička (nadpis + podtitulek na tónovaném podkladu)
   → kroky spojené svislou linkou; každý krok = číslo + nadpis +
   volitelný štítek + popis.
   - čísla: auto counter; statické (není sbalovací)
   - nadpis h2 dědí velikost z webu, barvu drží jako text
   - VARIANTY: základní = olivová; modifikátor --yellow = žlutá
   - barvy z palety Dupeto
   ============================================================ */

.ec-steps {
  margin: 20px 0;
  border: 1px solid #E2E2E2;
  border-radius: 10px;
  overflow: hidden;                  /* ořízne tónovanou hlavičku do rohů */
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: #424242;
}

/* ---------- HLAVIČKA ---------- */
.ec-steps__head {
  background: rgba(153, 153, 3, 0.08);
  padding: 18px 22px;
  border-bottom: 1px solid #E2E2E2;
}
/* hlavní nadpis = H2; velikost/font dědí z webu, barvu držíme jako text */
.ec-steps h2,
.ec-steps h2.ec-steps__title {
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #424242 !important;
}
.ec-steps__intro {
  margin: 0;
  color: #6e6e6e;
}

/* ---------- TĚLO S KROKY ---------- */
.ec-steps__body {
  padding: 20px 22px;
  counter-reset: ec-stp;             /* nastartuje číslování */
}

.ec-steps__step {
  position: relative;
  padding: 0 0 22px 44px;            /* levý žlab na kolečko + spojnici */
  counter-increment: ec-stp;
}
.ec-steps__step:last-child {
  padding-bottom: 0;
}

/* svislá spojnice mezi kroky (ne u posledního) */
.ec-steps__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;                        /* střed 28px kolečka (14) − 1px */
  top: 32px;                         /* pod kolečkem */
  bottom: 0;                         /* až k dalšímu kolečku */
  width: 2px;
  background: #E2E2E2;
}

/* kolečko s číslem – olivový obrys, číslo z counteru */
.ec-steps__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999903;
  color: #999903;
  font-weight: 700;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 1;                        /* nad spojnicí */
}
.ec-steps__num::before { content: counter(ec-stp); }

/* hlavička kroku: nadpis + štítek */
.ec-steps__step-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 28px;                  /* zarovná nadpis na výšku kolečka */
}
/* nadpis kroku = H3; reset + tmavá (přebíjí Shoptet h3 styly) */
.ec-steps h3.ec-steps__step-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #424242 !important;
}

/* štítek u kroku – olivová pilulka */
.ec-steps__tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(153, 153, 3, 0.12);
  color: #999903;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.5;
}

/* popis kroku */
.ec-steps__text {
  margin: 0;
  color: inherit;
}
.ec-steps__text + .ec-steps__text { margin-top: 6px; }

/* odkazy uvnitř – olivové, čitelné */
.ec-steps a {
  color: #999903;
  text-decoration: underline;
}

/* ============================================================
   MODIFIKÁTOR --yellow — žlutá varianta
   přebíjí olivové akcenty žlutými; přidá se třída na .ec-steps
   ============================================================ */
.ec-steps--yellow .ec-steps__head {
  background: rgba(254, 199, 0, 0.14);
}
.ec-steps--yellow .ec-steps__num {
  border-color: #fec700;             /* žlutý kroužek */
  color: #424242;                    /* tmavé číslo (kontrast) */
}
.ec-steps--yellow .ec-steps__tag {
  background: #fec700;               /* plná žlutá */
  color: #424242;                    /* tmavý text (kontrast) */
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-steps__head { padding: 15px 16px; }
  .ec-steps__body { padding: 16px 16px; }
}






/* ============================================================
   EC-LIST — výčet s barevnými odrážkami (olivové tečky)
   - resetuje Shoptet ul/li a dává vlastní olivovou tečku
   - tečka zarovnaná na první řádek; u víceřádkové položky zůstane nahoře
   - font i velikost se dědí z webu; barva z palety Dupeto
   ============================================================ */

.ec-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: #424242;
}

.ec-list li {
  margin: 0;
  padding: 0 0 0 22px;
  position: relative;
  list-style: none;
}

.ec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;                 /* zarovná tečku na první řádek textu */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999903;         /* olivová tečka */
}

/* odkazy uvnitř – olivové, čitelné */
.ec-list a {
  color: #999903;
  text-decoration: underline;
}





/* ============================================================
   EC-FAQ — rozbalovací FAQ, jednoduchá žlutá podoba (čisté CSS)
   - bez orámování celé sady; jen tenká šedá linka pod každou otázkou
   - vlevo kruhový přepínač +/− (žlutá), text otázky žlutý ve zvýrazn. stavu
   - každá položka = nativní <details>/<summary>; ikonu +/− maluje CSS
   - +/− se přepíná POUZE při rozbalení; hover jen barví (znak zůstává +)
   - nadpis = reálný <h2> uvnitř komponenty; dědí velikost z webu
   - font i velikost se dědí z webu; barvy z palety Dupeto
   ============================================================ */

.ec-faq {
  margin: 20px 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: #424242;
}

/* hlavní nadpis = reálný H2; velikost/font dědí z h2 šablony,
   barvu držíme jako text (#424242) */
.ec-faq h2,
.ec-faq h2.ec-faq__title {
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #424242 !important;
  /* font-size, font-family, font-weight ZÁMĚRNĚ neuvedeny → dědí se z h2 šablony */
}

/* každá položka – jen spodní šedá linka */
.ec-faq details {
  margin: 0;
  border-bottom: 1px solid #E2E2E2;
}

/* otázka (klikací řádek) – minimální outline, žádné pozadí */
.ec-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  min-height: 24px;                  /* + padding = ~44 px tap target */
  cursor: pointer;
  list-style: none;                  /* skryje default trojúhelník */
  font-weight: 700;
  color: #424242;
}
.ec-faq summary::-webkit-details-marker { display: none; }

/* text otázky – ve zvýrazněném stavu (hover / open) žlutá */
.ec-faq__q {
  flex: 1;
  min-width: 0;
  transition: color .15s;
}
.ec-faq summary:hover .ec-faq__q,
.ec-faq details[open] .ec-faq__q {
  color: #fec700;
}

/* ---------- IKONA +/− (kruh, čistě CSS) ---------- */
.ec-faq__ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fec700;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  transition: background .15s;
}
/* vodorovná a svislá čárka uprostřed = znak + */
.ec-faq__ico::before,
.ec-faq__ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fec700;
  transition: opacity .2s, background .15s;
}
.ec-faq__ico::before { width: 10px; height: 2px; }   /* vodorovná */
.ec-faq__ico::after  { width: 2px; height: 10px; }   /* svislá */

/* otevřeno: schová svislou → zůstane pouze − (přepne se JEN po rozbalení) */
.ec-faq details[open] .ec-faq__ico::after { opacity: 0; }

/* hover + otevřeno: kruh se vyplní žlutě, znak ztmavne (kontrast)
   – záměrně NEschováváme svislou čárku při hoveru, ať zůstává „+“ */
.ec-faq summary:hover .ec-faq__ico,
.ec-faq details[open] .ec-faq__ico {
  background: #fec700;
}
.ec-faq summary:hover .ec-faq__ico::before,
.ec-faq summary:hover .ec-faq__ico::after,
.ec-faq details[open] .ec-faq__ico::before {
  background: #424242;
}

/* ---------- ODPOVĚĎ ---------- */
.ec-faq__a {
  padding: 0 0 14px 36px;            /* odsazení pod ikonou */
  color: #424242;
}
.ec-faq__a p {
  margin: 0;
  color: inherit;
}
.ec-faq__a p + p {
  margin-top: 6px;
}
.ec-faq__a a {
  color: #999903;
  text-decoration: underline;
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-faq summary { padding: 12px 0; }
  .ec-faq__a { padding: 0 0 12px 32px; }
}





/* ============================================================
   EC-QUOTE — citace, žlutá podoba (čisté CSS)
   - žlutý tónovaný podklad bez bočního pruhu
   - olivová dekorativní uvozovka v pravém horním rohu (jediný akcent)
   - autor přes <footer>: olivová linka před jménem + jméno v olivové
   - font i velikost se dědí z webu; barvy z palety Dupeto
   ============================================================ */

.ec-quote {
  position: relative;
  margin: 20px 0;
  padding: 20px 26px;
  background: rgba(254, 199, 0, 0.18);     /* jemně žlutý podklad */
  border-radius: 8px;
  overflow: hidden;                         /* ořízne přečnívající uvozovku */
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  color: #424242;
}

/* dekorativní olivová uvozovka v pravém horním rohu */
.ec-quote::before {
  content: "\201C";                         /* typografická levá uvozovka „U+201C“ */
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: Georgia, "Times New Roman", serif;  /* výjimka – uvozovka chce serif */
  font-size: 96px;
  line-height: 1;
  color: #999903;
  opacity: 0.32;
  pointer-events: none;
}

/* citovaný text */
.ec-quote p {
  margin: 0;
  font-size: 1.05em;
  color: inherit;
}
.ec-quote p + p {
  margin-top: 8px;
}

/* podpis autora – olivová linka před jménem, jméno v olivové,
   stejná velikost jako citovaný text */
.ec-quote footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05em;                        /* stejně jako .ec-quote p */
  font-weight: 700;
  color: #999903;                           /* jméno v tmavé olivové */
}
.ec-quote footer::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 2px;
  background: #999903;                      /* olivová linka */
}
/* <cite> = jméno; pryč s defaultní kurzívou, ať ladí se sadou */
.ec-quote cite {
  font-style: normal;
}

/* odkazy uvnitř – olivové, čitelné */
.ec-quote a {
  color: #999903;
  text-decoration: underline;
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-quote {
    padding: 16px 18px;
  }
  .ec-quote::before {
    font-size: 72px;
    top: -8px;
    right: 12px;
  }
}