/*  Generated: 2026-11-11 08:11:28 */
/* Phase 99 / VZ — prvek vzhledu „hlavicka-duvera" (registr core/app/Model/Vzhled/Registr.php): hodnocení vedle loga
   a fotka poradce skupiny u telefonu v hlavičce. Zadání P. Beneše 10. 11. 2026, jeho volba týž den (formulář stránky
   s návrhy): počítač A, u Goldexu na noteboocích B; telefon M2; tlačítko telefonu = fotka s malým sluchátkem
   (vzhledy/zadani-benes-2026-11-10/ANALYZA.md § 7 a § 8). Rozměry jsou ty, které Beneš viděl na snímcích
   (navrhy/vytvor-navrhy.js).

   Šablona helper/ds-header.latte (obal .ds-header__znacka, třída .ds-header--duvera, fotka .ds-header__foto), hodnocení
   = helper/ds-duvera-odznak.latte (základní styly odznak-duvery.css — prvek ho vyžaduje). Osa na počítači: ds-header.js
   (initDsOsa) měří širší stranu do --ds-osa-strana a podle pravidla B přidává .ds-header--telefon-kratce, při velmi
   úzkém hledání .ds-header--hodnoceni-kratce a .ds-header--telefon-ikona (naše pojistky, okna pod 1280 px a dlouhé texty).

   Načítá se jen ve vzhledu s tímto prvkem (VzhledStranky::cssSoubory); třídy výš vznikají jen s ním. */

/* ---------- společné ---------- */
.ds-header__znacka {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 8px;
    min-width: 0;
}

/* hodnocení v hlavičce: bez podbarvení a odsazení odznaku z menu, v jednom řádku */
.ds-header__znacka .ds-duvera-odznak {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0;
    background: none;
}

/* jen pro čtečku: text odznaku na telefonu a tabletu vždy, na počítači ve zkrácených režimech ds-header.js (hodnocení bez
   textu, telefon bez doby, telefon jen fotkou) */
html.ds-mobile .ds-header__znacka .ds-duvera-odznak__text,
html.ds-desktop .ds-header--hodnoceni-kratce .ds-header__znacka .ds-duvera-odznak__text,
html.ds-desktop .ds-header--telefon-kratce .ds-header__phone-hours,
html.ds-desktop .ds-header--telefon-ikona .ds-header__phone-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* kulatá fotka poradce; malé sluchátko vpravo dole (na telefonu vždy, na počítači jen bez textu u telefonu) */
.ds-header__foto {
    position: relative;
    display: block;
    flex: 0 0 auto;
}
.ds-header__foto img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.ds-header__foto-sluchatko {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ds-action-primary-bg);
    color: var(--ds-action-primary-fg);
    box-shadow: 0 0 0 2px var(--ds-surface);
}
/* 0,2,1 — přebije velikost ikon hlavičky (.ds-header__icon svg 0,1,1; desktop html.ds-desktop .ds-header__phone svg 0,2,2
   je níž přebitá vlastním pravidlem) */
.ds-header .ds-header__foto-sluchatko svg {
    width: 10px;
    height: 10px;
}

/* ---------- telefon a tablet (mobilní režim) ---------- */
html.ds-mobile .ds-header__znacka .ds-duvera-odznak__hodnoceni {
    row-gap: 0;
}
html.ds-mobile .ds-header__znacka .ds-duvera-odznak__medaile {
    width: 18px;
    height: 18px;
}
html.ds-mobile .ds-header__znacka .ds-duvera-odznak__procenta {
    font-size: 18px;
    line-height: 21px;
}
html.ds-mobile .ds-header__znacka .ds-duvera-odznak__hvezdy svg {
    width: 9px;
    height: 9px;
}
/* fotka vyplní kruh tlačítka (40 px, na telefonu 36 px níž) */
html.ds-mobile .ds-header__tel-foto .ds-header__foto {
    width: 100%;
    height: 100%;
}

/* M2 (jen telefon — tablet místo má): ikony 36 px místo 40 a mezery 2 px místo 6, logo se zúží do zbylého místa
   (základní pravidlo .ds-header__logo img: max-width 100 % zúženého odkazu). 36 px = minimum WCAG 2.2 2.5.8 (24 px)
   s rezervou; dnešních 40 px ani 36 px nesplní doporučení Applu a Googlu (44–48 px) — viz ANALYZA.md § 7.2. */
html.ds-mobile:not(.ds-tablet) .ds-header--duvera .ds-header__actions {
    gap: 2px;
}
html.ds-mobile:not(.ds-tablet) .ds-header--duvera .ds-header__actions > .ds-header__icon,
html.ds-mobile:not(.ds-tablet) .ds-header--duvera .ds-header__actions .ds-header__cart,
html.ds-mobile:not(.ds-tablet) .ds-header--duvera .ds-header__actions > .ds-header__menu {
    width: 36px;
    height: 36px;
}

/* telefon pod 360 px (Beneš návrhy viděl od 360 px; GA4 30 dní: 1,9 % mobilních relací bibiku, 7,6 % goldexu): logo by
   se vedle hodnocení zúžilo na ~62 px (320 px) — hodnocení se tu nevykreslí, logo zůstane čitelné. Hranice jako
   listing.css (359 px). */
@media (max-width: 359px) {
    html.ds-mobile:not(.ds-tablet) .ds-header__znacka .ds-duvera-odznak {
        display: none;
    }
}

/* tablet (D2: jeden řádek logo · hledání · ikony): obal loga a hodnocení je položkou mřížky — sám dopadne do buňky
   „logo", jediné volné (hledání a akce mají buňku pojmenovanou; mutace 11. 11.) */
@media (min-width: 768px) {
    html.ds-tablet .ds-header__znacka {
        gap: 12px;
    }
}

/* ---------- počítač ---------- */
html.ds-desktop .ds-header__znacka {
    grid-area: logo;
    gap: 24px;                      /* nejmenší mezera logo · hodnocení (= MEZERA v ds-header.js) */
}
/* logo se na počítači nezužuje: ds-header.js měří jeho šířku a ze zúženého (sloupec podle minulého měření) by spočítal
   stranu příliš úzkou — logo by se pak smrsklo až na ~40 px (změřeno 1025 px) */
html.ds-desktop .ds-header__znacka .ds-header__logo {
    flex-shrink: 0;
}
/* velikost z návrhu (snímky A/B): hodnocení ~213 px široké */
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__medaile {
    width: 22px;
    height: 22px;
}
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__procenta {
    font-size: 21px;
    line-height: 24px;
}
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__hvezdy svg {
    width: 11px;
    height: 11px;
}
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__pocet {
    font-size: 17px;
    line-height: 20px;
}
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__popisek {
    font-size: 9.5px;
    line-height: 12px;
}
html.ds-desktop .ds-header__znacka .ds-duvera-odznak__overeno {
    font-size: 10px;
    line-height: 13px;
}

/* fotka 44 px před sluchátkem a číslem (A); sluchátko na fotce jen pod 1200 px, kde se text schová */
html.ds-desktop .ds-header__phone .ds-header__foto {
    width: 44px;
    height: 44px;
}
html.ds-desktop .ds-header__phone .ds-header__foto-sluchatko {
    display: none;
}
html.ds-desktop .ds-header__phone .ds-header__foto-sluchatko svg {
    width: 10px;
    height: 10px;
    color: inherit;
}
/* B (Beneš 10. 11., otázka 1): zkrácený telefon = fotka a číslo; otevírací doba zůstane jen pro čtečku (pravidlo výš).
   Velké sluchátko se schová jen vedle fotky — skupina bez fotky by jinak přišla o jedinou ikonu u čísla. */
html.ds-desktop .ds-header--telefon-kratce .ds-header__phone--foto > svg {
    display: none;
}

/* text u telefonu schovaný — pod 1200 px (header.css) nebo krokem „jen fotka" (ds-header.js): místo velkého sluchátka
   malé na fotce; skupina bez fotky má dál velké sluchátko */
html.ds-desktop .ds-header--telefon-ikona .ds-header__phone--foto > svg {
    display: none;
}
html.ds-desktop .ds-header--telefon-ikona .ds-header__phone--foto .ds-header__foto-sluchatko {
    display: flex;
}
@media (max-width: 1199px) {
    html.ds-desktop .ds-header__phone--foto > svg {
        display: none;
    }
    html.ds-desktop .ds-header__phone--foto .ds-header__foto-sluchatko {
        display: flex;
    }
}

/* Od 1025 px (řádek logo · hledání · akce): boční sloupce stejně široké → hledání (nejvýš 600 px) na ose lišt a mezery
   k hodnocení i k telefonu stejné (column-gap). Šířku strany (= širší z obou obsahů) zapisuje ds-header.js do
   --ds-osa-strana; bez ní (JS ještě neběžel nebo nejde) má každá strana aspoň svůj obsah — bez překryvu, jen ne
   přesně na ose. Odkazy přes celou šířku = na ose. Logo vlevo, hodnocení u hledání; telefon u hledání, účet a košík
   vpravo. */
@media (min-width: 1025px) {
    html.ds-desktop .ds-header--duvera .ds-header__main {
        grid-template-columns:
            minmax(var(--ds-osa-strana, max-content), 1fr)
            minmax(0, 600px)
            minmax(var(--ds-osa-strana, max-content), 1fr);
        grid-template-areas:
            "links links links"
            "logo  search actions";
    }
    html.ds-desktop .ds-header--duvera .ds-header__znacka {
        justify-content: space-between;
    }
    /* přes celý pravý sloupec, účet a košík u pravého okraje — i u e-shopu bez telefonu (bez něj by je k okraji nic
       neodtlačilo) */
    html.ds-desktop .ds-header--duvera .ds-header__actions {
        justify-self: stretch;
        justify-content: flex-end;
    }
    html.ds-desktop .ds-header--duvera .ds-header__phone {
        margin-right: auto;
    }
}

/* úzké okno počítače (pod 768 px): hodnocení jen pečeť, procenta a hvězdy jako na telefonu */
@media (max-width: 767px) {
    html.ds-desktop .ds-header__znacka .ds-duvera-odznak__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}