/**
 * Pasek magazynowy na stronie produktu.
 *
 * Wygląd przeniesiony z bloku kolekcji (`.kpa-stock`), ale rozmiar i miejsce
 * zostają takie, jak miał poprzedni pasek: nagłówek + tor 20 px, odstępy z
 * `.custom-percentage-strip-container` w motywie. Suwak jest pozycjonowany
 * absolutnie i wychodzi poza tor, więc nie podnosi wysokości paska.
 */

.bgsb {
    /* Powtórzenie reguł `.custom-percentage-strip-container` z motywu, żeby ten
       sam plik obsłużył podgląd w panelu, gdzie style motywu nie są wczytane. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
    padding-bottom: 20px;

    --bgsb-pct: 0%;
    --bgsb-accent: #D74F80;
    --bgsb-from: #D74F80;
    --bgsb-to: #FFF3C2;
    --bgsb-track: #E3E3E3;
    --bgsb-knob: 32px;
    --bgsb-track-h: 20px;
}

/* Karta jak na podstronie kolekcji (`.kpa-stock--card`). Tam ma 64 px paddingu,
   tutaj 20 px — czyli tyle, ile pasek i tak miał w pionie, więc jego wysokość
   się nie zmienia, a treść nie przykleja się do ramki.
   Podwójna klasa dla specyficzności: `.custom-percentage-strip-container`
   z motywu też ustawia padding. */
.bgsb.bgsb--card {
    padding: 20px;
    border: 1px solid #FFFFFF;
    border-radius: 24px;
    box-shadow: 1px 5px 12px 0 rgba(0, 0, 0, 0.06);
    background-image: linear-gradient(174.77deg, rgba(237, 237, 237, 0.4) 22.841%, rgba(255, 255, 255, 0.4) 46.79%);
}

/* Odstęp od sekcji pod paskiem.
 *
 * Bez karty robił go dolny padding kontenera; karta zamyka ten padding w sobie,
 * więc jej krawędź stykała się z akordeonem.
 *
 * Motyw ma w single-product regułę `.summary.entry-summary * { margin: 0
 * !important }` — zeruje każdy margines w kolumnie produktu. Stąd `!important`,
 * a stąd trzecia klasa w selektorze: przy równej specyficzności (0,2,0)
 * rozstrzygałaby kolejność arkuszy, a ta wypada na niekorzyść tego pliku —
 * `style-index.css` motywu ładuje się po nim mimo priorytetu 20 w enqueue.
 * Trzy klasy dają (0,3,0) i wygrywają niezależnie od kolejności. */
.bgsb.bgsb--card.custom-percentage-strip-container {
    margin-bottom: 10px !important;
}

.bgsb-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    font-family: "Poppins", "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #080808;
}

.bgsb-label {
    white-space: nowrap;
}

.bgsb-percent {
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
}

.bgsb-collection {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--bgsb-accent);
}

.bgsb-collection-suffix {
    font-family: "Poppins", "Work Sans", sans-serif;
    font-size: 17px;
    line-height: 1;
}

.bgsb-collection-name {
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.26px;
}

.bgsb-collection-name--default {
    font-family: "Work Sans", sans-serif;
    font-weight: 700;
}

.bgsb-collection-name--poppins {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.bgsb-collection-name--sectra {
    font-family: "GT Sectra Fine", "GT Sectra", "Cormorant Garamond", "Playfair Display", serif;
    font-size: 18px;
}

.bgsb-collection-name--aegean {
    font-family: "TAN AEGEAN", "Cormorant Garamond", "Playfair Display", serif;
    font-size: 18px;
}

.bgsb-collection-name--kollektif {
    font-family: "Kollektif", "Mona Sans", "Work Sans", sans-serif;
    font-weight: 700;
}

.bgsb-track {
    position: relative;
    width: 100%;
    height: var(--bgsb-track-h);
    border-radius: 48px;
    background: var(--bgsb-track);
}

.bgsb-fill {
    position: relative;
    height: 100%;
    width: var(--bgsb-pct);
    /* Suwak jest wyśrodkowany na prawej krawędzi wypełnienia i wystaje poza nią
       o połowę swojej szerokości. Te dwa ograniczenia trzymają go w obrysie
       toru przy 0% i przy 100% — bez nich wychodzi poza kolumnę produktu. */
    min-width: calc(var(--bgsb-knob) / 2);
    max-width: calc(100% - var(--bgsb-knob) / 2);
    border-radius: 48px;
    background-image: linear-gradient(90deg, var(--bgsb-from), var(--bgsb-to));
}

.bgsb-knob {
    position: absolute;
    top: 50%;
    right: calc(var(--bgsb-knob) / -2);
    transform: translateY(-50%);
    width: var(--bgsb-knob);
    height: var(--bgsb-knob);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 1.2px 6px 4.32px 0 rgba(0, 0, 0, 0.08);
    background-image: linear-gradient(152.48deg, rgb(237, 237, 237) 22.841%, rgb(255, 255, 255) 46.79%);
    -webkit-backdrop-filter: blur(7.2px);
    backdrop-filter: blur(7.2px);
}

.bgsb-knob-icon {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

@media (max-width: 800px) {
    .bgsb {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Motyw wymusza tu `padding-left/right: 20px !important` na kontenerze, więc
       karta i tak dostanie te 20 px z boków — zostaje odsunąć ją od krawędzi
       ekranu, żeby ramka nie dotykała brzegu. `!important` z tego samego powodu,
       co przy `margin-bottom` wyżej. */
    .bgsb.bgsb--card.custom-percentage-strip-container {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .bgsb-head {
        font-size: 15px;
    }
}