/* ===== FIX VEGETABLE PAGE POSITION ===== */
body[data-page="vegetable"] 

/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arvo', serif;
  background: #eae6df;
  color: #222;
  line-height: 1.5;
}
.wrapper {
/*  width: 1400px;  */

  max-width: 95%;
  margin: auto;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* ================= HEADER ================= */
#header {
  background: #ff6a6a;
  padding-bottom: 20px;
}
#logo {
  float: left;
  padding: 20px 0;
}
#logo img {
  height: 50px;
}
#nav {
  float: right;
  margin-top: 35px;
  list-style: none;
}
#nav li {
  float: left;
  margin-left: 25px;
  position: relative;
}
#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  display: block;
  padding: 8px 0;
}
#nav li.has-dropdown > a::after {
  content: " ▾";
}
#nav li.has-sub > a::after {
  content: " ▸";
}
.dropdown,
.sub-dropdown {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 220px;
  padding: 10px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  z-index: 999;
}
.has-dropdown:hover > .dropdown,
.has-sub:hover > .sub-dropdown {
  display: block;
}
.dropdown li,
.sub-dropdown li {
  padding: 6px 18px;
}
.dropdown li a,
.sub-dropdown li a {
  color: #333 !important;
  font-weight: normal;
  font-size: 14px;
}
.dropdown li:hover,
.sub-dropdown li:hover {
  background: #f4f1ec;
}
.basket-icon {
  position: relative;
}
.basket-img {
  width: 22px;
  vertical-align: middle;
}
#basketCount {
  background: #000;
  color: #fff;
  padding: 3px 7px;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 5px;
}
.buy-now {
  margin-left: 8px;
}



#slider-holder{
  display none;
  margin-top:25px;
  padding:12px;
  background:#ffffff;
  border-radius:10px;
  box-shadow:
    0 15px 35px rgba(0,0,0,0.15),
    0 5px 15px rgba(0,0,0,0.08);
}
.slider-frame iframe{
  width:100%;
  height:500px;
  border:0;
  display:block;
  border-radius:8px;
}

/* ================= STAGE 4 (ADD THIS) ================= */

/* ===== PAGE BANNER (HEADER MATCH COLOR) ===== */
.page-banner{
  background:#ff6666; /* SAME AS HEADER */
  padding:60px 0;
  position:relative;
}

.main-overlap{
  position: relative;
}

.main-overlap-inner{
  position: relative;
  z-index: 2;
}

#main, #main-inner{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* ================= MAIN ================= */
#main-inner {
 /*    max-width: 1600px;   */

  margin: 40px auto 60px;
  background: #fff;
  padding: 40px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
.section-title {
  text-align: center;
  margin: -60px 0 30px;
}

/* HOT PRODUCTS */
.hot-products-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.hot-left {
  flex: 1 1 300px;
}
.hot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
.product-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
}
.product-card img {
  width: 100%;
  height: 300px;
 object-fit: contain;
background: #fff;
  border-radius: 10px;
  cursor: pointer;
}
.product-card h3 {
  text-align: center;
  margin: 6px 0;

  font-size: 13px;
  font-weight: 500;   /* soft medium instead of bold */
  color: #333;
  letter-spacing: 0.3px;
}.product-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
}
.product-controls select {
  width: 80px;
  padding: 4px;
  font-size: 14px;
}
.price {
  font-size: 16px;
  font-weight: 600;
}
.qty-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.qty-box button {
  width: 28px;
  height: 28px;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
}
.qty-box input {
  width: 35px;
  text-align: center;
  border: 1px solid #ccc;
}
.add-btn {
  width: 100%;
  padding: 8px;
  background: #2a8f2a;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 6px;
  transition: .3s;
}
.add-btn:hover {
  background: #237d27;
}
.add-btn:disabled {
  background: #aaa;
  cursor: not-allowed;
}

/* ================= CART DRAWER ================= */
#cartOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 9998;
}

#cartOverlay.active {
  display: block;
}

#cartDrawer {
  position: fixed;
  top: 0;
  right: -400px;   /* hidden position */
  width: 350px;
  height: 100vh;
  background: #fff;
  box-shadow: -3px 0 10px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 9999;
  overflow-y: auto;
}

#cartDrawer.open {
  right: 0;   /* slide in */
}.cart-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.cart-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  padding: 10px 15px;
  align-items: center;
  border-bottom: 1px solid #eee;
}
/* Cart drawer footer */
.cart-footer {
  padding: 10px;
  border-top: 1px solid #ccc;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-subtotal {
  font-weight: bold;
  margin-bottom: 8px;
}

/* Buttons container */
.cart-buttons {
  display: flex;
  gap: 10px;
}

/* Delete button */
.delete-btn {
  background-color: #e74c3c; /* red */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.delete-btn:hover {
  background-color: #c0392b;
}

/* Checkout button */
.checkout-btn {
  background-color: #4CAF50; /* green */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.checkout-btn:hover {
  background-color: #45a049;
}
.hot-products-wrapper {
 margin-top: -70px; 
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* responsive on small screens */
}
.hot-left-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1; /* takes remaining space */
}
.hot-ad-vertical {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;

  margin-top: 280px;  /* 👈 push it down to align with product cards */
}
.side-info-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.10);
  text-align: center;
}

.side-info-box h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.side-info-box p {
  font-size: 13px;
  color: #555;
}

.side-image-box,
.side-image-box2 {
  width: 100%;
}

.side-image-box img,
.side-image-box2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
/* ================= REELS SECTION ================= */
.reels-section {
  margin-top: 70px;
  text-align: center;
}
.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  justify-items: center;
}

This will:.reel-card {
  display: flex;
  justify-content: center;
}

.reel-card video {
  width: 100%;
  max-width: 220px;     /* limit size */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
}.reel-card:hover {
  transform: translateY(-6px);
}
.reel-card video {
  width: 100%;
  aspect-ratio: 9/16; /* Proper YouTube ratio */
  object-fit: cover;
  display: block;
}

/* Responsive Reels */
@media (max-width: 1000px) {
  .reels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .reels-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= PRODUCT INFO BANNER ================= */

/* ===== PAGE BANNER (MASTER FIX) ===== */
.page-banner{
  background:#ff6666; /* SAME AS HEADER */
  padding:60px 0;
  position:relative;
}
/* ===== CLEAN WHITE FLOATING SECTION ===== */

.product-info-banner{
  background: transparent;
  padding: 0;              /* remove extra space */
  margin: 0;               /* stop pushing layout */
margin-top: -60px;   /* 👈 adjust this value */
  position: relative;
}

.product-banner-text{
  max-width:1500px;
  margin: -40px auto 40px;   /* 👈 THIS moves it up */
  background:#ffffff;
  padding:60px 50px;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,0.12);
  text-align:center;
  position: relative;
  z-index: 2;
}

/* soft lift illusion under box */
.product-info-banner::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: -18px;
  height: 30px;
  background: rgba(0, 0, 0, 0.25);
  filter: blur(22px);
  z-index: -1;
  border-radius: 50%;
}
.product-banner-text h3 {
  font-size: 20px;     /* smaller */
  font-weight: 500;    /* not bold */
  margin-bottom: 10px;
}.product-info-banner p {
  font-size: 14px;
  color: #555;
  max-width: 760px;
  margin: 0 auto 30px;
}
.product-banner-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;   /* reduced from 20px to 10px */
}
.product-banner-icons a {
  text-align: center;
  flex: 1 1 120px;   /* 🔥 KEY FIX */
}

.product-banner-icons img {
 display: block;
  margin: 0 auto 5px;
  
}

.best-selling-float {
  position: absolute;

  top: 150px;      /* slightly above white card */
  left: -90px;     /* half outside effect */

  width: 240px;    /* adjust size */
  height: auto;

  z-index: 200;    /* above white card */
  border-radius: 14px;

  
}

.floating-crosy {
  position: absolute;
  right: -158px;        /* push slightly outside right */
  top: -10px;           /* adjust vertical position */
  width: 140px;        /* control size */
  height: auto;
  z-index: 30;         /* bring above everything */
  pointer-events: none; /* prevents blocking clicks */
}

.floating-crosy2 {
  position: absolute;
  right: 1135px;   /* push outside right edge */
  top: -10px;      /* place below first image */
  width: 140px;    /* adjust size */
  height: auto;
  z-index: 30;      /* slightly below main elements */
  pointer-events: none;
}


/* ================= MODERN POPUP ================= */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.popup-container {
  background: #fff;
  width: 1000px;
  max-width: 95%;
  border-radius: 12px;
  display: flex;
  gap: 40px;
  padding: 40px;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* LEFT SIDE */

.popup-left {
  flex: 1;
  text-align: center;
}

.popup-main-image {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  margin-bottom: 15px;
}

.popup-thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.popup-thumbnails img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid transparent;
}

.popup-thumbnails img.active {
  border: 2px solid #0f2b4c;
}

/* RIGHT SIDE */

.popup-right {
  flex: 1;
}

.popup-right h2 {
  margin-bottom: 15px;
}

.popup-price-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.popup-price {
  font-size: 22px;
  font-weight: bold;
}

.popup-old-price {
  text-decoration: line-through;
  color: #888;
}

.popup-offer {
  background: red;
  color: #fff;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 20px;
}

.popup-weight,
.popup-qty {
  margin-bottom: 20px;
}

.popup-qty {
  display: flex;
  gap: 10px;
  align-items: center;
}

.popup-qty button {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.popup-qty input {
  width: 60px;
  text-align: center;
}

.popup-add-btn {
  width: 100%;
  padding: 12px;
  background: #0f2b4c;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.popup-info {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}

.popup-success {
  margin-top: 10px;
  color: green;
}



/* ================= BANNER BOX / MAIN SECTION ================= */
.home-banner {
  background: #ff6666; /* same as header */
  padding: 60px 0;
  position: relative;
  text-align: center;
  color: #fff;
}
.home-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* OVERLAP MAIN CONTENT (like about-inner) */
#home-main {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: -70px auto 60px; /* overlap effect */
  background: #ffffff;
  padding: 40px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* HOME INFO / FEATURE BOXES */
.home-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 20px;
}
.home-info-box {
  flex: 1 1 200px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}
.home-info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}
.home-info-box img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

/* FOOTER (Scoped for Home) */
.home-footer {
  background: #222;
  color: #fff;
  padding: 40px 0;
  font-size: 14px;
}
.home-footer a {
  color: #fff;
  text-decoration: none;
}
.home-footer a:hover {
  text-decoration: underline;
}
.home-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
  justify-content: space-between;
}
.home-footer .footer-col {
  flex: 1 1 200px;
}
.home-footer .footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  opacity: 0.7;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .home-info-wrapper {
    flex-direction: column;
  }
  .home-footer .footer-top {
    flex-direction: column;
    gap: 20px;
  }
  /* ===== FORCE 4 PRODUCTS PER ROW ===== */
.hot-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
}
  .hot-products-wrapper {
    flex-direction: column;
  }
  .hot-left {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .hot-grid {
    grid-template-columns: 1fr;
  }
}
..delete-btn {
  background-color: #e74c3c; /* red */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.delete-btn:hover {
  background-color: #c0392b;
}
/* ================= MODERN POPUP ================= */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.popup-container {
  background: #fff;
  width: 900px;
  max-width: 95%;
  border-radius: 12px;
  display: flex;
  gap: 40px;
  padding: 40px;
  position: relative;
  animation: popupFade 0.3s ease;
}

@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.popup-left {
  flex: 1;
  text-align: center;
}

.popup-left img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.popup-right {
  flex: 1;
}

.popup-right h2 {
  margin-bottom: 15px;
  font-size: 26px;
}

.popup-price-row {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.popup-weight {
  margin-bottom: 20px;
}

.popup-weight select {
  padding: 6px 10px;
}

.popup-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.popup-qty button {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.popup-qty input {
  width: 60px;
  text-align: center;
}

.popup-add-btn {
  width: 100%;
  padding: 12px;
  background: #0f2b4c;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.popup-add-btn:hover {
  opacity: 0.9;
}

.popup-success {
  margin-top: 10px;
  color: green;
  font-size: 14px;
}
.popup-right > * {
  margin-bottom: 20px;
}

.popup-right p {
  margin-bottom: 12px;
}
.out-of-stock-flag {
  position: absolute;
  top: 5px;
  left: 5px;
  background: red;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  font-size: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  z-index: 10;
}
.product-card { position: relative; }

/* Floating out-of-stock badge */
.product-card {
  position: relative; /* needed for absolute positioning of badge */
}

.out-of-stock-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px; /* adjust size as needed */
  height: 50px;
  z-index: 10;
  pointer-events: none; /* ensures badge doesn't block clicks on the product image */
}
.customer-popup-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.customer-popup-box{
  background:#fff;
  padding:30px;
  border-radius:10px;
  width:350px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.customer-popup-box h3{
  margin-bottom:10px;
}

.customer-popup-box input{
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:5px;
}

.popup-buttons{
  display:flex;
  justify-content:space-between;
  margin-top:15px;
}

.popup-buttons button{
  padding:10px 15px;
  border:none;
  border-radius:5px;
  cursor:pointer;
  background:#28a745;
  color:#fff;
}

.skip-btn{
  background:#777;
}
.product-card button {
  background-color: #28a745 !important;
  color: #fff !important;
  border: none;
}
.product-card img {
  display: block;
  margin: auto;
}
/* ================= OTHER PAGES (FRUITS / VEG / MILLETS) ================= */


/* Remove banner overlap issues */
body[data-page="fruits"] .product-info-banner{
  margin-top: 0;
}

body[data-page="fruits"] .product-banner-text{
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);

  width: 1100px;   /* 👈 IMPORTANT */
  max-width: 95%;  /* responsive fallback */

  padding: 25px 30px;
}

/* Text tuning */


body[data-page="fruits"] 
.product-banner-text h3{
  font-size: 18px;
  margin-bottom: 8px;
}


/* ensure banner inside */
.product-info-banner{
  margin-top:0 !important;
}
body[data-page="fruits"] .product-banner-text p{
  font-size: 13px;
  margin-bottom: 10px;
}

/* REMOVE RIGHT SIDE COMPLETELY */
body[data-page="fruits"] .hot-ad-vertical{
  display: none;
}

/* FULL WIDTH PRODUCTS */
body[data-page="fruits"] .hot-products-wrapper{
  display: block;
}

body[data-page="fruits"] .hot-left-wrapper{
  width: 100%;
}

/* Push content below header */
body[data-page="fruits"] #main-inner{
  position: relative;
  margin-top: 80px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* FIX GRID WIDTH */
body[data-page="fruits"] .hot-grid{
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

/* FIX GRID WIDTH */
body[data-page="vegetable"] .hot-grid{
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

/* ================= FLOATING IMAGES - FRUITS ONLY ================= */

body[data-page="fruits"] .floating-crosy {
  position: absolute;
  right: -53px;          /* cleaned value */
  top: -50px;
  width: 140px;
  height: auto;
  z-index: 30;
  pointer-events: none;
}

body[data-page="fruits"] .floating-crosy2 {
  position: absolute;
  right: 1235px;
  top: -50px;
  width: 140px;
  height: auto;
  z-index: 30;
  pointer-events: none;
}

/* FIX: push products down in fruits page */
body[data-page="fruits"] .hot-products-wrapper{
  margin-top: 220px;
}


pen css/home.css
👉 Scroll to bottom of the file
👉 Add this:

/* ===== OVERLAP FIX (LIKE ABOUT PAGE) ===== */
.main-overlap-inner{
  max-width:1400px;
  margin:-70px auto 60px;
  background:#fff;
  padding:40px;
  box-shadow:0 12px 35px rgba(0,0,0,0.18);
}
/* ===== FIX INFO BANNER POSITION ===== */
.product-info-banner{
  margin-top: 0;
}
/* ===== FIX VEGETABLE OVERLAP (MOVE DOWN) ===== */
body[data-page="vegetable"] .main-overlap-inner{
  margin-top: -40px;
}