/* ========================================================================== 
   1. GLOBAL VARIABLES & BASE 
   ========================================================================== */
:root {
  --primary-green: #1E7A4D;
  --header-green: #51744A; /* Target Clicked/Active Color */
  --cream-light: #E9E3C9;  /* Target Badge Text Color */
  --bg-sand: #FAF9F5; 
  --accent-green-light: #E8F5E9;
  --text-dark: #1F1F1F;
  --text-muted: #A0A0A0;
  --white: #FFFFFF;
}

body {
  background-color: var(--bg-sand);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

/* ========================================================================== 
   2. HEADER SECTION 
   ========================================================================== */
.sh-header-main {
  background-color: var(--header-green) !important;
  color: var(--cream-light) !important;
}

/* Header Icons (Location, Account, Cart, Arrow, Search) */
.sh-header-location-icon,
.sh-header-account-icon,
.sh-header-cart-icon,
.sh-header-arrow-icon,
.sh-header-search-icon {
  stroke: #51744A !important;
  fill: #E9E2C8 !important;
}

.sh-header-cart-badge {
  background-color: var(--header-green) !important;
  color: var(--cream-light) !important;
}

.sh-header-menu {
  background-color: var(--white) !important;
  color: var(--text-dark) !important;
}

/* ========================================================================== 
   3. MODERN BOTTOM NAVIGATION (Floating & Curved) 
   ========================================================================== */
.sh-bottom-nav-main {
  background-color: rgba(255, 255, 255, 0.9) !important; /* Kept transparent background */
  backdrop-filter: blur(10px);
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  height: 70px !important;
}

/* When clicked/Selected */
.sh-bottom-nav-selected {
  stroke: #51744A !important;
  color: #51744A !important;
  fill: #51744A !important;
  font-weight: bold !important;
}

.sh-bottom-nav-unselected {
  stroke: #8A8A8A !important;
  color: #8A8A8A !important;
}

/* Cart Badge (The '2' circle) */
.sh-bottom-nav-cart-badge {
  background-color: #51744A !important; /* Updated to match theme */
  color: #E9E3C9 !important;            /* Updated text color */
  border-radius: 50% !important;
}

/* ==========================================================================
   4. PRODUCT CARDS & DETAILS
   ========================================================================== */

.sh-product-card {
  background-color: #FAF9F5 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.sh-product-card-name {
  color: #2B2B2B !important;
  font-weight: 400 !important;
}

.sh-product-card-price {
  color: #51744A !important;
  font-weight: 600 !important;
}

.sh-product-card-mrp {
  color: var(--text-muted) !important;
  text-decoration: line-through;
}

.sh-product-card-discount-tag {
  background-color: #E9E2C8 !important;
  color: #51744A !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500 !important;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ========================================================================== 
   5. BUTTONS 
   ========================================================================== */

.sh-solid-button {
  background-color: var(--primary-green) !important;
  color: var(--white) !important;
  border: 1px solid var(--primary-green) !important;
  border-radius: 8px !important;
  fill: none !important;
  transition: opacity 0.2s ease;
}

.sh-solid-button:active {
  opacity: 0.8;
}

.sh-outlined-button {
  color: var(--primary-green) !important;
  border: 1px solid var(--primary-green) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
}

.sh-product-plus-minus-button {
  background-color: var(--accent-green-light) !important;
  color: var(--primary-green) !important;
  fill: var(--primary-green) !important;
  border-radius: 8px !important;
  border: none !important;
}

.sh-product-buy-now-button {
  background-color: var(--primary-green) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  font-weight: 600;
}

/* ========================================================================== 
   6. FOOTER & CONTAINERS 
   ========================================================================== */
.sh-footer-main,
.sh-categories-container {
  background-color: #C1BE95 !important;
}

.sh-footer-main {
  color: #F1EDD0 !important;
  padding: 20px;
}

.sh-footer-icon {
  color: #F1EDD0 !important;
}