:root {
  --brand: #2874f0;
  --muted: #6b7280;
  --card-bg: #fff;
  --radius: 6px;
  --header-height: 52px; /* Define header height for fixed positioning calculations */
}

/* RESET */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
  background: #f1f3f6;
  color: #111;
}

/* HEADER */
.es-header {
  display: flex;
  align-items: center;
  padding: 10px 18px; 
  background: var(--brand);
  color: white;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
}
.es-logo { font-size: 22px; font-weight: 800; letter-spacing: 0.6px; }
.es-center { flex: 1; }
.es-center input {
  width: 70%;
  max-width: 720px;
  padding: 8px 12px;
  border-radius: 3px;
  border: 0;
  font-size: 14px;
}
.es-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.icon-btn {
  background: transparent;
  border: 0;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* LAYOUT */
.es-main {
  display: flex;
  padding: 18px;
  gap: 18px;
}
.es-sidebar { 
  width: 250px; 
  flex-shrink: 0; 
  transition: transform 0.3s ease-out; /* Enable smooth slide transition */
}
.es-content { flex: 1; }

/* SIDEBAR BLOCKS */
.filter-block {
  background: var(--card-bg);
  padding: 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  border: 1px solid #e6e8ee;
}
.filter-block h4 { margin: 0 0 8px 0; }
.filter-block ul { list-style: none; padding: 0; margin: 0; }
.filter-block li {
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.filter-block li:hover { background: #eef6ff; }
.filter-block li.active {
  background: #eef6ff;
  font-weight: 700;
}
.filter-row { 
  margin-top: 8px; 
  display: flex; 
  flex-direction: column; 
  gap: 4px;
}
.filter-row label {
  width: 100%;
}
.location-tag {
  font-size: 12px;
  color: #007bff;
  margin-top: 4px;
}

/* TOOLBAR */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.active-cat { font-weight: 700; }
#sortSelect {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
#mobileFilterBtn {
    display: none; /* Hide on desktop */
}

/* PRODUCT GRID (container for all categories) */
#productGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* CATEGORY BLOCK */
.category-block {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 300px;
  min-width: 280px; 
}

/* CATEGORY PRODUCTS GRID */
.category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

/* PRODUCT CARD */
.product-card {
  background: var(--card-bg);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid #e6e8ee;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.12s;
}
.product-card:hover { box-shadow: 0 6px 18px rgba(43, 52, 69, 0.08); }
.product-img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
.title { font-size: 14px; font-weight: 600; color: #111; min-height: 36px; }
.price-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.price { color: #388e3c; font-weight: 700; }
.mrp { text-decoration: line-through; color: var(--muted); font-size: 13px; }
.offer { background: #fce8d6; color: #b65b00; padding: 3px 6px; border-radius: 3px; font-size: 12px; }

/* BADGE */
.badge { display: inline-block; background: #ffe8e8; color: #b83232; padding: 4px 8px; border-radius: 3px; font-size: 12px; margin-top: 8px; }

/* MODAL */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 120; }
.modal.hidden { display: none; }
.modal-box { width: 880px; background: white; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-body { display: flex; gap: 16px; }
.modal-body img { width: 420px; height: 320px; object-fit: cover; border-radius: 6px; }
.modal-info { flex: 1; }
.close { background: transparent; border: 0; font-size: 20px; cursor: pointer; float: right; }

/* CART PANEL */
.cart-panel { position: fixed; right: 18px; top: 80px; width: 360px; background: white; border-radius: 8px; border: 1px solid #e6e8ee; box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 120; padding: 12px; }
.cart-panel.hidden { display: none; }
.cart-header { display: flex; justify-content: space-between; align-items: center; }
.cart-items { max-height: 420px; overflow: auto; margin-top: 8px; }
.cart-item { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid #f0f0f0; }
.cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.cart-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* BUTTONS */
.btn { padding: 8px 10px; border-radius: var(--radius); border: 1px solid #d1d5db; background: white; cursor: pointer; }
.btn.primary { background: var(--brand); color: white; border: 0; }

/* UTILITIES */
.muted { color: var(--muted); font-size: 13px; }
.empty { padding: 20px; text-align: center; color: var(--muted); }


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

/* --- HEADER Adjustments (Below 900px) --- */
@media (max-width: 900px) {
  .es-header {
    flex-wrap: wrap; 
    height: auto;
    padding-bottom: 10px;
    align-items: flex-start;
  }
  .es-left { order: 1; }
  .es-right { order: 2; margin-left: auto; }
  .es-center { 
    flex: 1 1 100%; 
    order: 3; 
    width: 100%; 
    margin-top: 8px; 
  }
  .es-center input {
    width: 100%; 
    max-width: none;
  }
  #mobileFilterBtn {
    display: block !important; 
    font-size: 14px;
    z-index: 60;
  }
  .toolbar {
    padding: 8px 0;
    align-items: center;
  }
}

/* --- CORE LAYOUT & SIDEBAR FIX (Below 900px) --- */
@media (max-width: 900px) {
  .es-main { flex-direction: column; padding: 12px; }
  .es-content { order: 1; }
  
  /* CRITICAL SIDEBAR FIX: Fixed position for overlay + Transform for slide animation */
  .es-sidebar { 
    width: 80%; 
    max-width: 300px;
    position: fixed; 
    top: var(--header-height); 
    left: 0;
    height: calc(100vh - var(--header-height)); 
    overflow-y: auto; 
    background: var(--card-bg); 
    padding: 14px;
    z-index: 100; 
    
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.3s ease-out;
    display: block; /* Ensure transform works correctly */
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
  }

  .es-sidebar.visible {
    transform: translateX(0); /* Slide into view */
  }
  
  /* NEW: Backdrop created using body class (must be implemented in JS) */
  body.sidebar-open::after {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 90; 
      pointer-events: auto; /* Allows the backdrop to intercept clicks */
  }

  /* MODAL Adjustments */
  .modal-box { 
    width: 95%; 
    max-height: 90vh; 
    overflow-y: auto; 
    padding: 12px; 
  }
  .modal-body { flex-direction: column; }
  .modal-body img { width: 100%; height: 260px; }

  /* CART PANEL Adjustments */
  .cart-panel {
    width: 90%; 
    right: 5%; 
    left: 5%;
    top: calc(var(--header-height) + 10px); 
    max-height: 80vh;
  }
}

/* --- PRODUCT GRID & CARD Adjustments (Below 600px) --- */
@media (max-width: 600px) {
  .category-products { 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 10px;
  }
  .product-card {
    padding: 8px; 
  }
  .product-img {
    height: 120px; 
  }
  .title { 
    font-size: 13px; 
    min-height: 32px;
  }
  .price {
    font-size: 15px;
  }
}

/* --- Smallest Mobile Screens (Below 500px) --- */
@media (max-width: 500px) {
  /* Cart Panel pinned to bottom for better mobile reach */
  .cart-panel {
    width: 95%; 
    right: 2.5%; 
    left: 2.5%;
    top: auto; 
    bottom: 12px; 
  }
}


/* Hide mobile header on desktop */
.mobile-header {
  display: none;
}

/* Desktop header always visible on large screens */
.desktop-header {
  display: flex;
}

/* Media query for mobile screens */
@media screen and (max-width: 768px) {
  .desktop-header {
    display: none;  /* hide desktop header on mobile */
  }
  .mobile-header {
    display: flex;  /* show mobile header */
  }
}

/* Mobile header flex layout */
.mobile-header {
  display: none; /* hidden by default, visible via media query */
  width: 100%;
  padding: 8px 12px;
  background: #2874f0;/* optional */
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;  /* space between logo and search */
  width: 100%;
}

.mobile-header .es-logo {
  flex-shrink: 0;
}

.mobile-header input {
  flex-grow: 1;          /* search input takes remaining space */
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Show mobile header on small screens */
@media screen and (max-width: 768px) {
  .desktop-header {
    display: none;
  }
  .mobile-header {
    display: flex;
  }
}