/* Ukryj natywne strzałki */
input.qty-custom { appearance: textfield; -moz-appearance: textfield; }
input.qty-custom::-webkit-outer-spin-button,
input.qty-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Wrapper na spinner z przyciskami */
.qty-spin { position: relative; display: inline-block; }

/* Pole liczby – ciaśniejsza poduszka pod przyciski po prawej */
.qty-spin > input.qty-custom{
  width: 100px; height: 44px; line-height: 44px;
  text-align: center;
  border: 1px solid #ced4da; border-radius: 8px;
  padding-right: 40px;              /* mniej miejsca – strzałki bliżej krawędzi */
  padding-left: 10px;
}

/* Przyciski (desktop): pionowo po prawej, bliżej brzegu */
.qty-spin .qty-btn{
  position: absolute; right: 2px;
  width: 36px; height: calc(50% - 6px);
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Pozycje góra/dół */
.qty-spin .qty-btn.up{ top: 4px; }
.qty-spin .qty-btn.down{ bottom: 4px; }

/* Jednolite tło dla wszystkich stanów */
.qty-spin .qty-btn,
.qty-spin .qty-btn:hover,
.qty-spin .qty-btn:active,
.qty-spin .qty-btn:disabled,
.qty-spin .qty-btn[disabled]{ background: transparent !important; }

/* Focus (klawiatura) – dostępność */
.qty-spin .qty-btn:focus-visible{ outline: 2px solid #2684ff; outline-offset: 2px; }

/* Kursor + brak zmiany tła po zablokowaniu */
.qty-spin .qty-btn:disabled,
.qty-spin .qty-btn[disabled]{ cursor: not-allowed; }

/* Ikony w przyciskach */
.qty-spin .qty-btn svg,
.qty-spin .qty-btn i,
.qty-spin .qty-btn img,
.qty-spin .qty-btn .chev{
  opacity: 1; filter: none;
  transition: opacity .15s ease, filter .15s ease;
}

/* Disabled = delikatnie wyszarzone */
.qty-spin .qty-btn:disabled svg,
.qty-spin .qty-btn[disabled] svg,
.qty-spin .qty-btn:disabled i,
.qty-spin .qty-btn[disabled] i,
.qty-spin .qty-btn:disabled img,
.qty-spin .qty-btn[disabled] img,
.qty-spin .qty-btn:disabled .chev,
.qty-spin .qty-btn[disabled] .chev{
  opacity: .45; filter: grayscale(1);
}

/* MOBILE: przyciski na całą wysokość pola (lewa=down, prawa=up) */
@media (max-width: 576px){
  .qty-spin > input.qty-custom{
    width: 100%; height: 44px; line-height: 44px;
    padding-left: 44px;   /* miejsce na ↓ po lewej */
    padding-right: 44px;  /* miejsce na ↑ po prawej */
  }
  .qty-spin .qty-btn{
    top: 4px; bottom: 4px; height: calc(100% - 8px);
    width: 36px;
  }
  .qty-spin .qty-btn.down{ left: 2px; right: auto; }  /* ↓ po lewej */
  .qty-spin .qty-btn.up{ right: 2px; }                /* ↑ po prawej */
}

/* ===== Mobile: QTY zajmuje 50% szerokości kolumny ===== */
@media (max-width: 576px){
  /* kolumna z QTY zachowuje się jak flex, żeby łatwo sterować szerokością kontrolki */
  .pd__qty-col{ display:flex; align-items:center; }

  /* sama kontrolka (wrapper ze strzałkami) = połowa szerokości */
  .pd__qty-col .qty-spin{
    width: 50%;
    min-width: 160px;     /* żeby nie zrobiła się za wąska */
    max-width: 260px;     /* opcjonalnie ogranicz maksymalnie */
  }

  /* input wypełnia wrapper na 100% */
  .pd__qty-col .qty-spin > input.qty-custom{
    width: 100%;
  }
}