/* ===================================================================
   Indian Sweets & Snacks — Product Listing Page
   Palette: Maroon / Turmeric / Green (matches brand identity)
=================================================================== */
:root{
  --maroon:#7a1f2b;
  --maroon-dark:#5c1620;
  --turmeric:#e2a325;
  --turmeric-light:#fdf3d9;
  --green:#3f6b3f;
  --ink:#2b2320;
  --muted:#7a726c;
  --line:#ece3d8;
  --bg:#fffdf8;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 4px 16px rgba(122,31,43,0.08);
  --shadow-lg:0 12px 32px rgba(122,31,43,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; margin:0 0 .4em; color:var(--maroon-dark);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1280px; margin:0 auto; padding:0 20px;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--maroon); color:#fff; border:none; border-radius:999px;
  padding:12px 24px; font-weight:600; font-size:14px; transition:.2s;
}
.btn-primary:hover{background:var(--maroon-dark);}
.btn-outline{
  background:transparent; border:1.5px solid var(--maroon); color:var(--maroon);
  border-radius:999px; padding:10px 20px; font-weight:600; font-size:14px; display:inline-block; transition:.2s;
}
.btn-outline:hover{background:var(--maroon); color:#fff;}

/* ---------- Header ---------- */
.topbar{background:var(--maroon-dark); color:#f5e6c8; font-size:12.5px;}
.topbar-inner{display:flex; justify-content:space-between; padding:6px 0;}
.site-header{background:#fff; box-shadow:0 1px 0 var(--line); position:sticky; top:0; z-index:50;}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700;}
.brand-mark{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--maroon),var(--turmeric));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:15px;
}
.brand-text{font-family:'Playfair Display',serif; font-size:19px; color:var(--maroon-dark); line-height:1.1;}
.brand-text em{display:block; font-style:normal; font-size:11px; color:var(--green); letter-spacing:1px; text-transform:uppercase;}

.main-nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.main-nav a{font-weight:600; font-size:14.5px; color:var(--ink); position:relative; padding:6px 0;}
.main-nav a:hover{color:var(--maroon);}
.main-nav a::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--turmeric); transition:.2s;}
.main-nav a:hover::after{width:100%;}

.nav-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{position:relative; background:none; border:none; color:var(--ink); display:flex; padding:4px;}
.icon-btn:hover{color:var(--maroon);}
.cart-count{
  position:absolute; top:-6px; right:-8px; background:var(--maroon); color:#fff; font-size:10px;
  min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none;}
.hamburger span{width:22px; height:2px; background:var(--ink); display:block;}

.mobile-search{display:none; background:var(--turmeric-light); padding:10px 0;}
.mobile-search form{display:flex; gap:8px;}
.mobile-search input{flex:1; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px;}
.mobile-search button{background:var(--maroon); color:#fff; border:none; border-radius:8px; padding:0 16px; font-weight:600;}

.mobile-nav-drawer{
  position:fixed; top:0; right:-280px; width:280px; height:100%; background:#fff; z-index:110;
  transition:right .25s ease; box-shadow:-6px 0 24px rgba(0,0,0,.15); padding:80px 24px 24px;
}
.mobile-nav-drawer.open{right:0;}
.mobile-nav-drawer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.mobile-nav-drawer a{display:block; padding:12px 4px; font-weight:600; border-bottom:1px solid var(--line);}
.drawer-overlay{display:none; position:fixed; inset:0; background:rgba(30,15,10,.4); z-index:105;}
.drawer-overlay.open{display:block;}

/* ---------- Breadcrumb / Heading ---------- */
.breadcrumb{font-size:13px; color:var(--muted); margin:20px 0 8px;}
.breadcrumb a:hover{color:var(--maroon);}
.breadcrumb span{margin:0 6px;}
.breadcrumb .current{color:var(--ink); font-weight:600;}
.plp-heading{margin-bottom:22px;}
.plp-heading h1{font-size:32px;}
.plp-sub{color:var(--muted); font-size:14px; margin:0;}

/* ---------- Layout ---------- */
.plp-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; padding-bottom:60px;}

/* ---------- Sidebar filters ---------- */
.plp-filters{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; position:sticky; top:90px;
}
.filters-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.filters-head h3{margin:0; font-size:18px;}
.clear-link{background:none; border:none; color:var(--maroon); font-size:12.5px; font-weight:600; text-decoration:underline;}
.filter-block{padding:14px 0; border-top:1px solid var(--line);}
.filter-block:first-of-type{border-top:none;}
.filter-block h4{font-size:13.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink); margin-bottom:10px; font-family:'Poppins',sans-serif; font-weight:600;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:14px; padding:6px 0; cursor:pointer; color:var(--ink);}
.checkbox-row input{accent-color:var(--maroon); width:16px; height:16px;}
.checkbox-row .count{margin-left:auto; color:var(--muted); font-style:normal; font-size:12.5px;}
.price-range-inputs{display:flex; align-items:center; gap:8px;}
.price-range-inputs input{width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px;}
.price-hint{font-size:12px; color:var(--muted); margin:8px 0 0;}
.apply-btn{width:100%; margin-top:16px;}

/* ---------- Toolbar ---------- */
.results-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px;}
.filter-toggle-btn{display:none; align-items:center; gap:8px;}
.sort-form{display:flex; align-items:center; gap:8px; margin-left:auto;}
.sort-label{font-size:13.5px; color:var(--muted);}
.sort-form select{border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13.5px; background:#fff;}

/* ---------- Product grid ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:.2s; display:flex; flex-direction:column;
}
.product-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:transparent;}
.pc-image-wrap{position:relative; aspect-ratio:1/1; background:var(--turmeric-light); overflow:hidden;}
.pc-image-wrap img{width:100%; height:100%; object-fit:cover; transition:.35s;}
.product-card:hover .pc-image-wrap img{transform:scale(1.06);}
.badge{position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;}
.badge-out{background:#eee; color:#888;}
.pc-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.pc-title{font-size:15.5px; font-family:'Poppins',sans-serif; font-weight:600; color:var(--ink); line-height:1.3;}
.pc-title a:hover{color:var(--maroon);}
.pc-summary{font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; flex:1;}
.pc-footer{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.pc-price{font-weight:700; color:var(--maroon-dark); font-size:15px;}
.pc-no-price{font-size:12.5px; color:var(--muted); font-weight:500;}
.pc-add-btn{
  width:36px; height:36px; border-radius:50%; background:var(--turmeric-light); color:var(--maroon);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.pc-add-btn:hover{background:var(--maroon); color:#fff;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:70px 20px; color:var(--muted);}
.empty-state svg{margin-bottom:14px; color:var(--line);}
.empty-state h3{color:var(--ink);}

/* ---------- Pagination ---------- */
.plp-pagination{display:flex; justify-content:center; margin-top:36px;}
.pagination{display:flex; gap:6px; list-style:none; padding:0; margin:0;}
.pagination li a, .pagination li span{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:8px;
  border:1px solid var(--line); font-size:13.5px; color:var(--ink);
}
.pagination li.active span{background:var(--maroon); color:#fff; border-color:var(--maroon);}
.pagination li a:hover{border-color:var(--maroon); color:var(--maroon);}

/* ---------- Mobile filter drawer ---------- */
.mobile-filter-drawer{
  position:fixed; left:0; right:0; bottom:-100%; background:#fff; z-index:120; border-radius:20px 20px 0 0;
  max-height:85vh; display:flex; flex-direction:column; transition:bottom .3s ease; box-shadow:0 -10px 30px rgba(0,0,0,.2);
}
.mobile-filter-drawer.open{bottom:0;}
.mf-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line);}
.mf-head h3{margin:0;}
.mf-head button{background:none; border:none; font-size:26px; line-height:1; color:var(--muted);}
.mf-body{padding:16px 20px; overflow-y:auto; flex:1;}
.mf-foot{display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line);}
.mf-foot .btn-primary, .mf-foot .btn-outline{flex:1; text-align:center;}
.mf-overlay{display:none; position:fixed; inset:0; background:rgba(30,15,10,.45); z-index:115;}
.mf-overlay.open{display:block;}

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{background:var(--maroon-dark); color:#f0e2c8; margin-top:60px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:36px;
  padding:56px 20px 40px;
}
.footer-col h4{
  color:#fff; font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; margin:0 0 16px;
}
.footer-col p{font-size:13.5px; line-height:1.7; color:#e0cdb0; margin:0 0 16px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col ul a{font-size:13.5px; color:#e0cdb0; transition:.2s;}
.footer-col ul a:hover{color:var(--turmeric);}

.footer-brand{margin-bottom:14px;}
.footer-brand .brand-text{color:#fff;}
.footer-brand .brand-text em{color:var(--turmeric);}
.footer-brand .brand-mark{background:linear-gradient(135deg,var(--turmeric),var(--maroon));}

.footer-col .btn-outline{border-color:var(--turmeric); color:var(--turmeric);}
.footer-col .btn-outline:hover{background:var(--turmeric); color:var(--maroon-dark);}

.footer-bottom{border-top:1px solid rgba(240,226,200,.15); padding:18px 0;}
.footer-bottom .container{
  display:flex; justify-content:center; align-items:center;
  font-size:12.5px; color:#c9b491;
}

@media (max-width: 1100px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width: 900px){
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .mobile-search{display:block;}
  .plp-layout{grid-template-columns:1fr;}
  .plp-filters{display:none;}
  .filter-toggle-btn{display:inline-flex;}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .topbar-inner{font-size:11px; flex-direction:column; gap:2px; text-align:center; padding:6px 0;}
  .plp-heading h1{font-size:24px;}
  .results-toolbar{flex-wrap:wrap;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px; padding:44px 20px 30px;}
}

@media (max-width: 480px){
  .product-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .pc-body{padding:10px 12px 12px;}
  .pc-title{font-size:13.5px;}
  .pc-summary{display:none;}
  .container{padding:0 14px;}
  .footer-grid{grid-template-columns:1fr; gap:28px; padding:36px 20px 24px;}
}