th.label {
    text-align: left !important;
}


th.label label[for="pa_pojemnosc"],
th.label label[for="pa_baza"] {
    line-height: 1.6 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #323940 !important;
}

.hide {
    display: none;
}

.variation-Wybranykolor p {
    margin: 0;
}

.actions .button {
    display: inline-block !important;
    margin-left: 16px !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel ul {
    display: block !important;
}

.woocommerce div.product form.cart {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


.out-of-sale-box {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-top-color: #e5e5e5;
    border-right-color: #e5e5e5;
    border-bottom-color: #e5e5e5;
    border-left-color: #e5e5e5;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

.variation {
    margin-top: 6px;
}

.variation-Pojemno p {
    display: inline;
}

.woocommerce-cart-form__cart-item .variation .variation-Baza {
    display: none !important;
}

.wc-forward {
    margin-left: 6px;
}
/* ============================================================
   Responsywność mobile selektora kolorów (popup kolekcji)
   Problem: zakladki kolekcji (.palette-list) i probki kolorow
   (.left-side) byly scrollowane w BOK (overflow-x) -> na telefonie
   klient widzial tylko jedna kolekcje i nie wiedzial, ze jest wiecej.
   Fix: zakladki sie zawijaja (flex-wrap), probki ukladaja sie
   pionowo (grid-auto-flow: row) z pionowym scrollem.
   custom.css laduje sie PO proformat.css -> wygrywa w kaskadzie,
   ma cache-busting filemtime, przetrwa rebuild proformat.scss.
   (claude 2026-07-29)
   ============================================================ */
@media (max-width: 767px) {
  /* Zakladki kolekcji / rodzin kolorow: zawijanie zamiast scrolla w bok */
  .pf-plugin .families-menu,
  .pf-plugin .palette-list {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 8px;
  }
  .pf-plugin .families-menu .family-menu,
  .pf-plugin .palette-list .palette-list-item {
    padding: 5px 18px 5px 0;
  }

  /* Siatka probek: pionowo (wiersze), pionowy scroll zamiast poziomego */
  .pf-plugin .single-family .left-side {
    width: 100%;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-auto-flow: row;
    height: auto;
    max-height: 56vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .pf-plugin .single-family .left-side .single-color {
    width: 100%;
    height: 54px;
  }
}