/*  Generated: 2026-10-15 17:57:40 */
/* ============================================================
   .ds-buy-row + .ds-qty — řádek „počet kusů + Do košíku" na detailu produktu (Phase 99 / E8c)
   Šablona: core/app/templates/Product/default.latte (#cartAdd)
   Chování počtu kusů: core/js/src/main.js changeQuantity (třídy .quantity-plus/-minus a
   pole přes [name="cart_quantity"] — beze změny)
   Pravidla: docs/CSS-ARCHITECTURE.md § Design system

   Rozhodnutí vlastníka R16 (2. 10.): vlevo pole s velkými − a +, vpravo zelená pilulka přes
   zbytek šířky. Legacy rozvržení (pole položené přes černé tlačítko s odsazením 120 px) platí
   jen pro třídy .kosik-ks/.kosik-button, které šablona s novým vzhledem nedává.
   Načítá se pod $dsButtons (jako button.css).
   ============================================================ */

/* #cartAdd (1,0,0) má pevnou výšku 62 px a float — tady přebít jen v novém vzhledu. align-self: na šířku
   (481–767 px) má #cartAdd legacy margin-bottom 45 px uvnitř #cartAdd-out o pevných 62 px — při roztažení
   (stretch) by se řádek zmáčkl na 17 px (nález 7B); takhle je vysoký podle obsahu jako legacy. */
.ds-buy-row#cartAdd {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    float: none;
    height: auto;
}

.ds-buy-row__tlacitko {
    flex: 1 1 auto;
    min-width: 0;
}

/* text na jeden řádek i na 320 px (iPhone SE 1. gen.) — jinak se „Do košíku" zalomí (nález 7B) */
.ds-buy-row__tlacitko .ds-button {
    white-space: nowrap;
}

/* Pole s počtem kusů: − 1 +  (prvky .quantity-plus/-minus zůstávají kvůli JS) */
.ds-qty {
    order: -1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--ds-field-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
}

.ds-qty .quantity-buttons {
    display: contents;
}

/* legacy .quantity-plus.fas (0,2,0) je absolutně umístěný tmavý čtvereček 26 × 20 px a :hover (0,3,0)
   ho ztmaví — dotyková plocha pod minimem; tady 40 × 46 px a průhledné pozadí i po ťuknutí */
.ds-qty .quantity-plus.fas,
.ds-qty .quantity-minus.fas {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    background: transparent;
    color: var(--ds-text-primary);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.ds-qty .quantity-plus.fas:hover,
.ds-qty .quantity-minus.fas:hover {
    background: transparent;
}

.ds-qty .quantity-minus.fas {
    order: 1;
}

.ds-qty .quantity-plus.fas {
    order: 3;
}

.ds-qty .quantity-plus.fas::before {
    content: "+";
}

.ds-qty .quantity-minus.fas::before {
    content: "\2212";
}

/* 18 px — pod 16 px iOS při fokusu zoomuje celou stránku (mobile-touch-discipline.md) */
.ds-qty__input {
    order: 2;
    width: 44px;   /* 4 číslice v 18 px tučně (maxlength 6 — víc se nečeká) */
    height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text-primary);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* „ks" jen pro čtečky — vizuálně ho nahrazuje tvar pole */
.ds-qty > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}