/* ========== MateSmart — final merged stylesheet (cleaned & consolidated) ========== */

/* ========== THEME TOKENS ========== */
:root{
  --btn-bg: #75c46b;           /* MateSmart green */
  --btn-hover: #5e9d56;
  --btn-contrast: #fff;
  --ms-yellow: #FFD541;
  --ms-green: var(--btn-bg);
  --ms-green-hover: var(--btn-hover);
  --ms-contrast: var(--btn-contrast);

  /* additional variants used by carousel / polish */
  --ms-green-variant: #75c46b;
  --ms-green-variant-hover: #5e9d56;
}

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #F7FFF4;
  color: #1A1A1A;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  max-width: 100%;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ========== LOADING SKELETONS ========== */
.skeleton{
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:loading 1.5s infinite;
  border-radius:8px;
}

.skeleton-card{
  background:#fff;
  border-radius:16px;
  padding:16px 14px;
  border:1px solid #DCE7D8;
  box-shadow:0 6px 16px rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.skeleton-image{ width:100%; height:150px; border-radius:8px; }
.skeleton-text{ height:16px; border-radius:4px; }
.skeleton-text.title{ height:20px; width:80%; }
.skeleton-text.price{ height:18px; width:40%; }
.skeleton-button{ height:40px; border-radius:999px; }

/* ========== LAZY LOAD IMAGES ========== */
img[data-src]{ opacity:0; transition:opacity .3s ease; }
img.lazy-loaded{ opacity:1; }

img.lazy-loading{
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:loading 1.5s infinite;
}

/* ========== OFFERS BANNER (PURPLE – FIXED) ========== */
.offers-carousel{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  padding:12px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.offer-slide{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  animation:slideIn .45s ease;
}

.offer-slide.active{ display:flex; }

.offer-text {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}



.offer-text strong{
  font-weight:700;
}

/* bounce ONLY when explicitly applied */
.offer-text .bounce {
  display: inline-block;
  animation: bounce 2s infinite;
}


#flash-timer{
  font-weight:700;
  background:rgba(255,255,255,.2);
  padding:2px 8px;
  border-radius:4px;
  margin-left:4px;
}

/* animations */
@keyframes slideIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* ========== DELIVERY ETA ========== */
.delivery-eta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:15px auto 10px;
  padding:8px 16px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  border-radius:20px;
  font-size:16px;
  font-weight:600;
  color:#2E7D32;
  width:fit-content;
}

.eta-icon{ font-size:20px; }

/* ========== PROMO CODE SECTION ========== */
.promo-code-section{
  margin-bottom:15px;
  padding:12px;
  background:#f9f9f9;
  border-radius:8px;
  border:2px dashed #DCE7D8;
}

#promo-input{
  width:100%;
  padding:10px;
  border:1px solid #DCE7D8;
  border-radius:6px;
  font-size:14px;
  font-family:"Quicksand",sans-serif;
  margin-bottom:8px;
  text-transform:uppercase;
}

#apply-promo-btn{
  width:100%;
  padding:10px;
  background:#fff;
  color:var(--ms-green);
  border:2px solid var(--ms-green);
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

#apply-promo-btn:hover{
  background:var(--ms-green);
  color:#fff;
}


.promo-message{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  text-align:center;
}

.promo-message.success{ color:#27ae60; }
.promo-message.error{ color:#e74c3c; }

.promo-input-wrap {
  display:flex;
  align-items:center;
  gap:8px;
}
.promo-saved{
  margin: 10px 0 6px;
  padding: 6px 10px;
  background: #f3fff1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #2E7D32;
}

#scan-qr-btn{
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}


#scan-qr-btn img {
  width:24px;
  height:24px;
}

/* Hide QR scan on desktop */
@media (min-width: 769px) {
  #scan-qr-btn {
    display:none;
  }
}


/* ========== STATUS TRACKER ========== */
.status-tracker{
  position:fixed;
  bottom:20px;
  right:20px;
  width:350px;
  max-width:calc(100% - 40px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  padding:20px;
  z-index:9999;
  animation:slideUp .5s ease;
}

@keyframes slideUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

.status-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f0f0f0;
  border:none;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.status-tracker h3{
  margin-bottom:20px;
  color:var(--ms-green);
  font-size:18px;
}


/* ========== BUTTONS ========== */
button{
  background: var(--ms-green);
  color: var(--ms-contrast);
  border: 2px solid var(--ms-green);
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  min-width: 74px;
  text-align: center;
  box-shadow: none;
  transition: background .15s ease, transform .12s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:hover{
  background: var(--ms-green-hover);
  border-color: var(--ms-green-hover);
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(46,125,50,0.25);
}

button:active{
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset;
}

button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(117,196,107,0.25);
}

#cart-modal button:hover{
  transform: none;
  box-shadow: 0 3px 8px rgba(46,125,50,0.2);
}

/* Generic qty/remove buttons base */
.qty-btn,
.product-qty-wrapper .qty-btn {
  padding: 6px 10px;
  min-width: auto;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
}

.remove-btn {
  padding: 6px 10px;
  min-width: auto;
  height: 32px;
  font-size: 14px;
  border-radius: 8px;
}

/* ========== HEADER ========== */
.header{
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(76,175,80,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px 16px;
  gap: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-wrap: wrap;
}

.logo img{ height: 56px; max-width: 100%; }

.header .actions{ display:flex; gap:8px; flex-wrap:wrap; }

.header .actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:48px;
  padding:0 16px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
}

.header .actions button img{ width:22px; height:22px; object-fit:contain; display:block; }

.login-btn, .cart-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 16px; border-radius:12px; font-size:15px; font-weight:700;
}

.login-btn img, .cart-btn img{ width:24px; height:24px; }

.chat-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 22px; border-radius:14px; font-size:16px; font-weight:700; }
.chat-btn img{ width:20px; height:20px; }

.header .actions #cart-count{
  display:inline-block;
  min-width:18px;
  padding:2px 6px;
  border-radius:10px;
  background: var(--ms-contrast);
  color: var(--ms-green);
  font-weight:700;
  font-size:14px;
  margin-left:2px;
}

/* ========== LOCATION ========== */
.location{ display:flex; flex-direction:column; gap:6px; position:relative; }

#delivery-text{ font-size:14px; font-weight:600; color:#1A1A1A; }

.detect-wrapper{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }

#detect-location, #change-location, #use-detected{
  border-radius:6px; font-size:14px; font-weight:500; padding:8px 14px; width:100%; max-width:250px; text-align:center;
}

#detect-location{ display:flex; align-items:center; justify-content:center; gap:6px; }
#detect-location img, #use-detected img{ filter:none; width:16px; height:16px; object-fit:contain; }

.status-text{ display:flex; align-items:center; gap:6px; font-size:13px; color:#2E7D32; margin-top:6px; min-height:20px; }

#user-location{ font-size:13px; color:#000; }
#user-location.not-set{ color:#e74c3c; }

/* ========== SEARCH ========== */
.search-bar{
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:2px solid #DCE7D8;
  border-radius:8px;
  padding:8px 12px;
  width:100%;
  max-width:300px;
  min-width:0;
  font-family:"Quicksand",sans-serif;
}

#search-input{ border:none; outline:none; width:100%; font-size:1rem; }

.custom-placeholder{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#888; font-size:.95rem; pointer-events:none; transition:opacity .2s;
  max-width:calc(100% - 40px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.custom-placeholder strong{ font-weight:700; color:#333; }

/* ========== MODALS ========== */
.modal{
  display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.4); backdrop-filter:blur(3px);
  justify-content:center; align-items:center; opacity:0; transition:opacity .3s ease;
}
.modal.show{ display:flex; opacity:1; }

.modal .modal-content{
  background:#fff; width:400px; max-width:90%; border-radius:12px; padding:20px; position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,0.2); animation:fadeIn .3s ease-in-out; max-height:calc(100vh - 80px); overflow-y:auto;
}
@keyframes fadeIn { from{ transform:translateY(30px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.modal-close-btn, #close-cart, #close-location-modal{
  position:absolute; top:8px; right:10px; width:32px; height:32px; border-radius:50%; border:none;
  background:var(--btn-bg); color:#fff; font-size:18px; font-weight:700; padding:0; min-width:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,0.18);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.modal-close-btn:hover, #close-cart:hover, #close-location-modal:hover{ background:var(--btn-hover); transform:scale(1.04); box-shadow:0 5px 10px rgba(0,0,0,0.22); }
.modal-close-btn:active, #close-cart:active, #close-location-modal:active{ transform:scale(0.96); box-shadow:0 2px 5px rgba(0,0,0,0.25) inset; }

.modal-body{ margin-top:20px; display:flex; flex-direction:column; gap:10px; align-items:center; padding:10px 0; }

#use-detected{
  display:flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 28px; font-size:15px; font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,0.1); width:fit-content; text-align:center;
}
.or-divider{ text-align:center; font-size:14px; color:#555; font-weight:500; margin:8px 0; }
#manual-location{ border:1px solid #DCE7D8; border-radius:6px; padding:10px; outline:none; width:100%; margin-bottom:10px; font-family:"Quicksand",sans-serif; font-size:1rem; }

/* ========== CART MODAL ========== */
#cart-modal{ display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); opacity:0; transition:opacity .3s ease; justify-content:center; align-items:center; }
#cart-modal.show{ display:flex; opacity:1; }

#cart-modal .modal-content{
  position:relative; background:#fff; padding:20px; border-radius:12px; width:350px; margin:5vh auto; box-shadow:0 4px 20px rgba(0,0,0,0.15);
  transform:translateY(-20px); transition:transform .3s ease, opacity .3s ease; max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow:hidden;
}

.cart-summary-top{ display:none !important; }
#cart-modal.show .modal-content{ transform:translateY(0); opacity:1; }

#cart-items{ overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:calc(100vh - 240px); padding-right:6px; display:flex; flex-direction:column; gap:10px; }

/* CART ITEM ALIGNMENT */
.cart-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eee; flex-wrap:nowrap; }
.cart-item img{ width:60px; height:60px; flex-shrink:0; object-fit:contain; border-radius:8px; }

.cart-item-details{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.cart-item-details h4{
  font-size:15px; font-weight:600; color:#222; margin:0 0 4px; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}
.cart-item-details p{ margin:0; font-size:13px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Quantity controls */
.cart-qty{ display:flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; }
.cart-qty span{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:32px; border-radius:8px; background:#f0f0f0; color:#222; font-weight:600; font-size:15px; box-shadow:inset 0 0 2px rgba(0,0,0,0.15); padding:0 6px;
}

/* All cart buttons same size */
.cart-qty .qty-btn, #cart-modal .remove-btn, .cart-item .remove-btn{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; padding:0; border-radius:8px; font-size:18px; line-height:1; font-weight:700; flex-shrink:0; margin:0;
}

.cart-summary{ margin-top:12px; flex:0 0 auto; border-top:1px solid #eee; padding-top:10px; display:flex; flex-direction:column; gap:10px; }
.cart-summary .total-row{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:16px; }

/* Delivery row visibility logic */
.delivery-row{ display:none; }
.cart-summary.has-items .delivery-row{ display:flex; }

.checkout-btn{ width:100%; padding:10px; border-radius:8px; font-size:16px; font-weight:700; }

.cart-cancellation-policy{ margin-top:15px; padding:10px; background:#f9f9f9; border-radius:6px; font-size:12px; color:#555; }
.cart-cancellation-policy b{ display:block; margin-bottom:5px; color:#222; }

.empty-cart{ text-align:center; padding:20px; color:#999; }

/* ========== LOGIN MODAL ========== */
.login-modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(34,34,34,0.4); backdrop-filter:blur(6px); justify-content:center; align-items:center; z-index:2000; }
.login-modal.active{ display:flex; }

.login-content{ background:#fff; width:90%; max-width:400px; border-radius:16px; text-align:center; padding:30px 20px; position:relative; box-shadow:0 4px 20px rgba(0,0,0,0.2); }

.close-login{
  position:absolute; left:15px; top:15px; padding:0; border:none; border-radius:0; background:transparent; color:#222; font-size:22px; font-weight:normal; min-width:0; box-shadow:none; cursor:pointer; text-align:left;
}
.close-login:hover{ background:transparent; color:#000; transform:none; border-color:transparent; }

.login-logo{ width:70px; margin:20px 0; }
.login-content h2{ font-size:1.3rem; color:#222; margin-bottom:5px; font-weight:700; }
.login-content .subtext{ color:#555; margin-bottom:20px; font-size:1rem; }

.phone-input{
  display:flex; align-items:center; justify-content:center; border:2px solid #DCE7D8; border-radius:10px; padding:10px; margin:0 auto 20px; max-width:280px; gap:8px;
}
.phone-input span{ font-weight:600; color:#555; }
.phone-input input{ border:none; outline:none; width:100%; font-size:1rem; }

#continue-btn{ width:280px; padding:12px; border-radius:10px; color:#fff; font-size:1rem; font-weight:600; cursor:not-allowed; background:#ccc; border-color:#ccc; transition: .3s; }
#continue-btn.active{ background:var(--btn-bg); color:var(--btn-contrast); border-color:var(--btn-bg); cursor:pointer; }

.terms{ font-size:.85rem; color:#555; margin-top:20px; }
.terms a{ color:#0aad0a; text-decoration:none; }
/* Hide promo & summary when cart is empty */
#cart-summary-bottom:not(.has-items) .promo-code-section,
#cart-summary-bottom:not(.has-items) .cart-summary {
  display: none;
}

.cart-summary .divider {
  height: 1px;
  background: #e5e5e5;
  margin: 6px 0;
}

/* ========== BANNERS ========== */
.main-banner{
  position:relative; width:100%; min-height:260px; height:400px; background:rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; text-align:center; border-radius:10px; backdrop-filter:blur(5px);
}
.banner-text{ color:#000; text-shadow:1px 1px 3px rgba(0,0,0,0.4); }
.banner-text h1{ font-size:48px; letter-spacing:2px; }
.banner-text h1 span{ display:inline-block; opacity:0; transform:translateY(40px); animation:revealLetter .5s ease forwards; }
.banner-text h1 span:nth-child(1){ animation-delay:0s; color:#75c475; }
.banner-text p{ font-size:18px; margin:10px 0 20px; }
.banner-text button{ padding:10px 20px; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; transition:.3s ease; }

@keyframes revealLetter{ from{ opacity:0; transform:translateY(40px) } to{ opacity:1; transform:translateY(0) } }

/* ========== MINI BANNERS ========== */
.mini-banners{ display:flex; justify-content:center; gap:20px; margin:30px auto; flex-wrap:wrap; }
.mini-card{ background:#fff; padding:20px; border-radius:12px; width:100%; max-width:320px; flex:1 1 220px; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.08); transition: transform .3s ease, box-shadow .3s ease; }
.mini-card img{ width:100%; height:150px; object-fit:contain; }
.mini-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.mini-card h2{ font-size:18px; color:var(--btn-hover); } .mini-card p{ font-size:14px; color:#666; margin:8px 0; } .mini-card button{ padding:8px 16px; border-radius:6px; }

/* ========== CATEGORIES ========== */
.categories{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:15px; width:90%; margin:40px auto; }
.category-item{ background:#fff; border-radius:10px; padding:10px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition: transform .3s ease, box-shadow .3s ease; }
.category-item:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,0.1); }
.category-item img{ width:80px; height:80px; } .category-item p{ margin-top:8px; font-weight:500; }

/* ========== PRODUCT SECTION ========== */
.product-section{ width:90%; margin:40px auto; }
.category-block{ margin-bottom:50px; position:relative; }

.category-header{ display:flex; justify-content:space-between; align-items:center; color:var(--btn-hover); margin-bottom:20px; }
.category-header h2{
  background:var(--btn-bg); border:none; color:#fff; padding:10px 18px; border-radius:12px; display:inline-block; box-shadow:0 4px 12px rgba(0,0,0,0.12); font-size:20px;
}
.category-header h2:hover{ background:var(--btn-hover); }
.see-all-link, .category-header a{ text-decoration:none; color:var(--btn-bg); font-size:16px; font-weight:600; cursor:pointer; transition:color .3s ease; }
.see-all-link:hover, .category-header a:hover{ color:var(--btn-hover); text-decoration:underline; }

/* ========== CAROUSEL NAV ========== */
.carousel-wrapper{ position:relative; padding:0 60px; }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; min-width:50px; border-radius:50%; background:var(--ms-green); color:#fff; border:none; font-size:28px; font-weight:bold;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,0.2); transition:all .3s ease; padding:0;
}
.carousel-nav:hover{ background:var(--ms-green-hover); transform:translateY(-50%) scale(1.1); box-shadow:0 6px 16px rgba(0,0,0,0.25); }
.carousel-nav.prev{ left:0; } .carousel-nav.next{ right:0; }
.carousel-nav.disabled{ opacity:.3; cursor:not-allowed; pointer-events:none; }

/* ========== CAROUSEL CONTAINERS ========== */
.carousel-container{ overflow:hidden; width:100%; }
.product-carousel{ display:flex; gap:20px; transition:transform .4s cubic-bezier(.4,0,.2,1); will-change:transform; }
.extra-products{ display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ========== PRODUCT CARDS ========== */
.product-card{
  background:#fff; border-radius:16px; padding:16px 14px; width:100%; max-width:100%; min-width:0; text-align:center;
  border:1px solid #DCE7D8; box-shadow:0 6px 16px rgba(0,0,0,0.04); display:flex; flex-direction:column; justify-content:space-between;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.12); border-color:var(--btn-bg); }
.product-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }

.product-card img{ max-width:100%; height:150px; object-fit:contain; }
.product-card h4{ font-size:15px; margin:10px 0 5px; word-break:break-word; }
.product-card p{ font-size:13px; color:#666; }
.product-card .price{ color:var(--btn-bg); font-weight:600; margin:8px 0; }
.product-card button{ border-radius:10px; padding:8px 16px; font-weight:600; }
.product-card .add-btn{ padding:8px 18px; border-radius:999px; font-weight:700; }

/* quantity wrapper in product card */
.product-card .product-qty-wrapper{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0 auto; margin-top:8px; height:40px; width:100%; max-width:150px;
}
.product-card .qty-btn, .product-card .remove-btn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; padding:0; border-radius:10px; background:var(--ms-green);
  border:2px solid var(--ms-green); color:#fff; font-size:22px; font-weight:700; line-height:1; cursor:pointer; transition:.15s ease; vertical-align:middle; flex-shrink:0;
}
.product-card .qty-btn:hover, .product-card .remove-btn:hover{ background:var(--ms-green-hover); border-color:var(--ms-green-hover); transform:scale(1.05); }

.product-card .qty-count{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; font-size:18px; font-weight:700; color:#000; background:#fff; border-radius:10px; border:2px solid #e5e5e5; line-height:1; vertical-align:middle; flex-shrink:0;
}

/* ========== HORIZONTAL CAROUSEL RULES ========== */
.product-row.carousel,
.product-row.carousel .product-card,
.product-carousel .product-card { display:block; }

.product-row.carousel{
  display:flex !important; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding-bottom:12px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.product-row.carousel::-webkit-scrollbar, .extra-products::-webkit-scrollbar{ height:8px; }
.product-row.carousel::-webkit-scrollbar-thumb, .extra-products::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.12); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }

@media (pointer:coarse){
  .product-row.carousel{ scrollbar-width:none; }
  .product-row.carousel::-webkit-scrollbar{ display:none; }
  .extra-products::-webkit-scrollbar{ display:none; }
}

.product-row.carousel > .product-card,
.product-carousel > .product-card,
.extra-products > .product-card{
  scroll-snap-align:start;
  flex:0 0 52%;
  max-width:52%;
  min-height:220px;
  box-sizing:border-box;
}

/* medium */
@media (min-width:640px){
  .product-row.carousel > .product-card,
  .product-carousel > .product-card,
  .extra-products > .product-card{ flex:0 0 33.3333%; max-width:33.3333%; }
}

/* large */
@media (min-width:1024px){
  .product-row.carousel > .product-card,
  .product-carousel > .product-card,
  .extra-products > .product-card{ flex:0 0 23.5%; max-width:23.5%; }
}


.see-all-card{
  background:#fff;
  border-radius:16px;
  padding:16px 14px;
  border:1.5px solid var(--btn-bg);
  box-shadow:0 6px 16px rgba(0,0,0,0.04);

  /* matching product card layout */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  /* size parity */
  min-height:220px;
  box-sizing:border-box;

  /* typography */
  color:var(--btn-bg);
  font-weight:800;
  font-size:17px;
  cursor:pointer;

  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.see-all-card:hover,
.see-all-card:focus{
  background:#fafff7;
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

/* optional chevron, if you want: › */
.see-all-card .chevron{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  color:var(--btn-bg);
}

/* responsive widths — perfect match to product-card sizes */
.product-row.carousel > .see-all-card,
.product-carousel > .see-all-card,
.extra-products > .see-all-card{
  scroll-snap-align:start;
  flex:0 0 52%;
  max-width:52%;
  min-height:220px;
  box-sizing:border-box;
}

@media (min-width:640px){
  .product-row.carousel > .see-all-card,
  .product-carousel > .see-all-card,
  .extra-products > .see-all-card{
    flex:0 0 33.3333%;
    max-width:33.3333%;
  }
}

@media (min-width:1024px){
  .product-row.carousel > .see-all-card,
  .product-carousel > .see-all-card,
  .extra-products > .see-all-card{
    flex:0 0 23.5%;
    max-width:23.5%;
  }
}


/* keyboard + focus visible */
.see-all-card:focus,
.product-card button:focus,
.product-card .qty-btn:focus,
.product-card .remove-btn:focus{
  outline:3px solid rgba(117,196,107,0.18);
  outline-offset:2px;
}

/* images in smaller cards */
.product-card img{ max-width:100%; object-fit:contain; }

/* ========== FOOTER ========== */
.footer{
  width:100%;
  background:rgba(76,175,80,0.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:40px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.3);
}
.footer-links{ display:flex; justify-content:space-around; flex-wrap:wrap; margin-bottom:20px; }
.footer-links .column{ margin:10px; }
.footer-links h3{ color:var(--btn-bg); margin-bottom:10px; }
.footer-links a{ display:block; color:#000; text-decoration:none; font-size:14px; margin:4px 0; transition:.2s; }
.footer-links a:hover{ color:var(--btn-bg); }

.socials{ display:flex; justify-content:center; align-items:center; gap:15px; margin-top:15px; }
.socials img{ width:35px; margin:0 8px; background:#fff; padding:4px; border-radius:50%; transition:.3s ease; }
.socials a.fb:hover img{ filter:drop-shadow(0 0 3px #1877f2); }
.socials a.ig:hover img{ filter:drop-shadow(0 0 3px #e1306c); }
.socials a.gm:hover img{ filter:drop-shadow(0 0 3px #ff0400); }
.socials a.wa:hover img{ filter:drop-shadow(0 0 3px #25d366); }

.copyright{ font-size:13px; color:#000; opacity:.8; }

/* ========== TOAST NOTIFICATION (ID must match JS) ========== */
#toast-notification{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background-color:#1A1A1A;
  color:white;
  padding:10px 20px;
  border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  gap:15px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
  z-index:10000;
  font-family:"Quicksand",sans-serif;
}
#toast-notification.show{
  opacity:1; visibility:visible; transform:translate(-50%,-10px);
}
#toast-notification img{ width:30px; height:30px; border-radius:4px; object-fit:cover; border:1px solid rgba(255,255,255,0.2); display:block; }
#toast-notification p{ margin:0; font-size:14px; font-weight:600; }

/* small screens for toast */
@media (max-width:600px){ #toast-notification{ bottom:10px; width:90%; max-width:350px; } }

/* ========== SPINNER ========== */
.spinner{
  display:inline-block; width:18px; height:18px; border:3px solid rgba(0,0,0,0.18); border-top:3px solid var(--btn-bg); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width:1200px){
  .product-row:not(.carousel), .extra-products { grid-template-columns:repeat(3,1fr); }
  .product-row.carousel > .product-card{ flex:0 0 33.3333%; max-width:33.3333%; }
  .extra-products{ gap:14px; }
}

@media (max-width:900px){
  .product-row:not(.carousel), .extra-products { grid-template-columns:repeat(2,1fr); }
  .product-row.carousel > .product-card{ flex:0 0 48%; max-width:48%; }
  .extra-products{ gap:12px; }
}

@media (max-width:600px){
  .main-banner{ height:260px; border-radius:0; }
  .banner-text h1{ font-size:30px; letter-spacing:1px; }
  .banner-text p{ font-size:14px; }

  .product-row:not(.carousel), .extra-products { grid-template-columns:1fr; gap:15px; }

  .product-row.carousel > .product-card, .extra-products > .product-card { flex:0 0 100%; max-width:100%; }

  .cart-item{ gap:8px; padding:10px 6px; }
  .cart-item > img{ width:56px; height:56px; }

  .cart-qty{ gap:4px; }

  .cart-qty .qty-btn, .cart-item .remove-btn{ width:30px; height:30px; min-width:30px; font-size:16px; }

  .cart-qty span{ min-width:26px; height:30px; font-size:14px; }

  .product-card .qty-btn, .product-card .remove-btn{ width:36px; height:36px; min-width:36px; font-size:20px; }

  .product-card .qty-count{ width:36px; height:36px; min-width:36px; font-size:16px; }

  .product-card .product-qty-wrapper{ gap:6px; }

  .product-card .add-btn{ padding:6px 14px; min-width:64px; font-size:14px; }
}

@media (max-width:420px){
  #cart-modal .modal-content{ width:calc(100% - 24px); margin:4vh 12px; max-height:calc(100vh - 48px); }
  #cart-items{ max-height:calc(100vh - 220px); }
}

/* accessibility helper */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ===== MOBILE CART CONTROL SIZE FIX ===== */
@media (max-width: 600px) {
  .cart-qty .qty-btn,
  .cart-qty .remove-btn,
  .product-card .qty-btn,
  .product-card .remove-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 20px !important;
    border-radius: 10px;
  }

  .cart-qty span,
  .product-card .qty-count {
    min-width: 44px;
    height: 44px;
    font-size: 18px;
  }
}