/* ============================================================
   POLE ILOSCI - WSPOLNY KOMPONENT ('ilosc.js')
   ============================================================
   Karta produktu i koszyk. Wczytywany obok 'produkt.css'
   oraz 'koszyk.css'.
   Autor: claude, 2026-09-17.
   ============================================================ */
/* Obwodka siedzi na kontenerze, nie na polu - inaczej bylyby trzy
   ramki obok siebie. Natywne strzalki gasimy, bo wychodzily dopiero
   na hover (uwaga klientki 5) i dublowalyby nasze przyciski. */
/* Wysokosc pisana z nadmiarowa specyficznoscia: proformat.css ma
   '.woocommerce-variation-add-to-cart .quantity{height:50px}' (0,2,0),
   przez co pole bylo o 4 px nizsze od przycisku obok. */
.bmx-pdp__cart .quantity.bmx-qty,
.bmx-qty {
    display: flex;
    align-items: center;
    /* 'max-content', bo w koszyku pole jest komorka siatki i bez tego
       rozciagalo sie na cala szerokosc kolumny (486 px na desktopie). */
    width: max-content;
    height: 54px;          /* rowno z przyciskiem obok */
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.bmx-qty:focus-within { border-color: var(--navy); }

.bmx-pdp__cart .quantity input[type="number"],
.bmx-qty input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 100%;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--navy);
}

.bmx-qty input[type="number"]::-webkit-outer-spin-button,
.bmx-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bmx-qty input[type="number"] { -moz-appearance: textfield; }

.bmx-pdp__cart .quantity input[type="number"]:focus,
.bmx-qty input[type="number"]:focus {
    outline: none;
}

.bmx-qty__btn {
    flex: none;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--navy);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.bmx-qty__btn:hover,
.bmx-qty__btn:focus-visible { background: var(--navy); color: #fff; }

/* Pole bez naszej oprawy (skrypt nie zdazyl, brak JS) ma zostac
   czytelne - stad ramka awaryjna. */
.bmx-pdp__cart .quantity:not(.bmx-qty) input[type="number"] {
    width: 88px;
    height: 54px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
}

/* Koszyk: pole jest w komorce tabeli, ktora WooCommerce na malych
   ekranach wyrownuje do prawej ('shop_table_responsive tr td
   {text-align:right !important}') - komponent ma byc przy nazwie,
   czyli do lewej. */
body.woocommerce-cart td.product-quantity .bmx-qty,
body.woocommerce-checkout td.product-quantity .bmx-qty {
    height: 46px;
}

/* Wtyczka 'oxygen-woocommerce' dokleja do pola ilosci wlasne strzalki
   jako obrazki tla ('.woocommerce .quantity .qty' - waga (0,3,0)),
   a arkusz koszyka daje mu kremowe tlo. Obie reguly bija nasz krotszy
   selektor, wiec tu piszemy go dluzej: (0,3,1). */
.woocommerce .quantity.bmx-qty .qty,
.woocommerce .quantity.bmx-qty input[type="number"] {
    background: transparent;
    /* Ta sama walka o wage dotyczy obwodki: motyw ma
       '.woocommerce input[type="number"] {border:1px solid ...}' (0,2,1),
       przez co wokol samej cyfry zostawal drugi prostokat wewnatrz
       naszej pigulki. */
    border: 0;
    border-radius: 0;
}