:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    
    --bs-body-bg: #ffffff;
    --bs-gray: #6c757d;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-success: #00c853;
    --bs-success-lighter: #00d057;
    --bs-info: #0076FF;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}


:root {
    --bs-primary: #0d6efd; 
    --bs-primary-bg: #ffffff; 
    --bs-primary-text: #212529;
    --bs-secondary-bg: #eeeeee; 
    --bs-secondary-text: #212529; 
    --bs-accent: #07c152; 
    --bs-footer-bg: #ffffff; 
    --bs-footer-text: #212529; 
    
    --bs-preloader-second: #f21559; 
    --heading-prices-choose: #d63384;
    --bs-delete-lighter: #ff5e85;
    
    --bs-primary-lighter: #6AA4FF;
    --bs-primary-darker: #004CCB;
    --bs-secondary-lighter: #eeeeee;
    --bs-secondary-darker: #eee;
    --bs-primary-bg-lighter: #ffffff;
    --bs-primary-bg-darker: #f9f8fa;
    --bs-secondary-bg-lighter: #fff;
    --bs-secondary-bg-darker: #15161b;
    --bs-success-lighter: #00d057;
    --bs-accent-lighter: #00d057;
    --bs-gray: #6c757d;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-success: #00c853;
    --bs-info: #0076FF;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    
    --bs-body-color: #212529;
    --ip-btn-primary-background: #0d6efd;
    --ip-btn-primary-text: #ffffff;
    --ip-radio-primary-background: #ffffff;
    --ip-radio-primary-text: #212529;
    --ip-radio-primary-border: #0d6efd;
    --ip-radio-checked-background: #0d6efd;
    --ip-radio-checked-text: #ffffff;
    --ip-prices-chosen-background: #f9f8fa;
    --ip-prices-btn-color-text: #ffffff;
    --ip-prices-btn-secondary-background: #00d057;
    --ip-modal-primary-background: #ffffff;
    
    --ip-header-main-bg: #ffffff; 
    --ip-product-icons-text-color: #212529;
    --ip-header-menu-text-color: #6c757d;
    --ip-header-menu-text-color-active: #0d6efd;
    --ip-product-tab-list-nav-link-color: #212529;
    --ip-product-tab-list-nav-link-color-active: #0d6efd;
    --ip-btn-outlined-background: #ffffff;
    --ip-btn-outlined-text: #0d6efd;
    --ip-btn-outlined-secondary-background: #ffffff;
    --ip-btn-outlined-secondary-text: #0d6efd;
    --ip-product-icons-background-color: #ffffff;
    --ip-banner-text: #212529;
    --ip-input-text: #212529; 
    --ip-input-background: #ffffff; 
    --ip-carousel-button-color: #0d6efd;
    --ip-border-radius-boxes: 8px;
    --ip-border-radius-buttons: 50px;
    --ip-border-radius-inputs: 16px;
    --ip-box-shadow-boxes: 0 3px 24px rgba(0, 0, 0, .09);
    --page-max-width: 1200px; 
    --base-font-size: 16px; 
    --base-font-family: 'Arial', sans-serif; 
    --heading-font-family: 'Roboto', sans-serif; 
    --product-box-size: 250px; 


    
    --ip-icon-primary-1: #7f6eff;
    --ip-icon-primary-2: #7e37ff;
    --ip-icon-primary-3: #7c00ff;
    --ip-icon-primary-4: #6120de;
    --ip-icon-primary-5: #4300c4;

    --ip-icon-primary-accent: #f5a8f5;

    --ip-icon-secondary-1: #fff;
    --ip-icon-secondary-2: #f3f3f3;
    --ip-icon-secondary-3: #e9e9e9;
    --ip-icon-secondary-4: #e4e4e4;
    --ip-icon-secondary-5: #ccc;

    --ip-icon-eco-1: #f4e3d3;
    --ip-icon-eco-2: #f4e0ce;
    --ip-icon-eco-3: #dbccbd;

    --ip-icon-darkest: #3a3a3a;
}


:root {
    --bs-primary: #EC1061; /* Główny kolor */
    --bs-primary-bg: #ffffff; /* Kolor tła */
    --bs-primary-text: #212529;
    --bs-secondary-bg: #f8f8f8; /* Drugi kolor tła */
    --bs-secondary-text: #212529; /* Drugi kolor tła */
    --bs-accent: #225991 ; /* Kolor akcentu */
    --bs-footer-bg: #1111; /* Kolor tła stopki */
    --bs-footer-text: #707070; /* Kolor tekstu stopki */
    /* Kolory dodatkowe */
    --bs-preloader-second: #225991; /* Drugi kolor preloadera */
    --heading-prices-choose: #d63384;
    --bs-delete-lighter: #ff5e85;
    /* ZMIANY ODCIENI GŁÓWNYCH */
    --bs-primary-lighter: #2e71a3;
    --bs-primary-darker: #c30e4c;
    --bs-secondary-lighter: #eeeeee;
    --bs-secondary-darker: #eee;
    --bs-primary-bg-lighter: #ffffff;
    --bs-primary-bg-darker: #f9f8fa;
    --bs-secondary-bg-lighter: #fff;
    --bs-secondary-bg-darker: #15161b;
    --bs-success-lighter: #2e71a3;
    --bs-accent-lighter: #2e71a3;
    --bs-gray: #a9b3bc;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-success: #225991;
    --bs-info: #EC1061;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    /* GŁÓWNE RGB */
    --bs-body-color: #212529;
    --ip-btn-primary-background: #EC1061;
    --ip-btn-primary-text: #ffffff;
    --ip-radio-primary-background: #ffffff;
    --ip-radio-primary-text: #212529;
    --ip-radio-primary-border: #EC1061;
    --ip-radio-checked-background: #EC1061;
    --ip-radio-checked-text: #ffffff;
    --ip-prices-chosen-background: #f9f8fa;
    --ip-prices-btn-color-text: #ffffff;
    --ip-prices-btn-secondary-background: #225991;
    --ip-modal-primary-background: #ffffff;
    /**/
    --ip-header-main-bg: #1111; /* this !!!MUST!!! be the SAME background as the background of the LOGO */
    --ip-product-icons-text-color: #212529;
    --ip-header-menu-text-color: #050505;
    --ip-header-menu-text-color-active: #EC1061;
    --ip-product-tab-list-nav-link-color: #212529;
    --ip-product-tab-list-nav-link-color-active: #EC1061;
    --ip-btn-outlined-background: #ffffff;
    --ip-btn-outlined-text: #EC1061;
    --ip-btn-outlined-secondary-background: #ffffff;
    --ip-btn-outlined-secondary-text: #EC1061;
    --ip-product-icons-background-color: #ffffff;
    --ip-banner-text: #212529;
    --ip-input-text: #212529; /* input text color */
    --ip-input-background: #ffffff; /* keep it white if possible */
    --ip-carousel-button-color: #EC1061;
    --ip-border-radius-boxes: 5px;
    --ip-border-radius-buttons: 0px;
    --ip-border-radius-inputs: 0px;
    --ip-box-shadow-boxes: 0 3px 24px rgba(0, 0, 0, .09);
    --page-max-width: 1300px; /* page container width, adjust between 1100 to 1300 */
    --base-font-size: 18px; /* font size for the html tag, adjust between 15-18 */
    --base-font-family: "AVENIR NEXT", sans-serif; /* font family for the body tag */
    --heading-font-family: "SWITZER", sans-serif; /* font family for the headings */
    --product-box-size: 300px; /* adjust between 200-300 */
    --ip-border-radius-inputs: 20px;




    /* KOLORY IKON*/
    --ip-icon-primary-1: #7f6eff;
    --ip-icon-primary-2: #7e37ff;
    --ip-icon-primary-3: #7c00ff;
    --ip-icon-primary-4: #6120de;
    --ip-icon-primary-5: #4300c4;

    --ip-icon-primary-accent: #f5a8f5;

    --ip-icon-secondary-1: #fff;
    --ip-icon-secondary-2: #f3f3f3;
    --ip-icon-secondary-3: #e9e9e9;
    --ip-icon-secondary-4: #e4e4e4;
    --ip-icon-secondary-5: #ccc;

    --ip-icon-eco-1: #f4e3d3;
    --ip-icon-eco-2: #f4e0ce;
    --ip-icon-eco-3: #dbccbd;

    --ip-icon-darkest: #3a3a3a;
}

.navbar-brand img,
.desktopLogo img {
    aspect-ratio: unset;
}

.contact-wrap .contact-inner > div:first-of-type,
.contact-wrap .contact-inner > div:nth-of-type(2) {
    display: none;
}

.wpb_wrapper {
    color: var(--bs-primary-text);
    font-size: 0.9rem;
}

.btn.rounded-pill,
.ip-btn-standard.rounded-pill {
    border-radius: 20px !important;
}

#darmowe_probki .radio-wrap .radio-wrap-label:nth-child(2) {
    display: none;
}

#samples-info-section {
    display: none;
}

/*** TESTOWE ZMIANY ***/

.custom-navbar li a, .custom-navbar li h3 {
    font-weight: 600;
}

.navbar-brand > img:nth-child(1) {
    max-width: 250px;
    max-height: 104px;
}

/* Kolumna 1 */
.variantsColBox > div.mb-1.ng-scope,
/* Kolumna 2 */
.variantsColBox > div.ng-scope:not(.mb-1) {
    display: flex;
    flex-direction: column-reverse;
}

.variantsColBox > div.mb-1.ng-scope p:first-child::before,
.variantsColBox > div.ng-scope:not(.mb-1) p:first-child::before {
    content: "Wysyłka";
}

.variantsColBox > div.mb-1.ng-scope p,
.variantsColBox > div.ng-scope:not(.mb-1) p {
    margin-bottom: 0.25rem !important;
    margin-top: 0 !important;
}

/* -------------------------------------------------------
   KAFELKI — OBIE STRONY (główna i kategoria)

   WAŻNE: NIE ma tutaj padding: 0.
   Na kategorii .product-box-single = .svg-holding-block (ten sam element).
   category.php dodaje padding-bottom: 100% przez <style>, co tworzy kwadrat.
   Globalne padding: 0 !important skasowałoby to — więc unikamy tego tutaj.
   Padding: 0 jest ustawiony TYLKO w scope #tab_wszystkie (strona główna).
------------------------------------------------------- */
.product-box-single {
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Hover */
.product-box-single:hover {
    transform: scale(1.03);
    box-shadow: rgba(100, 100, 100, 0.20) 0px 9px 9px;
}

/* Tytuł produktu — niebieski pasek (IP8 styles.css ustawia position: absolute; bottom: 0) */
.product-box-single p {
    background: #E3E3E3;
    filter: unset !important;
    color: #727271;
    padding: 8px;
    margin: 0;
}

.product-box-single p:hover {
    background: #EC1061;
    filter: unset !important;
    color: #fff;
}

/* Obrazki — nadpisuje IP8 "width: 150px" → 100% szerokości kontenera */
.product-box-single img,
.product-box-single svg {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    background: unset !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------
   STRONA GŁÓWNA — siatka i kafelki
   WSZYSTKO w scope #tab_wszystkie → nie wpływa na kategorię.

   Architektura:
   - .productBoxesInner → CSS Grid repeat(4, 1fr), gap: 16px
   - .box.prodbox → grid item, width: auto (grid sam ustawia 25% przez 1fr)
   - .product-box-single → kwadrat via aspect-ratio: 1/1 (nie padding-bottom trick!)
   - .svg-holding-block → position: absolute; inset: 0 (wypełnia cały kafelek)
   - Obrazki → position: absolute; top/left: 50% (z IP8), width: 100% (nasze)
   - <p> → position: absolute; bottom: 0 (z IP8 styles.css)
------------------------------------------------------- */

/*
   Siatka: CSS Grid repeat(4, 1fr) — pewne 4 kolumny niezależnie od flex-basis/min-width.
   Nadpisuje product-grid.css (g-N-Children grid-area, display:flex, min-width:223px).
   gap: 32px = 16px lewy + 16px prawy padding na kategorii (p-lg-3).
*/
#tab_wszystkie .productBoxesInner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Każdy kafelek w siatce: brak własnych marginesów, display block */
#tab_wszystkie .productBoxesInner .box.prodbox {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    grid-area: auto !important;
}

/*
   Kafelek na stronie głównej:
   aspect-ratio: 1/1 tworzy kwadrat bez padding-bottom trick.
   padding: 0 — brak wewnętrznych wcięć (svg-holding-block pokrywa cały kafelek).
   position: relative — zawierający blok dla absolutnych dzieci.
*/
#tab_wszystkie .product-box-single {
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/*
   svg-holding-block wypełnia cały kafelek przez position: absolute + inset: 0.
   Nadpisuje Bootstrap h-100 i IP8 styles.
   Obrazki (absolute z IP8) i <p> (absolute bottom: 0 z IP8)
   pozycjonowane względem .svg-holding-block (najbliższy positioned ancestor).
*/
#tab_wszystkie .product-box-single .svg-holding-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    min-height: 0 !important;
}

/* Tablet/mobile (< 992px): 2 kolumny */
@media screen and (max-width: 991px) {
    #tab_wszystkie .productBoxesInner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media screen and (min-width: 780px) {
    .container {
        margin: 0rem auto;
    }
}