/* =========================================================
   SEOPRAKTICKY / DROGERKA24.CZ
   UI kit pro popisky kategorii, clanky a stranky na Shoptetu
   Prefix trid: seop-dg-

   Barvy:
     #D82951  hlavni cervena
     #001435  tmave modra, nadpisy a hover
     #FBE9ED  svetle ruzova plocha
     #F3C7D2  ruzovy ramecek
     #F1C9D4  jemna ruzova linka
     #F6F6F6  seda plocha
     #1D1D1D  zakladni text
     #4a4f5a  doplnkovy text

   Zasady:
     radius 10px u ploch a rozcestnikovych odkazu,
     8px u tlacitek, 999px u stitku uvnitr komponent
     ramecky vzdy 1px, zadne stiny
     rez pisma se vzdy dedi ze sablony (font-family: inherit)
     zakladni text komponent je 14pt, stejne jako text
     popisu kategorie; nadpisy 18 az 19pt; podrizene texty
     (tabulka, seznamy vyhod, mini buttony) jsou v em,
     takze se meni spolu se zakladem

   Obsah:
     1. Info boxy, vyrazny tip .............. seop-dg-tip
     2. Info boxy, poznamka a dulezite ...... seop-dg-cue
     3. Trust box ........................... seop-dg-trust
     4. Pruvodce vyberem .................... seop-dg-guide
     5. FAQ ................................. seop-dg-faq
     6. Mini buttony, rozcestnik ............ seop-dg-btns
   ========================================================= */


/* =========================================================
   1. INFO BOXY, VYRAZNY TIP
   ========================================================= */

.seop-dg-tip {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  background: #FBE9ED;
  border: 1px solid #F3C7D2;
  border-radius: 10px;
  padding: 11px 16px;
  max-width: 100%;
  margin: 18px 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13pt;
}

.seop-dg-tip__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23ffffff' d='M19 5 L22.6 14.4 L32 18 L22.6 21.6 L19 31 L15.4 21.6 L6 18 L15.4 14.4 Z'/><path fill='%23ffffff' d='M35 25 L37.2 30.8 L43 33 L37.2 35.2 L35 41 L32.8 35.2 L27 33 L32.8 30.8 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.seop-dg-tip__text {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: #1D1D1D;
}

.seop-dg-tip__text strong {
  display: inline;
  font-weight: 700;
  color: #D82951;
  font-size: inherit;
  line-height: inherit;
}

.seop-dg-tip a {
  color: #D82951;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seop-dg-tip a:hover {
  color: #001435;
}

/* Pojistka proti odsazeni odstavcu ze sablony */
.seop-dg-tip .seop-dg-tip__text,
.article-detail .seop-dg-tip .seop-dg-tip__text,
.category-perex .seop-dg-tip .seop-dg-tip__text,
.content-inner .seop-dg-tip .seop-dg-tip__text,
.p-detail-inner .seop-dg-tip .seop-dg-tip__text {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 480px) {
  .seop-dg-tip {
    padding: 10px 14px;
    gap: 6px;
    border-radius: 8px;
  }
  .seop-dg-tip__icon {
    width: 26px;
    height: 26px;
  }
}


/* =========================================================
   2. INFO BOXY, POZNAMKA A DULEZITE
   Varianta --imp je plna cervena, jen na kratka varovani
   do dvou radku. Delsi text patri do --note.
   ========================================================= */

.seop-dg-cue {
  display: flex;
  gap: 13px;
  align-items: center;
  border-radius: 10px;
  padding: 15px 17px;
  max-width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14pt;
}

.seop-dg-cue__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.seop-dg-cue__text {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: #1D1D1D;
}

.seop-dg-cue__text strong {
  display: inline;
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
}

.seop-dg-cue a {
  color: #D82951;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seop-dg-cue a:hover {
  color: #001435;
}

/* Poznamka, sedy box */
.seop-dg-cue--note {
  background: #F6F6F6;
}

.seop-dg-cue--note .seop-dg-cue__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='21' fill='%23ffffff' stroke='%23001435' stroke-width='2.4'/%3E%3Crect x='21.3' y='20.5' width='5.4' height='13.5' rx='2.7' fill='%23001435'/%3E%3Ccircle cx='24' cy='15' r='3.2' fill='%23001435'/%3E%3Ccircle cx='22.8' cy='13.9' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

.seop-dg-cue--note .seop-dg-cue__text strong {
  color: #001435;
}

/* Dulezite, plna cervena, bily text */
.seop-dg-cue--imp {
  background: #D82951;
}

.seop-dg-cue--imp .seop-dg-cue__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='21' fill='%23ffffff'/%3E%3Crect x='21.3' y='13.5' width='5.4' height='16' rx='2.7' fill='%23D82951'/%3E%3Ccircle cx='24' cy='34.2' r='2.9' fill='%23D82951'/%3E%3Ccircle cx='22.9' cy='33.2' r='0.9' fill='%23ffffff'/%3E%3C/svg%3E");
}

.seop-dg-cue--imp .seop-dg-cue__text,
.seop-dg-cue--imp .seop-dg-cue__text strong {
  color: #ffffff;
}

.seop-dg-cue--imp a {
  color: #ffffff;
}

.seop-dg-cue--imp a:hover {
  color: #FBE9ED;
}

/* Pojistka proti odsazeni odstavcu ze sablony */
.seop-dg-cue .seop-dg-cue__text,
.article-detail .seop-dg-cue .seop-dg-cue__text,
.category-perex .seop-dg-cue .seop-dg-cue__text,
.content-inner .seop-dg-cue .seop-dg-cue__text,
.p-detail-inner .seop-dg-cue .seop-dg-cue__text {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 480px) {
  .seop-dg-cue {
    padding: 13px 14px;
    gap: 10px;
    border-radius: 8px;
  }
  .seop-dg-cue__icon {
    width: 26px;
    height: 26px;
  }
}


/* =========================================================
   3. TRUST BOX
   Eyebrow s linkou, nadpis pres celou sirku, kratka cervena
   linka, vlevo nadpis a perex, vpravo jednoradkova USP,
   ktera zacinaji na urovni nadpisu.
   Fajfky pod perexem jsou volitelne, viz poznamka u
   .seop-dg-trust__checks.
   Dva sloupce se zapnou podle sirky samotneho bloku
   (container query, zlom 560px), ne podle sirky okna, takze
   to funguje i v uzsim obsahovem sloupci kategorie.
   V HTML je blok s textem pred blokem USP, coz odpovida
   poradi v uzkem i v sirokem bloku.
   Pozor: uvnitr .seop-dg-trust musi byt obal
   .seop-dg-trust__grid.
   ========================================================= */

.seop-dg-trust {
  box-sizing: border-box;
  container-type: inline-size;
  container-name: seopdgtrust;
  margin: 40px 0;
  padding: 28px 30px;
  border-radius: 10px;
  background: #FBE9ED;
  color: #1D1D1D;
  font-family: inherit;
  font-size: 14pt;
}

.seop-dg-trust * {
  box-sizing: border-box;
}

/* Vychozi stav, jeden sloupec */
.seop-dg-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 30px;
  row-gap: 0;
}

/* Dva sloupce, jakmile ma blok dost mista, bez ohledu na sirku okna */
@container seopdgtrust (min-width: 560px) {
  .seop-dg-trust__grid {
    grid-template-columns: 1.05fr 1fr;
  }
  .seop-dg-trust__head {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .seop-dg-trust__titlewrap {
    grid-column: 1;
    grid-row: 2;
  }
  .seop-dg-trust__text {
    grid-column: 1;
    grid-row: 3;
  }
  .seop-dg-trust__usp {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-top: 0;
  }
}

/* Hlavicka s eyebrow a linkou */
.seop-dg-trust__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

.seop-dg-trust .seop-dg-trust__eyebrow {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 0.75em !important;
  font-weight: 700 !important;
  letter-spacing: 1.3px;
  line-height: 1.3 !important;
  color: #D82951 !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.seop-dg-trust__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #F1C9D4;
}

/* Nadpis pres celou sirku, bez zalomeni az v sirsim bloku */
.seop-dg-trust__titlewrap {
  grid-column: 1 / -1;
}

.seop-dg-trust .seop-dg-trust__title {
  display: block;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 18pt !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #001435 !important;
  text-transform: none !important;
  white-space: normal;
}

.seop-dg-trust__titlewrap::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 0 20px;
  background: #D82951;
}

/* Perex a fajfky, v sirsim bloku vlevo */
.seop-dg-trust__text {
  min-width: 0;
}

.seop-dg-trust .seop-dg-trust__perex {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 1em;
  line-height: 1.65;
  color: #4a4f5a;
}

/* Volitelne fajfky pod perexem.
   Ve vychozi podobe se nepouzivaji, protoze by opakovaly to
   same co USP vpravo. Maji smysl jen tehdy, kdyz vlevo nesou
   jiny typ informace, treba podminky velkoobchodniho odberu. */
.seop-dg-trust .seop-dg-trust__checks {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.seop-dg-trust .seop-dg-trust__checks li {
  position: relative;
  margin: 0 0 9px !important;
  padding: 0 0 0 24px !important;
  background: none !important;
  font-size: 0.95em;
  line-height: 1.5;
  color: #1D1D1D;
}

.seop-dg-trust .seop-dg-trust__checks li:last-child {
  margin-bottom: 0 !important;
}

.seop-dg-trust .seop-dg-trust__checks li::marker {
  content: none;
}

.seop-dg-trust .seop-dg-trust__checks li::before {
  content: "\2714";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.5;
  color: #D82951;
}

/* USP, v sirsim bloku vpravo */
.seop-dg-trust__usp {
  min-width: 0;
  margin-top: 20px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seop-dg-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seop-dg-trust__icon {
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.seop-dg-trust .seop-dg-trust__label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.4;
  color: #001435;
}

/* Text a odkazy */
.seop-dg-trust strong {
  display: inline;
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
}

.seop-dg-trust a {
  color: #D82951 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seop-dg-trust a:hover {
  color: #001435 !important;
}

/* Ikonova sada ve stylu ikon kategorii: tenky cerveny obrys,
   ruzova vypln, bile detaily. Staci prohodit modifikator. */
.seop-dg-trust__icon--percent {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M26 6 H40 a2 2 0 0 1 2 2 v14 L24 40 L8 24 Z'/><circle cx='34' cy='14' r='3' fill='%23ffffff'/><path d='M17 24 l6 6 M23 21 l6 6' stroke-width='1.6'/></svg>");
}

.seop-dg-trust__icon--clock {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='24' cy='25' r='16' fill='%23FBE9ED'/><polyline points='24,15 24,25 31,29' stroke-width='2.2'/><line x1='24' y1='6' x2='24' y2='9'/><line x1='18' y1='7' x2='30' y2='7'/></svg>");
}

.seop-dg-trust__icon--shield {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M24 6 L39 12 v11 c0 10 -7 16 -15 19 -8 -3 -15 -9 -15 -19 V12 Z'/><polyline points='17,24 22,29 32,18' stroke-width='2.4'/></svg>");
}

.seop-dg-trust__icon--star {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><polygon fill='%23FBE9ED' points='24,7 29.2,17.8 41,19.4 32.4,27.6 34.5,39.3 24,33.7 13.5,39.3 15.5,27.6 7,19.4 18.8,17.8'/></svg>");
}

.seop-dg-trust__icon--truck {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='15' width='24' height='17' rx='2' fill='%23FBE9ED'/><path fill='%23ffffff' d='M29 20 h7 l6 6 v6 h-13 Z'/><circle cx='14' cy='34' r='3.4' fill='%23ffffff'/><circle cx='35' cy='34' r='3.4' fill='%23ffffff'/></svg>");
}

.seop-dg-trust__icon--grid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='14' height='14' rx='2.5' fill='%23FBE9ED'/><rect x='26' y='8' width='14' height='14' rx='2.5' fill='%23ffffff'/><rect x='8' y='26' width='14' height='14' rx='2.5' fill='%23ffffff'/><rect x='26' y='26' width='14' height='14' rx='2.5' fill='%23FBE9ED'/></svg>");
}

.seop-dg-trust__icon--chat {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M10 12 h28 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 H22 l-8 6 v-6 h-4 a3 3 0 0 1 -3 -3 V15 a3 3 0 0 1 3 -3 Z'/><line x1='15' y1='19' x2='34' y2='19' stroke-width='1.7'/><line x1='15' y1='25' x2='28' y2='25' stroke-width='1.7'/></svg>");
}

.seop-dg-trust__icon--box {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M24 7 L40 15 L24 23 L8 15 Z'/><path fill='%23ffffff' d='M8 15 v17 l16 8 V23 Z'/><path fill='%23FBE9ED' d='M40 15 v17 l-16 8 V23 Z'/></svg>");
}

.seop-dg-trust__icon--drop {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M24 6 C24 6 35 19 35 27 A11 11 0 0 1 13 27 C13 19 24 6 24 6 Z'/><path d='M19 28 a5 5 0 0 0 5 5' stroke-width='1.7'/></svg>");
}

.seop-dg-trust__icon--heart {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path fill='%23FBE9ED' d='M24 40 C10 30 6 24 6 17.5 A8 8 0 0 1 24 13 A8 8 0 0 1 42 17.5 C42 24 38 30 24 40 Z'/></svg>");
}

.seop-dg-trust__icon--gift {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D82951' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='20' width='32' height='19' rx='2.5' fill='%23FBE9ED'/><rect x='6' y='14' width='36' height='7' rx='2' fill='%23ffffff'/><line x1='24' y1='21' x2='24' y2='39'/><path d='M24 14 C24 8 18 6 16.5 10.5 C15.5 14 20 14 24 14 Z' fill='%23ffffff'/><path d='M24 14 C24 8 30 6 31.5 10.5 C32.5 14 28 14 24 14 Z' fill='%23ffffff'/></svg>");
}

/* Pojistka proti odsazeni odstavcu ze sablony */
.seop-dg-trust .seop-dg-trust__eyebrow,
.seop-dg-trust .seop-dg-trust__perex,
.article-detail .seop-dg-trust .seop-dg-trust__eyebrow,
.article-detail .seop-dg-trust .seop-dg-trust__perex,
.category-perex .seop-dg-trust .seop-dg-trust__eyebrow,
.category-perex .seop-dg-trust .seop-dg-trust__perex,
.content-inner .seop-dg-trust .seop-dg-trust__eyebrow,
.content-inner .seop-dg-trust .seop-dg-trust__perex,
.p-detail-inner .seop-dg-trust .seop-dg-trust__eyebrow,
.p-detail-inner .seop-dg-trust .seop-dg-trust__perex {
  padding: 0 !important;
}

/* Uzsi blok, mensi padding a zalomeni eyebrow */
@container seopdgtrust (max-width: 559px) {
  .seop-dg-trust__titlewrap::after {
    margin-bottom: 16px;
  }
  .seop-dg-trust .seop-dg-trust__eyebrow {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .seop-dg-trust {
    padding: 24px 22px;
  }
  .seop-dg-trust .seop-dg-trust__title {
    font-size: 16pt !important;
  }
}

@media (max-width: 480px) {
  .seop-dg-trust {
    padding: 22px 18px;
    border-radius: 8px;
  }
  .seop-dg-trust .seop-dg-trust__title {
    font-size: 15pt !important;
  }
  .seop-dg-trust__icon {
    width: 40px;
    height: 40px;
    background-size: 22px 22px;
  }
}


/* =========================================================
   4. PRUVODCE VYBEREM, bez JavaScriptu
   Viditelny je nadpis, perex, rychly prehled a tlacitko.
   Kroky jsou sbalene, rozbaluje je skryty checkbox.
   Pozor: id checkboxu musi byt na strance unikatni.
   ========================================================= */

.seop-dg-guide,
.article-detail .seop-dg-guide,
.category-perex .seop-dg-guide,
.content-inner .seop-dg-guide,
.p-detail-inner .seop-dg-guide {
  display: block;
  width: 100%;
  margin: 40px 0;
  padding: 0;
  box-sizing: border-box;
  color: #1D1D1D;
  font-family: inherit;
  font-size: 14pt;
  line-height: 1.6;
}

.seop-dg-guide * {
  box-sizing: border-box;
  font-family: inherit;
}

/* Obal */
.seop-dg-guide__intro,
.article-detail .seop-dg-guide__intro,
.category-perex .seop-dg-guide__intro,
.content-inner .seop-dg-guide__intro,
.p-detail-inner .seop-dg-guide__intro {
  display: block;
  margin: 0;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid #F1D5DC;
  border-radius: 10px;
}

/* Nadpis s kratkou cervenou linkou */
.seop-dg-guide .seop-dg-guide__title,
.article-detail .seop-dg-guide .seop-dg-guide__title,
.category-perex .seop-dg-guide .seop-dg-guide__title,
.content-inner .seop-dg-guide .seop-dg-guide__title,
.p-detail-inner .seop-dg-guide .seop-dg-guide__title {
  display: block;
  margin: 0 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #001435 !important;
  font-size: 19pt !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.seop-dg-guide .seop-dg-guide__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 11px;
  background: #D82951;
}

.seop-dg-guide .seop-dg-guide__perex,
.article-detail .seop-dg-guide .seop-dg-guide__perex,
.category-perex .seop-dg-guide .seop-dg-guide__perex,
.content-inner .seop-dg-guide .seop-dg-guide__perex,
.p-detail-inner .seop-dg-guide .seop-dg-guide__perex {
  display: block;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: none !important;
  color: #4a4f5a;
  font-size: inherit;
  line-height: 1.6;
}

/* Rychly prehled */
.seop-dg-guide__summaryblock {
  padding: 18px 0;
  border-top: 1px solid #E7E7EA;
  border-bottom: 1px solid #E7E7EA;
}

.seop-dg-guide .seop-dg-guide__label {
  display: block;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #D82951 !important;
  font-size: 0.75em !important;
  font-weight: 700 !important;
  letter-spacing: 1.3px;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

/* Seznam s cervenou teckou */
.seop-dg-guide .seop-dg-guide-list,
.article-detail .seop-dg-guide .seop-dg-guide-list,
.category-perex .seop-dg-guide .seop-dg-guide-list,
.content-inner .seop-dg-guide .seop-dg-guide-list,
.p-detail-inner .seop-dg-guide .seop-dg-guide-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.seop-dg-guide .seop-dg-guide-list li {
  position: relative;
  margin: 0 0 7px !important;
  padding: 0 0 0 18px !important;
  background: none !important;
  color: #1D1D1D;
  font-size: inherit;
  line-height: 1.6;
}

.seop-dg-guide .seop-dg-guide-list li:last-child {
  margin-bottom: 0 !important;
}

.seop-dg-guide .seop-dg-guide-list li::marker {
  content: none;
}

.seop-dg-guide .seop-dg-guide-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #D82951;
}

/* Skryty prepinac. Sablona Shoptetu si u checkboxu kresli
   vlastni ctverecek, proto je vse pretlaceno pres !important. */
.seop-dg-guide__state,
.article-detail .seop-dg-guide__state,
.category-perex .seop-dg-guide__state,
.content-inner .seop-dg-guide__state,
.p-detail-inner .seop-dg-guide__state {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.seop-dg-guide__state::before,
.seop-dg-guide__state::after {
  content: none !important;
  display: none !important;
}

/* Tlacitko Zobrazit */
.seop-dg-guide__summary,
.article-detail .seop-dg-guide__summary,
.category-perex .seop-dg-guide__summary,
.content-inner .seop-dg-guide__summary,
.p-detail-inner .seop-dg-guide__summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 18px 0 0;
  padding: 10px 42px 10px 16px;
  border: 1px solid #D82951;
  border-radius: 8px;
  background: #D82951;
  color: #FFFFFF !important;
  cursor: pointer;
  user-select: none;
  font-size: 1em !important;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.seop-dg-guide__summary:hover {
  background: #001435;
  border-color: #001435;
}

.seop-dg-guide__summary::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  background: none !important;
  border: 0 !important;
  border-right: 2px solid #FFFFFF !important;
  border-bottom: 2px solid #FFFFFF !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
}

/* Neutralizace falesneho ctverecku, ktery sablona kresli
   k labelu u checkboxu */
.seop-dg-guide__summary::before,
.seop-dg-guide__collapse::before,
.article-detail .seop-dg-guide__summary::before,
.article-detail .seop-dg-guide__collapse::before,
.category-perex .seop-dg-guide__summary::before,
.category-perex .seop-dg-guide__collapse::before,
.content-inner .seop-dg-guide__summary::before,
.content-inner .seop-dg-guide__collapse::before,
.p-detail-inner .seop-dg-guide__summary::before,
.p-detail-inner .seop-dg-guide__collapse::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.seop-dg-guide__state:focus-visible ~ .seop-dg-guide__summary {
  outline: 2px solid #D82951;
  outline-offset: 2px;
}

/* Sbaleny obsah */
.seop-dg-guide__content {
  display: none;
  margin: 0;
  padding: 0;
}

.seop-dg-guide__state:checked ~ .seop-dg-guide__content {
  display: block;
}

.seop-dg-guide__state:checked ~ .seop-dg-guide__summary {
  display: none;
}

/* Tlacitko Sbalit */
.seop-dg-guide__collapse,
.article-detail .seop-dg-guide__collapse,
.category-perex .seop-dg-guide__collapse,
.content-inner .seop-dg-guide__collapse,
.p-detail-inner .seop-dg-guide__collapse {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 9px 16px;
  border: 1px solid #D82951;
  border-radius: 8px;
  background: #FFFFFF;
  color: #D82951;
  cursor: pointer;
  user-select: none;
  font-size: 1em !important;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.seop-dg-guide__collapse:hover {
  background: #D82951;
  color: #FFFFFF;
}

.seop-dg-guide__collapse::after {
  content: "";
  order: -1;
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
}

/* Velikost pisma tlacitek. Sablona Shoptetu zmensuje label
   uvnitr obsahu, proto vyssi specificita a pevna hodnota. */
.seop-dg-guide .seop-dg-guide__summary,
.seop-dg-guide .seop-dg-guide__collapse,
.article-detail .seop-dg-guide .seop-dg-guide__summary,
.article-detail .seop-dg-guide .seop-dg-guide__collapse,
.category-perex .seop-dg-guide .seop-dg-guide__summary,
.category-perex .seop-dg-guide .seop-dg-guide__collapse,
.content-inner .seop-dg-guide .seop-dg-guide__summary,
.content-inner .seop-dg-guide .seop-dg-guide__collapse,
.p-detail-inner .seop-dg-guide .seop-dg-guide__summary,
.p-detail-inner .seop-dg-guide .seop-dg-guide__collapse {
  font-size: 14pt !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Kroky */
.seop-dg-guide-step {
  display: block;
  margin: 0;
  padding: 18px 0 0;
}

.seop-dg-guide .seop-dg-guide-step__title,
.article-detail .seop-dg-guide .seop-dg-guide-step__title,
.category-perex .seop-dg-guide .seop-dg-guide-step__title,
.content-inner .seop-dg-guide .seop-dg-guide-step__title,
.p-detail-inner .seop-dg-guide .seop-dg-guide-step__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #001435 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1.45;
  text-transform: none !important;
}

.seop-dg-guide-step__badge {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: #D82951;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1;
  font-feature-settings: "lnum" 1;
}

.seop-dg-guide .seop-dg-guide-step__text {
  display: block;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: none !important;
  color: #4a4f5a;
  font-size: inherit;
  line-height: 1.6;
}

.seop-dg-guide .seop-dg-guide-step__text:last-child {
  margin-bottom: 0 !important;
}

/* Tabulka */
.seop-dg-guide-table-wrap {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  border: 1px solid #E7E7EA;
  border-radius: 10px;
  background: #FFFFFF;
}

.seop-dg-guide-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  border-spacing: 0;
  background: #FFFFFF;
  color: #1D1D1D;
  font-size: 0.9em;
  line-height: 1.5;
}

.seop-dg-guide-table th,
.seop-dg-guide-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #E7E7EA;
  text-align: left;
  vertical-align: top;
  font-size: inherit;
  line-height: 1.5;
}

.seop-dg-guide-table th {
  background: #FBE9ED;
  color: #001435;
  font-weight: 700;
}

.seop-dg-guide-table tr:last-child td {
  border-bottom: 0;
}

/* Porovnani */
.seop-dg-guide-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.seop-dg-guide-card {
  display: block;
  margin: 0;
  padding: 16px;
  border: 1px solid #E7E7EA;
  border-radius: 10px;
  background: #FFFFFF;
}

.seop-dg-guide-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.seop-dg-guide .seop-dg-guide-card__title {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #001435;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.4;
}

.seop-dg-guide-card__pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #F6F6F6;
  border: 1px solid #E7E7EA;
  color: #3C3F44;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Seznamy vyhod a limitu */
.seop-dg-guide .seop-dg-guide-checklist,
.article-detail .seop-dg-guide .seop-dg-guide-checklist,
.category-perex .seop-dg-guide .seop-dg-guide-checklist,
.content-inner .seop-dg-guide .seop-dg-guide-checklist,
.p-detail-inner .seop-dg-guide .seop-dg-guide-checklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 0.9em;
}

.seop-dg-guide .seop-dg-guide-checklist li {
  position: relative;
  margin: 0 0 7px !important;
  padding: 0 0 0 26px !important;
  background: none !important;
  color: #1D1D1D;
  line-height: 1.55;
}

.seop-dg-guide .seop-dg-guide-checklist li:last-child {
  margin-bottom: 0 !important;
}

.seop-dg-guide .seop-dg-guide-checklist li::marker {
  content: none;
}

.seop-dg-guide .seop-dg-guide-checklist--plus li::before {
  content: "\2714";
  position: absolute;
  top: 0;
  left: 0;
  color: #D82951;
  font-weight: 700;
  line-height: 1.55;
}

.seop-dg-guide .seop-dg-guide-checklist--minus li::before {
  content: "\2715";
  position: absolute;
  top: 0;
  left: 0;
  color: #9aa0a6;
  font-weight: 700;
  line-height: 1.55;
}

.seop-dg-guide .seop-dg-guide-checklist--plus + .seop-dg-guide-checklist--minus {
  margin-top: 9px !important;
}

/* Odkazy a tucne */
.seop-dg-guide strong {
  display: inline !important;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}

.seop-dg-guide a {
  color: #D82951;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700;
}

.seop-dg-guide a:hover {
  color: #001435;
}

@media (max-width: 768px) {
  .seop-dg-guide__intro {
    padding: 20px;
  }
  .seop-dg-guide-compare {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .seop-dg-guide {
    margin: 18px 0;
  }
  .seop-dg-guide__intro {
    padding: 16px;
    border-radius: 8px;
  }
  .seop-dg-guide .seop-dg-guide__title {
    font-size: 16pt !important;
  }
  .seop-dg-guide__summary {
    width: 100%;
    justify-content: flex-start;
  }
  .seop-dg-guide-step {
    padding-top: 16px;
  }
  .seop-dg-guide-card {
    padding: 14px;
  }
  .seop-dg-guide-card__top {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   5. FAQ
   Sbalovaci otazky bez JavaScriptu, rozbaluje skryty
   checkbox. Otazky jsou v <p>, ne v nadpisech, aby FAQ
   nezasahovalo do struktury H2 a H3 v popisu kategorie.
   Pozor: id checkboxu musi byt na strance unikatni.
   ========================================================= */

.seop-dg-faq,
.article-detail .seop-dg-faq,
.category-perex .seop-dg-faq,
.content-inner .seop-dg-faq,
.p-detail-inner .seop-dg-faq {
  margin: 40px 0;
  font-family: inherit;
  font-size: 14pt;
}

.seop-dg-faq * {
  box-sizing: border-box;
}

/* Nadpis s kratkou cervenou linkou */
.seop-dg-faq .seop-dg-faq__title,
.article-detail .seop-dg-faq .seop-dg-faq__title,
.category-perex .seop-dg-faq .seop-dg-faq__title,
.content-inner .seop-dg-faq .seop-dg-faq__title,
.p-detail-inner .seop-dg-faq .seop-dg-faq__title {
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #001435 !important;
  font-size: 19pt !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.seop-dg-faq .seop-dg-faq__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 11px;
  background: #D82951;
}

.seop-dg-faq__list {
  margin-top: 18px;
}

.seop-dg-faq__item {
  border-bottom: 1px solid #E8E8E8;
}

.seop-dg-faq__item:first-child {
  border-top: 1px solid #E8E8E8;
}

/* Skryty prepinac, stejna pojistka jako u pruvodce */
.seop-dg-faq__state,
.article-detail .seop-dg-faq__state,
.category-perex .seop-dg-faq__state,
.content-inner .seop-dg-faq__state,
.p-detail-inner .seop-dg-faq__state {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.seop-dg-faq__state::before,
.seop-dg-faq__state::after {
  content: none !important;
  display: none !important;
}

/* Obal otazky, aby sablona neprebila velikost pisma */
.seop-dg-faq .seop-dg-faq__qhead,
.article-detail .seop-dg-faq .seop-dg-faq__qhead,
.category-perex .seop-dg-faq .seop-dg-faq__qhead,
.content-inner .seop-dg-faq .seop-dg-faq__qhead,
.p-detail-inner .seop-dg-faq .seop-dg-faq__qhead {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
}

/* Otazka s otaznikem v ruzovem kolecku */
.seop-dg-faq__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 34px 16px 0;
  cursor: pointer;
  user-select: none;
  color: #001435;
  font-weight: 700;
  line-height: 1.45;
  transition: color 0.15s ease;
}

.seop-dg-faq__mark {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #FBE9ED;
  color: #D82951;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.seop-dg-faq__qtext {
  flex: 1 1 auto;
}

.seop-dg-faq__q:hover {
  color: #D82951;
}

.seop-dg-faq__q::before,
.article-detail .seop-dg-faq__q::before,
.category-perex .seop-dg-faq__q::before,
.content-inner .seop-dg-faq__q::before,
.p-detail-inner .seop-dg-faq__q::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
}

.seop-dg-faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid #D82951;
  border-bottom: 2px solid #D82951;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin-top 0.2s ease;
}

.seop-dg-faq__state:checked ~ .seop-dg-faq__qhead .seop-dg-faq__q {
  color: #D82951;
}

.seop-dg-faq__state:checked ~ .seop-dg-faq__qhead .seop-dg-faq__q::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.seop-dg-faq__state:focus-visible ~ .seop-dg-faq__qhead .seop-dg-faq__q {
  outline: 2px solid #D82951;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Odpoved, odsazena pod text otazky */
.seop-dg-faq__a {
  display: none;
  margin: 0;
  padding: 0 34px 18px 40px;
  color: #4a4f5a;
}

.seop-dg-faq__state:checked ~ .seop-dg-faq__a {
  display: block;
}

.seop-dg-faq .seop-dg-faq__a p,
.article-detail .seop-dg-faq .seop-dg-faq__a p,
.category-perex .seop-dg-faq .seop-dg-faq__a p,
.content-inner .seop-dg-faq .seop-dg-faq__a p,
.p-detail-inner .seop-dg-faq .seop-dg-faq__a p {
  margin: 0 !important;
  padding: 0 !important;
}

.seop-dg-faq .seop-dg-faq__a p + p {
  margin-top: 10px !important;
}

.seop-dg-faq .seop-dg-faq__a strong {
  display: inline;
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
}

.seop-dg-faq .seop-dg-faq__a a {
  color: #D82951;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seop-dg-faq .seop-dg-faq__a a:hover {
  color: #001435;
}

@media (max-width: 480px) {
  .seop-dg-faq .seop-dg-faq__title {
    font-size: 16pt !important;
  }
  .seop-dg-faq__q {
    padding: 14px 30px 14px 0;
  }
  .seop-dg-faq__a {
    padding: 0 0 16px 40px;
  }
}


/* =========================================================
   6. MINI BUTTONY, rozcestnik na souvisejici kategorie
   Pilulkove odkazy, sirka podle delky nazvu, radek se
   zalamuje sam. Sipka je z ramecku, barvi se s textem.
   Pouziva se na konci popisu kategorie nebo clanku.
   ========================================================= */

.seop-dg-btns,
.article-detail .seop-dg-btns,
.category-perex .seop-dg-btns,
.content-inner .seop-dg-btns,
.p-detail-inner .seop-dg-btns {
  margin: 40px 0;
  font-family: inherit;
  font-size: 14pt;
}

.seop-dg-btns * {
  box-sizing: border-box;
}

/* Nadpis s kratkou cervenou linkou */
.seop-dg-btns .seop-dg-btns__title,
.article-detail .seop-dg-btns .seop-dg-btns__title,
.category-perex .seop-dg-btns .seop-dg-btns__title,
.content-inner .seop-dg-btns .seop-dg-btns__title,
.p-detail-inner .seop-dg-btns .seop-dg-btns__title {
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #001435 !important;
  font-size: 19pt !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.seop-dg-btns .seop-dg-btns__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 11px;
  background: #D82951;
}

/* Sousedici komponenty nezdvojuji mezeru */
.seop-dg-guide + .seop-dg-faq,
.seop-dg-faq + .seop-dg-btns,
.seop-dg-btns + .seop-dg-trust,
.seop-dg-faq + .seop-dg-trust,
.seop-dg-guide + .seop-dg-btns {
  margin-top: 48px;
}

.seop-dg-btns__row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.seop-dg-btn,
.article-detail .seop-dg-btn,
.category-perex .seop-dg-btn,
.content-inner .seop-dg-btn,
.p-detail-inner .seop-dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  background: #F6F6F6;
  color: #001435 !important;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.seop-dg-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border-right: 2px solid #D82951;
  border-bottom: 2px solid #D82951;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.seop-dg-btn::before,
.article-detail .seop-dg-btn::before,
.category-perex .seop-dg-btn::before,
.content-inner .seop-dg-btn::before,
.p-detail-inner .seop-dg-btn::before {
  content: none !important;
  display: none !important;
}

.seop-dg-btn:hover {
  background: #FBE9ED;
  border-color: #F3C7D2;
  color: #D82951 !important;
}

.seop-dg-btn:hover::after {
  transform: rotate(-45deg) translate(2px, 2px);
}

.seop-dg-btn:focus-visible {
  outline: 2px solid #D82951;
  outline-offset: 2px;
}

/* Varianta pro clanky, kde ma rozcestnik vic zaujmout */
.seop-dg-btn--soft {
  background: #FBE9ED;
  border-color: #F3C7D2;
  color: #D82951 !important;
}

.seop-dg-btn--soft:hover {
  background: #D82951;
  border-color: #D82951;
  color: #FFFFFF !important;
}

@media (max-width: 480px) {
  .seop-dg-btns .seop-dg-btns__title {
    font-size: 16pt !important;
  }
  .seop-dg-btns__row {
    gap: 8px;
  }
  .seop-dg-btn {
    font-size: 0.82em;
  }
}
