/*
 * Katalog produktów i cennik — style dla elementów, których nie ma
 * w dotychczasowym arkuszu motywu.
 *
 * Osobny plik (a nie sass/_*.scss), żeby nie wymagać przebudowy
 * skompilowanego style.css. Paleta zgodna z sass/_variables.scss:
 *   #FFD700 żółty marki, #1a1a1a ciemny, #f8f9fa tło, #333 tekst.
 */

/* ---------- Okruszki ---------- */
.clv-okruszki {
    font-size: .875rem;
    color: #6c757d;
}

.clv-okruszki a {
    color: #6c757d;
    text-decoration: none;
}

.clv-okruszki a:hover,
.clv-okruszki a:focus {
    color: #1a1a1a;
    text-decoration: underline;
}

.clv-okruszki .sep {
    margin: 0 .4rem;
    color: #c9ced3;
}

/* ---------- Cena ---------- */
.clv-cena,
.clv-cena-single {
    display: block;
}

.clv-cena .current-price,
.clv-cena-single .current-price {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

.clv-cena .price-vat,
.clv-cena-single .price-vat {
    display: block;
    font-size: .8125rem;
    font-weight: 400;
    color: #6c757d;
}

.price-on-request .current-price {
    color: #1a1a1a;
}

.clv-telefon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    font-weight: 600;
}

/* ---------- Wykończenie / kolory ---------- */
.clv-wykonczenie-tytul {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.clv-kolory-grupa {
    margin: 1.25rem 0 .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.clv-kolory {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.clv-kolor {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex: 0 1 260px;
    padding: .5rem .75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.clv-kolor-probka {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #dee2e6;
}

.clv-kolor-nazwa {
    font-size: .875rem;
    line-height: 1.35;
}

/* ---------- „Potrzebujesz pomocy w doborze?” na karcie produktu ----------
   Motyw ustawia tę sekcję jako „400px 1fr” (obrazek po lewej). Tutaj
   odwracamy kolumny: treść po lewej, zdjęcie po prawej. Selektor musi być
   bardziej szczegółowy od motywu, dlatego dokładamy klasę do wrappera. */
.expert-help-section .expert-help-wrapper.clv-odwrocony {
    grid-template-columns: 1fr 400px;
}

/* Zdjęcia ze starego serwisu są pionowe i niewielkie. Bez ograniczenia
   wysokości prawa kolumna byłaby dwa razy wyższa od treści, a kadrowanie
   „cover” ucinało urządzenie w połowie — dlatego skalujemy je w całości
   (contain) na delikatnie rozjaśnionym panelu. */
.expert-help-section .expert-help-wrapper.clv-odwrocony .expert-image {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
}

.expert-help-section .expert-help-wrapper.clv-odwrocony .expert-image img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 10px;
}

/* Ten sam próg co w arkuszu motywu — bez tego nasza reguła
   utrzymywałaby dwie kolumny także na telefonie. */
@media (max-width: 992px) {
    .expert-help-section .expert-help-wrapper.clv-odwrocony {
        grid-template-columns: 1fr;
    }
}

/* ---------- Sekcje techniczne na stronie „O produkcji” ----------
   Motyw stylizuje .service-features tylko wewnątrz .info-section
   (blok z gradientem i 80 px paddingu). Na podstronie treściowej
   powtarzamy te same reguły w węższym kontenerze, z wartościami
   przepisanymi 1:1 z arkusza motywu. */
.clv-sekcje-techniczne .service-features {
    margin-top: 30px;
}

.clv-sekcje-techniczne .service-features .service-item {
    display: flex;
    gap: 20px;
    align-items: start;
    margin-bottom: 25px;
}

.clv-sekcje-techniczne .service-features .service-item i {
    font-size: 32px;
    color: #FFD700;
    flex-shrink: 0;
}

.clv-sekcje-techniczne .service-features .service-item h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.clv-sekcje-techniczne .service-features .service-item p {
    margin: 0;
    opacity: .9;
}

/* ---------- Cennik ---------- */
.clv-cennik-wstep {
    max-width: 60rem;
    margin-bottom: 2rem;
}

.clv-cennik-sekcja {
    margin-bottom: 2.5rem;
}

.clv-cennik-naglowek {
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: .02em;
    border-bottom: 3px solid #FFD700;
}

.clv-cennik-naglowek a {
    color: #1a1a1a;
    text-decoration: none;
}

.clv-cennik-naglowek a:hover,
.clv-cennik-naglowek a:focus {
    color: #000;
    text-decoration: underline;
}

/* Tabela musi przewijać się sama, żeby na telefonie nie rozpychała strony. */
.clv-tabela-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.clv-cennik-tabela {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    background: #fff;
}

.clv-cennik-tabela th,
.clv-cennik-tabela td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.clv-cennik-tabela thead th {
    background: #1a1a1a;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: none;
}

.clv-cennik-tabela tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.clv-cennik-tabela tbody tr:hover {
    background: #fffbe6;
}

.clv-cennik-tabela .clv-kol-indeks {
    width: 22%;
    font-family: 'Courier New', monospace;
    font-size: .875rem;
    color: #6c757d;
    white-space: nowrap;
}

.clv-cennik-tabela .clv-kol-nazwa {
    width: 53%;
    font-weight: 600;
}

.clv-cennik-tabela .clv-kol-nazwa a {
    color: #1a1a1a;
    text-decoration: none;
}

.clv-cennik-tabela .clv-kol-nazwa a:hover,
.clv-cennik-tabela .clv-kol-nazwa a:focus {
    text-decoration: underline;
}

.clv-cennik-tabela .clv-kol-cena {
    width: 25%;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.clv-cennik-tabela .clv-kol-cena.clv-zapytaj {
    font-weight: 600;
}

.clv-cennik-tabela .clv-kol-cena.clv-zapytaj a {
    color: #6c757d;
    text-decoration: underline;
}

.clv-cennik-tabela .clv-kol-cena.clv-zapytaj a:hover,
.clv-cennik-tabela .clv-kol-cena.clv-zapytaj a:focus {
    color: #1a1a1a;
}

.clv-cennik-przypisy {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid #FFD700;
}

.clv-cennik-przypisy p {
    margin: 0 0 .35rem;
    font-size: .9375rem;
    color: #333;
}

.clv-cennik-przypisy p:last-child {
    margin-bottom: 0;
}

.clv-cennik-kontakt {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.clv-cennik-kontakt h3 {
    margin-bottom: 1rem;
}

.clv-modal-info {
    margin-top: 1rem;
    font-size: .8125rem;
    color: #6c757d;
}

@media (max-width: 575px) {
    .clv-cennik-naglowek {
        font-size: 1.375rem;
    }

    /* Na telefonie tabela ma się zmieścić bez przewijania w poziomie:
       zwalniamy min-width, a nazwa produktu przejmuje zawijanie. */
    .clv-cennik-tabela {
        min-width: 0;
    }

    .clv-cennik-tabela th,
    .clv-cennik-tabela td {
        padding: .5rem .4rem;
    }

    .clv-cennik-tabela thead th {
        font-size: .6875rem;
        letter-spacing: 0;
    }

    .clv-cennik-tabela .clv-kol-indeks {
        width: auto;
        font-size: .75rem;
    }

    .clv-cennik-tabela .clv-kol-nazwa {
        width: auto;
        font-size: .9375rem;
    }

    .clv-cennik-tabela .clv-kol-cena {
        width: auto;
        font-size: .9375rem;
    }

    .clv-kolor {
        flex: 1 1 100%;
    }
}