/* Styles for Podnadrukiem Size Chart
   Cel: na urządzeniach mobilnych wyświetlić obok siebie sekcje "Opis" i "Tabela rozmiarów"
*/

/* Upewnij się o box-sizing */
.podnadrukiem-size-chart, .woocommerce-tabs .panel {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  /* Nie ustawiamy display:flex na całym .woocommerce-tabs — to mogło powodować dwukolumnowy układ treści */
  /* Usunięto: .woocommerce div.product .woocommerce-tabs { display: flex !important; ... } */

  /* Ustawienie listy zakładek w jeden wiersz */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Lista zakładek nad panelami */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    order: -1 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* Elementy li powinny nie zajmować pełnej szerokości */
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* UPEWNIJ SIĘ: panele mają pełną szerokość, ale nie wymuszaj ich widoczności (zostaw to motywowi/Woo) */
  .woocommerce div.product .woocommerce-tabs .panel,
  #tab-description,
  #tab-size_chart,
  .podnadrukiem-size-chart {
    /* NIE ustawiaj display/visibility/opacity/height — to powodowało jednoczesną widoczność wielu paneli */
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    /* wyłącz animacje, aby nie migało */
    transition: none !important;
    animation: none !important;
  }

  /* Klasa do ukrywania paneli (używana przez JS) */
  .podnadrukiem-tab-panel-hidden {
    display: none !important;
  }

  /* Link w zakładce: estetyczne dopasowanie, niech będą wyraźne i klikalne */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  /* Zapewnij poprawne skalowanie obrazów i tabel wewnątrz paneli */
  #tab-description img, #tab-size_chart img, .podnadrukiem-size-chart img, .woocommerce div.product .woocommerce-tabs .panel img, .woocommerce div.product .woocommerce-tabs .panel table {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Jeśli motyw wcześniej ustawił li jako block z szerokim border/padding, wymuśmy brak pełnej szerokości */
  .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    box-sizing: border-box !important;
  }

  /* Styles for constructed tabs and headings */
  .podnadrukiem-constructed-tabs {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 6px 0 !important;
    margin-bottom: 12px !important;
  }
  .podnadrukiem-tab-btn {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
  }
  .podnadrukiem-tab-btn.active {
    background: #eee !important;
  }

  /* Przydatne, jeśli nagłówki pozostają w DOM: styl dla nich aby wyglądały jak zakładki */
  .podnadrukiem-tab-heading {
    display: inline-block !important;
    padding: 8px 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    margin-right: 8px !important;
  }

  /* Przywrócenie natywnego renderowania tabel wewnątrz tabeli rozmiarów */
  .podnadrukiem-size-chart table,
  #tab-size_chart table,
  #tab-description table,
  .woocommerce div.product .woocommerce-tabs .panel table,
  .podnadrukiem-size-chart .wp-block-table table,
  .podnadrukiem-size-chart .tablepress,
  .wp-block-table table {
    display: table !important;
    width: 100% !important; /* szerokość 100% wewnątrz kontenera przewijanego */
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  .podnadrukiem-size-chart table thead,
  .podnadrukiem-size-chart table tbody,
  .podnadrukiem-size-chart table tfoot {
    display: table-row-group !important;
  }

  .podnadrukiem-size-chart table tr,
  .wp-block-table tr,
  .tablepress tr {
    display: table-row !important;
  }

  .podnadrukiem-size-chart table th,
  .podnadrukiem-size-chart table td,
  #tab-size_chart table th,
  #tab-size_chart table td,
  .wp-block-table th,
  .wp-block-table td,
  .tablepress td,
  .tablepress th {
    display: table-cell !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    vertical-align: middle !important;
    white-space: normal !important; /* zezwól na zawijanie */
    word-break: break-word !important;
    min-width: 40px !important;
  }

  /* Jeśli motyw ustawił wysokość/width na komórkach, zresetuj to */
  .podnadrukiem-size-chart table th[style],
  .podnadrukiem-size-chart table td[style],
  #tab-size_chart table th[style],
  #tab-size_chart table td[style] {
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Pozwól na przewijanie poziome jeśli tabela jest szersza niż ekran */
  .podnadrukiem-size-chart,
  #tab-size_chart,
  .woocommerce div.product .woocommerce-tabs .panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Przywróć widoczność natywnych ul.tabs (nie usuwamy etykiet zakładek) */
  .woocommerce div.product .woocommerce-tabs > ul.tabs,
  .woocommerce div.product ul.tabs {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Jeśli motyw pozostawił puste przyciski jako divy, ukryj puste elementy w .podnadrukiem-constructed-tabs */
  .podnadrukiem-constructed-tabs .podnadrukiem-tab-btn:empty { display: none !important; }

  /* Ukryj skonstruowane przyciski całkowicie na mobile (użytkownik chce usunąć te małe boxy) */
  .podnadrukiem-constructed-tabs,
  .podnadrukiem-constructed-tabs .podnadrukiem-tab-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* DODATKOWE: ukryj tylko małe pustę prostokąty (przyciski/boxy) które pojawiają się wewnątrz paneli zakładek */
  .woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-constructed-tabs,
  .woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-constructed-tabs .podnadrukiem-tab-btn,
  .woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-tab-btn,
  .woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-tab-btn:empty,
  .woocommerce div.product .woocommerce-tabs .panel button:empty,
  .woocommerce div.product .woocommerce-tabs .panel a:empty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Ukryj także przyciski które wyglądają jak puste pola (mają very small width) - przydatne gdy :empty nie działa */
  .woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-tab-btn[aria-label][aria-label=""] {
    display: none !important;
  }

  /* Upewnij się, że tabela rozmiarów renderuje się poprawnie, ale nie wymuszaj jej widoczności */
  #tab-size_chart .podnadrukiem-size-chart,
  .podnadrukiem-size-chart {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Usuń wcześniejsze wymuszenie display/visibility dla #tab-size_chart i .podnadrukiem-size-chart */
  /* (było: display:block; visibility:visible; height:auto; opacity:1; max-height:none) */

  /* Ustawiamy padding dla komórek wewnątrz tabeli w tabeli rozmiarów */
  #tab-size_chart table th, #tab-size_chart table td, .podnadrukiem-size-chart table th, .podnadrukiem-size-chart table td {
    padding: 8px 10px !important;
  }

  /* Panel nie powinien mieć własnego przewijania poziomego — pozwól wyjść wrapperowi poza krawędzie */
  .woocommerce div.product .woocommerce-tabs .panel {
    overflow-x: visible !important;
  }

  /* Uproszczony wrapper: nie wychodź poza viewport, aby nie ucinało lewej krawędzi */
  .podnadrukiem-table-wrapper {
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Tabela może być szersza niż wrapper; przewijanie poziome po wrapperze */
  .podnadrukiem-table-wrapper table,
  #tab-size_chart table,
  .podnadrukiem-size-chart table {
    width: auto !important;
    max-width: none !important;
  }
}

/* Desktop: brak wymuszeń, zostawiamy domyślny styl motywu */

/* Drobne poprawki wyglądu nagłówków sekcji tabel rozmiarów */
.pn-size-chart-heading {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
}

/* Zmniejszenie rozmiaru nagłówków na bardzo małych ekranach */
@media (max-width: 480px) {
  .pn-size-chart-heading { font-size: 1rem !important; }
}

/* Force fixed layout and equal columns for size chart tables on frontend */
.podnadrukiem-size-chart table,
#tab-size_chart table,
.woocommerce div.product .woocommerce-tabs .panel .podnadrukiem-size-chart table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.podnadrukiem-size-chart table col,
#tab-size_chart table col {
  width: 25% !important; /* default for 4-column tables */
}
.podnadrukiem-size-chart table th,
.podnadrukiem-size-chart table td,
#tab-size_chart table th,
#tab-size_chart table td {
  white-space: normal !important;
  word-break: break-word !important;
}

/* If you have a 5-column kids table in future, adjust via colgroup in template or add a specific selector */