/*  Generated: 2026-10-15 13:03:08 */
/* ============================================================
   .ds-button — tlačítko design systemu (Phase 99 / E4b; zadání bod 4 „nová barevnost
   tlačítek včetně zaoblení")
   Pravidla: docs/CSS-ARCHITECTURE.md § Design system

   JEDINÝ zdroj vzhledu zeleného tlačítka: „Do košíku" v liště s cenou na produktu
   (helper/ds-buy-bar.latte) i hlavní tlačítko kroku ve spodní liště objednávky
   (helper/stickyKrok.latte, Phase 98). Komponenta, která ho použije, smí přidat jen
   rozvržení (min-width, šířku) — barvu, výšku, tvar ani písmo ne; tak se dvě tlačítka
   nemůžou rozejít (zadání 2. 10.: „aby vypadalo stejně jako tlačítko do košíku").

   Výška 48 px = minimum dotykové plochy, které hlídají regresní testy Phase 98
   (pdp-sticky-cart.spec.ts, checkout-sticky-krok.spec.ts).
   ============================================================ */

.ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    /* legacy .btn i kontextová pravidla dávají verzálky — nové tlačítko píše normálně (obrázek S2) */
    text-transform: none;
    cursor: pointer;
    /* rychlé ťuknutí bez čekání na dvojklik-zoom (mobile-touch-discipline.md, facet 1) */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Barva textu i ve stavech odkazu: <a> jako tlačítko by jinak přebarvilo globální a:hover
   (0,1,1 — core stylesheet.css i skupinová vrstva tenant-shared.css) a podtrhlo a {}. */
.ds-button:link,
.ds-button:visited,
.ds-button:hover,
.ds-button:focus,
.ds-button:active {
    text-decoration: none;
}

.ds-button--primary,
.ds-button--primary:link,
.ds-button--primary:visited,
.ds-button--primary:hover,
.ds-button--primary:focus,
.ds-button--primary:active {
    background: var(--ds-action-primary-bg);
    color: var(--ds-action-primary-fg);
}

/* Vedlejší akce (R15/1): zelený obrys — zpět, zaregistrovat se, pokračovat v nákupu, všechny
   varianty, filtry, načíst další. Rámeček uvnitř výšky 48 px (box-sizing: border-box). */
.ds-button--secondary,
.ds-button--secondary:link,
.ds-button--secondary:visited,
.ds-button--secondary:hover,
.ds-button--secondary:focus,
.ds-button--secondary:active {
    border: 2px solid var(--ds-action-secondary-border);
    background: var(--ds-action-secondary-bg);
    color: var(--ds-action-secondary-fg);
}

/* Malé tlačítko (R15/2): košík na kartě produktu ve výpisu (~40 px). */
.ds-button--sm {
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

/* zařízení s myší (desktop): jemné ztmavení zeleného tlačítka po najetí — jako „Pokračovat do košíku" v rozbalovacím košíku
   hlavičky (header.css, brightness 0.95); vlastník 13. 10. 2026. Telefon a dotyk bez hoveru beze změny. */
@media (hover: hover) and (pointer: fine) {
    .ds-button--primary:hover:not(:disabled) {
        filter: brightness(0.92);
    }
}

/* velké — „Do košíku" na kartě produktu nového desktopu, stejně jako „Pokračovat do košíku" v rozbalovacím košíku
   hlavičky (header.css, 56 px / 18 px; vlastník 13. 10. 2026) */
.ds-button--lg {
    height: 56px;
    padding: 0 28px;
    font-size: 18px;
}


/* přes celou šířku (lišta kroků objednávky — texty „Pokračovat na osobní údaje" se vedle ceny nevejdou) */
.ds-button--block {
    display: flex;
    width: 100%;
}

.ds-button:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}

.ds-button:disabled {
    cursor: default;
    opacity: .6;
}

.ds-button svg {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

/* Ikona malého tlačítka — ZA obecným .ds-button svg (stejná specificita 0,1,1 → vyhrává pořadí; nález 7B). */
.ds-button--sm svg {
    width: 20px;
    height: 20px;
}