/* ================================================================
   PREMIUM AGRICULTURE & AGRO eCOMMERCE THEME
   agriculture-theme.css  |  v1.0  |  2026
   Project: Agriculture_web
   Built by: Frontend Agriculture Redesign

   LOAD ORDER: After main.css (last stylesheet)
   SCOPE: PUBLIC FRONTEND ONLY (not connected to admin panel)

   PROTECTED AREAS (DO NOT MODIFY in this file):
   - .all__category__list > a  (ALL CATEGORIES button — red gradient)
   - .side__bar              (category dropdown — dark navy)
   - .side__barsub           (subcategory flyout — steel blue)
   - .side__barchild         (child category flyout — dark green)
   - .main_slider / .slider-section  (banner — admin-managed)
   - .bottoads_area / .ads_item  (bottom ads — admin-managed)
================================================================ */

/* ================================================================
   SECTION 1 — GOOGLE FONTS (reuse existing imports)
   Plus Jakarta Sans + Inter already imported in main.css
================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

/* ================================================================
   SECTION 2 — AGRICULTURE DESIGN TOKENS (CSS VARIABLES)
================================================================ */
:root {
  /* ── Primary Green Palette ── */
  --ag-green-primary:     #2B7F32;
  --ag-green-deep:        #185C2A;
  --ag-green-forest:      #0D2B10;
  --ag-green-leaf:        #4FAE4F;
  --ag-green-light:       #6DC76D;
  --ag-green-soft-bg:     #F2F8F1;
  --ag-green-pale:        #EBF5EB;

  /* ── Harvest Gold Accent ── */
  --ag-gold-harvest:      #D89B18;
  --ag-gold-soft:         #F3C95B;
  --ag-gold-pale:         #FDF6E3;
  --ag-gold-dark:         #A87510;

  /* ── Warm Neutrals ── */
  --ag-cream:             #FFF9EC;
  --ag-white:             #FFFFFF;
  --ag-bg:                #F5F7F4;

  /* ── Text Colors ── */
  --ag-text-dark:         #1E3220;
  --ag-text-body:         #243326;
  --ag-text-secondary:    #66736A;
  --ag-text-muted:        #9EAA9F;
  --ag-text-price:        #1A5C22;
  --ag-text-white:        #FFFFFF;

  /* ── Borders ── */
  --ag-border:            #D4E4D5;
  --ag-border-light:      #E8F0E9;
  --ag-border-focus:      #2B7F32;

  /* ── Shadows ── */
  --ag-shadow-xs:         0 1px 3px rgba(43,127,50,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ag-shadow-sm:         0 2px 8px rgba(43,127,50,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --ag-shadow-md:         0 4px 16px rgba(43,127,50,0.14), 0 2px 8px rgba(0,0,0,0.08);
  --ag-shadow-lg:         0 8px 32px rgba(43,127,50,0.18), 0 4px 16px rgba(0,0,0,0.10);
  --ag-shadow-hover:      0 12px 40px rgba(43,127,50,0.22), 0 6px 20px rgba(0,0,0,0.10);
  --ag-shadow-gold:       0 4px 18px rgba(216,155,24,0.35);
  --ag-shadow-green-btn:  0 4px 14px rgba(43,127,50,0.35);

  /* ── Border Radius ── */
  --ag-radius-xs:         4px;
  --ag-radius-sm:         6px;
  --ag-radius-md:         10px;
  --ag-radius-lg:         16px;
  --ag-radius-xl:         24px;
  --ag-radius-pill:       50px;
  --ag-radius-full:       50%;

  /* ── Transitions ── */
  --ag-transition:        all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --ag-transition-slow:   all 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── RGB values for rgba() ── */
  --ag-green-primary-rgb: 43, 127, 50;
  --ag-gold-harvest-rgb:  216, 155, 24;

  /* ── Override Gadget Blue Theme Tokens ── */
  --g-primary:            #2B7F32 !important;
  --g-primary-dark:       #185C2A !important;
  --g-primary-light:      #4FAE4F !important;
  --g-accent:             #D89B18 !important;
  --g-accent-dark:        #A87510 !important;
  --g-bg:                 #F5F7F4 !important;
  --g-bg-card:            #FFFFFF !important;
  --g-text:               #243326 !important;
  --g-text-muted:         #66736A !important;
  --g-border:             #D4E4D5 !important;
  --g-success:            #15803D !important;
  --g-shadow-sm:          0 2px 8px rgba(43,127,50,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
  --g-shadow-md:          0 4px 16px rgba(43,127,50,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  --g-shadow-lg:          0 8px 32px rgba(43,127,50,0.18), 0 4px 16px rgba(0,0,0,0.10) !important;
  --g-shadow-hover:       0 12px 40px rgba(43,127,50,0.22), 0 6px 20px rgba(0,0,0,0.10) !important;
  --g-primary-rgb:        43, 127, 50 !important;
  --g-accent-rgb:         216, 155, 24 !important;
}

/* ================================================================
   SECTION 3 — ICON FONT PROTECTION (must come first)
   Prevents font-family override from breaking FA & Feather icons
================================================================ */
.fa, .fas, .far, .fab, .fal,
.fa-solid, .fa-regular, .fa-brands, .fa-light,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",
               "FontAwesome","Font Awesome 4" !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
  display: inline-block !important;
}

svg[data-feather] {
  fill: none !important;
  stroke: currentColor !important;
}

/* ================================================================
   SECTION 4 — GLOBAL BODY & TYPOGRAPHY
   Safe: only text nodes, never icon elements
================================================================ */
body,
body p, body span, body a,
body h1, body h2, body h3, body h4, body h5, body h6,
body li, body label, body td, body th,
body strong, body b, body input, body select,
body textarea, body button, body div {
  font-family: "Plus Jakarta Sans","Inter","Hind Siliguri", sans-serif !important;
  box-sizing: border-box;
}

body {
  background: var(--ag-bg) !important;
  color: var(--ag-text-body) !important;
  font-size: 14px;
  line-height: 1.6;
}

body p, body h1, body h2, body h3,
body h4, body h5, body h6,
body li, body label, body td, body th,
body strong, body b, body div {
  color: var(--ag-text-body) !important;
}

a { transition: var(--ag-transition); }

/* ================================================================
   SECTION 5 — SCROLLBAR
================================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--ag-green-soft-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(43,127,50,0.35);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ag-green-primary); }

/* ================================================================
   SECTION 6 — TOP ANNOUNCEMENT BAR
   Deep forest green (replaces black)
================================================================ */
.top_header,
body .top_header,
header .top_header,
#navbar_top .top_header {
  background: var(--ag-green-deep) !important;
  background-color: var(--ag-green-deep) !important;
  background-image: linear-gradient(
    135deg,
    #185C2A 0%,
    #1E6B30 50%,
    #145225 100%
  ) !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  animation: none !important;
}

.top_header,
.top_header p, .top_header span,
.top_header a, .top_header div, .top_header marquee {
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Hotline button in top bar */
.top_header a[href^="tel"] {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: var(--ag-radius-xs) !important;
  padding: 3px 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  transition: var(--ag-transition) !important;
}

.top_header a[href^="tel"]:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

/* Mobile hotline bar (inline style in master.blade, override color) */
.d-flex.d-sm-none[style*="background: #4A2390"] {
  background: var(--ag-green-primary) !important;
  background-color: var(--ag-green-primary) !important;
}

/* ================================================================
   SECTION 7 — DESKTOP MAIN HEADER
================================================================ */
.main-header,
.logo-area {
  background: var(--ag-white) !important;
  background-color: var(--ag-white) !important;
  border-bottom: 1px solid var(--ag-border-light) !important;
  box-shadow: 0 2px 12px rgba(43,127,50,0.08) !important;
  position: relative !important;
}

/* Bottom accent line — agriculture green gradient */
.main-header::after,
.logo-area::after {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--ag-green-deep) 0%,
    var(--ag-green-primary) 40%,
    var(--ag-green-leaf) 70%,
    var(--ag-gold-harvest) 100%
  ) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  opacity: 0.9 !important;
}

.main-header *, .logo-area * { color: var(--ag-text-body) !important; }

/* ================================================================
   SECTION 8 — LOGO AREA
================================================================ */
.main-logo img,
.mobile-logo img,
.footer-about img {
  max-height: 60px !important;
  width: auto !important;
  display: block !important;
}

/* ================================================================
   SECTION 9 — DESKTOP SEARCH BAR — Premium Agriculture Style
================================================================ */
.main-search form {
  border: 2px solid var(--ag-green-primary) !important;
  border-radius: 50px !important;       /* pill shape — modern & premium */
  overflow: hidden !important;
  background: var(--ag-white) !important;
  box-shadow: 0 2px 12px rgba(43,127,50,0.13),
              inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
}

/* Animated green glow ring on focus */
.main-search form:focus-within {
  border-color: var(--ag-green-primary) !important;
  box-shadow: 0 0 0 4px rgba(43,127,50,0.14),
              0 4px 20px rgba(43,127,50,0.22) !important;
  animation: agSearchPulse 1.8s ease-in-out 1 !important;
}

@keyframes agSearchPulse {
  0%   { box-shadow: 0 0 0 0 rgba(43,127,50,0.35), 0 4px 20px rgba(43,127,50,0.15); }
  50%  { box-shadow: 0 0 0 6px rgba(43,127,50,0.12), 0 4px 20px rgba(43,127,50,0.28); }
  100% { box-shadow: 0 0 0 4px rgba(43,127,50,0.14), 0 4px 20px rgba(43,127,50,0.22); }
}

.search_keyword {
  background: transparent !important;
  border: none !important;
  color: var(--ag-text-body) !important;
  font-weight: 500 !important;
  padding-left: 20px !important;
  flex: 1 !important;
  font-size: 14px !important;
}

.search_keyword::placeholder {
  color: var(--ag-text-muted) !important;
  font-size: 13px !important;
}

/* Search button — pill right side, gradient green */
.main-search form button {
  background: linear-gradient(135deg, var(--ag-green-deep), var(--ag-green-primary)) !important;
  border: none !important;
  color: var(--ag-white) !important;
  padding: 0 22px !important;
  border-radius: 0 50px 50px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 52px !important;
  transition: all 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shine sweep on button hover */
.main-search form button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -70% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
}

.main-search form button:hover::before { left: 130% !important; }

.main-search form button:hover {
  background: linear-gradient(135deg, #0A2A10, var(--ag-green-deep)) !important;
  box-shadow: 0 4px 14px rgba(43,127,50,0.40) !important;
}

.main-search form button svg,
.main-search form button i {
  color: var(--ag-white) !important;
  stroke: var(--ag-white) !important;
  fill: none !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  position: relative !important;
  z-index: 1 !important;
}

.main-search form button:hover svg,
.main-search form button:hover i {
  transform: scale(1.15) !important;
}

/* Search result dropdown */
.search_product {
  background: var(--ag-white) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: 0 0 var(--ag-radius-md) var(--ag-radius-md) !important;
  box-shadow: var(--ag-shadow-md) !important;
}

.search_product ul li:hover {
  background: var(--ag-green-soft-bg) !important;
}

.search_content .price {
  color: var(--ag-text-price) !important;
  font-weight: 700 !important;
}

/* ================================================================
   SECTION 10 — HEADER ICONS (Track Order, Cart) — Premium Style
================================================================ */
.header-list-items ul li a { color: var(--ag-text-body) !important; }

.header-list-items ul li a:hover i,
.header-list-items ul li a:hover svg {
  color: var(--ag-green-primary) !important;
  stroke: var(--ag-green-primary) !important;
  transform: scale(1.15) !important;
}

/* ── CART COUNT BADGE — Harvest Gold, animated bounce ── */
.header-list-items ul li span {
  background: linear-gradient(135deg, var(--ag-gold-harvest), var(--ag-gold-soft)) !important;
  color: #1A3A1A !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  box-shadow: 0 2px 8px rgba(216,155,24,0.55),
              inset 0 1px 0 rgba(255,255,255,0.30) !important;
  animation: agBadgePop 2.4s ease-in-out infinite !important;
  border-radius: 50% !important;
}

@keyframes agBadgePop {
  0%, 90%, 100% { transform: scale(1);   box-shadow: 0 2px 8px rgba(216,155,24,0.55); }
  95%            { transform: scale(1.22); box-shadow: 0 4px 14px rgba(216,155,24,0.75); }
}

/* Cart summary dropdown */
.cshort-summary {
  border-radius: var(--ag-radius-md) !important;
  box-shadow: var(--ag-shadow-lg) !important;
  border: 1px solid var(--ag-border) !important;
  background: var(--ag-white) !important;
}

/* ── TRACK ORDER BUTTON — Gradient Green Pill ── */
.track_btn a {
  color: var(--ag-white) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all 0.30s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;

  /* Green gradient fill */
  background: linear-gradient(
    135deg,
    var(--ag-green-deep) 0%,
    var(--ag-green-primary) 60%,
    var(--ag-green-leaf) 100%
  ) !important;
  background-size: 200% 200% !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(43,127,50,0.38),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  animation: agTrackShift 4s ease infinite !important;
}

@keyframes agTrackShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shine sweep */
.track_btn a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
}
.track_btn a:hover::before { left: 130% !important; }

.track_btn a i {
  color: var(--ag-white) !important;
  font-size: 13px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.track_btn a:hover {
  background-position: right center !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 7px 20px rgba(43,127,50,0.52),
              0 0 0 2px rgba(79,174,79,0.22) !important;
  animation: none !important;
  color: var(--ag-white) !important;
}

.track_btn a:hover i {
  color: var(--ag-white) !important;
  transform: translateX(2px) !important;
}

/* ================================================================
   SECTION 11 — NAVIGATION MENU BAR
   Deep forest green (replaces dark navy/blue)
   PROTECTED: .all__category__list > a and .side__bar
================================================================ */
.menu-area {
  background: var(--ag-green-deep) !important;
  background-color: var(--ag-green-deep) !important;
  box-shadow: 0 3px 12px rgba(24,92,42,0.30) !important;
  position: relative !important;
  z-index: 1001 !important;
}

/* Nav links (NOT the ALL CATEGORIES button) */
.heder__category > li:not(.all__category__list) a,
.right__menu__top li a,
.right__menu__top li p a {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;           /* no rounded shape by default */
  border: none !important;               /* no border by default */
  background: transparent !important;   /* no background by default */
  box-shadow: none !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  position: relative !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  animation: none !important;
}

/* ── Animated underline: grows from center on hover ── */
.heder__category > li:not(.all__category__list) a::after,
.right__menu__top li a::after,
.right__menu__top li p a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0% !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    var(--ag-green-leaf),
    var(--ag-gold-harvest)
  ) !important;
  border-radius: 2px !important;
  transition: width 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  display: block !important;
}

/* Hover → underline expands + slight lift */
.heder__category > li:not(.all__category__list) a:hover,
.right__menu__top li a:hover,
.right__menu__top li p a:hover {
  color: var(--ag-white) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.heder__category > li:not(.all__category__list) a:hover::after,
.right__menu__top li a:hover::after,
.right__menu__top li p a:hover::after {
  width: 80% !important;
}

/* ────────────────────────────────────────────
   HOTDEALS — default gold color, glow on hover
──────────────────────────────────────────── */
.heder__category > li:not(.all__category__list):nth-child(3) > a {
  color: var(--ag-gold-soft) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

.heder__category > li:not(.all__category__list):nth-child(3) > a:hover {
  color: #FFE082 !important;
  background: transparent !important;
  text-shadow: 0 0 16px rgba(216,155,24,0.75) !important;
  transform: translateY(-1px) !important;
}

.heder__category > li:not(.all__category__list):nth-child(3) > a::after {
  background: linear-gradient(90deg, var(--ag-gold-harvest), var(--ag-gold-soft)) !important;
}

/* ────────────────────────────────────────────
   CONTACT — plain white, underline on hover
──────────────────────────────────────────── */
.contact__menu a,
.heder__category > li.contact__menu > a {
  color: rgba(255,255,255,0.90) !important;
  background: transparent !important;
  border: none !important;
}

.contact__menu a:hover,
.heder__category > li.contact__menu > a:hover {
  color: var(--ag-white) !important;
  background: transparent !important;
}

/* ────────────────────────────────────────────
   LOGIN / SIGN UP — plain by default,
   green filled pill ONLY on hover
──────────────────────────────────────────── */
.right__menu__top li.for_order p a,
.right__menu__top .for_order a {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Remove ::after underline for login (has its own hover style) */
.right__menu__top li.for_order p a::after,
.right__menu__top .for_order a::after {
  display: none !important;
}

/* Hover → green filled pill appears */
.right__menu__top li.for_order p a:hover,
.right__menu__top .for_order a:hover {
  background: linear-gradient(
    135deg,
    var(--ag-green-deep),
    var(--ag-green-primary)
  ) !important;
  color: var(--ag-white) !important;
  border-radius: 50px !important;
  border: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(43,127,50,0.45) !important;
}

/* Login icon */
.right__menu__top li.for_order p a i,
.right__menu__top .for_order a i {
  color: rgba(255,255,255,0.90) !important;
  font-size: 13px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.right__menu__top li.for_order p a:hover i,
.right__menu__top .for_order a:hover i {
  color: var(--ag-white) !important;
  transform: scale(1.15) !important;
}

/* ── PROTECTED: ALL CATEGORIES button — DO NOT OVERRIDE ── */
/* ── PROTECTED: Category dropdown .side__bar — DO NOT OVERRIDE ── */

/* ================================================================
   SECTION 12 — MOBILE HEADER
================================================================ */
.mobile-header {
  background: var(--ag-white) !important;
  background-color: var(--ag-white) !important;
  border-bottom: 2px solid var(--ag-green-primary) !important;
  box-shadow: 0 2px 10px rgba(43,127,50,0.12) !important;
}

.mobile-header * { color: var(--ag-text-body) !important; }

.menu-bar i,
.toggle i {
  color: var(--ag-green-primary) !important;
  font-size: 24px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.menu-bag i,
.cart-dialog i,
#cart-qty i {
  color: var(--ag-green-primary) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Mobile cart count badge — harvest gold */
.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--ag-gold-harvest) !important;
  color: var(--ag-white) !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(216,155,24,0.45) !important;
}

/* ================================================================
   SECTION 13 — MOBILE SEARCH BAR
================================================================ */
.mobile-search form {
  border: 2px solid var(--ag-green-primary) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: var(--ag-white) !important;
  box-shadow: 0 2px 8px rgba(43,127,50,0.10) !important;
  transition: var(--ag-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}

.mobile-search form:focus-within {
  border-color: var(--ag-gold-harvest) !important;
  box-shadow: 0 4px 16px rgba(43,127,50,0.18) !important;
}

.msearch_keyword,
.mobile-search form input {
  background: var(--ag-white) !important;
  border: none !important;
  color: var(--ag-text-body) !important;
  font-weight: 500 !important;
  padding-left: 16px !important;
  flex: 1 !important;
}

.msearch_keyword::placeholder { color: var(--ag-text-muted) !important; }

.mobile-search form button {
  background: var(--ag-green-primary) !important;
  border: none !important;
  color: var(--ag-white) !important;
  border-radius: 0 24px 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 48px !important;
  transition: background 0.25s ease !important;
}

.mobile-search form button:hover {
  background: var(--ag-green-deep) !important;
}

.mobile-search form button svg,
.mobile-search form button i {
  color: var(--ag-white) !important;
  stroke: var(--ag-white) !important;
  fill: none !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

/* ================================================================
   SECTION 14 — MOBILE SLIDE-OUT MENU
================================================================ */
.mobile-menu {
  background: var(--ag-white) !important;
  box-shadow: 4px 0 30px rgba(43,127,50,0.18) !important;
  border-right: 2px solid var(--ag-green-primary) !important;
}

.mobile-menu * { color: var(--ag-text-body) !important; }

.mobile-menu-logo {
  background: linear-gradient(135deg, var(--ag-green-deep), var(--ag-green-primary)) !important;
  padding: 14px 16px !important;
}

.mobile-menu-logo * { color: var(--ag-white) !important; }

.mobile-menu-close i {
  color: rgba(255,255,255,0.90) !important;
  font-size: 20px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.mobile-menu .menu-category-name {
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ag-border-light) !important;
  padding: 12px 16px !important;
  transition: var(--ag-transition) !important;
  color: var(--ag-text-body) !important;
}

.mobile-menu .menu-category-name:hover {
  background: var(--ag-green-soft-bg) !important;
  color: var(--ag-green-primary) !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--ag-green-primary) !important;
}

.mobile-menu .first-nav .parent-category {
  border-bottom: 1px solid var(--ag-border-light) !important;
}

.mobile-menu span.menu-category-toggle i {
  color: var(--ag-text-secondary) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* ================================================================
   SECTION 15 — SECTION TITLES
================================================================ */
.homeproduct {
  background: var(--ag-white) !important;
  margin-bottom: 10px !important;
  padding: 12px 0 !important;
}

.sec_title { margin-bottom: 12px !important; }

.section-title-header {
  border-bottom: 2px solid var(--ag-border-light) !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Section Title Name — animated leaf underline ── */
.section-title-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ag-text-dark) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.3px !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;

  /* Animated gradient underline */
  border-bottom: none !important;
  background-image: linear-gradient(
    90deg,
    var(--ag-green-deep)  0%,
    var(--ag-green-primary) 40%,
    var(--ag-green-leaf)    70%,
    var(--ag-gold-harvest)  100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 3px !important;
  background-position: left bottom !important;
  animation: agTitleUnderline 0.7s ease forwards !important;
  animation-delay: 0.2s !important;
}

@keyframes agTitleUnderline {
  from { background-size: 0% 3px; }
  to   { background-size: 100% 3px; }
}

/* Leaf accent before title text */
.section-title-name::before {
  content: "🌿 " !important;
  font-size: 14px !important;
  display: none !important; /* hidden by default, show only for category sections */
}

/* ================================================================
   SECTION 16 — CATEGORY CARDS
================================================================ */
.cat_item {
  background: var(--ag-white) !important;
  border: 1.5px solid var(--ag-border) !important;
  border-radius: var(--ag-radius-md) !important;
  padding: 14px 6px !important;
  text-align: center !important;
  transition: var(--ag-transition) !important;
  box-shadow: var(--ag-shadow-xs) !important;
  height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.cat_item:hover {
  border-color: var(--ag-green-primary) !important;
  background: var(--ag-green-soft-bg) !important;
  box-shadow: var(--ag-shadow-md) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

.cat_img {
  width: 100% !important;
  height: 75px !important;
  overflow: hidden !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--ag-transition) !important;
}

.cat_item:hover .cat_img {
  transform: scale(1.08) !important;
}

.cat_img img {
  width: auto !important;
  max-width: 90% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.cat_name a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ag-text-body) !important;
  display: block !important;
  line-height: 1.3 !important;
  transition: var(--ag-transition) !important;
}

.cat_item:hover .cat_name a { color: var(--ag-green-primary) !important; }

/* ================================================================
   SECTION 17 — PRODUCT CARDS
================================================================ */
.product_item,
.product-item,
.wist_item {
  background: var(--ag-white) !important;
  border: 1.5px solid var(--ag-border) !important;
  border-radius: var(--ag-radius-md) !important;
  box-shadow: var(--ag-shadow-xs) !important;
  transition: var(--ag-transition) !important;
  overflow: hidden !important;
  padding: 10px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
  position: relative !important;
}

.product_item:hover,
.product-item:hover,
.wist_item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ag-shadow-hover) !important;
  border-color: var(--ag-green-leaf) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}

/* Product image container */
.pro_img {
  height: 190px !important;
  border-radius: var(--ag-radius-sm) !important;
  overflow: hidden !important;
  background: var(--ag-green-soft-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pro_img > a {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

.pro_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

.product_item:hover .pro_img img,
.wist_item:hover .pro_img img {
  transform: scale(1.07) !important;
}

/* Product name */
.pro_name {
  height: 48px !important;
  margin-top: 8px !important;
}

.pro_name a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ag-text-body) !important;
  line-height: 1.4 !important;
  transition: var(--ag-transition) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.pro_name a:hover {
  color: var(--ag-green-primary) !important;
  text-decoration: none !important;
}

/* Product price */
.pro_price {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

.pro_price p {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ag-text-price) !important;
  text-align: left !important;
}

.pro_price del,
.pro_price s {
  color: var(--ag-text-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

/* Star ratings */
.product_item i.fas.fa-star,
.product_item i.fas.fa-star-half-alt,
.wist_item i.fas.fa-star,
.wist_item i.fas.fa-star-half-alt {
  color: var(--ag-gold-soft) !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.product_item i.far.fa-star,
.wist_item i.far.fa-star {
  color: var(--ag-border) !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Sale badge */
.sale-badge-box {
  background: var(--ag-error, #DC2626) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  box-shadow: 0 3px 10px rgba(220,38,38,0.40) !important;
}

.sale-badge-text,
.sale-badge-text p {
  color: var(--ag-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* ================================================================
   SECTION 18 — PRODUCT CARD BUTTONS
   BTN-1: ORDER NOW — Premium Green Gradient Shimmer
================================================================ */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(
    135deg,
    var(--ag-green-deep) 0%,
    var(--ag-green-primary) 50%,
    #3A9B42 100%
  ) !important;
  background-size: 200% 200% !important;
  color: var(--ag-white) !important;
  border: none !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  height: 38px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-shadow: 0 4px 14px rgba(43,127,50,0.38),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: background-position 0.5s ease,
              transform 0.25s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.25s ease !important;
  animation: agGreenShift 5s ease infinite !important;
}

/* Reset any previous slide-up ::after animation */
.cart_btn.order_button a::after {
  display: none !important;
}

.cart_btn.order_button a span {
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  display: inline !important;
  line-height: normal !important;
  transition: none !important;
  background: transparent !important;
  color: var(--ag-white) !important;
}

.cart_btn.order_button a:hover span { top: 0 !important; }

.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background-position: right center !important;
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(43,127,50,0.55),
              0 0 0 2px rgba(79,174,79,0.30),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
  animation: none !important;
}

/* Shine sweep on hover */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.55s ease !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before { left: 150% !important; }

.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * { color: var(--ag-white) !important; background: transparent !important; }

.addcartbutton span {
  color: var(--ag-white) !important;
  background: transparent !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ================================================================
   SECTION 19 — GO TO CART BUTTON (cart summary dropdown)
================================================================ */
.go_cart {
  background: linear-gradient(135deg, var(--ag-green-deep), var(--ag-green-primary)) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
  padding: 10px 0 !important;
  display: block !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: agGreenGlow 2.8s ease-in-out infinite !important;
}

.go_cart:hover {
  background: linear-gradient(135deg, #0F4019, var(--ag-green-deep)) !important;
  color: var(--ag-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(43,127,50,0.55) !important;
  animation: none !important;
}

/* ================================================================
   SECTION 20 — CART STORE BUTTON
================================================================ */
.cart_store {
  background: linear-gradient(135deg, var(--ag-gold-dark), var(--ag-gold-harvest)) !important;
  border-color: var(--ag-gold-dark) !important;
  color: var(--ag-text-dark) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--ag-shadow-gold) !important;
}

.cart_store:hover {
  background: linear-gradient(135deg, #8A6010, var(--ag-gold-dark)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(216,155,24,0.55) !important;
  color: var(--ag-white) !important;
}

/* ================================================================
   SECTION 21 — VIEW MORE BUTTON
================================================================ */
.view_more_btn,
a.view_more_btn {
  background: transparent !important;
  background-image: none !important;
  color: var(--ag-green-primary) !important;
  border: 2px solid var(--ag-green-primary) !important;
  border-radius: var(--ag-radius-sm) !important;
  padding: 5px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.28s ease !important;
  text-decoration: none !important;
  float: none !important;
  display: inline-block !important;
  box-shadow: none !important;
}

.view_more_btn:hover,
a.view_more_btn:hover {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
}

/* ================================================================
   SECTION 22 — SUBMIT / LOGIN / REGISTER BUTTON (BTN-6)
================================================================ */
.submit-btn {
  background: linear-gradient(135deg, var(--ag-green-deep) 0%, var(--ag-green-primary) 100%) !important;
  color: var(--ag-white) !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  padding: 11px 0 !important;
  width: 100% !important;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  text-align: center !important;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #0A2A10 0%, var(--ag-green-deep) 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(43,127,50,0.55) !important;
}

.submit-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  ) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.submit-btn:hover::before { left: 150% !important; }

/* ================================================================
   SECTION 23 — ORDER PLACE BUTTON (Checkout CTA — BTN-7)
================================================================ */
.order_place {
  background: linear-gradient(
    90deg,
    var(--ag-green-deep) 0%,
    var(--ag-green-primary) 50%,
    var(--ag-green-leaf) 100%
  ) !important;
  background-size: 200% auto !important;
  color: var(--ag-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 13px 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: background-position 0.5s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease !important;
  box-shadow: 0 5px 20px rgba(43,127,50,0.45) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: agOrderPulse 2.5s ease-in-out infinite !important;
}

.order_place:hover {
  background-position: right center !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(43,127,50,0.60) !important;
  animation: none !important;
  color: var(--ag-white) !important;
}

/* ================================================================
   SECTION 24 — PRODUCT DETAIL PAGE BUTTONS (BTN-2, BTN-3)
   BTN-2: ADD TO CART — Deep Forest Premium
   BTN-3: ORDER NOW — Harvest Gold Premium
================================================================ */

/* ── BTN-2: ADD TO CART — Deep Forest (Midnight Green) ── */
.single_product.d-flex .add_cart_btn {
  background: linear-gradient(
    135deg,
    #0A2A10 0%,
    #133D1A 25%,
    #1E6B30 55%,
    #155A22 80%,
    #0A2A10 100%
  ) !important;
  background-size: 300% 300% !important;
  color: #E8FFE8 !important;
  border: 1px solid rgba(79,174,79,0.25) !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  width: auto !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  box-shadow: 0 4px 20px rgba(24,92,42,0.55),
              inset 0 1px 0 rgba(167,243,208,0.18),
              inset 0 -1px 0 rgba(0,0,0,0.25) !important;
  animation: agAuroraGreen 6s ease infinite !important;
}

/* Crystal shimmer sweep */
.single_product.d-flex .add_cart_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -75% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(167,243,208,0.22) 50%,
    transparent 70%
  ) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.7s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.single_product.d-flex .add_cart_btn:hover::before { left: 130% !important; }

/* Top edge glow line */
.single_product.d-flex .add_cart_btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(167,243,208,0.70), transparent) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.single_product.d-flex .add_cart_btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  border-color: rgba(79,174,79,0.50) !important;
  box-shadow: 0 14px 36px rgba(24,92,42,0.65),
              0 0 0 1px rgba(79,174,79,0.22),
              inset 0 1px 0 rgba(167,243,208,0.25) !important;
  animation: none !important;
}

.single_product.d-flex .add_cart_btn:active {
  transform: translateY(-1px) scale(0.985) !important;
}

/* ── BTN-3: ORDER NOW — Harvest Gold Radiance ── */
.single_product.d-flex .order_now_btn {
  background: linear-gradient(
    135deg,
    #6B4C00 0%,
    #A87510 18%,
    #D89B18 40%,
    #F3C95B 60%,
    #D89B18 80%,
    #7A5500 100%
  ) !important;
  background-size: 280% 280% !important;
  color: #1A3A1A !important;
  border: none !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  width: auto !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease !important;
  animation: agGoldFlare 2.8s ease-in-out infinite !important;
}

/* Lightning sweep */
.single_product.d-flex .order_now_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -80% !important;
  width: 45% !important;
  height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,200,0.35) 50%,
    transparent 75%
  ) !important;
  transform: skewX(-18deg) !important;
  transition: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.single_product.d-flex .order_now_btn:hover::before {
  left: 130% !important;
  transition: left 0.65s ease !important;
}

/* Top glow line */
.single_product.d-flex .order_now_btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  width: 84% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,240,150,0.80), transparent) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.single_product.d-flex .order_now_btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  animation: none !important;
  box-shadow: 0 14px 38px rgba(216,155,24,0.65),
              0 0 0 2px rgba(243,201,91,0.25) !important;
}

.single_product.d-flex .order_now_btn:active {
  transform: translateY(-1px) scale(0.985) !important;
}

.single_product.d-flex .order_now_btn *,
.single_product.d-flex .order_now_btn { color: #1A3A1A !important; }

/* ================================================================
   SECTION 25 — GENERIC PRIMARY / BOOTSTRAP BUTTONS
================================================================ */
.btn-primary,
.button-primary {
  background: var(--ag-green-primary) !important;
  border-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
}

.btn-primary:hover,
.button-primary:hover {
  background: var(--ag-green-deep) !important;
  border-color: var(--ag-green-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(43,127,50,0.50) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--ag-green-deep), var(--ag-green-primary)) !important;
  border-color: var(--ag-green-deep) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #0A2A10, var(--ag-green-deep)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(43,127,50,0.50) !important;
}

button[type="submit"].btn,
input[type="submit"].btn {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-color: var(--ag-green-primary) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  transition: all 0.28s ease !important;
  box-shadow: 0 3px 10px rgba(43,127,50,0.28) !important;
}

button[type="submit"].btn:hover,
input[type="submit"].btn:hover {
  background: var(--ag-green-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(43,127,50,0.42) !important;
}

/* Checkout button */
.checkout-btn {
  background: var(--ag-green-deep) !important;
  border: 2px solid var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

.checkout-btn:hover {
  background: var(--ag-green-primary) !important;
  box-shadow: 0 0 0 3px rgba(43,127,50,0.25),
              0 8px 20px rgba(43,127,50,0.45) !important;
  transform: translateY(-2px) !important;
}

/* ================================================================
   SECTION 26 — COUNTDOWN TIMER (Hot Deal section)
================================================================ */
.timer_inner .syotimer-cell {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-xs) !important;
  box-shadow: 0 2px 8px rgba(43,127,50,0.35) !important;
  font-weight: 700 !important;
  min-width: 40px !important;
  padding: 8px !important;
}

/* ================================================================
   SECTION 27 — FORMS & INPUTS
================================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  background: var(--ag-white) !important;
  border: 1.5px solid var(--ag-border) !important;
  color: var(--ag-text-body) !important;
  border-radius: var(--ag-radius-sm) !important;
  transition: var(--ag-transition) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ag-green-primary) !important;
  box-shadow: 0 0 0 3px rgba(43,127,50,0.12) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ag-text-muted) !important;
}

/* Auth forms */
.auth-title {
  color: var(--ag-text-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: var(--ag-green-soft-bg) !important;
  border-bottom: 2px solid var(--ag-border-light) !important;
}

.form-content {
  border-radius: var(--ag-radius-lg) !important;
  border: 1px solid var(--ag-border) !important;
  box-shadow: var(--ag-shadow-md) !important;
}

.no-account a,
.register-now a { color: var(--ag-green-primary) !important; font-weight: 600 !important; }

.forget-link { color: var(--ag-green-primary) !important; }

/* Payment radios */
.payment-methods .form-check-input {
  border: 2px solid var(--ag-green-primary) !important;
}

.payment-methods .form-check-input:checked::after {
  background-color: var(--ag-green-primary) !important;
}

.payment-methods .form-check-input:checked {
  border-color: var(--ag-green-primary) !important;
}

.payment-methods .form-check-input:checked + .form-check-label {
  color: var(--ag-green-primary) !important;
  font-weight: 700 !important;
}

/* Coupon form button */
.coupon-form form button {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: 0 var(--ag-radius-sm) var(--ag-radius-sm) 0 !important;
  font-weight: 700 !important;
  transition: var(--ag-transition) !important;
}

.coupon-form form button:hover {
  background: var(--ag-green-deep) !important;
}

/* ================================================================
   SECTION 28 — PRODUCT DETAIL PAGE
================================================================ */
.product-section,
.homeproduct.main-details-page {
  background: var(--ag-white) !important;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}

.details_right {
  border: 1.5px solid var(--ag-border) !important;
  border-radius: var(--ag-radius-md) !important;
  padding: 16px 20px !important;
  background: var(--ag-white) !important;
}

/* Product name on detail page */
.product-cart .name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ag-text-dark) !important;
  line-height: 1.35 !important;
}

/* Price on detail page */
.details-price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ag-text-price) !important;
  margin: 10px 0 !important;
}

.details-price del {
  color: var(--ag-text-muted) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

/* Product code badge */
.product-code p {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-color: var(--ag-green-soft-bg) !important;
}

/* Rating stars on detail page */
.details-ratting-wrapper i {
  color: var(--ag-gold-soft) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.details-ratting-wrapper i.far.fa-star {
  color: var(--ag-border) !important;
}

.all-reviews-button {
  color: var(--ag-green-primary) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* Breadcrumb on detail page */
.breadcrumb ul li a { color: var(--ag-text-muted) !important; }
.breadcrumb ul li span { color: var(--ag-text-muted) !important; }

/* Description nav */
.description-nav-wrapper {
  background: var(--ag-white) !important;
  box-shadow: 0 2px 10px rgba(43,127,50,0.08) !important;
}

.desc-nav-ul li a {
  background: var(--ag-white) !important;
  color: var(--ag-text-body) !important;
  border-radius: var(--ag-radius-sm) !important;
  border: 1px solid var(--ag-border) !important;
  transition: var(--ag-transition) !important;
  box-shadow: var(--ag-shadow-xs) !important;
}

.desc-nav-ul li.active a,
.desc-nav-ul li:hover a {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-color: var(--ag-green-primary) !important;
}

/* Details action area */
.details-action-box .section-head .action .details-action-btn {
  background: var(--ag-green-primary) !important;
  border-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--ag-transition) !important;
}

.details-action-box .section-head .action .details-action-btn:hover {
  background: var(--ag-green-deep) !important;
  border-color: var(--ag-green-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ag-shadow-green-btn) !important;
}

/* Review cards */
.review-card {
  background: var(--ag-green-soft-bg) !important;
  border-left: 3px solid var(--ag-green-leaf) !important;
  border-radius: var(--ag-radius-sm) !important;
  padding: 15px !important;
  margin: 10px 0 !important;
}

.review_star {
  color: var(--ag-gold-soft) !important;
}

.details-action-box .empty-content i {
  background: rgba(43,127,50,0.12) !important;
  color: var(--ag-green-primary) !important;
}

/* Shipping info box */
.del_charge_area .alert-info {
  background: var(--ag-green-soft-bg) !important;
  border-color: var(--ag-border) !important;
  color: var(--ag-text-body) !important;
  border-radius: var(--ag-radius-sm) !important;
}

/* Quantity controls */
.qty-cart .quantity {
  border: 1.5px solid var(--ag-green-primary) !important;
  border-radius: var(--ag-radius-sm) !important;
  overflow: hidden !important;
}

.quantity .minus,
.quantity .plus {
  color: var(--ag-green-primary) !important;
  border-color: var(--ag-border) !important;
  font-weight: 700 !important;
  transition: var(--ag-transition) !important;
}

.quantity .minus:hover,
.quantity .plus:hover {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
}

/* Size/Color selectors */
.selector-item_radio:checked + .selector-item_label,
.selector-item_label:hover {
  background-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-color: var(--ag-green-primary) !important;
}

.subcategory-filter-label input {
  border: 2px solid var(--ag-green-primary) !important;
}

.subcategory-filter-label input[type=checkbox]:checked {
  background-color: var(--ag-green-primary) !important;
}

.subcategory-filter-label:hover {
  background-color: var(--ag-green-soft-bg) !important;
}

/* ================================================================
   SECTION 29 — CART PAGE
================================================================ */
.vcart-inner {
  background: var(--ag-green-soft-bg) !important;
  border-radius: var(--ag-radius-md) !important;
  padding: 20px 25px !important;
}

.cart-title h4 {
  color: var(--ag-text-dark) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--ag-border-light) !important;
  padding-bottom: 10px !important;
}

.vcart-content table th {
  color: var(--ag-green-deep) !important;
  font-weight: 700 !important;
  border-color: var(--ag-border) !important;
}

.vcart-content table td {
  color: var(--ag-text-body) !important;
  border-color: var(--ag-border-light) !important;
}

.cart-summary {
  background: var(--ag-green-soft-bg) !important;
  border-radius: var(--ag-radius-md) !important;
  border: 1px solid var(--ag-border) !important;
  padding: 15px !important;
}

.cart-summary h5 {
  color: var(--ag-text-dark) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--ag-border) !important;
  text-transform: uppercase !important;
}

.cart-summary table td {
  color: var(--ag-text-body) !important;
  border-color: var(--ag-border-light) !important;
}

.remove-cart,
.remove-cart:focus {
  background: var(--ag-error, #DC2626) !important;
  border-radius: 50% !important;
}

.wcart-btn,
.wcart-btn:focus {
  background: var(--ag-green-primary) !important;
  border-radius: 50% !important;
}

/* ================================================================
   SECTION 30 — CHECKOUT PAGE
================================================================ */
.checkout-shipping .card-header,
.cart_details .card-header {
  background: var(--ag-green-soft-bg) !important;
  border-bottom: 1px solid var(--ag-border) !important;
}

.checkout-shipping h5,
.cart_details h5 { color: var(--ag-text-dark) !important; }

.checkout-shipping h6 { color: var(--ag-green-primary) !important; }

/* Price row totals */
td.tfoot_bg {
  background: var(--ag-green-soft-bg) !important;
}

/* ================================================================
   SECTION 31 — CUSTOMER ACCOUNT / SIDEBAR
================================================================ */
.customer-sidebar,
.sidebar-menu {
  background: var(--ag-white) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius-md) !important;
  box-shadow: var(--ag-shadow-sm) !important;
}

.sidebar-menu li a {
  color: var(--ag-text-body) !important;
  border-bottom: 1px solid var(--ag-border-light) !important;
  transition: var(--ag-transition) !important;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
  color: var(--ag-green-primary) !important;
  background: var(--ag-green-soft-bg) !important;
  padding-left: 20px !important;
  border-left: 3px solid var(--ag-green-primary) !important;
}

.account-title {
  color: var(--ag-text-dark) !important;
  border-bottom: 2px solid var(--ag-green-primary) !important;
  font-weight: 700 !important;
}

.invoice_btn,
.invoice_btn:focus {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
}

/* ================================================================
   SECTION 32 — TRACKING TABLE
================================================================ */
.tracktable thead {
  background: var(--ag-green-primary) !important;
}

.tracktable thead * { color: var(--ag-white) !important; }

.table td,
.table th {
  color: var(--ag-text-body) !important;
  border-color: var(--ag-border-light) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(43,127,50,0.03) !important;
}

/* ================================================================
   SECTION 33 — FILTER BUTTONS
================================================================ */
.filter_btn {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  border: none !important;
}

.filter_close {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
}

/* Sidebar accordion header */
.sidebar_item h2.accordion-header button.accordion-button {
  background-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  font-weight: 700 !important;
}

.ui-slider-horizontal .ui-slider-range {
  background-color: var(--ag-green-primary) !important;
}

/* ================================================================
   SECTION 34 — BREADCRUMB
================================================================ */
.category-breadcrumb a {
  color: var(--ag-text-secondary) !important;
  font-weight: 500 !important;
  transition: var(--ag-transition) !important;
}

.category-breadcrumb a:hover { color: var(--ag-green-primary) !important; }

.category-breadcrumb span,
.category-breadcrumb strong { color: var(--ag-text-secondary) !important; }

.custom-breadcrumb ul li a { color: var(--ag-text-secondary) !important; }
.custom-breadcrumb ul li a:hover { color: var(--ag-green-primary) !important; }

/* Breadcrumb section */
.breadcrumb-section {
  background: var(--ag-green-soft-bg) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--ag-border-light) !important;
}

/* ================================================================
   SECTION 35 — PAGINATION
================================================================ */
.pagination .page-item.active .page-link {
  background: var(--ag-green-primary) !important;
  border-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
}

.pagination .page-link {
  color: var(--ag-green-primary) !important;
  border-color: var(--ag-border) !important;
  border-radius: var(--ag-radius-sm) !important;
  transition: var(--ag-transition) !important;
}

.pagination .page-link:hover {
  background: var(--ag-green-soft-bg) !important;
  color: var(--ag-green-primary) !important;
}

/* ================================================================
   SECTION 36 — CONTACT PAGE
================================================================ */
.contact-form {
  background: var(--ag-green-soft-bg) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius-md) !important;
}

/* ================================================================
   SECTION 37 — TOASTR NOTIFICATIONS
================================================================ */
#toast-container > div {
  border-radius: var(--ag-radius-md) !important;
  box-shadow: var(--ag-shadow-lg) !important;
}

#toast-container > .toast-success { background-color: rgba(21,128,61,0.96) !important; }
#toast-container > .toast-error { background-color: rgba(220,38,38,0.96) !important; }
#toast-container > .toast-warning { background-color: rgba(216,155,24,0.96) !important; }
#toast-container > .toast-info { background-color: rgba(43,127,50,0.96) !important; }

/* ================================================================
   SECTION 38 — MODALS
================================================================ */
.modal-view {
  border-radius: var(--ag-radius-lg) !important;
  box-shadow: var(--ag-shadow-lg) !important;
  border: 1px solid var(--ag-border) !important;
}

.close-modal {
  background: var(--ag-error, #DC2626) !important;
  color: var(--ag-white) !important;
  border-radius: 50% !important;
}

/* Continue / Confirm buttons in modal */
.confirm-btn {
  background: var(--ag-green-primary) !important;
  border-radius: var(--ag-radius-sm) !important;
  transition: var(--ag-transition) !important;
  color: var(--ag-white) !important;
}

.confirm-btn:hover {
  background: var(--ag-green-deep) !important;
  color: var(--ag-white) !important;
}

.continue-btn:hover {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
}

/* ================================================================
   SECTION 39 — BADGES & ALERTS
================================================================ */
.badge { font-weight: 600 !important; border-radius: var(--ag-radius-pill) !important; }
.badge-success, .bg-success { background: var(--ag-success, #15803D) !important; }
.badge-danger, .bg-danger { background: var(--ag-error, #DC2626) !important; }
.badge-primary, .bg-primary { background: var(--ag-green-primary) !important; }

.alert-success {
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
  color: #166534 !important;
  border-radius: var(--ag-radius-md) !important;
}

.alert-info {
  background: rgba(43,127,50,0.05) !important;
  border-color: rgba(43,127,50,0.20) !important;
  color: var(--ag-green-deep) !important;
}

.progress-bar { background: var(--ag-green-primary) !important; }

/* ================================================================
   SECTION 40 — STARS (global)
================================================================ */
.fas.fa-star,
.fas.fa-star-half-alt {
  color: var(--ag-gold-soft) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.far.fa-star {
  color: var(--ag-border) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* ================================================================
   SECTION 41 — FOOTER
   Deep forest green (replaces existing dark/black)
================================================================ */
footer,
.footer-top,
.footer-bottom,
.main-footer,
body footer,
body .footer-top,
body .footer-bottom {
  background: var(--ag-green-forest) !important;
  background-color: var(--ag-green-forest) !important;
  background-image: none !important;
}

.footer-top {
  padding: 52px 0 36px !important;
  border-top: 3px solid var(--ag-green-primary) !important;
}

.footer-top *,
.footer-bottom *,
footer * {
  color: rgba(255,255,255,0.82) !important;
}

.footer-about p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  margin-top: 12px !important;
}

/* Footer hotline */
.footer-hotlint {
  color: var(--ag-gold-harvest) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: var(--ag-transition) !important;
}

.footer-hotlint:hover { color: var(--ag-white) !important; }

/* Footer section titles */
.footer-menu ul li.title a {
  color: var(--ag-gold-harvest) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  border: none !important;
  border-bottom: 2px solid rgba(216,155,24,0.30) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* Footer links */
.footer-menu ul li a {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13.5px !important;
  transition: var(--ag-transition) !important;
  line-height: 2 !important;
}

.footer-menu ul li a:hover {
  color: var(--ag-gold-harvest) !important;
  padding-left: 6px !important;
}

/* ── Footer Social Icons — Rounded Square Box Style ── */
ul.social_link {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 0 !important;
}

ul.social_link li {
  display: inline-flex !important;
  list-style: none !important;
  margin: 0 !important;
}

.social_link li a {
  /* Rounded square — NOT circle */
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;

  /* Glassmorphism dark green base */
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(79,174,79,0.25) !important;
  color: rgba(255,255,255,0.82) !important;

  /* Shadow */
  box-shadow: 0 2px 8px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.08) !important;

  /* Transition */
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Subtle top gloss line */
.social_link li a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  ) !important;
  pointer-events: none !important;
}

/* Shine sweep on hover */
.social_link li a::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  ) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
}

.social_link li a:hover::after {
  left: 130% !important;
}

/* Icon inside */
.social_link li a i {
  font-size: 15px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  color: rgba(255,255,255,0.82) !important;
}

/* Hover state — green fill */
.social_link li a:hover {
  background: var(--ag-green-primary) !important;
  border-color: var(--ag-green-leaf) !important;
  color: var(--ag-white) !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(43,127,50,0.50),
              0 0 0 2px rgba(79,174,79,0.22),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.social_link li a:hover i {
  color: var(--ag-white) !important;
  transform: scale(1.15) !important;
}

/* Download app section */
.d_app h2 {
  color: var(--ag-gold-harvest) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* Footer bottom */
.footer-bottom {
  background: #071A09 !important;
  background-color: #071A09 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 16px 0 !important;
}

.copyright p,
.copyright p span {
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  text-align: center !important;
}

.developer-credit-link {
  color: var(--ag-green-leaf) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.developer-credit-link:hover { color: var(--ag-white) !important; }

/* ================================================================
   SECTION 42 — MOBILE BOTTOM NAVIGATION
   Deep forest green theme
================================================================ */
@media (max-width: 767px) {
  .footer_nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #0D2B10 !important;
    border-top: 1px solid var(--ag-green-primary) !important;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.45) !important;
    height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer_nav ul {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-items: center !important;
    list-style: none !important;
  }

  .footer_nav ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer_nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
  }

  .footer_nav ul li a span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* All icons — muted white */
  .footer_nav ul li a span i {
    font-size: 20px !important;
    font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
    display: block !important;
    line-height: 1 !important;
    color: rgba(255,255,255,0.55) !important;
    transition: color 0.2s ease !important;
  }

  .footer_nav ul li a span svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2px !important;
    display: block !important;
    stroke: rgba(255,255,255,0.55) !important;
    transition: stroke 0.2s ease !important;
  }

  /* All labels — muted */
  .footer_nav ul li a span:last-child {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: capitalize !important;
    line-height: 1 !important;
    color: rgba(255,255,255,0.45) !important;
    transition: color 0.2s ease !important;
  }

  .footer_nav ul li a::after { display: none !important; }

  /* Hover — gold accent */
  .footer_nav ul li a:hover {
    background: rgba(216,155,24,0.12) !important;
    border-color: rgba(216,155,24,0.28) !important;
  }

  .footer_nav ul li a:hover span i { color: var(--ag-gold-harvest) !important; }
  .footer_nav ul li a:hover span svg { stroke: var(--ag-gold-harvest) !important; }
  .footer_nav ul li a:hover span:last-child { color: var(--ag-gold-harvest) !important; }

  /* HOME tab (3rd) — elevated gold center button */
  .footer_nav ul li:nth-child(3) a {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    margin-top: 0 !important;
    background: var(--ag-gold-harvest) !important;
    border: 1.5px solid rgba(255,220,120,0.35) !important;
    box-shadow: 0 4px 18px rgba(216,155,24,0.50),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
  }

  .footer_nav ul li:nth-child(3) a span i {
    color: var(--ag-white) !important;
    font-size: 22px !important;
  }

  .footer_nav ul li:nth-child(3) a span:last-child {
    color: rgba(255,255,255,0.92) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
  }

  .footer_nav ul li:nth-child(3) a:hover {
    background: var(--ag-gold-dark) !important;
    box-shadow: 0 6px 22px rgba(216,155,24,0.65),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
    border-color: rgba(255,220,120,0.55) !important;
  }

  /* Cart badge */
  .footer_nav .mobilecart-qty {
    position: absolute !important;
    top: -4px !important;
    right: -3px !important;
    background: var(--ag-gold-harvest) !important;
    color: #0D2B10 !important;
    border-radius: 50% !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #0D2B10 !important;
    z-index: 10 !important;
  }

  /* Home item layout reset */
  li.mobile_home {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
}

/* ================================================================
   SECTION 43 — WHATSAPP FLOATING BUTTON
================================================================ */
.float {
  background: #25D366 !important;
  box-shadow: 0 4px 18px rgba(37,211,102,0.42) !important;
  border: none !important;
  transition: var(--ag-transition) !important;
  animation: agFloatBob 3s ease-in-out infinite !important;
}

.float:hover {
  background: #20BA5A !important;
  animation: none !important;
  transform: scale(1.12) !important;
  box-shadow: 0 8px 24px rgba(37,211,102,0.55) !important;
}

/* ================================================================
   SECTION 44 — SCROLL TO TOP
================================================================ */
.scrolltop {
  background: var(--ag-green-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(43,127,50,0.45) !important;
  transition: var(--ag-transition) !important;
}

.scrolltop:hover {
  background: var(--ag-green-deep) !important;
  transform: scale(1.08) !important;
}

.scrolltop .scroll i {
  color: var(--ag-white) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* ================================================================
   SECTION 45 — LOADING SPINNER
================================================================ */
.custom-loader {
  --c: radial-gradient(farthest-side, var(--ag-green-primary) 92%, #0000);
}

/* ================================================================
   SECTION 46 — FOOTER TOP ADS AREA
================================================================ */
.footer_top_ads_area {
  background: var(--ag-white) !important;
  margin-bottom: 10px !important;
  padding: 20px 0 !important;
}

.footertop_ads_item {
  border-radius: var(--ag-radius-sm) !important;
  overflow: hidden !important;
  transition: var(--ag-transition) !important;
}

.footertop_ads_item:hover { transform: translateY(-3px) !important; }

/* ================================================================
   SECTION 47 — RELATED PRODUCT SECTION
================================================================ */
section.related-product-section {
  background: var(--ag-white) !important;
  margin-top: 15px !important;
  padding-top: 10px !important;
  margin-bottom: 10px !important;
}

.related-title h5 {
  font-weight: 700 !important;
  color: var(--ag-text-dark) !important;
  font-size: 18px !important;
  border-bottom: 3px solid var(--ag-green-primary) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}

/* ================================================================
   SECTION 48 — DESCRIPTION AREA
================================================================ */
section.pro_details_area {
  background: var(--ag-white) !important;
  padding: 25px 0 !important;
}

.description {
  background: var(--ag-green-soft-bg) !important;
  border-left: 4px solid var(--ag-green-primary) !important;
  border-radius: 0 var(--ag-radius-sm) var(--ag-radius-sm) 0 !important;
  padding: 20px !important;
}

.description h2 {
  font-size: 18px !important;
  color: var(--ag-text-dark) !important;
  border-bottom: 2px solid var(--ag-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 15px !important;
}

.tab-content.details-action-box {
  background: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  box-shadow: var(--ag-shadow-xs) !important;
}

/* Review form */
button.details-review-button {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  transition: var(--ag-transition) !important;
}

button.details-review-button:hover {
  background: var(--ag-green-deep) !important;
  transform: translateY(-1px) !important;
}

.customer-login-redirect {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-sm) !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  transition: var(--ag-transition) !important;
}

textarea#message-text {
  border: 2px solid var(--ag-green-primary) !important;
  border-radius: var(--ag-radius-sm) !important;
}

/* ================================================================
   SECTION 49 — CAMPAIGN SECTION
================================================================ */
.campaign-item a {
  border-radius: var(--ag-radius-md) !important;
  overflow: hidden !important;
}

/* ================================================================
   SECTION 50 — ORDER SUCCESS PAGE
================================================================ */
.success-title h2 { color: var(--ag-text-dark) !important; }

.success-table {
  background: var(--ag-green-soft-bg) !important;
  border-radius: var(--ag-radius-md) !important;
  border: 1px solid var(--ag-border) !important;
}

/* ================================================================
   SECTION 51 — HOMEPAGE CUSTOMER REVIEW SECTION
================================================================ */
.homeproduct .sec_title h5 {
  background: linear-gradient(135deg, var(--ag-green-deep), var(--ag-green-primary)) !important;
  color: var(--ag-white) !important;
  border-radius: var(--ag-radius-xs) !important;
  padding: 10px 20px !important;
}

/* ================================================================
   SECTION 52 — ACCESSIBILITY — FOCUS STATES
================================================================ */
:focus-visible {
  outline: 3px solid var(--ag-green-leaf) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ag-green-leaf) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(79,174,79,0.15) !important;
}

/* ================================================================
   SECTION 53 — KEYFRAME ANIMATIONS
================================================================ */

/* Green gradient background shift */
@keyframes agGreenShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gold gradient flare for Order Now */
@keyframes agGoldFlare {
  0%   { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(216,155,24,0.42); }
  50%  { background-position: 100% 50%;
         box-shadow: 0 4px 32px rgba(216,155,24,0.68),
                     0 0 0 3px rgba(243,201,91,0.14); }
  100% { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(216,155,24,0.42); }
}

/* Green glow pulse */
@keyframes agGreenGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(43,127,50,0.35); }
  50%       { box-shadow: 0 4px 28px rgba(43,127,50,0.65),
                          0 0 0 4px rgba(43,127,50,0.12); }
}

/* Aurora drift for Add to Cart detail button */
@keyframes agAuroraGreen {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* Order place pulse */
@keyframes agOrderPulse {
  0%, 100% { box-shadow: 0 5px 20px rgba(43,127,50,0.45); }
  50%       { box-shadow: 0 5px 30px rgba(43,127,50,0.72),
                          0 0 0 4px rgba(43,127,50,0.15); }
}

/* Float bob (WhatsApp button) */
@keyframes agFloatBob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* Fade up card reveal */
@keyframes agFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply fade up to cards */
.product_item,
.cat_item,
.homeproduct .row > * {
  animation: agFadeUp 0.4s ease both;
}

/* Float button animation */
.float { animation: agFloatBob 3s ease-in-out infinite !important; }
.float:hover { animation: none !important; transform: scale(1.12) !important; }

/* Mobile menu slide in */
@keyframes agSlideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.mobile-menu.active { animation: agSlideInLeft 0.3s ease both; }

/* ================================================================
   SECTION 54 — PREFERS REDUCED MOTION (accessibility)
================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton { animation: agGreenShift 5s ease infinite; }

  .go_cart { animation: agGreenGlow 2.8s ease-in-out infinite; }

  .order_place { animation: agOrderPulse 2.5s ease-in-out infinite; }

  .single_product.d-flex .add_cart_btn { animation: agAuroraGreen 6s ease infinite; }

  .single_product.d-flex .order_now_btn { animation: agGoldFlare 2.8s ease-in-out infinite; }

  .float { animation: agFloatBob 3s ease-in-out infinite !important; }
}

/* ================================================================
   SECTION 55 — RESPONSIVE RULES (mobile dimensions preserved)
================================================================ */
@media (max-width: 767px) {
  body { padding-bottom: 78px !important; }

  /* Preserve existing mobile product image height */
  .pro_img { height: 150px !important; }
  .pro_price p { font-size: 14px !important; }
  .pro_name { height: 44px !important; }
  .pro_name a { font-size: 12.5px !important; }

  /* Category card mobile */
  .cat_img { height: 60px !important; width: 60px !important; }
  .cat_item { height: 110px !important; padding: 8px 4px !important; }
  .cat_name a { font-size: 11px !important; }

  /* Section title mobile */
  .section-title-name { font-size: 14px !important; }

  /* Footer adjustments */
  .footer-bottom { padding-bottom: 84px !important; margin-bottom: 0 !important; }
  .footer-top { padding: 30px 0 28px !important; }

  /* Search bar mobile */
  .mobile-search form { border-radius: 24px !important; }
  .mobile-search form button { border-radius: 0 24px 24px 0 !important; }

  /* Logo height mobile */
  .menu-logo img { height: 44px !important; }

  /* Content padding mobile */
  #content { padding-top: 163px !important; }

  /* Scroll to top — hide on mobile */
  .scrolltop { bottom: 84px !important; display: none !important; }

  /* Detail page buttons mobile */
  .single_product.d-flex .add_cart_btn,
  .single_product.d-flex .order_now_btn {
    height: 46px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 575px) {
  #content { padding-top: 193px !important; }
}

@media (min-width: 768px) {
  .footer_nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cat_item { height: 120px !important; }
  .pro_img { height: 170px !important; }
}

@media (min-width: 992px) {
  .product_item:hover { transform: translateY(-7px) !important; }
  .cat_item { height: 135px !important; }
  .pro_img { height: 190px !important; }
}

/* ================================================================
   SECTION 56 — FINAL OVERRIDES
   Strip any remaining blue (#2563EB) or purple bleed from main.css
================================================================ */

/* Legacy token override — maps to agriculture colors */
:root {
  --purple-dark:          var(--ag-green-deep) !important;
  --purple-main:          var(--ag-green-primary) !important;
  --purple-accent:        var(--ag-green-leaf) !important;
  --purple-light:         rgba(43,127,50,0.25) !important;
  --purple-soft-bg:       rgba(43,127,50,0.06) !important;
  --purple-gradient:      linear-gradient(135deg, var(--ag-green-deep) 0%, var(--ag-green-primary) 100%) !important;
  --purple-gradient-rev:  linear-gradient(135deg, var(--ag-green-primary) 0%, var(--ag-green-deep) 100%) !important;
  --purple-glow:          rgba(43,127,50,0.25) !important;
  --purple-glow-sm:       rgba(43,127,50,0.12) !important;
  --body-bg:              var(--ag-bg) !important;
  --card-bg:              var(--ag-white) !important;
  --text-primary:         var(--ag-text-body) !important;
  --text-muted:           var(--ag-text-muted) !important;
  --text-price:           var(--ag-text-price) !important;
  --border-light:         var(--ag-border-light) !important;
  --shadow-card:          var(--ag-shadow-sm) !important;
  --shadow-hover:         var(--ag-shadow-hover) !important;
  --radius-card:          var(--ag-radius-md) !important;
  --radius-btn:           var(--ag-radius-sm) !important;
  --dark-footer:          var(--ag-green-forest) !important;
  --nav-bg:               var(--ag-green-deep) !important;
}

/* ── Make the .side__bar use .show_menu class for hover trigger (JS-driven) ── */
/* These rules preserve the existing JS-driven sidebar show/hide behavior      */
/* while keeping the sidebar's existing dark navy appearance UNTOUCHED          */

/* Page overlay — theme color */
#page-overlay { background: rgba(13,43,16,0.60) !important; }

/* Remove border on bottom of logo area (prevent double-line with ::after) */
.logo-area { border-bottom: none !important; }

/* Ensure header icons use ag-text colors */
.header-list-items ul li p { color: var(--ag-text-body) !important; }

/* Active nav link highlight */
.heder__category > li > a.active,
.heder__category > li.active > a {
  background: rgba(255,255,255,0.15) !important;
  color: var(--ag-white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* ── Product detail page: non .single_product context add_cart_btn ── */
.add_cart_btn:not(.single_product .add_cart_btn) {
  background: var(--ag-green-primary) !important;
  border-color: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
}

.add_cart_btn:not(.single_product .add_cart_btn):hover {
  background: var(--ag-green-deep) !important;
  border-color: var(--ag-green-deep) !important;
  color: var(--ag-white) !important;
}

/* ── Mobile hotline bar override ── */
.d-flex.d-sm-none.align-items-center.justify-content-center {
  background: var(--ag-green-primary) !important;
  background-color: var(--ag-green-primary) !important;
}

/* ── Sidebar subcategory filter hover ── */
.sidebar-menu ul li:hover > a {
  background-color: var(--ag-green-soft-bg) !important;
  color: var(--ag-green-primary) !important;
}

/* ── Order status/wishlist btn ── */
.order_now_btn:not(.single_product .order_now_btn) {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
}

/* ── Cart quantity buttons ── */
.vcart-qty .quantity .minus,
.vcart-qty .quantity .plus {
  color: var(--ag-green-primary) !important;
  border-color: var(--ag-border) !important;
  font-weight: 700 !important;
  transition: var(--ag-transition) !important;
}

.vcart-qty .quantity .minus:hover,
.vcart-qty .quantity .plus:hover {
  background: var(--ag-green-primary) !important;
  color: var(--ag-white) !important;
}

/* ── Hot deals section background ── */
.homeproduct:has(.syotimer) {
  background: var(--ag-cream) !important;
}

/* ── Category page main product grid background ── */
section.product-section {
  background: var(--ag-white) !important;
  padding: 20px 0 !important;
  margin-bottom: 10px !important;
}

/* ── Section titles for breadcrumb sections ── */
.vcart-section { margin-top: 60px !important; }

/* ── Prevent accidental horizontal scroll ── */
body { overflow-x: hidden !important; }

/* ═══════════════════════════════════════════════════════════════
   END OF AGRICULTURE THEME
   File: agriculture-theme.css
   Total Sections: 56
   Status: COMPLETE
═══════════════════════════════════════════════════════════════ */


/* ================================================================
   SECTION 57 — CATEGORY DROPDOWN COLOR UPDATE
   Category Panel (.side__bar)     → Deep Forest Green
   Subcategory Panel (.side__barsub) → Medium Forest Green
   Child Category (.side__barchild)  → UNTOUCHED (already correct dark green)

   Uses maximum specificity to override main.css !important declarations
   Hover accent border & text colors updated to match agriculture theme
================================================================ */

/* ── Keyframe: green shimmer sweep on hover row ── */
@keyframes agSidebarRowGlow {
  from { background-position: 200% center; }
  to   { background-position: 0% center; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEVEL 1 — CATEGORY (.side__bar)
   Dark Navy #0f1729 → Deep Forest Green #0D2B10
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container background */
.side__bar,
body .side__bar,
body div.side__bar,
li.all__category__list .side__bar,
.all__category__list .side__bar,
.sidebar-menu .side__bar {
  background: #0D2B10 !important;
  background-color: #0D2B10 !important;
  border-top: 3px solid #2B7F32 !important;
  border-radius: 0 0 var(--ag-radius-md, 10px) var(--ag-radius-md, 10px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.50),
              0 4px 16px rgba(0,0,0,0.30) !important;
  border-left: 1px solid rgba(79,174,79,0.12) !important;
  border-right: 1px solid rgba(79,174,79,0.12) !important;
  border-bottom: 1px solid rgba(79,174,79,0.12) !important;
  overflow: visible !important;
}

/* All text inside .side__bar — white */
.side__bar,
.side__bar *,
.side__bar ul,
.side__bar ul li,
.side__bar ul li a,
.side__bar ul li a span,
.side__bar ul li a img + span,
.side__bar ul li a i,
body .side__bar ul li a,
body .side__bar ul li a span,
body div.side__bar ul li a,
.all__category__list .side__bar ul li a,
li.all__category__list .side__bar ul li a {
  color: #e8f5e8 !important;
  background-color: transparent !important;
}

/* List item backgrounds */
.side__bar ul li {
  background: transparent !important;
  transition: all 0.22s ease !important;
}

/* Hover row — green left border + subtle green bg */
.side__bar ul li:hover,
body .side__bar ul li:hover {
  background: rgba(43,127,50,0.18) !important;
}

.side__bar ul li:hover > a,
body .side__bar ul li:hover > a {
  color: #ffffff !important;
  background: transparent !important;
  padding-left: 22px !important;
  border-left: 3px solid #4FAE4F !important;
}

/* Chevron arrow icon — green accent on hover */
.side__bar ul li a i,
.side__bar ul li a .fa-chevron-right {
  color: rgba(255,255,255,0.40) !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.side__bar ul li:hover > a i,
.side__bar ul li:hover > a .fa-chevron-right {
  color: #4FAE4F !important;
  transform: translateX(3px) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEVEL 2 — SUBCATEGORY (.side__barsub)
   Steel Blue #1e3a5f → Medium Forest Green #1A4C22
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container background */
.side__barsub,
body .side__barsub,
.all__category__list .side__barsub,
.sidebar-menu .side__barsub,
li.all__category__list .side__barsub {
  background: #1A4C22 !important;
  background-color: #1A4C22 !important;
  border-left: 3px solid #4FAE4F !important;
  border-top: 2px solid #4FAE4F !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.45) !important;
  min-width: 230px !important;
}

/* All text inside .side__barsub — light green tint */
.side__barsub,
.side__barsub *,
body .side__barsub ul li a,
body .side__barsub ul li a span,
body div .side__barsub ul li a,
.side__barsub ul li a,
.side__barsub li a,
.all__category__list .side__barsub ul li a,
.sidebar-menu .side__barsub ul li a,
body .side__barsub li a {
  color: #d4edda !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* List items */
.side__barsub ul li {
  background: transparent !important;
  transition: all 0.18s ease !important;
}

/* Hover row — brighter green */
.side__barsub ul li:hover {
  background: rgba(79,174,79,0.18) !important;
}

.side__barsub ul li:hover > a,
body .side__barsub ul li:hover > a {
  color: #ffffff !important;
  padding-left: 20px !important;
  border-left: 3px solid #6DC76D !important;
  background: transparent !important;
}

/* Chevron icon in subcategory */
.side__barsub ul li a i {
  color: rgba(79,174,79,0.65) !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.side__barsub ul li:hover > a i {
  color: #6DC76D !important;
  transform: translateX(3px) !important;
}

/* Divider lines inside subcategory */
.side__barsub ul li a {
  border-bottom: 1px solid rgba(79,174,79,0.15) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEVEL 3 — CHILD CATEGORY (.side__barchild)
   Already correct (#1a3d2b dark green) — NOT TOUCHED
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Intentionally empty — .side__barchild is already dark green ✓ */