/* ==========================================================
   BabyChoice Nappies
   PRODUCTS PAGE CSS
========================================================== */


/* ==========================================================
   PRODUCTS HEADER
========================================================== */


.products-header {

text-align:center;

max-width:700px;

margin:0 auto 40px;

}


.products-header h1 {

margin-bottom:12px;

}



/* ==========================================================
   FILTER BAR
========================================================== */


.filter-bar {

display:flex;

flex-wrap:wrap;

align-items:center;

justify-content:space-between;

gap:15px;

margin-bottom:35px;

}



.filter-pills {

display:flex;

flex-wrap:wrap;

gap:10px;

}



.pill {

padding:9px 20px;

border-radius:999px;

background:white;

border:2px solid var(--pink);

font-weight:700;

font-size:14px;

transition:.25s ease;

}



.pill:hover,
.pill.active {

background:var(--pink-deep);

border-color:var(--pink-deep);

color:white;

}



/* Search box on products page */

.product-search {

background:white;

border:2px solid var(--pink);

border-radius:999px;

padding:10px 18px;

display:flex;

align-items:center;

gap:10px;

}



.product-search input {

border:none;

outline:none;

background:none;

width:220px;

}



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


.products-grid {

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:25px;

}



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


.product-card {

width:100%;

max-width:280px;

background:white;

border-radius:var(--radius-lg);

padding:25px;

text-align:center;

box-shadow:
0 10px 25px rgba(0,0,0,.06);

transition:.3s ease;

}



.product-card:hover {

transform:translateY(-8px);

box-shadow:
0 20px 40px rgba(255,143,174,.18);

}



/* Product image */


.product-card .thumb {

height:230px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

margin-bottom:20px;

}



.product-card .thumb img {

height:100%;

width:100%;

object-fit:contain;

transition:.35s ease;

}



.product-card:hover .thumb img {

transform:scale(1.06);

}



/* Product information */


.product-card h3 {

font-size:23px;

margin-bottom:8px;

}



.pc-meta {

display:flex;

justify-content:center;

align-items:center;

gap:8px;

margin-bottom:10px;

}



.size-tag {

font-size:12px;

font-weight:800;

color:var(--pink-deep);

}



.pc-weight {

font-size:13px;

color:var(--ink-soft);

}



.product-description {

font-size:14px;

color:var(--ink-soft);

margin-bottom:15px;

}



.pc-bottom {

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}



.price {

font-weight:800;

font-size:17px;

color:var(--ink);

}



/* ==========================================================
   PRODUCT PAGINATION
========================================================== */


.pagination {

display:flex;

justify-content:center;

gap:10px;

margin-top:45px;

}



.pagination a {

width:38px;

height:38px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:white;

border:2px solid var(--pink);

font-weight:700;

}



.pagination a.active,
.pagination a:hover {

background:var(--pink-deep);

color:white;

}



/* ==========================================================
   EMPTY PRODUCTS MESSAGE
========================================================== */


.no-products {

text-align:center;

padding:50px;

background:white;

border-radius:var(--radius-lg);

color:var(--ink-soft);

font-weight:600;

}



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


@media(max-width:700px){


.filter-bar {

justify-content:center;

}


.product-search {

width:100%;

}


.product-search input {

width:100%;

}


.product-card {

max-width:100%;

}


}