/* ============================================================
   UTUKUTU – custom.css  ·  verze 36  ·  2026-10-07
   Úpravy: horní lišta (v10) + hvězdičky (v11) + pečeť Heuréky (v12)
           + slevový kupón (v14) + kontakt v mobilním menu (v16)
           + odznak hodnocení v hlavičce a box poradenství (v17/v18)
           + hodnocení na banneru a odznak Google (v19)
   Zdroj: zmeny/ — jednotlivé úpravy; po nasazení je zdrojem pravdy tenhle soubor
   Předchozí verze: custom.v22.css
   Nasazení: /user/documents/upload/Assets/custom.v27.css
   Oproti v25: sestava na slideru je ZPĚT v podobě před v25 — naše záložka
               s rozetou a pod ní samostatná pečeť Heuréky bez textu.
               Náš podklad je nově FIALOVÝ (#392E5A — značková barva hlavičky),
               bílý splýval se světlými snímky. Pečeť Heuréky beze změny.
               Odznak Google na banneru je odlepený od hrany, s kulatými rohy
               dokola a na stejné fialové;
               popisek u něj odpadá vždy.
   Patří k custom.v16.js — sestavu staví zase ten, verze 17 a 18 se
   nepoužívají.
   Sirotci na FTP k smazání: custom.v23.css, custom.v24.css, custom.v26.css,
   custom.v27.css, custom.v28.css, custom.v29.css, custom.v17.js, custom.v18.js
   Oproti v22: sestava hodnocení na slideru. Holá medaile Heuréky dostala
               vlastní číslo a popisek, takže je jasné, čí je to tvrzení;
               naše procento se zvětšilo a medaili už nepoužívá. Obě
               destičky mají stejnou šířku a odstup 7 px.
   Oproti v21: odznak hodnocení Google na banneru se měří podle BANNERU,
               ne podle okna (container-type + cqw). Dřív měl pevné pixely,
               takže při okně 800 px zabíral 65 % banneru a zakrýval nadpis.
               Zároveň je posazený do pravého horního rohu a o 42 % širší.
   Oproti v20: popisek hodnocení na banneru má opacity .74 místo .62 —
               při .62 vycházel kontrast 3,9 : 1 proti normě 4,5 : 1.
               POZOR: tenhle řádek hlavičky se u nasazení v21 zapomněl
               srovnat v produkci, doplněno zpětně 1. 10. 2026.
   ============================================================ */

@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;
}

/* Nadpisy. Do 7. 10. 2026 tu Chillax chyběl: CSS ho na H1–H3 nastavovalo,
   ale `@font-face` na něj nebyl nikde — ani u nás, ani v šabloně — takže
   zákazníci viděli systémové písmo. V prohlížeči to nebylo poznat,
   `getComputedStyle` vrací deklaraci, ne vykreslené písmo.

   Řez 700 (Bold), rozhodl Viktor 7. 10. 2026. Jeden řez schválně —
   každý další je dalších ~19 kB. Licence Fontshare (ITF FFL) vlastní
   hostování výslovně dovoluje a doporučuje.

   `font-display: swap` — nadpis se ukáže hned náhradním písmem
   a Chillax se přepne, jakmile se stáhne. */
@font-face {
  font-family: 'Chillax-variable';
  src: url('/user/documents/upload/Assets/chillax-bold.woff2') format('woff2'),
       url('/user/documents/upload/Assets/chillax-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Náhradní písmo srovnané na šířku Chillaxu. Změřeno 7. 10. 2026:
   Chillax Bold je o 6 % širší než systémové bezpatkové (752 proti 709 px
   na stejném vzorku). Bez tohohle by nadpis při přepnutí povyskočil
   a projevilo by se to na CLS. */
@font-face {
  font-family: 'Chillax-nahrada';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Roboto');
  font-weight: 700;
  size-adjust: 106%;
}
:root {
  --template-font: "archia", sans-serif;
  --template-headings-font: "Chillax-variable", "Chillax-nahrada", sans-serif;
}
body {
  background-color: white !important;
  font-family: "archia", sans-serif !important;
  font-weight: 400;
  color: #27234A !important;
}
h1 { font-family: 'Chillax-variable', 'Chillax-nahrada', sans-serif !important; font-weight: 700; color: #27234A !important; }
h2 { font-family: 'Chillax-variable', 'Chillax-nahrada', sans-serif !important; font-weight: 700; color: #27234A !important; }
h3 { font-family: 'Chillax-variable', 'Chillax-nahrada', sans-serif !important; font-weight: 700; 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; }

.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.v2.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__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 ---------- */

@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.v2.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__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; }

/* ============================================================
   UTUKUTU — hvězdičky: skrýt tam, kde nic neříkají
   Zadání: Figma #24. Podrobnosti: zmeny/hvezdicky/zadani.md
   ============================================================ */

/* Shoptet vykresluje hodnocení na detailu produktu vždy — u produktu bez
   recenzí pět prázdných hvězd a slovo „Neohodnoceno“. Skrývá se celý obal
   `.stars-wrapper`, protože hvězdy, popisek i odkaz jsou v něm pohromadě;
   skrýt jen hvězdy by nechalo stát nápis, který absenci říká ještě natvrdo.

   Podmínka je jediná — nesvítí-li čtvrtá hvězda, je hodnocení pod 4/5 nebo
   žádné. Ověřeno na skutečných produktech 2026-09-22:

       5,0        on  on  on  on  on
       4,9 / 4,7  on  on  on  on  half     ← čtvrtá svítí, zůstává
       4,0        on  on  on  on  off      ← čtvrtá svítí, zůstává
       3,0        on  on  on  off off      ← skrývá se
       2,0        on  on  off off off      ← skrývá se
       bez recenzí off off off off off     ← skrývá se

   Cílí se na `.stars--productDetail`, aby se pravidlo nedotklo dlaždic
   souvisejícího zboží, která hodnocení mají v pořádku. Na stránce produktu
   bez recenzí jsou tři takové bloky: vlastní hodnocení a dvě dlaždice s 5,0.

   Formulář „Přidat hodnocení“ leží mimo tento obal, takže cesta k první
   recenzi zůstává otevřená.

   Zápis `:has()` neumí prohlížeče starší než ~2022. Tam se nic neskryje —
   zůstane dnešní stav. Fail-safe, ne chyba. */

.stars-wrapper:has(.stars--productDetail .star:nth-child(4):not(.star-on)) {
  display: none;
}

/* ============================================================
   UTUKUTU — pečeť Ověřeno zákazníky u dostupnosti
   Zadání: Figma #27. Vkládá skript.js do .detail-availability-block.
   ============================================================ */

/* Pečeť stojí vpravo v bloku s dostupností, ve výšce řádku s dostupností.
   Blok dostává position: relative, aby se pečeť měla čeho chytit. */
.detail-availability-block { position: relative; }

/* Text dostupnosti není vždycky krátký: vedle „Skladem“ existuje i
   „Vyrobíme do 5 týdnů“ (191 px). Vyhrazujeme proto pečeti místo, aby
   text nikdy nemohl běžet pod ni — delší text se raději zalomí. */
.detail-availability-block .availability-value { padding-right: 112px; }

/* Pečeť u dostupnosti: medaile a pod ní „100 % doporučuje".
   Popisek je POD medailí, ne vedle — vedle by si vynutil zalomení jmenovky
   dostupnosti, a ta je sdílená všemi produkty a objevuje se i ve výpisech
   a v košíku. Řešit layout jedné stránky úpravou obsahu, který se zobrazuje
   všude, by byl zásah na špatné vrstvě. Měřeno 2. 10. 2026: text dostupnosti
   má nejširší řádek 113 px a od pečeti ho dělí 83 px, takže se nebijí ani
   u dvouřádkového „Momentálně nedostupné". */
.utu-seal {
  position: absolute;
  right: 8px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 5.6em;
  pointer-events: none;   /* není odkaz, ať nebrání klikání pod sebou */
}

.utu-seal__text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #221d3b;
  opacity: .8;
}
.utu-seal__text b { display: block; font-size: 14px; opacity: 1; }

/* Pečeť je mimo tok, takže bloku NEPŘIDÁVÁ výšku a popisek pod ní by vypadl
   ven. Blok proto potřebuje vlastní minimální výšku. Důsledek: řádek s cenou
   o kus povyroste a tlačítko do košíku se posune níž — vědomé, ověřené. */
.detail-availability-block { min-height: 122px; }

.utu-seal img {
  width: 96px;            /* 1,5× oproti původním 64 px */
  height: 96px;
  display: block;
}

/* Na užších obrazovkách se mřížka s cenou přeskládá do sloupce
   a pečeť by překryla text — proto menší a posunutá výš. */
@media (max-width: 991px) {
  .detail-availability-block .availability-value { padding-right: 76px; }
  .utu-seal { right: 0; }
  .utu-seal img { width: 64px; height: 64px; }
}

/* NA TELEFONU je pečeť samostatný řádek mezi košíkem a boxem poradenství.
   Tam ji přesouvá JS podle třídy `mobile` na <body>, kterou dává Shoptet —
   viz `naMobilu()` v custom.js. Tady se jen obléká: medaile a popisek vedle
   sebe, ať řádek nezabírá zbytečnou výšku. */
.utu-seal--radek {
  position: static;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  margin: 14px 0 0;
}
.utu-seal--radek img { width: 56px; height: 56px; }
.utu-seal--radek .utu-seal__text { text-align: left; }
.utu-seal--radek .utu-seal__text b { display: inline; margin-right: .3em; }

/* Pojistka pro ÚZKÉ OKNO NA DESKTOPU. Tam má <body> třídu `desktop`, takže
   JS pečeť nepřesune, a u dostupnosti na ni není místo — schová se, přesně
   jako dosud. Skuteční zákazníci na telefonu sem nespadnou, ti dostanou
   `body.mobile` a pečeť v řádku. */
@media (max-width: 575px) {
  .detail-availability-block .availability-value { padding-right: 0; }
  .detail-availability-block { min-height: 0; }
  body.desktop .utu-seal:not(.utu-seal--radek) { display: none; }
}

/* ---------- pečeť na banneru (Figma #5) ---------- */

/* Vkládá se jednou do .carousel-inner, takže je vidět na všech snímcích.
   Kontejner má overflow: hidden, takže pečeť nepřeteče mimo plochu banneru. */
.utu-seal-banner {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;             /* nad obrázkem snímku, pod ovládacími šipkami */
  display: inline-flex;
  pointer-events: none;
}

.utu-seal-banner img {
  width: 96px;
  height: 96px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));  /* čitelnost na světlé fotce */
}

@media (max-width: 991px) {
  .utu-seal-banner { top: 14px; right: 14px; }
  .utu-seal-banner img { width: 64px; height: 64px; }
}

@media (max-width: 575px) {
  .utu-seal-banner img { width: 52px; height: 52px; }
}

/* ============================================================
   UTUKUTU — slevový kupón v košíku za zaškrtávacím políčkem
   Zadání: Figma #35. Podrobnosti: zmeny/kupon/zadani.md
   ============================================================ */

/* Šablona má přepínač i sbalený stav připravené, jen je na desktopu nepoužívá:
   přepínač skrývá a formulář ukazuje rovnou. Obsluha kliknutí je přitom navěšená
   bez ohledu na šířku okna — ověřeno 22. 9. 2026. Stačí tedy zapnout přepínač
   a sbalit formulář, dokud rodič nemá třídu `is-open`, kterou přidává šablona sama.

   Hodnoty sbaleného stavu jsou opsané z mobilní verze, aby se chování shodovalo. */

@media (min-width: 768px) {
  .extras-col-basket .discount-coupon-checkbox {
    display: inline-block;
    cursor: pointer;          /* šablona má auto — nevypadá to klikatelně */
  }

  .extras-col-basket:not(.is-open) .discount-coupon {
    height: 0;
    visibility: hidden;
    padding: 0;
    margin: 0;
  }
}

/* ============================================================
   UTUKUTU — kontaktní blok v mobilním menu
   Oprava chyby. Podrobnosti: zmeny/mobilni-menu/zadani.md
   ============================================================ */

/* Apollo klonuje `.top-navigation-contacts` z horní lišty do mobilního menu.
   V klonu neplatí naše zkracovací pravidla, protože ta jsou zaklíněná do
   `.top-navigation-bar` — blok se proto roztáhl na 471 px v okně 375 px.

   V menu je ale svislé místo, tak ho využijeme: kontakt se poskládá pod sebe
   a nic se neskrývá. Blok pak měří 194 px nezávisle na šířce okna (řídí ho
   nejdelší řádek, adresa), ověřeno na 375 i 320 px.

   `.navigation-in-bottom` existuje jen v mobilním menu, takže se toto pravidlo
   nemůže dotknout horní lišty. */

.navigation-in-bottom .utu-contact__row {
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  gap: 4px;
}

/* ============================================================
   UTUKUTU — odznak hodnocení přesunutý z horní lišty do hlavičky
   Zadání: Figma #5. Podrobnosti: zmeny/hodnoceni-v-hlavicce/zadani.md
   ============================================================ */

/* Zadání žádá důkaz o hodnocení mezi logo a vyhledávání. První návrh tam dával
   pečeť Heuréky navíc — jenže odznak hodnocení už je v horní liště a obojí
   nad sebou bylo moc. Viktor 23. 9.: „Heureka je to už moc."

   Proto se odznak nepřidává, ale **stěhuje**. Nahoře se uvolní místo, dole
   je vidět líp a je větší. Jedna zmínka, ne dvě. */

.header-top .utu-rating-wrap {
  flex: 0 0 auto;
  margin: 0 28px 0 20px;
}

/* V hlavičce je víc místa než v liště, tak si odznak může dovolit vyrůst.
   Poměry zůstávají, mění se měřítko. */
.header-top .utu-rating { gap: 11px; }
.header-top .utu-rating__seal svg { width: 34px; height: 44px; }
.header-top .utu-rating__percent  { font-size: 18px; }
.header-top .utu-rating__star svg { width: 16px; height: 16px; }
.header-top .utu-rating__label    { font-size: 12.5px; }
.header-top .utu-rating__top      { gap: 8px; }

/* Vyhledávání má přednost. Jakmile je úzko, odznak mizí — stejně jako
   mizel v liště. */
@media (max-width: 1299px) {
  .header-top .utu-rating-wrap { display: none !important; }
}

/* ============================================================
   UTUKUTU — box „Potřebujete poradit s výběrem?" jako skutečný text
   Zadání: Figma #25. Podrobnosti: zmeny/poradenstvi/zadani.md
   ============================================================ */

/* Gábin banner je obrázek z Canvy, vykreslený doplňkem Upsell. Obrázek nejde
   prokliknout po částech — doplněk umí jednu adresu na celý banner a `tel:`
   odmítá. Zadání přitom výslovně žádá, aby číslo šlo na mobilu vytočit.

   Stavíme proto tentýž box jako HTML. Vzhled je opsaný z Gábina obrázku:
   pozadí #FFF8E0, text #392E5A, kruhový portrét vlevo. Otevírací doba se
   bere z window.UTU, takže nemůže zastarat — v obrázku byla napevno. */

.utu-poradime {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #FFF8E0;
  border-radius: 20px;
  padding: 18px 28px 18px 18px;
  color: #392E5A;
  margin: 16px 0;
}

/* Obal kvůli stavové tečce — ta musí sedět na okraji kruhu. */
.utu-poradime__portret {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
}

.utu-poradime__foto {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Stejná tečka jako v horní liště, jen větší podle portrétu. Obrys má barvu
   pozadí boxu, ne lišty — jinak by kolem ní byl tmavý kroužek. */
.utu-poradime__dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #FFF8E0;
  background: #b5b5b5;
}

.utu-poradime__text { min-width: 0; }

.utu-poradime__nadpis {
  /* Gábin obrázek se zmenšuje celý, text ne — při 24 px se nadpis v užším
     sloupci láme na dva řádky. Pružná velikost ho udrží na jednom. */
  font-size: clamp(19px, 1.6vw, 24px);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #392E5A;
}

.utu-poradime__podtitul {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 6px;
}

.utu-poradime__radek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  font-size: 17px;
}

/* Telefon musí vypadat jako text, ale fungovat jako odkaz — to je celý smysl
   téhle úpravy. Podtržení až na hover, ať box zůstane klidný. */
.utu-poradime__tel {
  color: #392E5A !important;   /* šablona barví odkazy globálně */
  text-decoration: none;
  white-space: nowrap;
}
.utu-poradime__tel:hover,
.utu-poradime__tel:focus-visible { text-decoration: underline; }

.utu-poradime__hodiny { opacity: .75; white-space: nowrap; }

/* Šablona věší na odkazy ikony přes ::before — u nás by přebývaly. */
.utu-poradime a::before,
.utu-poradime a::after { content: none !important; }

@media (max-width: 575px) {
  .utu-poradime { gap: 16px; padding: 16px; border-radius: 16px; }
  .utu-poradime__portret { width: 76px; height: 76px; }
  .utu-poradime__dot { width: 15px; height: 15px; right: 2px; bottom: 2px; border-width: 2px; }
  .utu-poradime__nadpis { font-size: 19px; }   /* pod 576 px je box přes celou šířku */
  .utu-poradime__podtitul { font-size: 15px; }
  .utu-poradime__radek { font-size: 16px; gap: 4px 16px; }
}

/* ============================================================
   UTUKUTU — hodnocení na banneru, nad pečetí Heuréky
   Vzor sojka.cz. Podrobnosti: zmeny/hodnoceni-na-banneru/zadani.md
   ============================================================ */

/* Psáno Mobile First (zásada 12): základ je pro telefon, širší obrazovky
   si přidávají přes min-width. Přes mobil chodí 80 % zákazníků a banner je
   jediné místo, kde hodnocení uvidí — odznak v hlavičce je pod 1300 px skrytý. */

/* Sloupec jako na sojka.cz: box s hodnocením nahoře, pečeť pod ním.
   Společný obal je drží pod sebou sám — bez něj by se odsazení pečeti
   muselo dopočítávat podle výšky boxu a rozpadlo by se při každé změně
   velikosti nebo délky textu.

   POZOR: Shoptet posílá pro mobil jinou stránku s jinými bannery. Náhled
   proto stahuje obě varianty — mobilní podobu ověřovat na `*-mobil-*.html`,
   ne zúžením okna. Viz pamet/platforma.md. */
.utu-banner-odznaky {
  position: absolute;
  top: 14px;                  /* odlepeno od rohu, viz zadani odznaky */
  right: 14px;
  z-index: 3;                 /* nad snímkem, pod ovládacími šipkami */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;       /* banner má vlastní tlačítko, klik mu nebereme */
}

/* Pečeť měla vlastní absolutní pozici — v obalu ji vypínáme, jinak by
   z proudu vypadla a překryla box. Do rohu narozdíl od boxu nepatří,
   drží si odstup od kraje. */
.utu-banner-odznaky .utu-seal-banner {
  position: static;
  top: auto;
  right: auto;
  margin-right: 12px;
}

/* Cizí lišta Heuréky („Ověřeno zákazníky" svisle u levého kraje) má
   z-index 2147483647, takže leží nad vším včetně banneru. Na mobilu je
   na ni málo místa a překrývá snímek — viz pamet/cizikod.md.
   Kotvíme na vnitřní prvek se stabilním id; obal má id s náhodným hashem. */
@media (max-width: 991px) {
  div:has(> #heurekaTableft) { display: none !important; }
}

/* Záložka v rohu: zaoblený jen levý spodní roh, bez stínu. */
/* Naše hodnocení je HLAVNÍ údaj sestavy, proto je větší než destička
   Heuréky pod ním. Viktor 1. 10. 2026: „naše hodnocení zvětšit, Heuréku
   zmenšit, dát pod sebe, ale nechat mezi nimi malý odstup." */
/* FIALOVÝ PODKLAD (Viktor 2. 10. 2026). Nejdřív byl bílý a splýval se
   světlými snímky, pak černý, nakonec naše značková fialová #392E5A —
   tatáž, co má hlavička webu a nadpisy. Drží kontrast na jakékoliv fotce
   a na rozdíl od černé patří k webu.
   Pečeť Heuréky vedle zůstává beze změny — cizí známka, vlastní pravidla
   použití, viz pamet/loga.md. */
/* Zlatý lem a odlepení od rohu — schválil Viktor 7. 10. 2026.
   Do té doby odznak k hlavičce přirůstal: stejná barva, nulová mezera
   a ostrý roh z něj dělaly jeden souvislý tvar, který oko zařadilo
   jako lištu webu. Lem ho oddělí, aniž by přibyla barva — zlatá už
   v odznaku je (rozeta, hvězdy). */
.utu-rating-banner {
  background: #392E5A;
  border: 2px solid #F5B301;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  border-radius: 16px;
  padding: 7px 11px 7px 13px;
}

/* Odznak je klon toho z hlavičky, kde je text bílý na tmavém. Na černém
   podkladu tedy barvy sedí rovnou a není co obracet. */
.utu-rating-banner .utu-rating {
  color: #fff !important;
  gap: 8px;
}
/* POZOR: tahle hodnota se přepočítává s KAŽDOU změnou podkladu, už potřetí.
   Na bílém byla .74 nejnižší, co projde normou 4,5 : 1. Na fialové #392E5A
   dává .78 odstín #d3d1db, tedy kontrast 8,1 : 1 — velká rezerva, protože
   podklad je tmavý a text světlý. Kdyby se podklad měnil znovu, spočítat
   znovu; hodnota z jiného pozadí tu neplatí. */
.utu-rating-banner .utu-rating__percent { color: #fff; font-size: 16px; }
.utu-rating-banner .utu-rating__label   { color: #fff; opacity: .78; font-size: 9.5px; }
.utu-rating-banner .utu-rating__seal svg { width: 18px; height: 23px; }
.utu-rating-banner .utu-rating__star svg { width: 11px; height: 11px; }

/* Nehodnocené hvězdy: bílá s průhledností, stejně jako v hlavičce.
   Šedá #d8d4e2 by na tmavém podkladu naopak svítila skoro jako rozsvícená. */
.utu-rating-banner .utu-rating__star svg { fill: rgba(255, 255, 255, .28); }
.utu-rating-banner .utu-rating__star.is-on svg { fill: #f5b301; }

@media (min-width: 576px) {
  .utu-banner-odznaky { gap: 12px; }
  .utu-banner-odznaky .utu-seal-banner { margin-right: 16px; }
  .utu-rating-banner { padding: 10px 15px 10px 17px; border-radius: 16px; }
  .utu-rating-banner .utu-rating__percent { font-size: 17.5px; }
  .utu-rating-banner .utu-rating__label   { font-size: 10.5px; }
  .utu-rating-banner .utu-rating__seal svg { width: 20px; height: 26px; }
  .utu-rating-banner .utu-rating__star svg { width: 12px; height: 12px; }
}

@media (min-width: 992px) {
  .utu-banner-odznaky { gap: 14px; }
  .utu-banner-odznaky .utu-seal-banner { margin-right: 22px; }
  .utu-rating-banner { padding: 11px 16px 11px 18px; border-radius: 16px; }
  .utu-rating-banner .utu-rating__percent { font-size: 19px; }
  .utu-rating-banner .utu-rating__label   { font-size: 11.5px; }
  .utu-rating-banner .utu-rating__seal svg { width: 23px; height: 30px; }
  .utu-rating-banner .utu-rating__star svg { width: 14px; height: 14px; }
}

/* ============================================================
   UTUKUTU — odznak s hodnocením Google na banneru KUDY K NÁM?
   Zadání: Figma #9. Podrobnosti: zmeny/bannery-svg/zadani.md
   ============================================================ */

/* Čísla NEJSOU v SVG. Zapečená do obrázku by zamrzla — přesně jako otevírací
   doba v Gábině banneru poradenství, kterou jsme kvůli tomu museli přestavět.
   Odznak je proto HTML vrstva nad bannerem a hodnoty bere z window.UTU.

   Rozvržení podle předlohy od Viktora (30. 9.): logo G, velká známka,
   vedle ní popisek a pod ním pět hvězd. */

.utu-banner-obal {
  position: relative;
  display: block;
  container-type: inline-size;   /* odznak se měří podle banneru, ne podle okna */
}

/* Vyšší specificita schválně: šablona má na prvky uvnitř bannerů vlastní
   pravidla pro position i display a samotné `.utu-google` by přebila. */
.utu-banner-obal .utu-google {
  position: absolute;
  top: 6%;
  right: 4%;
  z-index: 2;                 /* obrázek banneru má od šablony z-index 1 */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 10px;
  padding: 7px 13px;
  text-decoration: none !important;
  color: #392E5A;
  line-height: 1.1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

.utu-banner-obal .utu-google__logo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: block;
}

.utu-banner-obal .utu-google__znamka {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.utu-banner-obal .utu-google__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.utu-banner-obal .utu-google__popis {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.utu-banner-obal .utu-google__hvezdy {
  display: flex;
  gap: 1px;
}

.utu-banner-obal .utu-google__hvezda {
  width: 11px;
  height: 11px;
  fill: #d8d4e2;              /* nerozsvícená — stejná šedá jako na slideru */
  flex: 0 0 auto;
  display: block;
}
.utu-banner-obal .utu-google__hvezda.is-on { fill: #f5b301; }

.utu-google::before,
.utu-google::after { content: none !important; }

/* Banner se na mobilu zmenší na dvě třetiny. Popisek odpadá — logo G ho
   nese samo a hvězdy s číslem řeknou zbytek. Zásada 12: obsah pro mobil
   má přednost před úplností. */
@media (max-width: 767px) {
  .utu-banner-obal .utu-google { gap: 7px; padding: 5px 10px; border-radius: 8px; }
  .utu-banner-obal .utu-google__logo { width: 17px; height: 17px; }
  .utu-banner-obal .utu-google__znamka { font-size: 18px; }
  .utu-banner-obal .utu-google__popis { display: none; }
  .utu-banner-obal .utu-google__hvezda { width: 10px; height: 10px; }
}

/* ============================================================
   Odznak měřený podle BANNERU, ne podle okna (Viktor, 1. 10. 2026)
   ============================================================
   Pravidla výš zůstávají jako záloha pro prohlížeče bez container queries
   (potřeba Chrome 105+, Safari 16+, Firefox 110+). Tam se nic nerozbije,
   jen se to nezlepší.

   PROČ: odznak měl rozměry v pevných pixelech, ale banner se roztahuje podle
   okna. Čím užší okno, tím větší podíl banneru odznak zabral — změřeno:
   při okně 1500 px 33 %, při 800 px už 65 % a zakrýval půlku nadpisu
   „KUDY K NÁM?“ i druhý řádek. Nejhorší je to těsně nad 768 px, kde se vypne
   zmenšená verze: odznak skočí na plnou velikost, ale banner je pořád úzký.
   V cqw má odznak při každé šířce stejný podíl, takže ten případ nenastane.

   TVRDÉ LIMITY, spočítané z písma v SVG (ne odhadem — `Pismo.ink_vrsek`
   v zmeny/bannery-svg/kod/generuj.py):
     „KUDY K NÁM?“        x 75–228,  y 15,7–37
     „Přijďte si vybrat“  x 76–332,  horní okraj písma y = 46
   Odznak proto nesmí sahat níž než k y = 46 a jeho levý okraj musí zůstat
   za x = 228. Převod: jednotka SVG ÷ 4,6 = cqw, takže výška nejvýš 10,0 cqw.

   Velikost je na maximu, které se tam s rezervou vejde. Víc by znamenalo
   posunout text v samotném SVG — zásah do grafiky, neschválený.
   Čísla a rezervy: zmeny/bannery-svg/zadani.md
   ============================================================ */
@supports (container-type: inline-size) {
  /* Odznak se odlepil od horní i pravé hrany (Viktor 2. 10. 2026: „posuň to
     od horní a pravé strany, aby tam byla mezera, tím to víc vynikne").

     MEZERA SE PLATÍ VÝŠKOU. Spodek odznaku smí nejvýš na y = 42 jednotek SVG,
     protože druhý řádek textu má horní okraj písma na 46. Odsazení shora se
     proto musí odečíst z výšky: při mezeře 6 jednotek zbude 86 % dřívější
     velikosti. Nechat odznak velký a jen ho odsadit nejde — zkoušeno,
     spodek přeleze text. Tabulka variant je v zmeny/bannery-svg/zadani.md.

     6 jednotek SVG = 6/460 = 1.3 cqw, tedy asi 9 px při banneru 679 px. */
  .utu-banner-obal .utu-google {
    top: 1.3cqw;
    right: 1.3cqw;
    gap: 1.63cqw;
    border-radius: 2.6cqw;      /* kulaté rohy dokola, ne zakulacená strana */
    padding: 1.37cqw 2.14cqw;
    box-shadow: 0 .4cqw 1.1cqw rgba(0, 0, 0, .22);   /* silnější, ať vynikne */
    /* Stejná fialová jako má sestava na slideru, ať spolu mluví jednou řečí.
       Logo G zůstává barevné — je to cizí známka. */
    background: #392E5A;
    color: #fff;
    /* Zlatý lem jako na slideru — schválil Viktor 7. 10. 2026.
       V `cqw`, aby se škáloval s bannerem jako zbytek odznaku. */
    border: .44cqw solid #F5B301;
  }

  .utu-banner-obal .utu-google__logo   { width: 4.29cqw; height: 4.29cqw; }
  .utu-banner-obal .utu-google__znamka { font-size: 4.63cqw; }
  .utu-banner-obal .utu-google__hvezdy { gap: .24cqw; }
  .utu-banner-obal .utu-google__hvezda { width: 2.14cqw; height: 2.14cqw; }

  /* Popisek „Hodnocení na Google" je skrytý VŽDY, ne jen na úzkém banneru.
     S ním je odznak 215 jednotek široký a s mezerou od hrany narazí na nadpis
     „KUDY K NÁM?". Bez něj má od nadpisu přes 80 jednotek rezervy.
     Zdroj údaje nese logo G vedle čísla — stejný princip jako u Heuréky
     na slideru: čí logo, toho číslo.
     Kdyby se měl popisek vrátit, musí se zmenšit celý odznak. */
  .utu-banner-obal .utu-google__popis  { display: none; }
  .utu-banner-obal .utu-google__text   { display: flex; }
}

/* ============================================================
   UTUKUTU — barvy stavové tečky, jedno místo pro všechny tři
   ============================================================ */

/* Tečku nese kontakt v liště, kontakt v patičce i box poradenství.
   Barvy byly rozepsané u každého zvlášť a patičce chybělo pravidlo pro
   offline — mimo otevírací dobu tam zůstávala šedá, tedy stejná jako
   při neznámém stavu, zatímco druhé dvě byly červené. Zásada 7 říká,
   že stavový prvek nesmí splývat se stavem „nevím".

   Výchozí šedá zůstává v pravidlech jednotlivých teček; tady se rozhoduje
   jen o barvě podle stavu. Přidat čtvrtou tečku znamená dopsat ji sem. */

.utu-contact.is-online   .utu-contact__dot,
.utu-fcontact.is-online  .utu-fcontact__dot,
.utu-poradime.is-online  .utu-poradime__dot { background: #2ecc71; }

.utu-contact.is-offline  .utu-contact__dot,
.utu-fcontact.is-offline .utu-fcontact__dot,
.utu-poradime.is-offline .utu-poradime__dot { background: #e04b4b; }

/* ============================================================
   UTUKUTU — recenze pod galerií na detailu produktu
   Zadání: Figma #23/#26. Podrobnosti: zmeny/reference/zadani.md
   ============================================================
   Barvy a tvar jsou vzaté z živého bloku doporučených produktů
   (`.up-container` na detailu): pozadí #E7E6EB, rádius 20 px,
   štítek na naší fialové. Nevymýšlely se.

   POJISTKA: všechna pravidla jsou zanořená pod `.utu-rec`, takže nemůžou
   sáhnout na nic mimo náš blok. Kdyby šablona začala používat stejné názvy,
   pokazí se nejvýš vzhled recenzí — nic jiného.
   ============================================================ */
.utu-rec {
  background: #E7E6EB;
  border-radius: 20px;
  padding: 16px 18px 18px;
  margin-top: 20px;
}

.utu-rec .utu-rec__hlava { display: flex; align-items: baseline; gap: 10px; }
.utu-rec .utu-rec__nadpis,
.utu-rec .utu-rec__znamka { font-size: 19px; font-weight: 700; line-height: 1.1; color: #392E5A; }
.utu-rec .utu-rec__hvezdy { display: flex; gap: 2px; position: relative; top: -1px; }
.utu-rec .utu-rec__hvezdy svg { width: 15px; height: 15px; fill: #f5b301; display: block; }

.utu-rec .utu-rec__podtitul { margin: 5px 0 13px; font-size: 12.5px; color: #4b4463; }

.utu-rec .utu-rec__mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.utu-rec .utu-rec__polozka {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 12px 13px 11px;
  text-decoration: none;
  color: #221d3b;
}
.utu-rec .utu-rec__hvezdicky { display: flex; gap: 2px; margin-bottom: 7px; }
.utu-rec .utu-rec__hvezdicky svg { width: 11px; height: 11px; fill: #f5b301; display: block; }
.utu-rec .utu-rec__text { display: block; font-size: 12.5px; line-height: 1.4; }
.utu-rec .utu-rec__jmeno {
  display: block; margin-top: 9px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #6b6588;
}

.utu-rec .utu-rec__vice {
  display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700;
  color: #392E5A; text-decoration: underline; text-underline-offset: 3px;
}

/* Na telefonu jedna karta. Tři vedle sebe by se při 350 px nedaly přečíst
   a dvě pod sebou blok zbytečně protahovaly — zásada 12. */
@media (max-width: 767px) {
  .utu-rec { padding: 14px 14px 16px; border-radius: 16px; }
  .utu-rec .utu-rec__nadpis,
  .utu-rec .utu-rec__znamka { font-size: 16px; }
  .utu-rec .utu-rec__hvezdy svg { width: 13px; height: 13px; }
  .utu-rec .utu-rec__podtitul { font-size: 11.5px; margin: 4px 0 11px; }
  .utu-rec .utu-rec__mrizka { grid-template-columns: 1fr; }
  .utu-rec .utu-rec__polozka:nth-child(n+2) { display: none; }
  .utu-rec .utu-rec__vice { font-size: 11.5px; margin-top: 10px; }
}

/* ===========================================================
   Názory na produkt pod jeho názvem (#23)

   Jeden prvek, ne dva. Náš obal `.utu-nazor` přebírá vzhled
   nativního proužku Shoptetu a proužek se do něj přestěhuje,
   takže hvězdy, počet hodnocení i citace tvoří jednu kartu.

   Hodnoty odečtené z živého proužku 3. 10. 2026:
     pozadí   #fff
     radius   20px
     stín     0 6px 12px rgba(0,0,0,.08)
     popisek  12px / 700 / verzálky / #818394
     odkaz    12px / #7C7E8F / podtržený
     hvězda   #F0B820

   Když obal nevznikne, proužek si nese svůj vzhled dál a stránka
   vypadá přesně jako dnes — vlastní vzhled má jen obal.

   Všechna pravidla jsou zanořená pod `.utu-nazor`, aby se nedotkla
   proužků jinde na webu (dlaždice souvisejícího zboží).
   =========================================================== */

/* Selektor je složený schválně: šablona má na proužek pravidlo o vyšší
   specificitě a samotná třída padding neprosadila. Řeší to bez
   `!important`, které by se pak muselo přebíjet dál. */
.stars-wrapper.utu-nazor {
  /* Flex zůstává, jen se povolí zalomení, aby citace spadla pod řádek.
     `display:block` to neřeší — láme odkaz uprostřed slova. */
  flex-wrap: wrap;
  height: auto;
  align-items: center;
  /* S citacemi je karta vyšší a těsné okraje v ní působí stísněně. */
  padding-top: 14px;
  padding-bottom: 18px;

  /* Proužek je široký podle obsahu (361 px), takže bez tohohle ho
     dlouhá citace roztáhne — naměřeno 2 215 px. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Každá citace zabírá celou šířku, takže se dostane na vlastní řádek. */
.utu-nazor .utu-nazor__kus,
.utu-nazor .utu-nazor__vice { width: 100%; }

/* Tenká linka odděluje hvězdy od citací. Žádný druhý rámeček,
   ať to zůstane subtilní. */
.utu-nazor .utu-nazor__kus {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(129, 131, 148, .18);
}

/* Velikosti písma shodné s blokem hodnocení obchodu (.utu-rec):
   obojí jsou recenze, mají se číst stejně. */
.utu-nazor .utu-nazor__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #221d3b;
}

/* Podpis se píše stejně jako „19 HODNOCENÍ“ v proužku nad ním. */
.utu-nazor .utu-nazor__kdo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #818394;
}

.utu-nazor .utu-nazor__hvezdy { display: inline-flex; gap: 1px; }
.utu-nazor .utu-nazor__hvezdy svg {
  width: 11px; height: 11px;
  fill: #F0B820;
}

/* Odkaz je shodný s „Zobrazit všechny recenze“ v bloku hodnocení
   obchodu (.utu-rec__vice): 12 px, tučně, značková fialová. */
.utu-nazor .utu-nazor__vice {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #392E5A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Původní proklik „Podrobnosti hodnocení“ se v kartě skrývá — vedl by
   na totéž místo jako náš odkaz. Jen uvnitř karty: bez ní zůstává. */
.stars-wrapper.utu-nazor .stars-link { display: none; }

@media (max-width: 767px) {
  .stars-wrapper.utu-nazor { padding: 12px 14px 16px; }
}

/* ===========================================================
   Zmínky v médiích — pruh mezi USP a bannery (#13)

   Bez rámečku a bez nadpisu — jen řada log na pozadí stránky.
   Rozhodl Viktor 6. 10. 2026.

   Loga jsou šedivá schválně: na homepage jsou hned pod sebou tři
   barevné bloky (USP, oranžový a fialový banner) a barevná loga
   by s nimi soupeřila. Šedá drží řadu jako tichý důkaz.

   Soubory leží v Assets jako media-*.svg / media-*.png.
   =========================================================== */

/* Celý odstup nese tenhle pruh — USP má margin-bottom 0 a blok bannerů
   margin-top 0. Dole je víc než nahoře schválně: pod pruhem jsou plné
   barevné bannery a plocha táhne oko víc než písmo, takže stejná mezera
   by se dole jevila menší. */
.utu-media {
  margin: 48px 0 64px;
}

.utu-media__rada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.utu-media__odkaz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Odbarvení do šedé. Po najetí myší logo ožije — dává tím najevo,
   že je to odkaz na článek. */
/* `grayscale()` barvu odebere, ale jas nechá — a každá značka je jinak
   světlá, takže při stejné průhlednosti vycházela loga různě tmavá
   (HN 212, Blesk 171, Forbes 160, iDNES 154 na bílém). Hodnoty níž
   jsou dopočítané tak, aby všechna dosedla kolem 160/255.
   Rozbor: zmeny/medialni-zminky/zadani.md */
.utu-media__odkaz img {
  height: 40px;
  width: auto;
  max-width: 100%;
  filter: grayscale(1);
  opacity: .58;                 /* Forbes — tomu je zbytek přizpůsobený */
  transition: opacity .18s ease, filter .18s ease;
}
.utu-media__odkaz:hover img,
.utu-media__odkaz:focus-visible img {
  filter: grayscale(0) brightness(1);   /* `brightness` i tady, kvůli HN */
  opacity: 1;
}

/* iDNES je ze všech nejtmavší (šedá 80). */
.utu-media__odkaz--idnes img { opacity: .54; }

/* Blesk je bílý text ve vyplněném poli, takže po odbarvení zůstane plný
   obdélník — nejtmavší plocha ze všech (šedá 55). */
.utu-media__odkaz--blesk img { opacity: .47; }

/* Hospodářské noviny jsou naopak světlé (šedá 180) a samotná průhlednost
   je nespraví — musela by být nad 1. Proto se nejdřív ztmaví jasem
   na úroveň Forbesu a teprve pak se použije stejné krytí. */
.utu-media__odkaz--hn img { filter: grayscale(1) brightness(.51); }

/* Hospodářské noviny mají nejdelší nápis — při stejné výšce by tlačily
   ostatní, proto o kousek nižší. */
.utu-media__odkaz--hn img { height: 32px; }

/* Mobil: dvě loga na řádek. Čtyři vedle sebe by při 390 px byly
   nečitelné šmouhy (zásada 12). */
@media (max-width: 767px) {
  .utu-media { margin: 32px 0 44px; }
  .utu-media__rada { gap: 22px 12px; }
  .utu-media__odkaz { flex: 0 0 calc(50% - 6px); }
  .utu-media__odkaz img { height: 30px; }
  .utu-media__odkaz--hn img { height: 24px; }
}

/* ============================================================
   UTUKUTU — hodnocení a pečeť v pruhu pod hlavičkou (mobil)
   Zadání: Figma #8. Podrobnosti: zmeny/odznaky/zadani.md
   ============================================================ */

/* Na mobilu odznak v rohu slideru zabíral 45 % šířky a ležel na titulku.
   Volný roh neexistuje: slider má pět snímků a text je v každém obrázku
   natvrdo. Skript proto dvojici vysune nad slider a dá jí tuhle třídu.
   Na desktopu se neuplatní — třídu tam skript nepřidá. */
.utu-banner-odznaky.utu-banner-odznaky--pruh {
  position: static;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: #392E5A;

  /* Pruh musí jít od hrany k hraně, jinak po stranách zůstane bílý
     proužek a hlavičku to neprodlouží — pak je to jen plovoucí
     obdélník. Sloupec má vlastní odsazení; tohle ho vyruší nezávisle
     na tom, kolik zrovna je. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Uvnitř pruhu odznak nesmí mít vlastní destičku — fialová na fialové
   by byla jen obrys navíc. Zůstane rozeta, číslo, hvězdy a popisek. */
.utu-banner-odznaky--pruh .utu-rating-banner {
  background: none;
  border: 0;              /* zlatý lem patří jen do rohu slideru, ne do pruhu */
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.utu-banner-odznaky--pruh .utu-rating-banner .utu-rating__percent {
  /* Zelená vzbuzuje důvěru (Viktor 6. 10. 2026) a na fialové drží
     7,8 : 1. Na světlém podkladu by nešla — viz pamet/vizual.md. */
  color: #7EE2A8;
  font-size: 18px;
}
.utu-banner-odznaky--pruh .utu-rating-banner .utu-rating__label {
  color: #fff;
  opacity: .8;
  font-size: 11px;
}
.utu-banner-odznaky--pruh .utu-seal-banner {
  position: static;
  margin: 0;
  width: 44px;
  height: 44px;
}
/* Obrázek uvnitř si jinak drží 52 × 52 z pravidla pro úzké displeje
   a ve 44px obalu se čtvercová pečeť stlačí do oválu. U cizí ochranné
   známky je deformace horší než u vlastní grafiky. */
.utu-banner-odznaky--pruh .utu-seal-banner img {
  width: 44px;
  height: 44px;
}

/* Odznak je odkaz na stránku s hodnocením. V rohu slideru mu klik
   schválně bereme, aby nekradl proklik banneru pod sebou — v pruhu
   pod hlavičkou žádný banner pod sebou není, takže důvod mizí
   a zůstal by jen odkaz, který vypadá jako odkaz a nefunguje. */
.utu-banner-odznaky--pruh { pointer-events: auto; }