/* =========================
   MyPetArt – úpravy detailu
   ========================= */

/* Tučné názvy variant */
.p-variants-block .variant-label {
    font-weight: 700 !important;
    font-size: 18px !important;
    font-family: inherit !important;
}

/* Skrýt názvy rámů pod obrázky */
#parameter-id-18 .parameter-value {
    display: none !important;
}

/* Větší náhledy rámů */
#parameter-id-18 .advanced-parameter-inner {
    width: 64px !important;
    height: 64px !important;
}

/* Obrázky rámů přes celou plochu náhledu */
#parameter-id-18 .advanced-parameter-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Mezery mezi jednotlivými rámy */
#parameter-id-18 .advanced-parameter {
    margin-right: 18px !important;
}

/* =========================
   Větší logo
   ========================= */

.site-name img {
    max-height: 100px !important;
    width: auto !important;
}

/* USP na mobilu: 2 × 2, menší ikony a text */
@media (max-width: 767px) {
  .benefitBanner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .benefitBanner .benefitBanner__item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 6px !important;
    text-align: center;
  }

  .benefitBanner .benefitBanner__picture {
    margin: 0 0 10px !important;
    text-align: center;
  }

  .benefitBanner .benefitBanner__picture img {
    max-width: 75% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  .benefitBanner .benefitBanner__content {
    width: 100%;
    padding: 0 !important;
    text-align: center;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .benefitBanner .benefitBanner__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}

body.type-product .mpa-step-heading {
  position:relative !important;
  display:block !important;
  box-sizing:border-box;
  min-height:28px;
  padding-left:38px !important;
  font-family:inherit !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  color:#252525 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}
body.type-product .mpa-step-heading::before {
  content:attr(data-mpa-step);
  position:absolute; top:0; left:0;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:50%; background:#e5cba5; color:#252525;
  font:700 16px/1 Arial,sans-serif;
}

/* ==========================================================
   MYPETART – JAK TO FUNGUJE: KROKY 1, 2, 3

   Určeno pro HTML sekci:
   <section id="mpa-hp-how">

   Všechny styly jsou omezené na tuto sekci.
   Neovlivňují FAQ ani Pobo bloky na ostatních stránkách.
   ========================================================== */


/* ----------------------------------------------------------
   1. CELÁ SEKCE
   Béžové pozadí, vnitřní odsazení a základní typografie.
   Šířka se přizpůsobí obsahovému boxu Shoptetu.
   ---------------------------------------------------------- */

#mpa-hp-how {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 48px auto 64px;
  padding: 48px 32px;

  background: #faf6ef;
  border-radius: 4px;

  color: #282824;
  font-family: "Exo 2", sans-serif;
  text-align: center;
}

/* Započítání paddingu a rámečků do rozměrů prvků. */
#mpa-hp-how *,
#mpa-hp-how *::before,
#mpa-hp-how *::after {
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   2. ÚVODNÍ TEXTY
   Omezení šířky pro dobrou čitelnost a vystředění.
   ---------------------------------------------------------- */

#mpa-hp-how .mpa-how-heading {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* Malý text: „Z fotografie na váš oblíbený obraz“. */
#mpa-hp-how .mpa-how-eyebrow {
  margin: 0 0 12px;
  padding: 0;

  color: #87663d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Hlavní nadpis sekce. */
#mpa-hp-how #mpa-hp-how-title {
  display: block;
  margin: 0 0 16px;
  padding: 0;

  border: 0;
  background: none;

  color: #282824;
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: center;
}

/* Odstranění případných čar či dekorací přidaných šablonou. */
#mpa-hp-how #mpa-hp-how-title::before,
#mpa-hp-how #mpa-hp-how-title::after {
  display: none;
  content: none;
}

/* Podnadpis: „K originální vzpomínce stačí…“. */
#mpa-hp-how .mpa-how-intro {
  margin: 0;
  padding: 0;

  color: #64615b;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}


/* ----------------------------------------------------------
   3. ROZLOŽENÍ KROKŮ
   Na desktopu tři stejně široké sloupce.
   minmax(0, 1fr) brání roztahování sloupců obsahem.
   ---------------------------------------------------------- */

#mpa-hp-how .mpa-how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 32px;

  margin: 40px 0 0;
  padding: 0;
}

/* Samostatný krok: ikona, nadpis a popis. */
#mpa-hp-how .mpa-how-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}


/* ----------------------------------------------------------
   4. IKONY
   Béžový kruh o velikosti 80 × 80 px.
   Ikona je vystředěná vodorovně i svisle.
   ---------------------------------------------------------- */

#mpa-hp-how .mpa-how-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  padding: 0;

  background: #f4e6cf;
  border: 0;
  border-radius: 50%;
}

/* Obrázek ikony: zachování proporcí bez deformace.
   Barva ikony zůstává součástí původního PNG obrázku. */
#mpa-hp-how .mpa-how-icon img {
  display: block;

  width: 40px;
  height: 40px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}


/* ----------------------------------------------------------
   5. NADPISY A POPISY KROKŮ
   ---------------------------------------------------------- */

#mpa-hp-how .mpa-how-step h3 {
  display: block;
  margin: 0 0 12px;
  padding: 0;

  border: 0;
  background: none;

  color: #282824;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Odstranění případných dekorací nadpisů ze šablony. */
#mpa-hp-how .mpa-how-step h3::before,
#mpa-hp-how .mpa-how-step h3::after {
  display: none;
  content: none;
}

/* Omezená šířka popisu pro čitelné krátké řádky. */
#mpa-hp-how .mpa-how-step p {
  max-width: 290px;
  margin: 0 auto;
  padding: 0;

  color: #64615b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  overflow-wrap: break-word;
}


/* ----------------------------------------------------------
   6. TLAČÍTKO POD KROKY
   ---------------------------------------------------------- */

/* Odstup tlačítka od popisů kroků. */
#mpa-hp-how .mpa-how-action {
  margin: 34px 0 0;
  padding: 0;
  text-align: center;
}

/* Zlaté tlačítko s dostatečnou výškou pro ovládání prstem. */
#mpa-hp-how .mpa-how-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  min-height: 48px;
  padding: 13px 26px;

  border: 1px solid #eac48b;
  border-radius: 4px;
  background: #eac48b;

  color: #282824;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Zachování čitelné barvy i po návštěvě odkazu. */
#mpa-hp-how .mpa-how-button:visited {
  color: #282824;
}

/* Mírné ztmavení při najetí myší. */
#mpa-hp-how .mpa-how-button:hover {
  border-color: #dfb476;
  background: #dfb476;
  color: #282824;
  text-decoration: none;
}

/* Viditelné označení při ovládání klávesnicí. */
#mpa-hp-how .mpa-how-button:focus-visible {
  outline: 2px solid #87663d;
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   7. MOBILNÍ ZOBRAZENÍ
   Do šířky 767 px se kroky poskládají pod sebe.
   Zmenší se odsazení, nadpisy a kruhy pod ikonami.
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  #mpa-hp-how {
    margin: 32px auto 40px;
    padding: 32px 20px;
  }

  #mpa-hp-how .mpa-how-eyebrow {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  #mpa-hp-how #mpa-hp-how-title {
    font-size: 26px;
    letter-spacing: -0.3px;
  }

  #mpa-hp-how .mpa-how-intro {
    font-size: 15px;
  }

  /* Jeden sloupec místo tří. */
  #mpa-hp-how .mpa-how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 32px;
  }

  #mpa-hp-how .mpa-how-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }

  #mpa-hp-how .mpa-how-step h3 {
    margin-bottom: 8px;
    font-size: 19px;
  }

  #mpa-hp-how .mpa-how-action {
    margin-top: 28px;
  }
}


/* ----------------------------------------------------------
   8. PŘÍSTUPNOST
   Vypnutí přechodů pro uživatele, kteří omezují animace.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #mpa-hp-how .mpa-how-button {
    transition: none;
  }
  }

/* ==========================================================
   MyPetArt – homepage FAQ, verze 2
   Vzhled: béžová sekce, bílé otázky, tlačítka + / −.
   Vše je omezeno na #mpa-hp-faq; ostatní FAQ zůstává stejné.
   ========================================================== */

/* Celá sekce drží šířku obsahu homepage. */
#mpa-hp-faq {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 64px;
  padding: 44px 7%;
  border-radius: 12px;
  background: #faf5ed;
  color: #282824;
  font-family: "Exo 2", sans-serif;
}
#mpa-hp-faq *, #mpa-hp-faq *::before, #mpa-hp-faq *::after {
  box-sizing: border-box;
}

/* Úvod a nadpis bez původních dekorativních čar. */
#mpa-hp-faq .mpa-faq-heading { text-align: center; margin-bottom: 28px; }
#mpa-hp-faq .mpa-faq-eyebrow {
  margin: 0 0 10px;
  color: #87663d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
#mpa-hp-faq #mpa-hp-faq-title {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #282824;
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: center;
}
#mpa-hp-faq #mpa-hp-faq-title::before,
#mpa-hp-faq #mpa-hp-faq-title::after { display: none; content: none; }
#mpa-hp-faq .mpa-faq-intro {
  margin: 0;
  color: #64615b;
  font-size: 16px;
  line-height: 1.65;
}

/* Šířka seznamu a mezery mezi otázkami. */
#mpa-hp-faq .faq-wrapper { width: 100%; max-width: 850px; margin: 0 auto; padding: 0; }
#mpa-hp-faq .faq-wrapper .faq-item {
  position: relative;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Checkbox zůstává ovladatelný klávesnicí, ale vizuálně je skrytý. */
#mpa-hp-faq .faq-item > input[type="checkbox"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Klikací bílý řádek otázky. */
#mpa-hp-faq .faq-item > label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(75, 56, 36, 0.08);
  color: #282824;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
#mpa-hp-faq .faq-item > label > span {
  display: block; min-width: 0; margin: 0; padding: 0; overflow-wrap: break-word;
}

/* Odstranění šipek pluginu a vlastní znaménko v béžovém kruhu. */
#mpa-hp-faq .faq-item > label::before,
#mpa-hp-faq .faq-item > label > span::before,
#mpa-hp-faq .faq-item > label > span::after { display: none; content: none; }
#mpa-hp-faq .faq-item > label::after {
  content: "+";
  display: flex;
  position: static;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edddc3;
  color: #715737;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transform: none;
}
#mpa-hp-faq .faq-item > input:checked + label::after { content: "−"; transform: none; }
#mpa-hp-faq .faq-item > input:focus-visible + label {
  outline: 2px solid #87663d; outline-offset: 3px;
}

/* Odpověď se otevírá pomocí současného checkboxu. Bez limitu výšky. */
#mpa-hp-faq .faq-item > input ~ div {
  display: none;
  position: static;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 18px 20px 10px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #64615b;
  font-size: 15px;
  line-height: 1.7;
  opacity: 1;
  visibility: visible;
  transform: none;
}
#mpa-hp-faq .faq-item > input:checked ~ div { display: block; height: auto; max-height: none; }
#mpa-hp-faq .faq-item > input ~ div p { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; }
#mpa-hp-faq .faq-item > input ~ div p:last-child { margin-bottom: 0; }
#mpa-hp-faq .faq-item > input ~ div ul { margin: 0 0 12px; padding-left: 22px; }
#mpa-hp-faq .faq-item > input ~ div li { margin-bottom: 5px; }

/* Odkaz na samostatnou stránku všech otázek. */
#mpa-hp-faq .mpa-faq-action { margin-top: 26px; text-align: center; }
#mpa-hp-faq .mpa-faq-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  max-width: 100%;
  padding: 12px 24px;
  border: 1px solid #eac48b;
  border-radius: 24px;
  background: #eac48b;
  color: #282824;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
}
#mpa-hp-faq .mpa-faq-link:hover { background: #dfb476; border-color: #dfb476; color: #282824; }
#mpa-hp-faq .mpa-faq-link:focus-visible { outline: 2px solid #87663d; outline-offset: 4px; }

/* Mobil: kompaktnější odsazení, zachované pohodlné ovládání. */
@media (max-width: 767px) {
  #mpa-hp-faq { margin-bottom: 40px; padding: 30px 16px; }
  #mpa-hp-faq #mpa-hp-faq-title { font-size: 26px; }
  #mpa-hp-faq .mpa-faq-intro { font-size: 15px; }
  #mpa-hp-faq .faq-item > label { gap: 12px; padding: 15px 14px; font-size: 15px; }
  #mpa-hp-faq .faq-item > input ~ div { padding: 16px 14px 10px; }
}

/* ==========================================================
   FAQ – finální bílá varianta: úvod vlevo, otázky vpravo.
   Přepisuje starší béžový vzhled pouze v #mpa-hp-faq.
   ========================================================== */
#mpa-hp-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  align-items: start;
  gap: 24px 48px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 64px;
  padding: 32px 0 48px;
  background: #fff;
  border-radius: 0;
}
/* Úvod a jeho nadpis zarovnané doleva. */
#mpa-hp-faq .mpa-faq-heading { margin: 0; text-align: left; }
#mpa-hp-faq #mpa-hp-faq-title { text-align: left; }
/* Otázky v pravém sloupci. */
#mpa-hp-faq > .faq-wrapper {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: none;
  margin: 0;
}
/* Odkaz pod úvodem v levém sloupci. */
#mpa-hp-faq .mpa-faq-action { grid-column: 1; margin: 0; text-align: left; }
/* Jemná linka pod každou otázkou. */
#mpa-hp-faq .faq-wrapper .faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e8e3db;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Bílá varianta bez samostatných boxů. */
#mpa-hp-faq .faq-item > label {
  min-height: 72px;
  padding: 22px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Zlatohnědé +/− bez kruhu. */
#mpa-hp-faq .faq-item > label::after {
  flex: 0 0 24px;
  width: 24px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: #98764a;
  font-size: 24px;
}
/* Odpovědi zarovnané s otázkou. */
#mpa-hp-faq .faq-item > input ~ div { padding: 0 36px 24px 0; background: transparent; }
/* Odkaz se subtilním zlatým rámečkem. */
#mpa-hp-faq .mpa-faq-link {
  border: 1px solid #c8a46d;
  border-radius: 4px;
  background: #fff;
  color: #76552e;
}
#mpa-hp-faq .mpa-faq-link:hover { background: #faf6ef; color: #282824; }
/* Mobil: úvod, otázky a odkaz pod sebou. */
@media (max-width: 767px) {
  #mpa-hp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    margin-bottom: 40px;
  }
  #mpa-hp-faq > .faq-wrapper,
  #mpa-hp-faq .mpa-faq-action { grid-column: auto; grid-row: auto; }
  #mpa-hp-faq .faq-item > label { min-height: 68px; padding: 20px 0; }
}

/* Jak to funguje: menší mezera pod produkty a úvod na střed. */
#mpa-hp-how { margin-top: 16px; margin-left: auto; margin-right: auto; }
#mpa-hp-how .mpa-how-heading { margin-left: auto; margin-right: auto; text-align: center; }
#mpa-hp-how .mpa-how-eyebrow,
#mpa-hp-how #mpa-hp-how-title,
#mpa-hp-how .mpa-how-intro { text-align: center; }
@media (max-width: 767px) { #mpa-hp-how { margin-top: 12px; } }


/* MyPetArt: FAQ a Kontakt. Všechna pravidla pouze uvnitř #mpa-help. */
#mpa-help{--ink:#292b2c;--muted:#626866;--accent:#d1a86d;--cream:#f7f4ef;--line:#e9e3da;color:var(--ink);font:400 16px/1.75 "Open Sans",Arial,sans-serif;max-width:1160px;margin:0 auto;padding:16px 20px 64px}
#mpa-help,#mpa-help *{box-sizing:border-box}
#mpa-help h2,#mpa-help h3,#mpa-help summary{font-family:"Exo 2",Arial,sans-serif;color:var(--ink)}
#mpa-help h2,#mpa-help h3,#mpa-help p{padding:0;border:0}
#mpa-help h2:before,#mpa-help h2:after,#mpa-help h3:before,#mpa-help h3:after{content:none;display:none}
#mpa-help a{color:inherit;text-underline-offset:4px}
#mpa-help a:hover{color:#87663d}
#mpa-help a:focus-visible,#mpa-help summary:focus-visible{outline:2px solid #87663d;outline-offset:5px}
#mpa-help .mpa-help-hero{background:var(--cream);border-radius:24px;text-align:center;padding:46px 28px;margin-bottom:32px}
#mpa-help .mpa-help-eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#87663d;margin:0 0 12px}
#mpa-help .mpa-help-hero h2{font-size:clamp(30px,4.2vw,46px);font-weight:600;line-height:1.15;letter-spacing:-.025em;margin:0 0 18px}
#mpa-help .mpa-help-intro{max-width:580px;margin:0 auto;color:var(--muted)}
#mpa-help .mpa-help-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 0}
#mpa-help .mpa-help-topics a{font-size:13px;background:white;border:1px solid var(--line);border-radius:24px;padding:9px 15px;text-decoration:none}
#mpa-help .mpa-help-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:46px;align-items:start}
#mpa-help .mpa-help-group{scroll-margin-top:30px;margin:0 0 36px}
#mpa-help .mpa-help-group h2{font-size:26px;line-height:1.3;font-weight:600;margin:0 0 5px}
#mpa-help .mpa-help-subtitle{margin:0 0 16px;color:var(--muted);font-size:14px}
#mpa-help details{border:0;border-bottom:1px solid #e8e3db;border-radius:0;background:transparent;margin:0;box-shadow:none}
#mpa-help summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;list-style:none;cursor:pointer;padding:22px 0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:500;font-size:16px;line-height:1.5}
#mpa-help summary::-webkit-details-marker{display:none}
#mpa-help summary::after{content:"";display:block;flex:0 0 8px;width:8px;height:8px;margin:0 8px 4px 4px;background:none;color:#98764a;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:0;transform:rotate(45deg)}
#mpa-help details[open] summary::after{transform:rotate(225deg);margin-top:4px;margin-bottom:0}
#mpa-help details[open] summary{background:transparent}
#mpa-help .mpa-help-answer{padding:0 36px 24px 0;background:transparent;color:#64615b;font:400 15px/1.7 "Open Sans",Arial,sans-serif}
#mpa-help .mpa-help-answer p{margin:0 0 12px;font:inherit;color:inherit}#mpa-help .mpa-help-answer p:last-child{margin-bottom:0}
#mpa-help .mpa-help-answer a{font:inherit}
#mpa-help .mpa-help-side{position:sticky;top:24px;border-radius:18px;background:var(--cream);padding:24px}
#mpa-help .mpa-help-side h3{margin:0 0 12px;font-size:23px;line-height:1.3;font-weight:600}
#mpa-help .mpa-help-side p{margin:0 0 18px;font-size:14px;color:var(--muted)}
#mpa-help .mpa-help-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:26px;text-decoration:none;font-size:14px;font-weight:600;background:var(--accent);color:#292b2c;border:1px solid var(--accent)}
#mpa-help .mpa-help-button:hover{background:#e5c396;color:#292b2c}
#mpa-help .mpa-help-side .mpa-help-button{display:flex}
#mpa-help .mpa-help-phone{display:block;margin:18px 0 2px;font-weight:600;text-decoration:none;font-size:17px}
#mpa-help .mpa-help-hours{display:block;font-size:12px;color:var(--muted)}
#mpa-help .mpa-help-contact{scroll-margin-top:30px;background:var(--cream);border-radius:24px;padding:36px;margin-top:8px}
#mpa-help .mpa-help-contact h2{font-size:30px;font-weight:600;line-height:1.3;margin:0 0 12px}
#mpa-help .mpa-help-contact>p{max-width:650px;color:var(--muted);margin:0 0 24px}
#mpa-help .mpa-help-contacts{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:24px}
#mpa-help .mpa-help-contacts h3{font-size:18px;font-weight:600;margin:0 0 8px}
#mpa-help .mpa-help-contacts p{font-size:14px;color:var(--muted);margin:8px 0 0}
#mpa-help .mpa-help-email{font-size:20px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
#mpa-help .mpa-help-form-link{display:inline-block;font-size:14px;margin-top:14px}
@media(max-width:860px){#mpa-help .mpa-help-layout{grid-template-columns:1fr;gap:0}#mpa-help .mpa-help-side{display:none}}
@media(max-width:600px){#mpa-help{padding:12px 0 40px;font-size:15px}#mpa-help .mpa-help-hero{padding:32px 18px;margin-bottom:28px;border-radius:18px}#mpa-help .mpa-help-topics{gap:8px}#mpa-help .mpa-help-topics a{font-size:12px;padding:8px 12px}#mpa-help .mpa-help-group h2{font-size:23px}#mpa-help summary{min-height:68px;padding:20px 0;gap:12px;font-size:15px}#mpa-help .mpa-help-answer{padding:0 36px 24px 0}#mpa-help .mpa-help-contact{padding:26px 20px;border-radius:18px}#mpa-help .mpa-help-contact h2{font-size:26px}#mpa-help .mpa-help-contacts{grid-template-columns:1fr;gap:24px}}
@media(max-width:767px){#mpa-help summary{min-height:68px;padding:20px 0;font-size:15px}}
@media(prefers-reduced-motion:no-preference){#mpa-help .mpa-help-button,#mpa-help .mpa-help-topics a{transition:background-color .15s,color .15s}}

/* MyPetArt: odpovědi ve stávajícím FAQ na homepage a v detailech. */
#mpa-hp-faq .faq-item > input ~ div {
  font-family: "Open Sans", Arial, sans-serif;
}

#mpa-hp-faq .faq-item > input ~ div * {
  font-family: inherit;
}

/* MyPetArt: nadpis a tlačítka produktových karet pouze na homepage. */
body.type-index .welcome [data-testid="eshopHeader"] {
  text-align: center;
}

body.type-index .products[data-testid^="productGroup_"] .p-tools > a.btn.btn-primary {
  background-color: #eac48b;
  border-color: #eac48b;
  border-radius: 4px;
  color: #282824;
  font-family: "Exo 2", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
}

body.type-index .products[data-testid^="productGroup_"] .p-tools > a.btn.btn-primary:hover,
body.type-index .products[data-testid^="productGroup_"] .p-tools > a.btn.btn-primary:focus-visible {
  background-color: #dfb476;
  border-color: #dfb476;
  color: #282824;
}