/* Główny kontener dopasowany do kafelków produktów */
#gqg-faq-section {
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #e5e5e5;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#gqg-faq-section .products-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.75rem;
    color: #232323;
}

/* Pojedyncze pytanie */
.gqg-faq-item {
    border-bottom: 1px solid #f1f1f1;
    padding: 0.5rem 0;
}

.gqg-faq-item:last-child {
    border-bottom: none;
}

/* Nagłówek pytania (klikany) */
.gqg-faq-question {
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.75rem 0;
    list-style: none; /* Ukrywa domyślny trójkąt */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
    color: #232323;
}

.gqg-faq-question::-webkit-details-marker {
    display: none; /* Ukrywa trójkąt w Safari */
}

/* Kolor miedziany/pomarańczowy po najechaniu i rozwinięciu (zgrany z przyciskiem do koszyka) */
.gqg-faq-question:hover,
details[open] .gqg-faq-question {
    color: #c9662c;
}

/* Ikona rozwijania (+ / -) */
.gqg-faq-question .faq-icon::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: bold;
    color: #c9662c;
    line-height: 1;
}

details[open] .gqg-faq-question .faq-icon::after {
    content: '-';
}

/* Blok z odpowiedzią */
.gqg-faq-answer {
    padding: 0.5rem 0 1.25rem 0;
    color: #232323;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: slideDown 0.3s ease-in-out;
    border-top: 1px solid #f1f1f1;
}

/* --- NOWY KOD: Układ siatki (Grid) --- */

.faq-list {
    display: grid;
    grid-template-columns: 1fr; /* Domyślnie 1 kolumna dla smartfonów i tabletów */
    gap: 1rem 2.5rem; /* Odstępy: 1rem w pionie (między rzędami) i 2.5rem w poziomie (między kolumnami) */
}

/* Wymuszamy usunięcie marginesów z klasy mb-2 (bootstrap), bo teraz grid zarządza odstępami (gap) */
.gqg-faq-item {
    margin-bottom: 0 !important;
    border: 1px solid #f1f1f1;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* Przywracamy dolną ramkę dla ostatniego elementu, ponieważ w siatce wyglądałoby to niesymetrycznie */
.gqg-faq-item:last-child {
    border-bottom: 1px solid #f1f1f1;
}

/* Breakpoint dla ekranów desktopowych (standard Bootstrapa: od 992px wzwyż) */
@media (min-width: 992px) {
    .faq-list {
        grid-template-columns: repeat(2, 1fr); /* Dwie równe kolumny */
        align-items: start;
        /* align-items: start jest tutaj KLUCZOWE!
           Gdy otworzysz pytanie w lewej kolumnie, prawa kolumna nie "rozciągnie się"
           sztucznie do wysokości tej otwartej. Zostanie zgrabnie na górze. */
    }
}

/* Delikatna animacja pojawiania się tekstu */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}