/* ==========================================================================
   1. GLOBALNA STYLIZACJA PRZYCISKÓW
   Default:  #006CFF
   Hover:    #135BBD
   Disabled: #515151
   ========================================================================== */

:root {
    --pi-btn-default: #006cff;
    --pi-btn-hover: #135bbd;
    --pi-btn-disabled: #515151;
    --pi-btn-disabled-circle: #d1d1d1;
}

/* ==========================================================================
   PODSTAWOWY WYGLĄD
   ========================================================================== */

html body .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):not(.cart__continue-shopping):not(.btn-close):not(#sort_dropdown_button):not(#search_filter_toggler):not(.ps-searchbar__clear):not(.product-miniature__quickview-touch),
html body .pi-btn,
html body .module-products__buttons .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart),
html body button[type="submit"]:not(.js-search-button):not(.btn-close):not(.ps-searchbar__clear) {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 64px;
    padding: 6px 8px 6px 34px;

    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;

    color: #fff;
    background: var(--pi-btn-default);
    border: 1px solid var(--pi-btn-default);
    border-radius: 999px;

    text-decoration: none;
    cursor: pointer;
    overflow: hidden;

    box-shadow: 0 8px 18px rgba(0, 108, 255, .18);

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* ==========================================================================
   KÓŁKO ZE STRZAŁKĄ
   ========================================================================== */

/* ==========================================================================
   KÓŁKO ZE STRZAŁKĄ
   ========================================================================== */

html body .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):not(.cart__continue-shopping):not(.btn-close):not(#sort_dropdown_button):not(#search_filter_toggler):not(.ps-searchbar__clear)::after,
html body .pi-btn::after,
html body .module-products__buttons .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart)::after,
html body button[type="submit"]:not(.js-search-button):not(.btn-close):not(.ps-searchbar__clear)::after {
    content: "";

    display: block;
    flex: 0 0 52px;

    width: 52px;
    height: 52px;
    margin: 0;

    background-color: #64A1F4; 

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;

    border-radius: 50%;

    transition:
        background-color .25s ease,
        background-image .25s ease,
        transform .25s ease;
}

/* ==========================================================================
   HOVER — #135BBD
   ========================================================================== */

html body .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):not(.cart__continue-shopping):not(.btn-close):not(#sort_dropdown_button):not(#search_filter_toggler):not(.ps-searchbar__clear):hover,
html body .pi-btn:hover,
html body .module-products__buttons .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):hover,
html body button[type="submit"]:not(.js-search-button):not(.btn-close):not(.ps-searchbar__clear):hover {
    color: #fff;
    background: var(--pi-btn-hover);
    border-color: var(--pi-btn-hover);

    box-shadow: 0 10px 22px rgba(19, 91, 189, .24);
    transform: translateY(-2px);

    text-decoration: none;
}

html body .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):not(.cart__continue-shopping):not(.btn-close):not(#sort_dropdown_button):not(#search_filter_toggler):not(.ps-searchbar__clear):hover::after,
html body .pi-btn:hover::after,
html body .module-products__buttons .btn:not(.product-miniature__add):not(.product-miniature__add-to-cart):hover::after,
html body button[type="submit"]:not(.js-search-button):not(.btn-close):not(.ps-searchbar__clear):hover::after {
    background-color: #fff;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    transform: translateX(2px);
}

/* ==========================================================================
   DISABLED — #515151
   ========================================================================== */

html body .btn:disabled,
html body .btn.disabled,
html body .btn[disabled],
html body .btn[aria-disabled="true"],
html body .pi-btn:disabled,
html body .pi-btn.disabled,
html body .pi-btn[disabled],
html body .pi-btn[aria-disabled="true"],
html body button[type="submit"]:disabled,
html body button[type="submit"][aria-disabled="true"] {
    color: #fff;
    background: var(--pi-btn-disabled);
    border-color: var(--pi-btn-disabled);

    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    transform: none;

    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

html body .btn:disabled::after,
html body .btn.disabled::after,
html body .btn[disabled]::after,
html body .btn[aria-disabled="true"]::after,
html body .pi-btn:disabled::after,
html body .pi-btn.disabled::after,
html body .pi-btn[disabled]::after,
html body .pi-btn[aria-disabled="true"]::after,
html body button[type="submit"]:disabled::after,
html body button[type="submit"][aria-disabled="true"]::after {
    color: #fff;
    background: var(--pi-btn-disabled-circle);
    transform: none;
}

/* ==========================================================================
   UKRYCIE STARYCH IKON
   ========================================================================== */

html body .btn:not(#search_filter_toggler):not(.product-miniature__add):not(.product-miniature__add-to-cart) > .material-icons,
html body .pi-btn > .material-icons,
html body button[type="submit"]:not(.js-search-button):not(.ps-searchbar__clear) > .material-icons {
    display: none;
}


#decrement_button_18,
#increment_button_18 {
    display: inline-flex;
}
/* ==========================================================================
   INPUT TYPE SUBMIT — nie obsługuje ::after
   ========================================================================== */

html body input[type="submit"] {
    min-height: 64px;
    padding: 6px 34px;

    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;

    color: #fff;
    background: var(--pi-btn-default);
    border: 1px solid var(--pi-btn-default);
    border-radius: 999px;

    cursor: pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

html body input[type="submit"]:hover {
    color: #fff;
    background: var(--pi-btn-hover);
    border-color: var(--pi-btn-hover);
    transform: translateY(-2px);
}

html body input[type="submit"]:disabled {
    color: #fff;
    background: var(--pi-btn-disabled);
    border-color: var(--pi-btn-disabled);

    cursor: not-allowed;
    transform: none;
}
/* ==========================================================================
   BLOG — KARTY POZIOME JAK W PROJEKCIE
   ========================================================================== */

body .block-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    max-width: 1320px;

    margin: 60px auto 120px;
}

/* Pojedyncza karta */
html body .block-categories .blog-post {
    position: relative;

    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-rows: 1fr;

    width: 100%;
    max-width: none;
    min-height: 220px;

    margin: 0;
    padding: 10px;

    overflow: hidden;

    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 20px;

    box-shadow: 0 9px 22px rgba(27, 45, 68, 0.11);
}

/* Lewa część tekstowa */
html body .block-categories .blog-post .content-blog {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    padding: 20px 18px 17px;
}

/* Tytuł */
html body .block-categories .blog-post p.title-blog {
    display: -webkit-box;

    margin: 0;
    padding: 0;

    overflow: hidden;

    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.08;

    color: #111;
    text-align: left;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    
    padding-bottom: 15px;
}

/* Ukrywamy zwykły opis wpisu */
html body .block-categories .blog-post .content-blog > p:not(.title-blog),
html body .block-categories .blog-post .blog-description {
    display: none;
}

/* Kategoria wpisu */
html body .block-categories .blog-post .blog-tag {
    margin: auto 0 0;
    padding: 0;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;

    color: #444;
    text-align: left;
}

/* Data */
html body .block-categories .blog-post time,
html body .block-categories .blog-post .date-blog,
html body .block-categories .blog-post .blog-date {
    display: block;

    margin-top: 2px;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;

    color: #555;
}

/* Link zawierający zdjęcie */
html body .block-categories .blog-post > a:has(img),
html body .block-categories .blog-post .blog-image,
html body .block-categories .blog-post .thumb-container {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    display: block;

    width: 100%;
    height: 100%;
    min-height: 220px;

    overflow: hidden;
    border-radius: 18px;
}

/* Zdjęcie */
html body .block-categories .blog-post img.thumb-blog,
html body .block-categories .blog-post img {
    position: static;

    display: block;

    width: 100%;
    height: 117%;
    min-height: 220px;

    object-fit: cover;
    object-position: center;

    transform: none;
    border-radius: 18px;
}

html body .block-categories .blog-post .blog-excerpt {
    font-size: 14px;
    padding-top: 10px;
}

/* ==========================================================================
   PRZYCISK „CZYTAJ WIĘCEJ” — OKRĄGŁA STRZAŁKA NA ZDJĘCIU
   ========================================================================== */

html body .block-categories .blog-post a.url-blog {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    min-width: 54px;
    max-width: 54px;
    height: 54px;
    min-height: 54px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    font-size: 0;
    line-height: 0;

    color: #fff;
    background: #0b69f6;
    border: 0;
    border-radius: 50%;

    box-shadow: none;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

/* Strzałka */
html body .block-categories .blog-post a.url-blog::after {
    content: "";

    display: block;

    width: 24px;
    height: 24px;
    margin: 0;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;

    transition: transform .2s ease;
}

/* Hover */
html body .block-categories .blog-post a.url-blog:hover {
    color: #fff;
    background: #135BBD;
    border-color: transparent;

    transform: translateX(3px);
}

html body .block-categories .blog-post a.url-blog:hover::after {
    transform: translateX(2px);
}

/* Meta wpisu na dole lewej kolumny */
html body .block-categories .blog-post .content-blog {
    display: flex;
    flex-direction: column;
}

html body .block-categories .blog-post .blog-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    margin-top: auto;
    padding: 0;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

html body .block-categories .blog-post .blog-category {
    font-weight: 500;
    color: #444;
}

html body .block-categories .blog-post .blog-date {
    font-weight: 400;
    color: #666;
}

.blog-section-cta {
    display: flex;
    justify-content: flex-end;

    margin : 0 auto;
}

.blog-section-cta__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    min-width: 248px;
    min-height: 56px;

    padding: 6px 7px 6px 28px;

    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    color: #fff;
    background: #006cff;
    border: 1px solid #006cff;
    border-radius: 999px;

    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 108, 255, .18);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.blog-section-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    font-size: 0;
    line-height: 0;

    color: transparent;
    background-color: rgba(255, 255, 255, .22);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;

    border-radius: 50%;

    transition:
        background-color .25s ease,
        background-image .25s ease,
        transform .25s ease;
}

.blog-section-cta__link:hover {
    color: #fff;
    background: #135bbd;
    border-color: #135bbd;
    transform: translateY(-2px);
}

.blog-section-cta__link:hover .blog-section-cta__icon {
    background-color: #fff;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    transform: translateX(2px);
}
/* ==========================================================================
   3. SPECJALNE WYJĄTKI (Przycisk "Kontynuuj zakupy" w koszyku)
   ========================================================================== */
html body .cart__continue-shopping.btn {
    background: transparent;
    color: #0b69f6;
    border-color: #0b69f6;
}
html body .cart__continue-shopping.btn:hover {
    background: #0b69f6;
    color: #fff;
}
/* Przywrócenie małej strzałki w lewo dla kontynuacji zakupów */
html body .cart__continue-shopping.btn::before {
    content: "←";
    margin-right: 8px;
    font-size: 16px;
}

/* ==========================================================================
   4. SEKCJA PRODUKTU - OKRĄGŁY PLUS (Pełna izolacja!)
   ========================================================================== */
.product-miniature__top {
    position: relative;
}

html body .product-miniature__form .quantity-button {
    display: none;
}

html body .product-miniature__actions,
html body .ps-bestsellers .product-miniature__actions {
    position: static;
}

html body .product-miniature__add,
html body .ps-bestsellers .product-miniature__add {
    all: unset;
    position: absolute;
    top: 22px;
    right: 22px;
    bottom: auto;
    left: auto;
    z-index: 30;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 50%;
    background: #1268e8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}

html body .product-miniature__add:hover,
html body .ps-bestsellers .product-miniature__add:hover {
    transform: scale(1.08);
    background: #fff;
    color: #006CFF;
}

html body .product-miniature__add:hover::before {
    color: #006CFF !important;
}

html body .product-miniature__add::before,
html body .ps-bestsellers .product-miniature__add::before {
    content: "+";
    height: 65px;
    display: block;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
}

html body .product-miniature__add::after,
html body .ps-bestsellers .product-miniature__add::after {
    content: none !important;
    display: none !important;
}

html body .product-miniature__add .material-icons,
html body .product-miniature__add-text,
html body .ps-bestsellers .btn .material-icons {
    display: none;
}

/* ==========================================================================
   5. UKRYWANIE ELEMENTÓW (Quick view i drobne poprawki)
   ========================================================================== */
html body .product-miniature__quickview,
html body .product-miniature__quick-view,
html body .product-miniature__quickview-touch,
html body .js-quickview,
html body .quickview,
html body .btn-quickview,
html body .product-miniature__top [data-link-action="quickview"],
html body .ps-bestsellers [data-link-action="quickview"] {
    display: none;
}

html body .alert button::after,
html body .alert .btn-close::after,
html body .password-button::after,
html body .password-toggle::after,
html body .input-group .btn::after {
    content: none !important;
    display: none !important;
}

#sort_dropdown_button,
#search_filter_toggler {
    background-color: #fff;
    color: #000;
}

#search_filter_toggler .material-icons {
    display: block;
    color: #000;
}


/* ==========================================================================
   KOSZYK — WYMUSZENIE DWÓCH KOLUMN NA DESKTOPIE
   ========================================================================== */

@media (min-width: 992px) {

    body#cart .cart-grid.row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 2fr)
            minmax(340px, 1fr);

        align-items: start;
        column-gap: clamp(40px, 5vw, 80px);

        width: 100%;
        max-width: 1440px;

        margin-right: auto !important;
        margin-left: auto !important;
        
        padding-bottom: 80px;
    }

    body#cart .cart-grid__content,
    body#cart .cart-grid__content.col-lg-8 {
        grid-column: 1;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
        float: none !important;
    }

    body#cart .cart-grid__aside,
    body#cart .cart-grid__aside.col-lg-4 {
        grid-column: 2;
        grid-row: 1;

        position: relative;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
        float: none !important;
    }

    body#cart .cart-grid__aside-wrapper {
        position: sticky;
        top: 110px;

        width: 100%;

        margin: 0;
        padding: 28px;

        background: #fff;
        

        box-sizing: border-box;
    }

    body#cart .cart-grid__aside-wrapper > h2 {
        margin: 0 0 28px;

        font-family: 'Syne', sans-serif;
        font-size: clamp(30px, 3vw, 46px);
        line-height: 1.05;
    }
}


/* ==========================================================================
   TABLET I TELEFON — JEDNA KOLUMNA
   ========================================================================== */

@media (max-width: 991px) {

    body#cart .cart-grid.row {
        display: flex !important;
        flex-direction: column;

        gap: 36px;

        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body#cart .cart-grid__content,
    body#cart .cart-grid__aside {
        width: 100% !important;
        max-width: none !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body#cart .cart-grid__aside-wrapper {
        position: static;
    }
}

body#cart .cart-voucher__form .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 130px;
    height: 52px;

    padding: 0 26px !important;
    gap: 0 !important;
}

body#cart .cart-voucher__form .btn-primary::before,
body#cart .cart-voucher__form .btn-primary::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.pi-btn--outline{
    background-color: transparent !important;
    color: #2D2D2D !important;
}

/* ==========================================================================
   KOSZYK — KONTYNUUJ ZAKUPY JAK NORMALNY PI BUTTON
   ========================================================================== */

html body#cart .cart__continue-shopping.btn {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    width: auto !important;
    min-width: 270px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 6px 8px 6px 34px !important;

    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    color: #fff !important;

    background: var(--pi-btn-default) !important;

    border: 1px solid var(--pi-btn-default) !important;
    border-radius: 999px !important;

    text-decoration: none !important;

    box-shadow: 0 8px 18px rgba(0, 108, 255, .18) !important;

    overflow: hidden !important;

    transform: none !important;

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;
}


/* Wywalamy starą strzałkę w lewo */
html body#cart .cart__continue-shopping.btn::before {
    content: none !important;
    display: none !important;
}


/* Kółko ze strzałką po prawej */
html body#cart .cart__continue-shopping.btn::after {
    content: "" !important;

    display: block !important;
    flex: 0 0 52px !important;

    width: 52px !important;
    height: 52px !important;

    margin: 0 !important;

    background-color: #64A1F4 !important;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;

    border-radius: 50% !important;

    transition:
        background-color .25s ease,
        background-image .25s ease,
        transform .25s ease !important;
}


/* Ukryj starą ikonę Material Icons z HTML */
html body#cart
.cart__continue-shopping.btn
> .material-icons {
    display: none !important;
}


/* HOVER */
html body#cart .cart__continue-shopping.btn:hover {
    color: #fff !important;

    background: var(--pi-btn-hover) !important;
    border-color: var(--pi-btn-hover) !important;

    box-shadow: 0 10px 22px rgba(19, 91, 189, .24) !important;

    transform: translateY(-2px) !important;

    text-decoration: none !important;
}


html body#cart .cart__continue-shopping.btn:hover::after {
    background-color: #fff !important;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7L19 12L14 17' stroke='%23006CFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    transform: translateX(2px) !important;
}