/* =========================================================
   ECOO BASKET — ORDER WEBSITE THEME V2
   Scope: EcooBasket.com shopping / order website only
   Upload via: Settings > Themes > Website CSS > Upload CSS file
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --ecoo-green: #159447;
  --ecoo-green-dark: #087A3A;
  --ecoo-blue: #0B4F8A;
  --ecoo-text: #1E293B;
  --ecoo-muted: #64748B;
  --ecoo-bg: #F6F8FB;
  --ecoo-card: #FFFFFF;
  --ecoo-border: #E5E7EB;
  --ecoo-offer: #FF7A00;
  --ecoo-danger: #EF4444;
}

/* ---------- Base ---------- */
html, body {
  background: var(--ecoo-bg) !important;
}

body {
  color: var(--ecoo-text) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
}

/* ---------- Top delivery bar ---------- */
[class*="announcement"],
[class*="top-bar"],
[class*="topbar"] {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ---------- Header: cleaner + shorter ---------- */
.sh-header-main {
  background-color: #FFFFFF !important;
  color: var(--ecoo-text) !important;
  border-bottom: 1px solid var(--ecoo-border) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  min-height: 72px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.sh-header-main img,
.sh-header-main [class*="logo"] img {
  max-height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
}

.sh-header-location-icon,
.sh-header-account-icon,
.sh-header-cart-icon,
.sh-header-arrow-icon,
.sh-header-search-icon {
  fill: var(--ecoo-green) !important;
  stroke: var(--ecoo-green) !important;
}

.sh-header-cart-badge {
  background-color: var(--ecoo-green) !important;
  color: #FFFFFF !important;
}

.sh-header-menu {
  background-color: var(--ecoo-green) !important;
  color: #FFFFFF !important;
}

/* ---------- Hero / store banner ---------- */
[class*="banner"] img,
[class*="hero"] img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------- Category section ---------- */
.sh-categories-container {
  background-color: #FFFFFF !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}

/* Keep category cards visually consistent */
.sh-categories-container img,
[class*="category"] img {
  width: 100% !important;
  max-width: 160px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* Category names */
.sh-categories-container [class*="name"],
.sh-categories-container [class*="title"],
[class*="category"] [class*="name"] {
  color: var(--ecoo-text) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Reduce oversized empty spacing after category area */
.sh-categories-container + * {
  margin-top: 0 !important;
}

/* ---------- Product cards ---------- */
.sh-product-card-price {
  color: var(--ecoo-text) !important;
  font-weight: 700 !important;
}

.sh-product-card-mrp {
  color: #9CA3AF !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

.sh-product-card-name {
  color: var(--ecoo-text) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.sh-product-card-discount-tag,
.sh-product-discount-tag {
  background-color: var(--ecoo-offer) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

.sh-product-wishlist-desktop,
.sh-product-share-icon,
.sh-product-social-button,
.sh-product-wishlist-icon,
.sh-product-not-wishlisted-icon {
  color: var(--ecoo-green) !important;
  stroke: var(--ecoo-green) !important;
  fill: none !important;
}

/* ---------- Buttons ---------- */
.sh-outline-button {
  border: 1.5px solid var(--ecoo-green) !important;
  color: var(--ecoo-green) !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.sh-solid-button {
  background: var(--ecoo-green) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ecoo-green) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.sh-product-plus-minus-button {
  background-color: #F1F5F9 !important;
  color: var(--ecoo-text) !important;
  border: 1px solid var(--ecoo-border) !important;
  border-radius: 8px !important;
}

.sh-product-buy-now-button {
  color: #FFFFFF !important;
  background-color: var(--ecoo-green) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ---------- Floating WhatsApp button ---------- */
/* Uses multiple selector fallbacks so it works across theme versions */
[class*="whatsapp"][class*="float"],
[class*="floating"][class*="whatsapp"],
a[href*="wa.me"],
a[href*="whatsapp.com"] {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  border-radius: 50% !important;
  right: 14px !important;
  bottom: 92px !important;
  z-index: 50 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18) !important;
}

/* ---------- Bottom navigation ---------- */
.sh-bottom-nav-main {
  background-color: #FFFFFF !important;
  color: var(--ecoo-text) !important;
  border-top: 1px solid var(--ecoo-border) !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05) !important;
}

.sh-bottom-nav-selected {
  stroke: var(--ecoo-green) !important;
  color: var(--ecoo-green) !important;
  fill: none !important;
}

.sh-bottom-nav-unselected {
  stroke: #6B7280 !important;
  color: #6B7280 !important;
}

.sh-bottom-nav-cart-badge {
  background-color: var(--ecoo-green) !important;
  color: #FFFFFF !important;
}

/* ---------- Footer ---------- */
.sh-footer-main {
  background-color: #F8FAFC !important;
  color: var(--ecoo-text) !important;
  border-top: 1px solid var(--ecoo-border) !important;
}

.sh-footer-icon {
  color: var(--ecoo-green) !important;
  stroke: var(--ecoo-green) !important;
}

/* ---------- General images ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- Mobile optimization ---------- */
@media (max-width: 768px) {
  .sh-header-main {
    min-height: 64px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .sh-header-main img,
  .sh-header-main [class*="logo"] img {
    max-height: 52px !important;
  }

  .sh-categories-container {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  .sh-categories-container img,
  [class*="category"] img {
    max-width: 118px !important;
    padding: 6px !important;
  }

  .sh-product-card-name {
    font-size: 14px !important;
  }

  .sh-product-card-price {
    font-size: 16px !important;
  }

  .sh-outline-button,
  .sh-solid-button,
  .sh-product-buy-now-button {
    min-height: 42px !important;
  }

  [class*="whatsapp"][class*="float"],
  [class*="floating"][class*="whatsapp"],
  a[href*="wa.me"],
  a[href*="whatsapp.com"] {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    right: 12px !important;
    bottom: 88px !important;
  }
}

/* ---------- Desktop optimization ---------- */
@media (min-width: 1024px) {
  .sh-header-main {
    min-height: 76px !important;
  }

  .sh-product-card-name {
    font-size: 15px !important;
  }

  .sh-product-card-price {
    font-size: 17px !important;
  }
}