.product-list-page {
    padding: 18px 0 56px;
}

.product-hero {
    padding-bottom: 28px;
}

.product-hero-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 34px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.18), rgba(78, 205, 196, 0.16), rgba(255, 107, 107, 0.14));
    box-shadow: 0 18px 34px rgba(90, 97, 138, 0.1);
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: #ff6b6b;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-hero-box h1 {
    margin: 14px 0 10px;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: #2f3550;
}

.product-hero-box p {
    margin: 0;
    max-width: 640px;
    color: #6f7693;
    line-height: 1.7;
}

.breadcrumb-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #6f7693;
    font-weight: 800;
}

.breadcrumb-wrap a {
    color: #2f3550;
}

.filter-card,
.list-product-card {
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(90, 97, 138, 0.1);
}

.filter-card {
    position: sticky;
    top: 110px;
    padding: 24px;
    border-radius: 28px;
}

.filter-block + .filter-block {
    margin-top: 24px;
}

.filter-block h3,
.filter-block h4,
.list-content h3 {
    font-family: 'Baloo 2', cursive;
    color: #2f3550;
}

.filter-block h3 {
    font-size: 1.6rem;
    margin-bottom: 16px;
}

.filter-block h4 {
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.filter-block p {
    margin: 0;
    color: #6f7693;
    font-weight: 700;
}

.filter-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 107, 107, 0.08);
    color: #2f3550;
    font-weight: 800;
}

.filter-chip.active {
    background: linear-gradient(90deg, #ff6b6b, #ff8b8b);
    color: #ffffff;
}

.small-chip {
    background: rgba(78, 205, 196, 0.1);
}

.swatch-list {
    display: flex;
    gap: 10px;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 4px 10px rgba(90, 97, 138, 0.1);
}

.swatch.coral { background: #ffb6b9; }
.swatch.mint { background: #b8f2e6; }
.swatch.sun { background: #ffe66d; }
.swatch.sky { background: #a9dcff; }
.swatch.lilac { background: #cdb4ff; }

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 28px rgba(90, 97, 138, 0.08);
}

.listing-toolbar p {
    margin: 0;
    color: #6f7693;
    font-weight: 800;
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.toolbar-pill {
    border: 0;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(47, 53, 80, 0.06);
    color: #2f3550;
    font-weight: 800;
}

.toolbar-pill.active {
    background: linear-gradient(90deg, #4ecdc4, #7ce1d9);
    color: #ffffff;
}

.list-product-card {
    position: relative;
    height: 100%;
    padding: 16px;
    border-radius: 28px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.list-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 40px rgba(90, 97, 138, 0.14);
}

.coral-bg { background: linear-gradient(180deg, rgba(253, 226, 228, 0.9), #ffffff 68%); }
.mint-bg { background: linear-gradient(180deg, rgba(217, 248, 244, 0.92), #ffffff 68%); }
.sun-bg { background: linear-gradient(180deg, rgba(255, 242, 184, 0.92), #ffffff 68%); }
.sky-bg { background: linear-gradient(180deg, rgba(223, 241, 255, 0.92), #ffffff 68%); }
.lilac-bg { background: linear-gradient(180deg, rgba(233, 221, 255, 0.92), #ffffff 68%); }

.list-wishlist {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #2f3550;
    box-shadow: 0 8px 18px rgba(90, 97, 138, 0.1);
}

.list-image-wrap {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
}

.list-image-wrap img {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    display: block;
}

.list-content {
    padding: 16px 4px 4px;
}

.list-content span {
    display: inline-block;
    margin-bottom: 8px;
    color: #6f7693;
    font-size: 0.88rem;
    font-weight: 700;
}

.list-content h3 {
    margin: 0 0 12px;
    font-size: 1.4rem;
    line-height: 1.15;
}

.list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.list-meta strong {
    color: #2f3550;
    font-size: 1rem;
}

.list-meta small {
    color: #6f7693;
    font-size: 0.82rem;
    font-weight: 800;
}

.list-meta i {
    color: #ffb703;
}

@media (max-width: 1199px) {
    .filter-card {
        position: static;
    }
}

@media (max-width: 767px) {
    .product-list-page {
        padding: 12px 0 40px;
    }

    .product-hero-box {
        padding: 24px 20px;
        border-radius: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .listing-toolbar {
        padding: 16px;
        border-radius: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-card {
        padding: 20px;
        border-radius: 22px;
    }

    .list-product-card {
        padding: 12px;
        border-radius: 20px;
    }

    .list-image-wrap {
        min-height: 150px;
        padding: 10px;
        border-radius: 16px;
    }

    .list-image-wrap img {
        max-height: 130px;
    }

    .list-content h3 {
        font-size: 1rem;
    }

    .list-content span {
        font-size: 0.74rem;
    }

    .list-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}