/* Wrapper */
.pc-carousel {
    position: relative !important;
    padding: 0 44px 36px !important;
    margin: 0 0 24px !important;
    box-sizing: border-box !important;
}
.page-id-5184583 .woocommerce-loop-product__title a {
    font-size: 17px;
    font-weight: normal;
}
.page-id-5184583 h2 {
    line-height: 0.7;
}
.page-id-5184583 .woocommerce-loop-product__title {
    min-height: 103px;
}
.page-id-5184583 .wpced .wpced-inner {
    font-size: 12px;
}

/* Viewport – kluczowe: clip treści */
.pc-carousel > .pc-carousel__viewport {
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
}

/* ---------------------------------------------------------------
   Track (ul) – najważniejsze reguły karuzeli
   Inline style z JS ustawiają transform, tutaj layout
   --------------------------------------------------------------- */
.pc-carousel > .pc-carousel__viewport > .pc-carousel__track {
    /* Layout */
    display:         flex !important;
    flex-direction:  row !important;
    flex-wrap:       nowrap !important;
    align-items:     stretch !important;

    /* Reset grida (motywy WC często używają grid) */
    grid-template-columns: unset !important;
    grid-template-rows:    unset !important;

    /* Reset floatów (starsze motywy) */
    float: none !important;

    /* Odstępy i padding */
    gap:     16px !important;
    margin:  0 !important;
    padding: 4px 0 8px !important;

    /* Lista */
    list-style: none !important;

    /* Szerokość – auto pozwala flexowi działać */
    width: auto !important;
    max-width: none !important;

    /* Animacja */
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: transform;

    /* Clearfix – wyłącz jeśli motyw go dodaje */
    clear: none !important;
}

/* Pseudo-elementy clearfix od motywu */
.pc-carousel > .pc-carousel__viewport > .pc-carousel__track::before,
.pc-carousel > .pc-carousel__viewport > .pc-carousel__track::after {
    display: none !important;
    content: none !important;
}

/* ---------------------------------------------------------------
   Karty produktów (li) – 5 kolumn na desktopie
   --------------------------------------------------------------- */
.pc-carousel > .pc-carousel__viewport > .pc-carousel__track > .pc-carousel__item {
    /* Flex – 5 kolumn, obliczenie z uwzględnieniem 4 × gap 16px */
    flex: 0 0 calc((100% - 64px) / 5) !important;
    min-width: 0 !important;
    max-width: none !important;

    /* Reset szerokości z motywu */
    width: auto !important;

    /* Reset floatów i marginesów */
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Grid-column jeśli parent był gridem */
    grid-column: auto !important;
    grid-row:    auto !important;

    box-sizing: border-box !important;
    display: block !important;
}

/* ---------------------------------------------------------------
   Strzałki
   --------------------------------------------------------------- */
.pc-carousel > .pc-carousel__arrow {
    position:    absolute !important;
    top:         50% !important;
    transform:   translateY(calc(-50% - 18px)) !important;
    z-index:     20 !important;
    width:       40px !important;
    height:      40px !important;
    border-radius: 50% !important;
    background:  #ffffff !important;
    border:      1px solid #d5d9d9 !important;
    font-size:   26px !important;
    line-height: 1 !important;
    cursor:      pointer !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:  0 1px 6px rgba(0,0,0,.15) !important;
    padding:     0 !important;
    color:       #333 !important;
    text-decoration: none !important;
    transition:  box-shadow .2s, background .2s !important;
    /* Reset WC button styles */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-weight: normal !important;
}
.pc-carousel > .pc-carousel__arrow:hover {
    background:  #f0f0f0 !important;
    box-shadow:  0 3px 12px rgba(0,0,0,.2) !important;
    color:       #000 !important;
}
.pc-carousel > .pc-carousel__arrow--prev { left:  0 !important; }
.pc-carousel > .pc-carousel__arrow--next { right: 0 !important; }

.pc-carousel > .pc-carousel__arrow:disabled,
.pc-carousel > .pc-carousel__arrow[disabled] {
    opacity: 0.25 !important;
    cursor:  default !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------------
   Kropki
   --------------------------------------------------------------- */
.pc-carousel > .pc-carousel__dots {
    position:    absolute !important;
    bottom:      6px !important;
    left:        0 !important;
    right:       0 !important;
    display:     flex !important;
    justify-content: center !important;
    gap:         6px !important;
    pointer-events: none !important;
}
.pc-carousel > .pc-carousel__dots > .pc-dot {
    width:  9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #c0c0c0 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: background .2s, transform .2s !important;
    flex-shrink: 0 !important;
    /* Reset WC button */
    box-shadow: none !important;
    text-transform: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.pc-carousel > .pc-carousel__dots > .pc-dot.is-active {
    background: #555555 !important;
    transform:  scale(1.4) !important;
}

/* ============================================================
   RWD – breakpointy (gap zawsze 16px poza mobile)
   ============================================================ */

/* 4 kolumny: 861–1100px */
@media (max-width: 1100px) {
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track > .pc-carousel__item {
        flex: 0 0 calc((100% - 48px) / 4) !important; /* 3 × 16px */
    }
}

/* 3 kolumny: 581–860px */
@media (max-width: 860px) {
    .pc-carousel {
        padding-left:  36px !important;
        padding-right: 36px !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track {
        gap: 12px !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track > .pc-carousel__item {
        flex: 0 0 calc((100% - 24px) / 3) !important; /* 2 × 12px */
    }
}

/* 2 kolumny: 361–580px */
@media (max-width: 580px) {
    .pc-carousel {
        padding-left:  32px !important;
        padding-right: 32px !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track {
        gap: 10px !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track > .pc-carousel__item {
        flex: 0 0 calc((100% - 10px) / 2) !important;
    }
    .pc-carousel > .pc-carousel__arrow {
        width:     32px !important;
        height:    32px !important;
        font-size: 20px !important;
    }
}

/* 1 kolumna: ≤ 360px */
@media (max-width: 360px) {
    .pc-carousel {
        padding-left:  28px !important;
        padding-right: 28px !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track {
        gap: 0 !important;
    }
    .pc-carousel > .pc-carousel__viewport > .pc-carousel__track > .pc-carousel__item {
        flex: 0 0 100% !important;
    }
}