/* =================================================
   WOOCOMMERCE ARCHIVE – AURORASHOP PREMIUM
================================================= */

/* --- CONTAINER --- */
.aurora-shop-container {
    max-width: 1400px;
    margin: 40px auto 80px;
    padding: 0 24px;
}

/* --- GRID: SIDEBAR + CONTENT --- */
.aurora-shop-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* Nakładka tła pod mobilnym arkuszem filtrów (bottom-sheet) — musi być
   position:fixed, inaczej jako zwykły <div> staje się TRZECIM elementem
   siatki .aurora-shop-wrapper (która ma tylko 2 kolumny) i zaburza układ
   sidebar/main (dokładnie ten błąd widoczny na zrzucie ekranu). */
.aurora-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 2500;
}

.aurora-filter-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- BREADCRUMBS --- */
.aurora-shop-breadcrumbs {
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 500;
}

/* --- SIDEBAR --- */
.aurora-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;     /* pozwala się skurczyć poniżej intrinsic-width dzieci */
    overflow: hidden;  /* bezpiecznik na widgety WC z własną, szerszą szerokością */
}

/* Limit 280px tylko na desktopie — na mobile .aurora-sidebar staje się szufladą
   320px (mobile-drawer.css) i nie chcemy tego nadpisywać. */
@media (min-width: 992px) {
    .aurora-sidebar {
        max-width: 280px;
        position: sticky;
        top: 110px; /* poniżej przyklejonego nagłówka */
        align-self: start;
        /* Bez max-height/overflow-y — sidebar rośnie na całą swoją naturalną
           wysokość i przewija się razem ze stroną (sticky "odklei się"
           dopiero, gdy jego dolna krawędź dojdzie do dołu viewportu), bez
           własnego, wewnętrznego scrollbara wymagającego przewijania na
           dwa sposoby naraz. */
        overflow-x: hidden;
    }
}

/* Wszystko wewnątrz sidebaru respektuje jego szerokość, niezależnie od tego,
   jak natywne widgety WooCommerce (slider ceny, długie nazwy kategorii itp.)
   były napisane. */
.aurora-sidebar * {
    max-width: 100%;
    box-sizing: border-box;
}

.aurora-sidebar input,
.aurora-sidebar select,
.aurora-sidebar button,
.aurora-sidebar .button {
    width: 100%;
}

/* Pasek "Filtry ×" ma sens tylko jako nagłówek wysuwanej szuflady mobilnej
   (patrz mobile-drawer.css, @media max-width:991px) — na desktopie sidebar
   jest zawsze widoczny inline, więc ten pasek byłby tu zbędnym, nieostylowanym
   tekstem nad widgetami. Zawężone do min-width:992px (dopełnienie progu
   drawera), żeby kolejność wczytywania plików nie ugryzła reguły mobilnej. */
@media (min-width: 992px) {
    .aurora-sidebar-header { display: none; }
}

/* Widgety są zagnieżdżone w .aurora-sidebar-scroll (potrzebne pod bottom-sheet
   na mobile — patrz mobile-drawer.css); odstępy między nimi przenosimy tu,
   żeby działały identycznie na desktopie i mobile. */
.aurora-sidebar-scroll {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.aurora-sidebar .widget {
    background: #ffffff;
    border: 1px solid var(--aurora-border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--aurora-shadow-sm);
    transition: var(--aurora-transition);
}

.aurora-sidebar .widget:hover {
    box-shadow: var(--aurora-shadow-soft);
}

.aurora-sidebar .widget-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--aurora-navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--aurora-bg-light);
}

/* Kategorie / listy filtrów (kategorie, tagi, atrybuty — w tym natywne
   widgety WooCommerce "Lista warstwowa" / "Filtruj według atrybutu", które
   renderują licznik <span class="count"> jako ODRĘBNY element OBOK linku,
   nie wewnątrz niego). Hover/padding/licznik są na poziomie <li> (cały
   wiersz), nie na samym <a> — inaczej licznik "ucieka" na nową linię. */
.aurora-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aurora-sidebar ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -10px 2px;
    padding: 0 10px;
    border-radius: 8px;
    transition: var(--aurora-transition);
}

.aurora-sidebar ul li:hover {
    background: var(--aurora-bg-light);
}

.aurora-sidebar ul li a {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    font-size: 14px;
    color: var(--aurora-slate);
    padding: 9px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--aurora-transition);
}

.aurora-sidebar ul li:hover a {
    color: var(--aurora-indigo);
}

/* Licznik produktów (np. "(3)") — natywny <span class="count"> WooCommerce */
.aurora-sidebar ul li .count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--aurora-slate);
    background: var(--aurora-bg-light);
    padding: 3px 9px;
    border-radius: 50px;
    transition: var(--aurora-transition);
}

.aurora-sidebar ul li:hover .count {
    background: #ffffff;
    color: var(--aurora-indigo);
}

/* Aktywnie zaznaczony filtr (warianty nazw klas "chosen" w różnych
   widgetach WooCommerce) — wyróżniony, pogrubiony, z akcentem koloru. */
.aurora-sidebar ul li[class*="chosen"] a,
.aurora-sidebar ul li.chosen a {
    color: var(--aurora-navy);
    font-weight: 800;
}

.aurora-sidebar ul li[class*="chosen"],
.aurora-sidebar ul li.chosen {
    background: var(--aurora-bg-light);
}

/* Długie listy (np. wiele wartości atrybutu) — własny, wąski scrollbar
   zamiast surowego systemowego, gdy widget ma ograniczoną wysokość. */
.aurora-sidebar .widget ul::-webkit-scrollbar { width: 5px; }
.aurora-sidebar .widget ul::-webkit-scrollbar-track { background: transparent; }
.aurora-sidebar .widget ul::-webkit-scrollbar-thumb {
    background: var(--aurora-border);
    border-radius: 10px;
}

/* Przycisk filtrowania (np. "Filtruj według ceny") ujednolicony z resztą motywu */
.aurora-sidebar .button,
.aurora-sidebar button[type="submit"] {
    background: var(--aurora-navy);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: var(--aurora-transition);
}

.aurora-sidebar .button:hover,
.aurora-sidebar button[type="submit"]:hover {
    background: var(--aurora-indigo);
    transform: translateY(-1px);
}

/* --- HEADER KATEGORII --- */
.aurora-shop-header {
    margin-bottom: 45px;
}

.aurora-page-title {
    margin-bottom: 15px;
}

.aurora-term-description {
    color: var(--aurora-slate);
    line-height: 1.7;
    max-width: 900px;
    font-size: 17px;
}

/* --- TOOLBAR --- */

.aurora-result-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--aurora-slate);
}

/* --- PRODUCT GRID --- */
.aurora-shop-content ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Usunięcie floatów WooCommerce */
.aurora-shop-content ul.products::before,
.aurora-shop-content ul.products::after {
    display: none !important;
}
/* --- PAGINATION --- */
.aurora-pagination-wrap {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.aurora-pagination-wrap .page-numbers {
    display: flex;
    gap: 10px;
    list-style: none;
}
/* --- AURORASHOP PAGE TITLE --- */
.aurora-page-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 2.5rem; /* Duży, odważny rozmiar */
    color: var(--aurora-dark);
    letter-spacing: -2px; /* Nowoczesny, ścisnięty wygląd */
    line-height: 1.1;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

/* Subtelny gradientowy akcent (kropka lub linia) */
.aurora-page-title::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: -15px;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
}
/* --- AURORASHOP ORDERING SELECT --- */
.aurora-ordering {
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end; /* Pozycjonowanie do prawej */
}

.woocommerce-ordering {
    position: relative;
    min-width: 240px;
}

/* Stylizacja samej listy rozwijanej */
.woocommerce-ordering select.orderby {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--aurora-dark);
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    appearance: none; /* Ukrycie domyślnej strzałki przeglądarki */
    -webkit-appearance: none;
    transition: var(--aurora-transition);
    outline: none;
}

/* Efekt Hover & Focus */
.woocommerce-ordering select.orderby:hover {
    border-color: var(--aurora-indigo);
    background-color: #f8fafc;
}

.woocommerce-ordering select.orderby:focus {
    border-color: var(--aurora-indigo);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Własna strzałka (ikona) zamiast systemowej */
.woocommerce-ordering::after {
    content: '\f107'; /* Ikona Angle Down z Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aurora-slate);
    pointer-events: none; /* Kliknięcie przechodzi do selecta */
    transition: var(--aurora-transition);
}

.woocommerce-ordering:hover::after {
    color: var(--aurora-indigo);
    transform: translateY(-50%) translateY(2px);
}

/* Dostosowanie dla urządzeń mobilnych */
@media (max-width: 768px) {
    .aurora-ordering {
        justify-content: flex-start; /* Na mobile wyrównaj do lewej */
    }
    .woocommerce-ordering {
        width: 100%; /* Pełna szerokość na telefonach */
    }
    .woocommerce-ordering select.orderby {
        font-size: 0.9rem;
    }
}
/* Efekt "Krystalicznej" czystości - opcjonalne lekkie rozjaśnienie góry tekstu */
.aurora-page-title {
    background: linear-gradient(to bottom, var(--aurora-dark) 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .aurora-page-title {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }
    .aurora-page-title::after {
        right: -10px;
        width: 6px;
        height: 6px;
    }
}
/* =================================================
   RESPONSIVE
================================================= */

/* Próg 991px jest zgodny z assets/css/layout/mobile-drawer.css, gdzie
   .aurora-sidebar zamienia się w wysuwaną szufladę (.aurora-sidebar, .aurora-mobile-filter-btn,
   .aurora-sidebar-header, .aurora-filter-overlay) — poniżej tego sidebar NIE jest już
   częścią siatki 2-kolumnowej, więc nie nadpisujemy tu jego display/grid,
   żeby nie kolidować z regułami drawera. */
@media (max-width: 991px) {
    .aurora-shop-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .aurora-shop-content ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .aurora-shop-content ul.products {
        grid-template-columns: 1fr !important;
    }

    .aurora-shop-toolbar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        border-radius: 20px;
    }
}

/* --- PAGINACJA SKLEPU --- */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    padding: 20px 0;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    align-items: center;
    background: rgba(241, 245, 249, 0.5);
    padding: 6px;
    border-radius: 50px;
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 2px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    background: transparent;
    color: var(--aurora-slate);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: #ffffff;
    color: var(--aurora-error);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--aurora-error) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
    background: #ffffff;
    color: var(--aurora-navy);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.woocommerce nav.woocommerce-pagination ul li a.prev:hover,
.woocommerce nav.woocommerce-pagination ul li a.next:hover {
    background: var(--aurora-error);
    color: #fff;
}