/*
 * Moduł sowabrandbank — style opisu produktu na froncie.
 *
 * Zakres celowo wąski: wszystko jest zagnieżdżone w .sowabb, żeby arkusz nie
 * wpływał na resztę motywu. Kolory i odstępy oparte na zmiennych CSS, więc
 * motyw może je nadpisać bez ruszania tego pliku.
 *
 * Arkusz dołącza się tylko przy włączonej opcji „Dodaj CSS" w konfiguracji.
 */

.sowabb {
    --sowabb-border: #e3e6ea;
    --sowabb-heading: #23282d;
    --sowabb-muted: #6c757d;
    --sowabb-accent: #2f8f5b;
    --sowabb-gap: 1.5rem;

    color: inherit;
    font-size: inherit;
    line-height: 1.6;
}

.sowabb-section {
    margin: 0 0 var(--sowabb-gap);
    padding: 0 0 var(--sowabb-gap);
    border-bottom: 1px solid var(--sowabb-border);
}

.sowabb-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sowabb-heading {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sowabb-heading);
}

.sowabb-section--highlights .sowabb-heading {
    color: var(--sowabb-accent);
}

.sowabb-body > *:first-child {
    margin-top: 0;
}

.sowabb-body > *:last-child {
    margin-bottom: 0;
}

/* Cechy produktu */

.sowabb-list {
    margin: 0;
    padding-left: 1.25rem;
}

.sowabb-list li {
    margin-bottom: 0.35rem;
}

/* Pary etykieta–wartość (przechowywanie, farmacja, informacje dodatkowe) */

.sowabb-pairs {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.sowabb-pairs dt {
    font-weight: 600;
    color: var(--sowabb-muted);
}

.sowabb-pairs dd {
    margin: 0;
}

/* Wpis bez etykiety zajmuje obie kolumny — inaczej powstałaby pusta luka. */
.sowabb-pairs__wide {
    grid-column: 1 / -1;
}

@media (max-width: 575px) {
    .sowabb-pairs {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .sowabb-pairs dd {
        margin-bottom: 0.6rem;
    }
}

/* Tabela wartości odżywczych */

/* Tabela bywa szersza od kolumny opisu na telefonie — przewijamy ją
   wewnątrz własnego kontenera, żeby nie rozpychać całej strony. */
.sowabb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sowabb-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95em;
}

.sowabb-table th,
.sowabb-table td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--sowabb-border);
    text-align: left;
    vertical-align: top;
}

.sowabb-table thead th {
    font-weight: 600;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.sowabb-table tbody th {
    font-weight: 500;
}

.sowabb-table td {
    white-space: nowrap;
}

/* Opis krótki */

.sowabb-short p {
    margin: 0;
}