/*==================================================
PRODUCT PAGES
Uses typography & container variables from style.css
==================================================*/

/*==============================
PRODUCT HERO
==============================*/

.products-hero{
    position:relative;
    min-height:680px;
    overflow:hidden;
}

.products-hero__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.products-hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(10,31,78,.65),
        rgba(26,60,110,.65)
    );
}

.products-hero__content{

    position:relative;
    z-index:2;

    width:100%;
    max-width:1440px;

    margin:0 auto;

    height:680px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:0 40px;

    color:#fff;

}

/*==============================
BREADCRUMB
==============================*/

.breadcrumb{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:30px;

    font-size:14px;

    color:rgba(255,255,255,.9);

}

.breadcrumb a{

    color:#fff;

}

.breadcrumb a:hover{

    color:#e07b2a;

}

/*==============================
HERO LABEL
==============================*/

.hero-label{

    display:inline-block;

    color:#e07b2a;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

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

.products-hero h1{
    font-size:var(--hero-heading);
    font-weight:800;
    line-height:1.1;
    width:100%;
    margin-bottom:28px;
}

/*==============================
HERO DESCRIPTION
==============================*/

.products-hero p{

    max-width:720px;

    font-size:var(--paragraph);

    line-height:1.8;

    color:rgba(255,255,255,.92);

}

/*==================================================
FILTER BAR
(we'll use this in next step)
==================================================*/

.products-toolbar{

    background:#fff;

    border-bottom:1px solid #e6edf5;

    padding:22px 0;

    position:sticky;

    top:96px;

    z-index:100;

}

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

.products-grid{

    padding:80px 0;

}

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

.product-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #e7edf6;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-6px);

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

}

.product-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.product-card-content{

    padding:24px;

}

.product-card h3{

    font-size:var(--sub-heading);

    color:#173b74;

    margin-bottom:12px;

    font-weight:700;

}

.product-card p{

    font-size:var(--paragraph);

    color:#556;

    margin-bottom:20px;

}

.product-card .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    background:#173b74;

    color:#fff;

    border-radius:8px;

    transition:.3s;

}

.product-card .btn:hover{

    background:#e07b2a;

}

/*==================================================
PRODUCT MODAL
==================================================*/

.product-modal{

    display:none;

}

/*==================================================
DOWNLOAD CTA
==================================================*/

.products-cta{

    background:#0f2f63;

    padding:90px 0;

    text-align:center;

    color:#fff;

}

.products-cta h2{

    font-size:var(--section-heading);

    margin-bottom:20px;

}

.products-cta p{

    font-size:var(--paragraph);

    max-width:720px;

    margin:0 auto 35px;

}

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

@media (max-width:991px){

    .products-hero{

        min-height:580px;

    }

    .products-hero__content{

        height:580px;

        padding:0 30px;

    }

}

@media (max-width:768px){

    .products-hero{

        min-height:520px;

    }

    .products-hero__content{

        height:520px;

        padding:0 20px;

    }

    .breadcrumb{

        font-size:13px;

    }

    .hero-label{

        font-size:13px;

        letter-spacing:2px;

    }

}
/*==================================
PRODUCT TOOLBAR
==================================*/

.products-toolbar{

    background:#fff;
    border-bottom:1px solid #e6edf5;
    padding:24px 0;

}

.products-toolbar-inner{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

}

/* Left */

.filter-btn{

    background:#173b74;
    color:#fff;

    border:none;

    border-radius:999px;

    padding:12px 26px;

    font-size:16px;
    font-weight:700;

}

/* Right */

.toolbar-right{

    display:flex;
    align-items:center;
    gap:30px;

}

/* Search */

.search-box{

    width:320px;
    height:52px;

    border:1px solid #dfe6f2;
    border-radius:12px;

    background:#f8f9fc;

    display:flex;
    align-items:center;

    padding:0 16px;

}

.search-box input{

    width:100%;

    border:none;
    outline:none;

    background:transparent;

    font-size:16px;

}

/* Product Count */

.product-count{

    font-size:18px;
    color:#4b587c;
    white-space:nowrap;

}