/*  Generated: 2026-10-15 17:57:40 */
/* ============================================================
   Design system — okno po přidání do košíku a košík na NOVÉM DESKTOPU (Phase 99 / D13e skupina 3, vlastník 13. 10.:
   „modální okno po přidání do košíku má divný design a barvu nadpisu", „v košíku je karusel postaru se starým nadpisem").
   Načítá se s $dsKosikDesktop (nový desktop + designSystem.desktopCart) na každé stránce — okno se otevírá všude, kde je
   tlačítko do košíku. Všechna pravidla pod html.ds-desktop — telefon a tablet (ds-mobile) ani starý desktop je nedostanou.
   S4 (vlastník 14. 10. 2026, vyzkum-desktop-tablet.md § 34): telefon a tablet za přepínačem designSystem.unifiedCart
   ($dsKosikJednotny, html.ds-jednotny-kosik — layout soubor načte i v mobilním režimu) — každé pravidlo má v témž pravidle
   dvojče html.ds-jednotny-kosik (legacy styly okna jsou nízké specificity, stačí jedna třída); vlastní hodnoty na konci.
   Karta v doporučených (okno i košík) je karta výpisu: obal má značku .ds-karty (BasePresenter::dsKarty) a vzhled dává
   listing.css. Tlačítka v okně a v košíku jsou .ds-button (dsBtn, button.css).
   docs/phase-99-mobilni-redesign/vyzkum-desktop-tablet.md § 31.
   ============================================================ */

/* Nadpis okna: legacy zelené verzálky 16 px (stylesheet.css „#modalCartContent .text", sdílené s nadpisem děkovné
   stránky) → zelená ikona fajfky a tmavý nadpis větou jako nadpisy panelů nového desktopu. Ikona v řádku s textem
   (flex), ne float — legacy ji posouvá o −1 px a float by u dvouřádkového textu obtékal. */
html.ds-desktop #modalCartContent .text,
html.ds-jednotny-kosik #modalCartContent .text {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 48px 16px 0;   /* nahoře jako legacy; vpravo místo pro křížek zavření */
    color: var(--ds-text-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
html.ds-desktop #modalCartContent .text i,
html.ds-jednotny-kosik #modalCartContent .text i {
    display: block;
    float: none;
    flex: 0 0 auto;
    margin: 0;
    color: var(--ds-action-primary-bg);
    font-size: 24px;
}

/* Nadpis doporučených v okně a karuselu v košíku — tentýž styl jako nadpisy sekcí karty produktu (pdp.css, D12:
   18 px tučně vlevo). */
html.ds-desktop #sk_line_2 h2,
html.ds-desktop.ds-kosik #shoppingCartDefault .recommendation > h2,
html.ds-jednotny-kosik #sk_line_2 h2,
html.ds-jednotny-kosik #shoppingCartDefault .recommendation > h2 {
    margin: 28px 0 10px;   /* jako pdp.css (legacy 5 px / 5 px a barva #262626) */
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

/* Mřížka doporučených v okně s novou kartou: mezera jako ve výpisu (karty mají vlastní rámeček a zaoblení). */
html.ds-desktop #sk_line_2 .modal-upsell-grid.ds-karty,
html.ds-jednotny-kosik #sk_line_2 .modal-upsell-grid.ds-karty {
    gap: 16px;
}

/* Výzkum UI/UX desktopu E2 (vlastník 13. 10. 2026, vyzkum-ux-desktop.md § 5 P1-6) — pod „Pokračovat" kontakt na poradce
   a návrat do obchodu (ShoppingCart/default.latte, jen $dsKosik). Vzor konkurence: poradce s telefonem u tlačítka
   nákupu (northman, brainmarket), odkaz zpět jako vedlejší akce pod hlavní. */
html.ds-desktop.ds-kosik #total-price .ds-kosik-pomoc,
html.ds-jednotny-kosik #total-price .ds-kosik-pomoc {
    clear: both;           /* legacy .buttonRow.forward je float — bez clear by box odstavce ležel za tlačítkem */
    margin: 14px 0 0;
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}
html.ds-desktop.ds-kosik #total-price .ds-kosik-pomoc a,
html.ds-jednotny-kosik #total-price .ds-kosik-pomoc a {
    color: var(--ds-text-primary);
    font-weight: 700;
    white-space: nowrap;
}
html.ds-desktop.ds-kosik #total-price .ds-kosik-pomoc__hodiny,
html.ds-jednotny-kosik #total-price .ds-kosik-pomoc__hodiny {
    display: block;
    color: var(--ds-text-muted);
    font-size: 13px;
}
html.ds-desktop.ds-kosik #total-price .ds-kosik-zpet,
html.ds-jednotny-kosik #total-price .ds-kosik-zpet {
    display: block;
    margin: 10px 0 0;
    color: var(--ds-text-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-decoration: underline;
}

/* ---------- S4 (§ 34) — vlastní hodnoty telefonu a tabletu ----------
   Nadpis okna vlevo vedle fajfky jako na desktopu (legacy mobilní okno ho centruje — dva řádky na střed vedle ikony).
   Doporučené v okně s novou kartou: mezera jako ve výpisu telefonu (S1 — 8 px), tablet 16 px jako desktop. */
html.ds-jednotny-kosik #modalCartContent .text {
    text-align: left;
}
html.ds-jednotny-kosik #sk_line_2 .modal-upsell-grid.ds-karty {
    gap: 8px;
}
/* dotykový cíl ≥ 44 px (nález 7B S4–S7): „← Pokračovat v nákupu" má z desktopu (pro myš) 20 px.
   Telefon poradny ZÁMĚRNĚ ne: je to odkaz uvnitř věty (výjimka WCAG 2.5.8 „inline") a svislý padding na inline odkazu
   do výšky řádku nevstoupí — plocha by přesáhla na sousedy a ťuknutí do spodku „Pokračovat" by vytočilo číslo
   (2. kolo 7B, změřeno elementFromPoint; hlídá e2e ds-jednotny-kosik). */
html.ds-jednotny-kosik #total-price .ds-kosik-zpet {
    margin-top: 0;
    padding: 12px 0;
}
@media (min-width: 768px) {
    html.ds-tablet.ds-jednotny-kosik #sk_line_2 .modal-upsell-grid.ds-karty {
        gap: 16px;
    }

    /* Okno po přidání do košíku na tabletu na výšku: legacy modal.css drží panel 320 px až do 1024 px (700 px až od
       1025 px) — na iPadu Air 11 (820 px) měly karty doporučených 132 px a cena ležela přes tlačítko košíku (vlastník
       15. 10.: „na tabletu lze vyjížděcí panel rozšířit"). 520 px = karty ~230 px jako výpis na tabletu (S1).
       Výchozí pozice animace (right) s šířkou, jinak by zavřený panel vyčníval o 200 px. Jen panel košíku. */
    html.ds-tablet.ds-jednotny-kosik #shoping-cart-modal.modal.right .modal-dialog {
        width: 520px;
    }

    html.ds-tablet.ds-jednotny-kosik #shoping-cart-modal.modal.right.fade .modal-dialog {
        right: -520px;
    }

    html.ds-tablet.ds-jednotny-kosik #shoping-cart-modal.modal.right.fade.in .modal-dialog {
        right: 0;
    }
}
/* tablet na šířku (iPad 1180 px) — šířka 700 px z legacy (.modal.right.detail od 1025 px); pravidlo výš má vyšší
   specificitu, takže ji tady vrátit, ne zúžit landscape na 520 */
@media (min-width: 1025px) {
    html.ds-tablet.ds-jednotny-kosik #shoping-cart-modal.modal.right .modal-dialog {
        width: 700px;
    }

    html.ds-tablet.ds-jednotny-kosik #shoping-cart-modal.modal.right.fade .modal-dialog {
        right: -700px;
    }
}