/* ROOT VARIABLES */
    :root {
      --primary: #0c4833;
      --secondary: #f6ffec;
      --accent: #0c4833;
      --background: #f6ffec;
      --text: #0c4833;
      --font-title: "League Spartan", "Playfair Display", Arial, sans-serif;
      --font-main: "Public Sans", "Inter", sans-serif;
    }
    html, body {
      overflow-x: hidden; /* horizontal scroll aur gap hat jayega */
    }
    /* GLOBAL RESET */
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font-family: var(--font-main);
      background: var(--background);
      color: var(--text);
      line-height: 1.7;
      overflow-x: hidden;
    }
    /* Products grid */
    :root {
      --pista: #f6ffec;
      --dark-green: #0c4833;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Public Sans", sans-serif;
      background-color: var(--pista);
      color: var(--dark-green);
    }
    .product-sidebar a,
#mobileFilterList a {
  color: #0c4833;
  text-decoration: none;
  font-weight: 900;
  font-size: 17.6px;
  font-family: var(--font-title) !important;
}
.product-sidebar li:hover a,
.product-sidebar li.active a,
#mobileFilterList li:hover a,
#mobileFilterList li.active a {
  color: #ffffff !important;
}


    .hero {
      height: 45vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero h1 {
      font-family: "League Spartan", sans-serif;
      font-size: 5rem;
      color: var(--dark-green);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2.5rem;
      padding: 4rem;
      background-color: var(--pista);
    }

    .product-card {
      background-color: white;
      border: 2px solid var(--dark-green);
      border-radius: 12px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      cursor: pointer;
    }

    .product-card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .product-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    }

    .product-card h2 {
      font-family: "League Spartan", sans-serif;
      font-size: 1.4rem;
      padding: 0.5rem;
      color: var(--dark-green);
      text-transform: capitalize;
    }

    .product-link {
      text-decoration: none;
      color: inherit;
    }

    @media (max-width: 600px) {
      .hero h1 {
        font-size: 2.5rem;
        padding: 0.5rem 1rem;
      }
      .product-card img {
        height: 100%;
      }
    }

    /* Hero height is 45vh */
    .product-page-layout {
      display: flex;
      align-items: flex-start;
    }

    .product-sidebar {
      width: 320px;
      min-height: calc(100vh - 45vh); /* full height minus hero */
      background-color: white;
      color: var(--dark-green);
      padding: 2rem 1.5rem;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 1.05rem;
      /* border-right: 2px solid var(--dark-green); */
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .product-sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    @media (max-width: 1024px) {
      .product-sidebar {
        visibility: hidden;
        pointer-events: none;
      }

      .product-sidebar.active {
        visibility: visible;
        pointer-events: auto;
      }
    }

    .product-sidebar li {
      padding: 1rem 1.2rem;
      border-left: 4px solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.1rem;
      color: var(--dark-green);
      border-radius: 6px;
    }

    .product-sidebar li:hover {
      background-color: var(--dark-green);
      color: #fff;
      border-left: 4px solid #fff;
    }

    .product-sidebar li.active {
      background-color: var(--dark-green);
      color: #fff;
      border-left: 4px solid #fff;
    }

    /* Responsive adjustment */
    @media (max-width: 1024px) {
      .product-sidebar {
        display: none;
        position: fixed;
        top: 100px; /* below navbar */
        left: 0;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - 100px); /* adjust for navbar height */
        background-color: var(--pista);
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        transform: translateX(-100%);
      }

      .product-sidebar.active {
        display: block;
        transform: translateX(0%);
      }
      /* Mobile Sidebar (hidden by default) */
      .product-sidebar {
        width: 320px;
        min-height: calc(100vh - 45vh);
        background-color: var(--pista);
        color: var(--dark-green);
        padding: 2rem 1.5rem;
        font-family: var(--font-title);
        font-weight: 700;
        font-size: 1.05rem;
        border-right: 2px solid var(--dark-green);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, visibility 0.3s ease;
      }

      /* Always hide sidebar on mobile by default */
      @media (max-width: 1024px) {
        .product-sidebar {
          display: none;
          position: fixed;
          top: 100px;
          left: 0;
          width: 80%;
          max-width: 300px;
          height: calc(100vh - 100px);
          background-color: var(--pista);
          z-index: 1000;
          overflow-y: auto;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
          transform: translateX(-100%);
        }

        .product-sidebar.active {
          display: block;
          transform: translateX(0%);
        }
      }

      /* Hide sidebar on large screens when not needed */
      @media (min-width: 1025px) {
        .product-sidebar.active {
          display: block;
          position: relative;
          transform: none;
        }
      }

      /* ------------------ Drawer Styling Fixes ------------------ */

      /* Hide drawer globally by default */
      .mobile-filter-drawer {
        display: none;
      }

      /* Show only on small screens */
      @media (max-width: 1024px) {
        .mobile-filter-drawer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: var(--dark-green);
          z-index: 1001;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          display: block;
        }

        .drawer-toggle {
          width: 100%;
          padding: 1rem;
          font-size: 1.1rem;
          font-family: var(--font-title);
          background: var(--dark-green);
          color: #fff;
          border: none;
          cursor: pointer;
        }

        .drawer-content {
          max-height: 0;
          overflow: hidden;
          background: var(--pista);
          transition: max-height 0.3s ease;
        }

        .drawer-content ul {
          list-style: none;
          margin: 0;
          padding: 1rem;
        }

        .drawer-content li {
          padding: 0.8rem 1rem;
          border-bottom: 1px solid #ccc;
          font-family: var(--font-main);
          font-size: 1rem;
          color: var(--dark-green);
          cursor: pointer;
        }

        .drawer-content li:hover {
          background: var(--dark-green);
          color: #fff;
        }
      }

      /* Hide on larger screens */
      @media (min-width: 1025px) {
        .mobile-filter-drawer {
          display: none !important;
        }
      }

      .product-sidebar {
        position: fixed;
        bottom: 56px; /* Height of drawer */
        left: 0;
        width: 100%;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
        background-color: var(--pista);
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        visibility: hidden;
        z-index: 1100;
      }

      .product-sidebar.active {
        transform: translateY(0%);
        visibility: visible;
      }
    }

    .product-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2.5rem;
      padding: 3rem;
      background-color: var(--pista);
      margin: 0rem;
    }

    @media (max-width: 1024px) {
      .product-page-layout {
        flex-direction: column;
      }

      .product-sidebar {
        width: 100%;
      }
    }
    @media (min-width: 1025px) {
      .mobile-filter-drawer {
        display: none !important;
      }

      .product-sidebar {
        position: relative !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
      }

      .drawer-toggle,
      .drawer-content {
        display: none !important;
      }
    }
        #product-sidebar-list li,
#mobileFilterList li {
  cursor: pointer;
}

/* Yeh anchor ko full width bana dega, taki pura list item pe click possible ho */
#product-sidebar-list li a,
#mobileFilterList li a {
  display: block;
  width: 100%;
  padding: 14px 12px; /* Touch ke liye bada clickable area */
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
   white-space: nowrap; 
}