/* ==========================================
   DESIGN TOKENS (matches About page)
========================================== */

.catalog-hero,
.catalog-controls,
.catalog-products{

    --rose:#ff4f9a;

    --rose-deep:#c81361;

    --gold:#f5a524;

    --gold-light:#ffd68a;

    --ink:#2a1e1c;

    --muted:#7d6b66;

    --cream:#fff9f2;

    --blush:#ffe4ef;

    font-family:'Outfit',sans-serif;

}

.catalog-hero-content h1,
.product-content h3{

    font-family:'Fraunces',serif;

    font-weight:600;

}

/* ==========================================
   CATALOG HERO
========================================== */

.catalog-hero{

    position:relative;

    overflow:hidden;

    padding:170px 0 90px;

    background:

        radial-gradient(
            circle at 15% 20%,
            #ffe0ee 0%,
            transparent 45%
        ),

        radial-gradient(
            circle at 85% 15%,
            #ffe9c9 0%,
            transparent 40%
        ),

        linear-gradient(
            180deg,
            var(--cream),
            #fff4f8
        );

    text-align:center;

}

.catalog-hero::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    background:radial-gradient(circle, var(--rose) 0%, transparent 70%);

    opacity:.2;

    border-radius:50%;

    filter:blur(90px);

    top:-140px;

    left:-140px;

}

.catalog-hero::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    background:radial-gradient(circle, var(--gold) 0%, transparent 70%);

    opacity:.2;

    border-radius:50%;

    filter:blur(100px);

    right:-140px;

    bottom:-140px;

}

.breadcrumb{

    position:relative;

    z-index:1;

    margin-bottom:30px;

    font-size:.95rem;

    color:var(--muted);

}

.breadcrumb a{

    color:var(--rose-deep);

    text-decoration:none;

    font-weight:600;

}

.breadcrumb span{

    margin:0 8px;

}

.catalog-hero-content{

    position:relative;

    z-index:1;

    max-width:760px;

    margin:auto;

}

.catalog-hero-content h1{

    font-size:3.2rem;

    color:var(--ink);

    margin:25px 0;

    line-height:1.2;

}

.catalog-hero-content p{

    font-size:1.1rem;

    color:var(--muted);

    line-height:1.8;

}

.catalog-hero .section-tag{

    font-size:.85rem;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 26px;

    border-radius:999px;

    background:linear-gradient(90deg, var(--blush), var(--gold-light));

    color:var(--rose-deep);

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:0 12px 28px rgba(200,19,97,.18);

}
/*=========================================
      SEARCH & FILTER
=========================================*/

.catalog-controls{

    padding:70px 0;

    background:#fff;

}

.controls-wrapper{

    display:flex;

    flex-direction:column;

    gap:35px;

}

/* Search */

.search-box{

    position:relative;

    max-width:700px;

    margin:auto;

}

.search-box input{

    width:100%;

    padding:18px 22px 18px 60px;

    border:none;

    border-radius:60px;

    background:#fff;

    font-size:16px;

    color:var(--ink);

    box-shadow:0 10px 35px rgba(42,30,28,.08);

    outline:none;

    transition:.3s;

}

.search-box input:focus{

    box-shadow:0 15px 40px rgba(200,19,97,.2);

}

.search-icon{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    font-size:22px;

}

/* Categories */

.category-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.filter-btn{

    border:none;

    background:var(--blush);

    color:var(--rose-deep);

    padding:14px 24px;

    border-radius:50px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.filter-btn:hover{

    background:linear-gradient(135deg, var(--rose), var(--rose-deep));

    color:white;

}

.filter-btn.active{

    background:linear-gradient(135deg, var(--rose), var(--rose-deep));

    color:#fff;

    box-shadow:0 12px 25px rgba(200,19,97,.3);

}

/* Toolbar */

.catalog-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.product-count{

    font-size:16px;

    color:var(--muted);

}

.product-count strong{

    color:var(--rose-deep);

}

.sort-box{

    display:flex;

    align-items:center;

    gap:12px;

}

.sort-box label{

    font-weight:600;

    color:var(--ink);

}

.sort-box select{

    padding:12px 18px;

    border-radius:14px;

    border:1px solid var(--blush);

    color:var(--ink);

    outline:none;

    cursor:pointer;

}
/*=========================================
        PRODUCT GRID
=========================================*/

.catalog-products{

    padding:20px 0 100px;

    background:var(--cream);

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.product-card{

    position:relative;

    overflow:hidden;
    isolation: isolate;

    border-radius:26px;

    background:#fff;

    box-shadow:0 15px 40px rgba(42,30,28,.08);

     transition:
        transform .35s,
        box-shadow .35s,
        opacity .3s;
}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(200,19,97,.18);

}

.product-card img{

    transition:
        transform .45s ease,
        filter .45s ease;

}

.product-card:hover img{

    transform:scale(1.03);

    filter:brightness(.96);

}

.product-content{

    padding:24px;

}

.product-rating{

    color:var(--gold);

    font-size:.9rem;

    margin-bottom:10px;

}

.product-rating span{

    color:var(--muted);

}

.product-content h3{

    font-size:1.4rem;

    margin-bottom:12px;

    color:var(--ink);

}

.product-content p{

    color:var(--muted);

    line-height:1.7;

    margin-bottom:18px;

}

.product-meta{

    display:flex;

    justify-content:space-between;

    margin-bottom:22px;

    font-size:.9rem;

    color:var(--muted);

}

.product-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.product-footer small{

    color:var(--muted);

}

.product-footer h4{

    color:var(--rose-deep);

    font-family:'Fraunces',serif;

    font-size:1.35rem;

    margin-top:4px;

}
.product-footer{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:20px;

}

.custom-label{

    text-align:center;

}

.custom-label span{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:var(--blush);

    color:var(--rose-deep);

    font-weight:600;

    font-size:.95rem;

}

.custom-label small{

    display:block;

    margin-top:10px;

    color:var(--muted);

    font-size:.85rem;

}

.product-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px 20px;

    border-radius:50px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        var(--rose),
        var(--rose-deep)
    );

    color:white;

    font-weight:600;

    font-size:1rem;

    transition:.35s;

    box-shadow:
        0 12px 25px rgba(200,19,97,.25);

}

.product-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 35px rgba(200,19,97,.35);

}

.product-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:linear-gradient(135deg, var(--rose), var(--rose-deep));

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

}
.product-badge{

    z-index:20;

} 


.product-badge.new{

    background:linear-gradient(135deg, var(--gold), #ff9800);

}

.wishlist-btn{

    position:absolute;

    top:18px;

    right:18px;

    z-index:5;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

}
.wishlist-btn{

transition:
        background .3s,
        color .3s,
        transform .25s;

}

.wishlist-btn.liked{

background:linear-gradient(135deg, var(--rose), var(--rose-deep));

color:#fff;

transform:scale(1.15);

}
.wishlist-btn:hover{

    transform:scale(1.1);

}

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

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;
    height:280px;
    object-fit:cover;

    transition:.45s;

}
.product-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(42,30,28,.5);

    opacity:0;

    transition:.35s;
    z-index: 2;

}
.quick-view-btn{

    border:none;

    padding:14px 28px;

    border-radius:50px;

    background:white;

    color:var(--rose-deep);

    font-weight:600;

    cursor:pointer;

    transform:translateY(15px);

    transition:.35s;

}
.product-card:hover .product-overlay{

    opacity:1;

}

.product-card:hover .quick-view-btn{

    transform:translateY(0);

}

.product-card:hover img{

    transform:scale(1.08);

}