/* ==========================================================================
   KRYSTALSPACE – STRONA "ULUBIONE" (page-ulubione.php)
   Plik dedykowany wyłącznie tej stronie — niezależny od base/page.css.
   Karty produktów wykorzystują globalny system z shop/content-product.css.
   ========================================================================== */

.kp-wishlist-page {
    background: var(--ks-bg);
}

/* --- HERO --- */
.kp-wishlist-hero {
    position: relative;
    padding: 110px 0 90px;
    background: linear-gradient(135deg, #fff5f6 0%, var(--ks-light-blue) 100%);
    overflow: hidden;
    text-align: center;
}

.kp-wishlist-hero .container {
    position: relative;
    z-index: 2;
}

.kp-wishlist-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ks-slate);
    margin-bottom: 25px;
}

.kp-wishlist-breadcrumb a {
    color: var(--ks-navy);
    text-decoration: none;
}

.kp-wishlist-breadcrumb i { font-size: .65rem; opacity: .5; }

.kp-wishlist-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--ks-accent);
    box-shadow: var(--ks-shadow-soft);
}

.kp-wishlist-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--ks-navy);
    line-height: 1.1;
    margin-bottom: 14px;
}

.kp-wishlist-title span {
    background: var(--ks-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kp-wishlist-subtitle {
    font-size: 1.05rem;
    color: var(--ks-slate);
    max-width: 520px;
    margin: 0 auto;
}

.kp-wishlist-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 8px 20px;
    background: #fff;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ks-navy);
    box-shadow: var(--ks-shadow-sm);
}

.kp-wishlist-count-pill i { color: var(--ks-accent); }

.kp-wishlist-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 0;
    overflow: hidden;
}

.kp-wishlist-hero-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.kp-wishlist-hero-wave svg path {
    /* Fallback na wypadek, gdyby zmienna nie była dostępna w tym kontekście —
       bez niego SVG "fill" spada do czarnego (wartość początkowa właściwości),
       co dawało wielki czarny pas zamiast cienkiej fali. */
    fill: var(--ks-bg, #fbfbfd);
}

/* --- GRID SEKCJA --- */
.kp-wishlist-body {
    padding: 70px 0 110px;
}

.kp-wishlist-grid {
    display: grid !important;
    /* auto-fit (nie auto-fill) — gdy na liście jest mało produktów, puste
       tory siatki zapadają się do 0 i istniejące karty wypełniają miejsce,
       zamiast zostawiać "osamotnioną" wąską kartę i pustą resztę wiersza.
       min(1fr, 320px) chroni przed odwrotnym problemem — jedna karta przy
       1 produkcie nie rozciągnie się na całą szerokość kontenera. */
    grid-template-columns: repeat(auto-fit, minmax(260px, min(1fr, 320px))) !important;
    gap: 28px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kp-wishlist-grid::before,
.kp-wishlist-grid::after { display: none !important; }

@media (max-width: 860px) {
    .kp-wishlist-grid { gap: 18px !important; }
}

@media (max-width: 540px) {
    .kp-wishlist-grid { grid-template-columns: 1fr !important; }
}

/* --- STAN PUSTY --- */
.kp-wishlist-empty {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-lg);
    padding: 70px 40px;
    box-shadow: var(--ks-shadow-soft);
}

.kp-wishlist-empty .kp-empty-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: var(--ks-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--ks-accent);
}

.kp-wishlist-empty h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ks-navy);
    margin-bottom: 12px;
}

.kp-wishlist-empty p {
    color: var(--ks-slate);
    margin-bottom: 30px;
    line-height: 1.6;
}

.kp-wishlist-empty .kp-btn-shop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 50px;
    background: var(--ks-gradient);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 25px rgba(99, 102, 241, .25);
    transition: var(--ks-transition);
}

.kp-wishlist-empty .kp-btn-shop:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(99, 102, 241, .35);
}

@media (max-width: 600px) {
    .kp-wishlist-hero { padding: 80px 0 60px; }
    .kp-wishlist-empty { padding: 50px 24px; }
}