/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/






/* ==========================================================
   PRODUKTY
========================================================== */

.products-wrapper{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:50px;

    align-items:start;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.products-sidebar{

    position:sticky;

    top:120px;

}

.products-sidebar h3{

    margin:0 0 25px;

    font-size:24px;

    font-weight:600;

    color:#2d4055;

}

.products-categories{

    margin:0;

    padding:0;

    list-style:none;

}

.products-categories li{

    margin-bottom:8px;

}

.products-categories li a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:10px;

    background:#fff;

    border:1px solid #E5EBF0;

    transition:.25s;

}

.products-categories li a span{

    color:#48698A;

    font-size:16px;

}

.products-categories li a strong{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF3F8;

    color:#48698A;

    font-size:13px;

}

.products-categories li:hover a{

    border-color:#2F87FF;

}

.products-categories li.active a{

    background:#2F87FF;

    border-color:#2F87FF;

}

.products-categories li.active span,

.products-categories li.active strong{

    color:#fff;

}

.products-categories li.active strong{

    background:rgba(255,255,255,.18);

}

/* ==========================================================
   CONTENT
========================================================== */

.products-content{

    width:100%;

}

/* ==========================================================
   GRID
========================================================== */

.products-grid{

    display:grid;

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

    gap:36px;

}

/* ==========================================================
   CARD
========================================================== */

.product-card{

    background:#fff;

    border:1px solid #E3EAF0;

    border-radius:10px;

    overflow:hidden;

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

/* ==========================================================
   IMAGE
========================================================== */

.product-card__image {
    display: block !important;
    height: 270px !important;
    background: #F7F8FA !important;
    overflow: hidden !important;
    padding: 0 !important; /* Upewniamy się, że kontener nie ma wewnętrznych marginesów */
}

@media screen and (min-width: 1360px) {
    .product-card__image {
        height: 334px !important;
    }
}

.product-card__image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    
    /* Zmiana na cover - obrazek wypełni cały box docinając boki, jeśli proporcje są inne */
    object-fit: cover !important; 
    
    /* ZERUJEMY MARGINESY I PADDINGI (wcześniej było tu padding: 20px) */
    padding: 0 !important; 
    margin: 0 !important;
    
    transition: transform .4s ease !important;
}

/* Delikatne powiększenie po najechaniu (efekt zoomu) */
.product-card:hover .product-card__image img {
    transform: scale(1.05) !important;
}
/* ==========================================================
   CONTENT
========================================================== */

.product-card__content{

    padding:26px;

}

/* ==========================================================
   TITLE
========================================================== */

.product-card__title{

    margin:0 0 20px;
    padding-bottom: 2px;
    font-size: 1.2em !important;
    line-height:1.3;
	font-weight:500 !important;


}

.product-card__title a{

    color:#456789;

    text-decoration:none;

}

.product-card__title a:hover{

    color:#2F87FF;

}

/* ==========================================================
   META
========================================================== */

.product-card__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important; /* Zmniejszamy odstęp (możesz wpisać np. 4px lub 8px) */
}

/* ==========================================================
   WYRÓWNANIE IKON I TEKSTU W KARCIE PRODUKTU
========================================================== */

.product-card__item {
    display: flex !important;
    align-items: center !important; /* Główne wymuszenie środkowania */
    gap: 12px;
    font-size: 15px;
    line-height: 1.2 !important; /* Zmniejszenie line-height ułatwia centrowanie z ikoną */
    margin-bottom: 0 !important;
}

/* Upewniamy się, że żaden ukryty paragraf czy span nie dodaje własnych marginesów */
.product-card__item p, 
.product-card__item span {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
}

/* Przekształcamy kontener ikony na flex, aby jej zawartość (SVG) była idealnie na środku */
.product-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px;
    margin: 0 !important; /* Reset marginesów, które Salient lubi czasem dodawać */
}

/* Wymuszenie zachowania samego wektora/obrazka wewnątrz kontenera */
.product-icon svg,
.product-icon img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.products-wrapper{

    grid-template-columns:240px 1fr;

    gap:35px;

}

}

@media(max-width:991px){

.products-wrapper{

    grid-template-columns:1fr;

}

.products-sidebar{

    position:relative;

    top:auto;

}

.products-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:600px){

.product-card__image{

    height:220px;

}

.product-card__content{

    padding:20px;

}

.product-card__title{

    font-size:18px;

}

}


/* ==========================================================
   TWARDY RESET WYGLĄDU KATEGORII (USUWANIE BUTTONÓW)
========================================================== */

/* Tło całego paska bocznego */
.products-categories {
    background-color: #f4f7f7 !important;
    padding: 35px 30px !important;
    border-radius: 5px !important;
    margin: 0 !important;
}

/* Reset wszystkich linków wewnątrz listy - zabijamy "buttony" */
.products-categories ul li a {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

/* Ukrywamy kropki i znaczniki list z motywu */
.products-categories ul,
.products-categories li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.products-categories li::before,
.products-categories li::after,
.products-categories li::marker {
    display: none !important;
}

/* ==========================================================
   WŁAŚCIWY WYGLĄD TYPOGRAFII
========================================================== */

/* 1. KATEGORIE GŁÓWNE (Pogrubione, duże litery) */
.products-categories > ul > li {
    margin-bottom: 25px !important; /* Odstęp między sekcjami */
}

.products-categories > ul > li > a {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #3C5A73 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

/* 2. PODKATEGORIE (Cienkie, mniejsze litery) */
.products-categories .children {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Odstęp między podkategoriami */
}

.products-categories .children li a {
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #728A9E !important;
    margin-bottom: 0 !important;
}

/* 3. HOVER / AKTYWNE (Niebieski kolor po najechaniu) */
.products-categories a:hover,
.products-categories li.active > a {
    color: #3A92FA !important;
}
/* ==========================================================
   NOWOCZESNA PAGINACJA W RAMKACH (WYCENTROWANA)
========================================================== */
.products-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 50px 0 20px 0 !important;
    width: 100% !important;
    clear: both !important;
}

/* Wygląd kafelków / ramek */
.products-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 2px solid #E5EBF0 !important; /* Wyrazista ramka */
    border-radius: 8px !important;
    color: #3C5A73 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease-in-out !important;
}

/* Efekt po najechaniu (Hover) */
.products-pagination a.page-numbers:hover {
    border-color: #2F87FF !important;
    color: #2F87FF !important;
    background: #F4F8FF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(47, 135, 255, 0.15) !important;
}

/* Aktywna strona */
.products-pagination .page-numbers.current {
    background: #2F87FF !important;
    border-color: #2F87FF !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(47, 135, 255, 0.3) !important;
}

/* Separator / Wielokropek (...) */
.products-pagination .dots {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #A0B0C0 !important;
    padding: 0 4px !important;
    min-width: auto !important;
}

/* Dopasowanie do urządzeń mobilnych */
@media (max-width: 600px) {
    .products-pagination {
        gap: 6px !important;
    }
    
    .products-pagination .page-numbers {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}

/* Stylizacja przycisku Wczytaj więcej w ramce #3998FF */
#load-more-btn {
    background-color: transparent !important;
    color: #3998FF !important;
    border: 2px solid #3998FF !important;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px; /* Zmień na 0px dla ostrych rogów lub 30px dla obłych */
    transition: all 0.3s ease;
    box-shadow: none !important;
    cursor: pointer;
}

/* Efekt najechania (Hover) */
#load-more-btn:hover {
    background-color: #3998FF !important;
    color: #ffffff !important;
    border-color: #3998FF !important;
}

/* Stan podczas ładowania danych */
#load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}