/* ============================================================
   UTUKUTU – custom.css  ·  verze 10  ·  2026-09-22
   Úprava: horní lišta — odznak hodnocení + kontaktní panel
   Zdroj: zmeny/horni-lista/  ·  předchozí verze: custom.css?v=9
   Nasazení: /user/documents/upload/Assets/custom.v10.css
   ============================================================ */

/* ============================================================
   UTUKUTU – custom.css
   Přesunuto 1:1 z HTML editoru (Záhlaví) do externího souboru,
   aby se uvolnil limit znaků. Na konci nová sekce: kontaktní widget.
   Nasazení: /user/documents/upload/Assets/custom.css
   ============================================================ */

@font-face {
  font-family: 'archia';
  src: url('/user/documents/upload/Assets/archia/archia-regular-webfont.woff2') format('woff2'),
       url('/user/documents/upload/Assets/archia/archia-regular-webfont.woff') format('woff'),
       url('/user/documents/upload/Assets/archia/archia-regular-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'archia';
  src: url('/user/documents/upload/Assets/archia/archia-bold-webfont.woff2') format('woff2'),
       url('/user/documents/upload/Assets/archia/archia-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
:root {
  --template-font: "archia", sans-serif;
  --template-headings-font: "Chillax-variable", sans-serif;
}
body {
  background-color: white !important;
  font-family: "archia", sans-serif !important;
  font-weight: 400;
  color: #27234A !important;
}
h1 { font-family: 'Chillax-variable', sans-serif !important; font-weight: 500; color: #27234A !important; }
h2 { font-family: 'Chillax-variable', sans-serif !important; font-weight: 500; color: #27234A !important; }
h3 { font-family: 'Chillax-variable', sans-serif !important; font-weight: 500; color: #27234A !important; }
h4 { font-family: 'archia', sans-serif !important; font-weight: 400; color: #F57210 !important; }
h4.homepage-group-title, .h4.homepage-group-title { color: #392e5a !important; }
p { font-family: 'archia', sans-serif !important; line-height: 1.5; color: #27234A !important; font-weight: 400; }

.p-info-headline .h1, .p-info-headline h1 { color: #392e5a !important; }

/* Patička - bílá */
.newsletter-header p { margin-top: 25px; color: white !important; }

/* Hlavička */
.is-header-black .navigation-in-bottom,
.is-header-black .top-navigation-bar { background-color: #392e5a !important; box-shadow: none !important; }
.is-header-black .top-navigation-bar .container > div.top-navigation-contacts { background: #4c3c7c; }
.is-header-black a.btn.cart-count.full i { color: white !important; border: 2px solid white; }
.navigation-in-bottom .dropdown .dropdown-menu li a:before,
.navigation-in-bottom .dropdown .dropdown-menu li a,
.top-navigation-tools .dropdown button:after,
.top-navigation-tools .dropdown button:before,
.is-header-black .top-navigation-bar .dropdown button { color: white !important; }

/* Font váhy */
.navigation-in > ul > li > a,
.navigation-in-bottom > ul > li > a { font-weight: 400 !important; }
.breadcrumbs > span > a { font-weight: 400 !important; }
.products-block .p .name a, .products-block .name { font-weight: 400 !important; }
.news-item .text .title, .news-item:hover .text .title { font-weight: 400 !important; }

/* FAQ boxy */
.faq-item, .faq-item label, .faq-item p, .faq-item * { font-family: 'archia', sans-serif !important; }

.cart-content .form-group p { font-size: 12px; }
.footer-banners { margin-left: 0; margin-right: 0; }
.footer-banners .footer-banner { width: 100%; flex: 0 0 100%; max-width: 100%; }
.footer-banners .footer-banner img { border-radius: 15px; }
.footer-item.footer-item-newsletter .compact-form .btn { margin-top: 0; }
div .footer-newsletter { background-color: #f3f3f3; box-shadow: -500px 0 0 0 #f3f3f3, 500px 0 0 0 #f3f3f3; }
.has-more-items .more-items-trigger::after { background: none; }
.more-items-trigger { background-color: #f5f5f5; }
.subcategories li a { box-shadow: none; background-color: #f5f5f5; }
.link-icon.chat, .link-icon.print, .link-icon.share { display: none; }
.in-contacts .content-inner > article { width: 100%; }
.basic-description h2 { font-size: var(--pobo-product-card-title-font-size); }
.variant-cart .add-to-cart-button:hover { border: white solid 2px !important; }
.variant-cart .add-to-cart-button::before { content: url("/user/documents/upload/Assets/cart-utukutu-modra.png") !important; }
.flag-discount .price-standard { display: none !important; }
html[lang="en"] #dklabBanplusNadPatickou,
html[lang="en"] #dklabBanplusIkony { display: none; }
.products-block .p-in-in { min-height: auto; }
.category-header .listSorting__controls button.listSorting__control--current,
.category-header input[type="radio"]:checked+label { background-color: var(--color-primary); }
.welcome .welcome__content p { margin-bottom: 0; }
.welcome .welcome__content p + p { margin-top: 20px; }
.benefitBanner__item { flex-wrap: wrap; text-align: center; justify-content: center; }
.benefitBanner__picture { padding-left: 0; margin: 0 auto; height: 70px; }
.benefitBanner__picture img { max-height: 70px; max-width: 75px; }
.benefitBanner__link { flex-wrap: wrap; }
.benefitBanner__content { margin-top: 15px; justify-content: center; padding-right: 0; width: 100%; }

@media (min-width: 768px) {
  .top-navigation-bar .container > div { flex: 1 1 50%; }
  .top-navigation-bar .container > div.top-navigation-contacts { top: 0; right: 160px; height: 49px; }
  .header-top { padding-top: 30px; padding-bottom: 10px; }
  .welcome h1 { font-size: 40px; margin-bottom: 30px; }
  .welcome p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }
  .popup-widget.cart-widget, .popup-widget.login-widget { top: 130px; }
  .admin-logged .popup-widget.cart-widget, .admin-logged .popup-widget.login-widget { top: 130px; }
  .products-related-block h2, .products-alternative-block h2,
  h4.homepage-group-title, .h4.homepage-group-title { font-size: 36px; }
  body .hodnoceni:before { text-align: center; font-size: 36px; margin-bottom: 30px; }
  .products-block.products .p .name { font-size: 18px; }
  .navigation-in > ul > li.ext > ul:before { background-color: #f5f5f5; }
  .footer-item.footer-item-newsletter { width: 100%; padding: 35px 20px; }
  .footer-item.footer-item-newsletter .newsletter-header { width: 50%; flex: 0 0 50%; max-width: 600px; }
  .footer-item.footer-item-newsletter .compact-form { width: 50%; max-width: 660px; }
}
@media (min-width: 992px) {
  .welcome { padding: 40px; }
  .header-top { padding-top: 30px; padding-bottom: 10px; }
  .popup-widget.cart-widget, .popup-widget.login-widget { top: 130px; }
  .admin-logged .popup-widget.cart-widget, .admin-logged .popup-widget.login-widget { top: 155px; }
}
@media (max-width: 767px) {
  .top-navigation-bar { background-color: white; }
  .instagram-block { margin-top: 0; }
}
@media (max-width: 768px) {
  #nadpis-01 { justify-content: start; font-size: x-large !important; }
  .grafika-desktop { display: none !important; }
}
@media (min-width: 769px) { .grafika-mobil { display: none !important; } }
@media (max-width: 370px) { .top-navigation-bar .site-name a img { max-height: 30px; } }

/* Skrytí systémového nadpisu "Napište nám" na stránce /kontakty/ */
.pageArticleDetail header[itemprop="headline"] { display: none; }

/* ============================================================
   Horní lišta — kontejner kontaktů (obsah vkládá custom.js)
   ============================================================ */
@media (min-width: 768px) {
  .top-navigation-contacts { height: auto !important; display: flex !important; align-items: center; padding-top: 7px !important; padding-bottom: 7px !important; }
}

/* ============================================================
   UTUKUTU — top bar: rating badge + contact panel
   Replaces the earlier .utu-contact section of custom.css.
   ============================================================ */

.top-navigation-bar .container { position: relative; }

/* Menu musí být řádek, aby odznak stál vedle odkazů, ne pod nimi.
   Jen na desktopu — na mobilu má šablona vlastní rozvržení, do kterého
   se nesahá. !important je nutné: pravidlo šablony sedí na CDN. */
@media (min-width: 992px) {
  .top-navigation-bar .container > .top-navigation-menu {
    display: flex !important; align-items: center; flex-wrap: nowrap;
  }
  .top-navigation-bar .container > .top-navigation-menu > .top-navigation-bar-menu {
    flex: 0 1 auto; width: auto;
  }
}


/* ---------- které odkazy zůstávají v horní liště ----------
   Horní lišta a patička vykreslují TENTÝŽ seznam z administrace.
   Odebrání v administraci by je smazalo i z patičky, kam patří.
   Proto se tady schovávají jen v liště; v patičce zůstávají beze změny.
   Čísla jsou ID stránek ze Shoptetu, ta se nemění.                      */
@media (min-width: 992px) {
  .top-navigation-bar .top-navigation-menu-item-39,    /* Obchodní podmínky */
  .top-navigation-bar .top-navigation-menu-item-691,   /* Ochrana osobních údajů */
  .top-navigation-bar .top-navigation-menu-item-924,   /* Cookies */
  .top-navigation-bar .top-navigation-menu-item-853,   /* Návody */
  .top-navigation-bar .top-navigation-menu-item-850    /* Prodejna — je v hlavním menu */
  { display: none !important; }
}

/* ---------- rating badge (left) ---------- */

/* Odkazy v liště dostanou o něco těsnější rozestup, ať zbyde na odznak. */
.top-navigation-bar .top-navigation-bar-menu > li > a { padding-right: 12px; }

.utu-rating-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 14px; }

.utu-rating {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff !important; text-decoration: none !important;
  padding: 0 !important; line-height: 1.15; white-space: nowrap;
}
.utu-rating:hover .utu-rating__label { opacity: 1; }
.utu-rating::before, .utu-rating::after { content: none !important; }

.utu-rating__seal { display: inline-flex; flex: 0 0 auto; }
.utu-rating__seal svg { width: 25px; height: 32px; }
.utu-rating__seal-band  { fill: #d18f04; }   /* tmavší zlatá, ať se stuhy oddělí */
.utu-rating__seal-bg    { fill: #f5b301; }
.utu-rating__seal-check { fill: #fff; }

.utu-rating__body { display: flex; flex-direction: column; gap: 1px; }
.utu-rating__top  { display: flex; align-items: center; gap: 7px; }
.utu-rating__percent { font-size: 15px; font-weight: 700; color: #7ee2a8; }

.utu-rating__stars { display: inline-flex; align-items: center; gap: 2px; }
.utu-rating__star { display: inline-flex; }
.utu-rating__star svg { width: 14px; height: 14px; fill: rgba(255,255,255,.3); }
.utu-rating__star.is-on svg { fill: #f5b301; }

.utu-rating__label { font-size: 11.5px; opacity: .78; }

/* ---------- contact panel (right) ---------- */

.is-header-black .top-navigation-bar .container > div.top-navigation-contacts,
.top-navigation-contacts {
  background: #4c3c7c;
  border-radius: 0 0 16px 16px;
  padding: 0 20px;
}

.utu-contact { display: inline-flex; align-items: center; gap: 12px; color: #fff; line-height: 1.2; }

.utu-contact__ava {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: #6c5a9c url('/user/documents/upload/Assets/podpora.jpg') center/cover no-repeat;
}
.utu-contact__dot {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid #4c3c7c; background: #b5b5b5;
}
.utu-contact.is-online  .utu-contact__dot { background: #2ecc71; }
.utu-contact.is-offline .utu-contact__dot { background: #e04b4b; }

.utu-contact__row { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

.utu-contact__tel,
.utu-contact__mail {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff !important; text-decoration: none !important;
  font-size: 13px; padding: 0 !important; margin: 0 !important;
}
.utu-contact__tel svg,
.utu-contact__mail svg { width: 13px; height: 13px; fill: #fff; flex: 0 0 auto; opacity: .85; }
.utu-contact__tel b    { font-size: 14px; font-weight: 700; }
.utu-contact__mail:hover, .utu-contact__tel:hover { text-decoration: underline !important; }

.utu-contact__hours { font-size: 12px; opacity: .65; }

.utu-contact a::before, .utu-contact a::after { content: none !important; display: none !important; }

/* E-mailová adresa se vypíše tam, kde je na ni místo; jinak zůstane ikona.
   Adresa je vždy v title a aria-label, takže se nikdy neztratí. */
.top-navigation-bar .utu-contact__mail span { display: none !important; }
@media (min-width: 1440px) {
  .top-navigation-bar .utu-contact__mail span { display: inline !important; }
}

/* ---------- narrower screens ---------- */

/* Odznak se ukáže jen tam, kde je na něj místo. Odkazy a telefon
   mají přednost — radši žádný odznak než rozbitá lišta. */
@media (max-width: 1199px) {
  .top-navigation-bar .utu-rating-wrap { display: none !important; }
}

@media (max-width: 991px) {
  .top-navigation-bar .utu-contact__hours { display: none !important; }
  .utu-contact__ava { width: 32px; height: 32px; }
}
@media (max-width: 767px) {
  .top-navigation-contacts { border-radius: 0; padding: 0 12px; }
  .utu-contact__dot { border-color: #392e5a; }
}

/* ============================================================
   Kontaktní blok v patičce (obsah vkládá custom.js)
   ============================================================ */
.utu-fcontact { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.utu-fcontact__ava { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #ded7ec center/cover no-repeat; background-image: url('/user/documents/upload/Assets/podpora.jpg'); flex: 0 0 auto; }
.utu-fcontact__dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #b5b5b5; }
.utu-fcontact.is-online .utu-fcontact__dot { background: #2ecc71; }
.utu-fcontact__body { display: flex; flex-direction: column; line-height: 1.25; }
.utu-fcontact__head { font-size: 15px; font-weight: 500; color: #27234A; }
.utu-fcontact__sub { font-size: 12px; color: #6b6680; }