body {margin:0px; font-family:OpenSans;}
.rurowania { width:100%; height:220px;
  background:#f7f8f9; 
  background: -webkit-linear-gradient(#f6f7f8, #CCC);
  background: -o-linear-gradient(#f6f7f8, #CCC);
  background: -moz-linear-gradient(#f6f7f8, #CCC);
  background: linear-gradient(#f6f7f8, #CCC);

}

.katalog { color:#F7931E;}
.katalog:hover { color:#555;}

.nm_bnd { width:95%; text-align:left; padding-top:10px;  margin:0 auto; }

h1 { font-size:24pt; padding:0px; margin:0px; color:#666;}


.txt_sb { width:95%; text-align:justify; font-size:16pt; color:#333; margin-top:30px; margin:0 auto;}

.top-table, .detailstable {text-align:center; font-size:1vw; }
.detailstable tbody tr:nth-child(even) { background-color: #f2f2f2;}
.detailstable tbody tr:hover { background-color: #e0e0e0;}

.bnd_logo { width:80px; height:50px; background:url(https://mektal.pl/images/photos/mekta_a.png) bottom no-repeat; padding-top:70px; margin-bottom:20px;}
p {font-align: justify;}

ul>li {list-style:none;}
		
		
	
/* Styl dla grup produktów (odpowiada za odstępy między sekcjami TG2, TG2P5 itd.) */
.product-code-group {
    margin-bottom: 1em; /* Dodaje odstęp pomiędzy grupami kodów rur */
}

/* Ukryj rzeczywiste pole checkbox */
.toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none; /* Zapobiega bezpośrednim kliknięciom na niewidocznym checkboxie */
}

/* Styl dla etykiety (label), która pełni rolę klikalnego nagłówka */
.toggle-trigger {
    display: block; /* Sprawia, że etykieta zachowuje się jak element blokowy */
    cursor: pointer; /* Zmienia kursor na dłoń przy najechaniu */
    color: #007bff; /* Typowy kolor linku */
    text-decoration: underline; /* Podkreślenie, aby wskazać klikalność */
    margin-bottom: 5px; /* Odstęp poniżej nagłówka */
    padding-left: 20px; /* Dodaje wcięcie, aby naśladować wygląd elementu listy (<li>) */
    position: relative; /* Potrzebne do pozycjonowania niestandardowego znacznika */
}

/* Efekt najechania myszką na etykietę */
.toggle-trigger:hover {
    color: #0056b3; /* Ciemniejszy kolor przy najechaniu */
}

.toggle-trigger::before {
    color: #007bff; /* Kolor pasujący do nagłówka */
    display: inline-block;
    width: 1em; /* Rozmiar symbolu */
    position: absolute;
    left: 0;
}

/* Ukryj tabelę wymiarów domyślnie */
.dimensions-table {
    max-height: 0; /* Początkowa wysokość 0 dla efektu płynnego rozwijania */
    overflow: hidden; /* Ukrywa zawartość, która wykracza poza wysokość */
    transition: max-height 0.5s ease-out; /* Płynne przejście podczas zwijania */
}

/* Pokaż tabelę wymiarów, gdy odpowiadający checkbox jest zaznaczony */

.toggle-checkbox:checked + .toggle-trigger + .dimensions-table {
    max-height: 15000px;
}

/* Podstawowe style dla tabeli wymiarów */
.dimensions-table table {
    width: 100%; /* Ustawienie szerokości tabeli na 100% jej kontenera */
    border-collapse: collapse; /* Usuwa podwójne obramowania komórek */
    margin-top: 10px; /* Odstęp od nagłówka */
    margin-bottom: 20px; /* Odstęp od kolejnych elementów */
    border: 1px solid #ddd; /* Delikatne obramowanie całej tabeli */
    font-size: 0.9em; /* Nieco mniejsza czcionka dla danych tabeli */
    /* Usunięto margin-left, aby tabela dopasowywała się do table-responsive */
}

.dimensions-table th,
.dimensions-table td {
    border: 1px solid #eee; /* Obramowanie poszczególnych komórek */
    padding: 10px; /* Wewnętrzny odstęp w komórkach */
    text-align: left; /* Wyrównanie tekstu do lewej */
    white-space: nowrap; 
}

.dimensions-table th {
    background-color: #f2f2f2; 
    font-weight: bold; 
    color: #333; 
}

.dimensions-table tr:nth-child(even) {
    background-color: #f9f9f9; 
}

.dimensions-table tr:hover {
    background-color: #f1f1f1; 
}


.table-responsive {
    overflow-x: auto;
    margin-left: 20px;
    margin-right: 20px;
}