body {
     font-family: 'Poppins', sans-serif;
     margin:0;
     padding:0;
     color:#222;
     background:#fff;
}
/* Main container */
 .container {
    display: flex;
    gap: 30px;
    padding: 20px;
    max-width: 1286px;
    margin: 0 auto;
}

/* Sidebar */
 .sidebar {
     width: 250px;
}
 .sidebar .search-box {
     display:flex;
     gap:5px;
     margin-bottom:20px;
}
 .sidebar .search-box input {
     flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 30px;
    height: 57px;
}
 .sidebar .search-box button {
     background:#e21b1b;
     border:none;
     padding:10px;
     border-radius:5px;
     color:#fff;
     cursor:pointer;
}
 .widget {
     margin-bottom:30px;
}
 .widget h3 {
     font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .categories {
     list-style:none;
     padding:0;
}
 .categories li {
     padding:8px 0;
     cursor:pointer;
}
 .categories li.active {
     color:#e21b1b;
     font-weight:bold;
}
 .categories li.disabled {
     color:#aaa;
}
 .filter-btn {
     background:#000;
     color:#fff;
     padding:10px;
     width:100%;
     border:none;
     border-radius:5px;
     margin-top:10px;
     cursor:pointer;
}
 .price-values {
     margin-top:8px;
     font-size:14px;
}
/* Products Section */
 .products-section {
     flex:1;
}
 .products-header {
     display:flex;
     justify-content:space-between;
     align-items:center;
}
 .products-header h2 {
     font-size: 33px;
    font-weight: bold;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .sort-box select {
         padding: 15px;
    border: 1px solid #ddd;
    border-radius: 21px;
    background-color: #000 !important;
    color: #fff !important;
}
 .result-count {
     margin:15px 0;
     color:#555;
}
 .products-grid {
     display:grid;
     grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
     gap:20px;
}
 .product-card {
     border-radius: 8px;
    text-align: left;
    transition: all 0.3s;
}

 .product-card img {
     max-width:100%;
     border-radius:8px;
}
 .product-card h3 {
         font-size: 18px;
    margin: 12px 0 6px;
    font-weight: 600;
    color: #222;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .price {
     font-weight:bold;
     color:#000;
     margin-bottom:10px;
}
 .select-btn {
     background:#e21b1b;
     color:#fff;
     padding:10px 15px;
     border:none;
     border-radius:20px;
     cursor:pointer;
     font-size:14px;
     transition:0.3s;
}
 .select-btn:hover {
     background:#b11414;
}
/* Pagination */
 .pagination {
     display:flex;
     justify-content:center;
     gap:10px;
     margin-top:30px;
}
 .pagination a {
     display:inline-block;
     padding:8px 12px;
     border:1px solid #ddd;
     border-radius:5px;
     color:#000;
     text-decoration:none;
}
 .pagination a.active, .pagination a:hover {
     background:#e21b1b;
     color:#fff;
     border-color:#e21b1b;
}
/* Responsive */
 @media (max-width:768px) {
     .container {
         flex-direction:column;
    }
     .sidebar {
         width:100%;
    }
}
/* Single Product Page */
 .single-container {
     display:flex;
     flex-wrap:wrap;
     gap:40px;
     margin-top:20px;
     max-width:1200px;
     margin-left:auto;
     margin-right:auto;
}
 .product-gallery {
     flex:1;
     min-width:300px;
}
 .product-gallery .main-image {
     width:100%;
     border-radius:8px;
     border:1px solid #ddd;
}
 .thumbs {
     display:flex;
     gap:10px;
     margin-top:10px;
     flex-wrap:wrap;
}
 .thumbs img {
     width:70px;
     height:70px;
     object-fit:cover;
     border:2px solid #ddd;
     border-radius:5px;
     cursor:pointer;
     transition:0.3s;
}
 .thumbs img:hover {
     border-color:#e21b1b;
}
 .product-details {
     flex:1;
     min-width:300px;
     max-width:600px;
}
 .product-details h1 {
     font-size:53px;
     line-height: 53px;
     color:#d81b1b;
     margin-bottom:10px;
     font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .product-details .price {
     font-size:22px;
     margin-bottom:15px;
     color:#222;
}
 .product-details .short-description {
     font-size:18px;
     color:#555;
     margin-bottom:20px;
}
 .bulk-offer h4 {
     background:#1a2a6c;
     color:#fff;
     padding:8px;
     border-radius:5px;
     margin-bottom:10px;
     font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .bulk-options {
     display:flex;
     gap:8px;
     flex-wrap:wrap;
     margin-bottom:20px;
}
 .bulk-options button {
     border:1px solid #ccc;
     background:#fff;
     padding:8px 12px;
     border-radius:5px;
     cursor:pointer;
     transition:0.3s;
}
 .bulk-options button:hover {
     border-color:#e21b1b;
     color:#e21b1b;
}
 .buttons {
     display:flex;
     gap:15px;
     margin-bottom:20px;
}
 .add-cart {
     background:#1a2a6c;
     color:#fff;
     padding:12px 20px;
     border:none;
     border-radius:5px;
     cursor:pointer;
     transition:0.3s;
     width: 288px;
    height: 43px;
}
 .buy-now {
     background:#e21b1b;
     color:#fff;
     padding:12px 20px;
     border:none;
     border-radius:5px;
     cursor:pointer;
     transition:0.3s;
     width: 288px;
    height: 43px;
}
 .add-cart:hover {
     background:#142152;
}
 .buy-now:hover {
     background:#b11414;
}
 .specifications h4 {
    font-size: 38px;
    margin-bottom: 10px;
    line-height: 57px;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .specifications ul {
     list-style:disc;
     padding-left:20px;
}
 .specifications li {
     margin-bottom:5px;
     color:#444;
}
/* Related Products */
 .related-products {
     margin:50px auto;
     max-width:1200px;
     padding:0 20px;
}
 .related-products h2 {
     font-size:38px;
     line-height: 57px;
     margin-bottom:20px;
     font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
 .related-products .products-grid {
     display:grid;
     grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
     gap:20px;
}
/* Responsive */
 @media (max-width:768px) {
     .single-container {
         flex-direction:column;
    }
}
/* Products Grid */
.best-seller-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Product Card */
.best-seller-products .product-card {
    background: transparent;
    border-radius: 0px !important;
    border: 0px !important;
    text-align: left !important;
    padding: 0px !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}
.best-seller-products .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Image Box */
.best-seller-products .product-card .image-box {
    
    width: 100%;
    height: 270px;
    display: flex;
    align-items: left !important;
    justify-content: left !important;
    border-radius: 8px;
    overflow: hidden;
}
.best-seller-products .product-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Name */
.best-seller-products .product-card h3 {
    font-size: 18px;
    margin: 12px 0 6px;
    font-weight: 600;
    color: #222;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}

.best-seller-products .product-card h3:hover {
    
    color: #ff0000;
    
}
/* Price */
.best-seller-products .product-card .price {
   font-size: 16px;
    font-weight: 800 !important;
    color: #000000;
    margin-bottom: 10px;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}
/* Price hover */
.best-seller-products .product-card .price:hover {
  color: #ff0000;
}

/* View Button */
.best-seller-products .product-card .view-btn {
  text-transform: capitalize;
    font-weight: 400;
    font-size: 15px;
    color: var(--e-global-color-a595f2d);
    padding: 11px 40px;
    background-color: var(--e-global-color-primary);
    border-radius: 22px;
    letter-spacing: -1px;
    line-height: 19px;
     
}
.best-seller-products .product-card .view-btn:hover {
    background: #004ea1;
}

/* Responsive */
@media (max-width: 992px) {
    .best-seller-products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .best-seller-products {
        grid-template-columns: 1fr;
    }
}

/* =========================
   ✦ Sidebar (screenshot look)
   ========================= */

/* Search pill + red floating button */
.search-pill { position: relative; }
.search-pill input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 18px 60px 18px 20px;
  border-radius: 9999px;
  font-size: 14px;
  color: rgba(0,0,0,0.7);
  background: #f2f2f2;
}
.search-pill input::placeholder { color: rgba(0,0,0,0.35); }

.search-pill .search-fab {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  border-radius: 9999px;
  border: 0;
  background: #fe0000;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px rgba(254,0,0,0.35), 0 0 0 6px rgba(254,0,0,0.06);
  cursor: pointer;
}

/* Widget titles with right chevron */
.widget-title,
.widget h3 {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800;
  font-size: 20px;
  margin: 22px 0 12px;
}
.widget-title .chev { font-size: 14px; opacity: .9; }

/* Categories list (supports <li><a>… and <li class="active">… ) */
.categories { list-style: none; padding: 0; margin: 8px 0 0; }
.categories li { margin: 8px 0; }
.categories a,
.categories li { 
  text-decoration: none;
  color: rgba(0,0,0,0.6);
  font-size: 16px; 
  line-height: 1.4;
  transition: color .2s ease, font-weight .2s ease;
}
.categories a:hover,
.categories li:hover { color: #fe0000; }
.categories a.active,
.categories li.active {
  color: #fe0000;
  font-weight: 700;
}

/* Thin divider */
.sidebar-sep { border: 0; height: 1px; background: #e7e7e7; margin: 24px 0; }

/* =========================
   ✦ Dual Range (price)
   ========================= */
.dual-range {
  position: relative;
  height: 34px;
  display: grid; align-items: center;
  margin-top: 8px;
}
.dual-range input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; left: 0; right: 0;
  top: 7px; 
  width: 100%;
  background: none; pointer-events: none; /* thumbs receive events */
  height: 6px;
}
.dual-range .range-track {
  position: absolute; left: 0; right: 0;
  height: 4px; border-radius: 9999px;
  background: linear-gradient(90deg, #fe0000 0%, #fe0000 100%); /* updated via JS */
  z-index: 0;
}

/* Track (base) */
.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: transparent; border-radius: 9999px;
}
.dual-range input[type="range"]::-moz-range-track {
  height: 4px; background: transparent; border-radius: 9999px;
}

/* Thumbs */
#priceMin::-webkit-slider-thumb, #priceMax::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0; cursor: pointer; pointer-events: auto;
  position: relative; z-index: 2;
}
#priceMin::-webkit-slider-thumb { background: #000; }
#priceMax::-webkit-slider-thumb { background: #fe0000; }

#priceMin::-moz-range-thumb, #priceMax::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  border: 0; cursor: pointer; pointer-events: auto;
}
#priceMin::-moz-range-thumb { background: #000; }
#priceMax::-moz-range-thumb { background: #fe0000; }

/* Values row under slider */
.price-row {
  display: flex; justify-content: space-between;
  margin: 8px 0 14px;
  color: rgba(0,0,0,0.8);
  font-weight: 600;
}

/* Filter button – full pill */
.filter-btn {
  width: 100%;
  border: 0; outline: 0;
  background: #000; color: #fff;
  border-radius: 9999px !important;
  padding: 14px 20px !important;
  font-size: 16px; font-weight: 600;
  cursor: pointer;
}

/* =========================
   ✦ Minor tweaks to match look
   ========================= */
.sidebar { width: 260px; }
.products-header h2 {
  font-size: 33px;
  font-weight: 800;
}
.sort-box select {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 21px;
  background-color: #000 !important;
  color: #fff !important;
}

/* Mobile: let overlay handle submenu layout; keep sidebar clean */
@media (max-width: 767px) {
  .sidebar { width: 100%; }
  .search-pill .search-fab { right: 8px; }
}
/* ===== Export Quality Products (Green Card) ===== */
.hero-green{
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg,#0ccf6b 0%, #00b976 100%);
  color:#fff;
  margin: 24px 0;
}
.hero-green__inner{
  position: relative;
  padding: clamp(22px,3.5vw,48px) clamp(22px,4.5vw,56px);
}

/* layout */
.hero-green__grid{
  display: grid;
  grid-template-columns: 1.2fr 0.85fr;  /* left title / right copy */
  align-items: center;
  gap: clamp(18px,3vw,48px);
}

/* stacked heading */
.hero-green__title{
  margin: 0;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-family: var(--e-global-typography-primary-font-family, system-ui), Sans-serif;
}
.hero-green__title span{
  display:block;
  font-size: clamp(42px, 9vw, 120px);
}

/* cups overlap */
.hero-green__cups{
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 40vw, 560px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.25));
}

/* right text + button */
.hero-green__copy{
  margin: 0 0 18px;
  font-size: clamp(14px,1.2vw,18px);
  line-height: 1.6;
  color: #eafff6;
}
.hero-green__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 26px;
  border-radius: 999px;
  background: #ffffff;
  color: #10b981; /* mint text like screenshot */
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero-green__cta:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.2); }

/* responsive */
@media (max-width: 1100px){
  .hero-green__grid{ grid-template-columns: 1fr; }
  .hero-green__cups{
    position: static;
    transform:none;
    width: clamp(240px, 60vw, 520px);
    margin: 12px auto 0;
    display: block;
  }
}