/* =====================================================
   iPhone Website — Official Brand Theme
   Primary Green : #16A34A
   Dark          : #171717
   White         : #FFFFFF
   Light BG      : #F5F5F5
   Sales Accent  : #F97316
   ===================================================== */

/* =========== GOOGLE FONTS =========== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* =========== DESIGN TOKENS =========== */
:root {
  --brand-green:        #16A34A;
  --brand-green-dark:   #15803D;
  --brand-green-light:  #22C55E;
  --brand-dark:         #171717;
  --brand-white:        #FFFFFF;
  --brand-bg:           #F5F5F5;
  --brand-orange:       #F97316;
  --brand-orange-dark:  #EA6C0A;
  --brand-card:         #FFFFFF;
  --brand-text:         #171717;
  --brand-text-muted:   #6B7280;
  --brand-border:       #E5E7EB;
  --brand-shadow-sm:    0 1px 3px rgba(22,163,74,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --brand-shadow-md:    0 4px 16px rgba(22,163,74,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --brand-shadow-lg:    0 8px 32px rgba(22,163,74,0.16), 0 4px 12px rgba(0,0,0,0.08);
  --brand-shadow-hover: 0 12px 40px rgba(22,163,74,0.20), 0 6px 16px rgba(0,0,0,0.08);
  --brand-radius-sm:    6px;
  --brand-radius-md:    10px;
  --brand-radius-lg:    16px;
  --brand-transition:   all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --brand-green-rgb:    22, 163, 74;
  --brand-orange-rgb:   249, 115, 22;
}

/* =========== ICON FONT PROTECTION =========== */
.fa, .fas, .far, .fab, .fal, .fad,
.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, svg * { font-family: inherit !important; }
svg[data-feather] { fill: none !important; stroke: currentColor !important; }

/* =========== GLOBAL BODY & FONTS =========== */
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: "Inter","Plus Jakarta Sans","Hind Siliguri",sans-serif !important;
  box-sizing: border-box;
}
body {
  background: var(--brand-bg) !important;
  color: var(--brand-text) !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(--brand-text) !important;
}
a { transition: var(--brand-transition); }

/* =========== TOP ANNOUNCEMENT BAR =========== */
.top_header {
  background: var(--brand-dark) !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.top_header, .top_header p, .top_header span,
.top_header a, .top_header div, .top_header marquee {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.top_header a[href^="tel"] {
  background: rgba(22,163,74,0.2) !important;
  border: 1px solid rgba(22,163,74,0.5) !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* =========== DESKTOP HEADER =========== */
.main-header, .logo-area {
  background: var(--brand-white) !important;
  border-bottom: 1px solid var(--brand-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  position: relative !important;
}
.main-header::after, .logo-area::after {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-green-dark), var(--brand-green), var(--brand-green-light)) !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
}
.main-header *, .logo-area * { color: var(--brand-text) !important; }

/* =========== MOBILE HEADER =========== */
.mobile-header {
  background: var(--brand-white) !important;
  border-bottom: 2px solid var(--brand-green) !important;
  box-shadow: 0 2px 10px rgba(22,163,74,0.1) !important;
}
.mobile-header * { color: var(--brand-text) !important; }
.menu-bar i, .toggle i {
  color: var(--brand-green) !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(--brand-green) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}
.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--brand-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(249,115,22,0.4) !important;
}

/* =========== SEARCH BAR =========== */
.main-search form, .mobile-search form {
  border: 2px solid var(--brand-green) !important;
  border-radius: var(--brand-radius-md) !important;
  overflow: hidden !important;
  background: var(--brand-white) !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.1) !important;
  transition: var(--brand-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}
.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: var(--brand-green-dark) !important;
  box-shadow: 0 4px 16px rgba(22,163,74,0.2) !important;
}
.search_keyword, .msearch_keyword {
  background: #f9fafb !important;
  border: none !important;
  color: var(--brand-text) !important;
  font-weight: 500 !important;
  padding-left: 16px !important;
  flex: 1 !important;
}
.search_keyword::placeholder, .msearch_keyword::placeholder {
  color: var(--brand-text-muted) !important;
}
.main-search form button, .mobile-search form button {
  background: var(--brand-green) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 46px !important;
  transition: background 0.25s ease !important;
}
.main-search form button:hover, .mobile-search form button:hover {
  background: var(--brand-green-dark) !important;
}
.main-search form button svg, .mobile-search form button svg,
.main-search form button i, .mobile-search form button i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  width: 18px !important; height: 18px !important;
  pointer-events: none !important;
}

/* =========== HEADER ACTION ITEMS =========== */
.header-list-items ul li span {
  background: var(--brand-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.4) !important;
}
.header-list-items svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--brand-green) !important;
  fill: none !important;
}
.header-list-items ul li a:hover i { color: var(--brand-green) !important; }
.cshort-summary {
  border-radius: var(--brand-radius-md) !important;
  box-shadow: var(--brand-shadow-lg) !important;
  border: 1px solid var(--brand-border) !important;
}
.mobile-menu-close i {
  color: rgba(255,255,255,0.9) !important;
  font-size: 20px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* =========== NAVIGATION MENU BAR =========== */
.menu-area {
  background: var(--brand-dark) !important;
  box-shadow: 0 3px 12px rgba(23,23,23,0.25) !important;
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

/* ALL CATEGORIES button */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              0 2px 8px rgba(22,163,74,0.35) !important;
  transition: all 0.28s ease !important;
  animation: none !important;
}
.all__category__list > a:hover,
.all__category__list > a:hover * {
  background: var(--brand-green-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(22,163,74,0.5) !important;
}

/* =====================================================
   NAV MENU LINKS — 2026 Luxury Gold Animation
   Dark nav + gold accent = premium feel
   ===================================================== */

@keyframes navGoldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Base nav links */
.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.85) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 7px 16px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: color 0.3s ease,
              background 0.3s ease,
              border-color 0.3s ease,
              transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
}

/* Gold gradient underline — hidden by default */
.heder__category > li:not(.all__category__list) a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #f59e0b,
    #fbbf24,
    #d97706,
    transparent
  ) !important;
  background-size: 200% 100% !important;
  border-radius: 2px !important;
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  opacity: 0 !important;
}

/* Hover state — gold luxury */
.heder__category > li:not(.all__category__list) a:hover,
.right__menu__top li a:hover,
.right__menu__top li p a:hover {
  color: #fde68a !important;
  background: rgba(212,168,83,0.1) !important;
  border-color: rgba(212,168,83,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.15),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Gold underline animates in on hover */
.heder__category > li:not(.all__category__list) a:hover::after {
  width: 100% !important;
  opacity: 1 !important;
  animation: navGoldShimmer 1.5s linear infinite !important;
}

/* Active press */
.heder__category > li:not(.all__category__list) a:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ── Login / Sign Up — gold bordered pill ── */
.right__menu__top li a {
  border: 1px solid rgba(212,168,83,0.35) !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  background: rgba(212,168,83,0.06) !important;
}
.right__menu__top li a:hover {
  background: rgba(212,168,83,0.18) !important;
  border-color: rgba(253,230,138,0.7) !important;
  color: #fde68a !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4px 18px rgba(212,168,83,0.25),
              0 0 0 3px rgba(212,168,83,0.08) !important;
}
.right__menu__top li a i {
  color: #fbbf24 !important;
  font-size: 13px !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}
.right__menu__top li a:hover i {
  color: #fde68a !important;
  transform: scale(1.15) rotate(-5deg) !important;
}

/* =========== CATEGORY DROPDOWN SIDEBAR =========== */
.side__bar {
  /* Deep warm indigo-slate — unique, premium, universally loved */
  background: #1e1b2e !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6),
              0 4px 20px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 3px solid var(--brand-green) !important;
  overflow: visible !important;
}
/* Only child elements get transparent bg — NOT .side__bar itself */
.side__bar ul,
.side__bar ul li,
.side__bar ul li a,
.side__bar ul li a span {
  color: #e8e4f0 !important;
  background-color: transparent !important;
}
.side__bar ul li a i {
  background-color: transparent !important;
}
.side__bar ul li {
  background: transparent !important;
  transition: all 0.2s ease !important;
}
.side__bar ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #d4cfe8 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  text-decoration: none !important;
}
.side__bar ul li a img {
  width: 22px !important; height: 22px !important;
  object-fit: contain !important; border-radius: 4px !important;
  flex-shrink: 0 !important;
  filter: brightness(1.1) !important;
}
.side__bar ul li a i,
.side__bar ul li a .fa-chevron-right {
  color: rgba(255,255,255,0.35) !important;
  font-size: 11px !important;
  margin-left: auto !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  background: transparent !important;
}
/* Hover — soft violet-green glow */
.side__bar ul li:hover {
  background: rgba(167,139,250,0.1) !important;
}
.side__bar ul li:hover > a {
  color: #ffffff !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--brand-green) !important;
  background: transparent !important;
}
.side__bar ul li:hover > a i,
.side__bar ul li:hover > a .fa-chevron-right {
  color: var(--brand-green-light) !important;
  transform: translateX(3px) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   Sub-menu Level 2 — SUBCATEGORIES
   Deep Royal Blue — clear, readable, premium
   ═══════════════════════════════════════════ */
.side__barsub {
  background: #0f2044 !important;
  border-left: 3px solid #60a5fa !important;
  border-top: 2px solid #3b82f6 !important;
  box-shadow: 8px 0 32px rgba(0,0,0,0.55),
              inset 1px 0 0 rgba(96,165,250,0.15) !important;
  min-width: 240px !important;
}
/* Text visibility — bright white on dark blue */
.side__barsub,
.side__barsub ul li,
.side__barsub ul li a,
.side__barsub ul li a span {
  color: #e0eeff !important;
  background-color: transparent !important;
}
.side__barsub ul li a {
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #c7dcff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(96,165,250,0.1) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.2px !important;
}
.side__barsub ul li a i {
  color: rgba(96,165,250,0.55) !important;
  font-size: 10px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  background: transparent !important;
}
.side__barsub ul li:hover {
  background: rgba(59,130,246,0.18) !important;
}
.side__barsub ul li:hover > a,
body .side__barsub ul li:hover > a {
  color: #ffffff !important;
  padding-left: 24px !important;
  border-left: 3px solid #60a5fa !important;
  background: transparent !important;
}
.side__barsub ul li:hover > a i {
  color: #93c5fd !important;
  transform: translateX(3px) !important;
}

/* ═══════════════════════════════════════════
   Sub-sub-menu Level 3 — CHILD CATEGORIES
   Deep Teal-Cyan — distinct, vibrant, readable
   ═══════════════════════════════════════════ */
.side__barchild {
  background: #0a2a2a !important;
  border-left: 3px solid #2dd4bf !important;
  border-top: 2px solid #14b8a6 !important;
  box-shadow: 8px 0 32px rgba(0,0,0,0.55),
              inset 1px 0 0 rgba(45,212,191,0.15) !important;
  min-width: 220px !important;
}
/* Text visibility — bright on dark teal */
.side__barchild,
.side__barchild ul li,
body .side__barchild ul li a,
.side__barchild ul li a,
.side__barchild ul li a span {
  color: #ccfbf1 !important;
  background-color: transparent !important;
}
.side__barchild ul li a {
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #99f6e4 !important;
  display: block !important;
  border-bottom: 1px solid rgba(45,212,191,0.1) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.2px !important;
}
.side__barchild ul li:hover {
  background: rgba(20,184,166,0.18) !important;
}
.side__barchild ul li:hover > a,
body .side__barchild ul li:hover > a {
  color: #ffffff !important;
  padding-left: 24px !important;
  border-left: 3px solid #2dd4bf !important;
  background: transparent !important;
}

/* =========== MOBILE SLIDE MENU =========== */
.mobile-menu {
  background: var(--brand-white) !important;
  box-shadow: 4px 0 30px rgba(22,163,74,0.18) !important;
  border-right: 2px solid var(--brand-green) !important;
}
.mobile-menu * { color: var(--brand-text) !important; }
.mobile-menu-logo {
  background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green)) !important;
  padding: 14px 16px !important;
}
.mobile-menu-logo * { color: #ffffff !important; }
.mobile-menu .menu-category-name {
  font-weight: 600 !important;
  border-bottom: 1px solid var(--brand-border) !important;
  padding: 12px 16px !important;
  transition: var(--brand-transition) !important;
}
.mobile-menu .menu-category-name:hover {
  background: rgba(22,163,74,0.06) !important;
  color: var(--brand-green) !important;
  padding-left: 22px !important;
}

/* =========== HERO SLIDER =========== */
.slider-section { margin-bottom: 16px !important; margin-top: 10px !important; }
.home-slider-container {
  border-radius: var(--brand-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--brand-shadow-md) !important;
}
.slider-item img { width: 100% !important; display: block !important; }
.main_slider .owl-prev,
.main_slider .owl-next {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
  transition: all 0.28s ease !important;
  width: 44px !important; height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.main_slider .owl-prev:hover, .main_slider .owl-next:hover {
  background: rgba(22,163,74,0.75) !important;
  border-color: var(--brand-green) !important;
  transform: scale(1.1) !important;
}
.main_slider .owl-prev i, .main_slider .owl-next i {
  color: #ffffff !important; font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Bottom ad banners */
.bottoads_area {
  padding: 16px 0 !important;
  background: var(--brand-bg) !important;
  margin-bottom: 8px !important;
}
.ads_item {
  border-radius: var(--brand-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--brand-shadow-sm) !important;
  transition: var(--brand-transition) !important;
}
.ads_item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--brand-shadow-md) !important;
}
.ads_item img { border-radius: var(--brand-radius-md) !important; }

/* =========== SECTION TITLES =========== */
.homeproduct {
  background: transparent !important;
  margin-bottom: 8px !important;
  padding: 12px 0 !important;
}
.sec_title { margin-bottom: 12px !important; }
.section-title-header {
  border-bottom: 2px solid var(--brand-border) !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.section-title-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid var(--brand-green) !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;
}

/* =========== CATEGORY CARDS =========== */
.cat_item {
  background: var(--brand-white) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-md) !important;
  padding: 14px 6px !important;
  text-align: center !important;
  transition: var(--brand-transition) !important;
  box-shadow: var(--brand-shadow-sm) !important;
  height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.cat_item:hover {
  border-color: var(--brand-green) !important;
  box-shadow: var(--brand-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;
}
.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(--brand-text) !important;
  display: block !important; line-height: 1.3 !important;
}
.cat_item:hover .cat_name a { color: var(--brand-green) !important; }

/* =========== PRODUCT CARDS =========== */
.product_item, .product-item, .wist_item {
  background: var(--brand-card) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-md) !important;
  box-shadow: var(--brand-shadow-sm) !important;
  transition: var(--brand-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(--brand-shadow-hover) !important;
  border-color: var(--brand-green) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}
.pro_img {
  height: 190px !important;
  border-radius: var(--brand-radius-sm) !important;
  overflow: hidden !important;
  background: var(--brand-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.08) !important; }
.pro_name { height: 48px !important; margin-top: 8px !important; }
.pro_name a {
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--brand-text) !important; line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.pro_name a:hover { color: var(--brand-green) !important; }
.pro_price { margin-top: 8px !important; margin-bottom: 6px !important; }
.pro_price p {
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--brand-dark) !important; text-align: left !important;
}
.pro_price del, .pro_price s {
  color: var(--brand-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 { color: #F59E0B !important; font-size: 11px !important; }
.product_item i.far.fa-star { color: var(--brand-border) !important; font-size: 11px !important; }

/* =========== SALE / DISCOUNT BADGE =========== */
.sale-badge-box {
  background: var(--brand-orange) !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(249,115,22,0.45) !important;
}
.sale-badge-text, .sale-badge-text p {
  color: #ffffff !important;
  font-size: 10px !important; font-weight: 700 !important;
  margin: 0 !important; line-height: 1.1 !important;
}
.sale-badge, .sale-badge-inner {
  background: transparent !important;
}

/* =========== ORDER NOW BUTTON — Luxury Deep Violet + Gold Hover =========== */

/* Keyframes */
@keyframes orderShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes orderPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(109,40,217,0.45),
                0 0 0 0 rgba(139,92,246,0);
  }
  50% {
    box-shadow: 0 6px 28px rgba(109,40,217,0.65),
                0 0 0 4px rgba(139,92,246,0.12);
  }
}
/* Gold shimmer sweep — same as nav link */
@keyframes orderGoldSweep {
  0%   { left: -100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
/* Gold border shimmer */
@keyframes orderGoldBorder {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Base button — deep violet, unchanged */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(
    270deg,
    #3b0764,
    #6d28d9,
    #7c3aed,
    #4c1d95,
    #6d28d9
  ) !important;
  background-size: 300% 100% !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 1px !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;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  animation: orderPulseGlow 2.8s ease-in-out infinite,
             orderShimmer 4s linear infinite !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease !important;
}

/* Gold shimmer sweep layer — triggers 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(
    105deg,
    transparent 15%,
    rgba(251,191,36,0.35) 50%,
    transparent 85%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0 !important;
}

/* Gold underline bar — hidden at rest */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #f59e0b,
    #fbbf24,
    #fde68a,
    #d97706,
    transparent
  ) !important;
  background-size: 200% 100% !important;
  border-radius: 0 0 8px 8px !important;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  opacity: 0 !important;
  z-index: 3 !important;
}

/* HOVER — gold magic on violet base */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  transform: translateY(-3px) scale(1.03) !important;
  animation: none !important;
  color: #fde68a !important;
  background: linear-gradient(
    135deg,
    #4c1d95 0%,
    #7c3aed 40%,
    #a855f7 70%,
    #6d28d9 100%
  ) !important;
  border-color: rgba(212,168,83,0.6) !important;
  box-shadow: 0 8px 28px rgba(109,40,217,0.55),
              0 0 0 2px rgba(212,168,83,0.2),
              inset 0 1px 0 rgba(251,191,36,0.15) !important;
}

/* Gold sweep fires on hover */
.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: orderGoldSweep 0.65s ease forwards !important;
}

/* Gold underline slides in on hover */
.pro_btn .cart_btn button:hover::after,
.pro_btn .order_button a:hover::after,
.addcartbutton:hover::after {
  width: 100% !important;
  opacity: 1 !important;
  animation: orderGoldBorder 1.5s linear infinite !important;
}

/* Active press */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* Text */
.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;
  background: transparent !important; color: inherit !important;
  z-index: 3 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * { color: #ffffff !important; background: transparent !important; }
.addcartbutton span {
  color: #ffffff !important; background: transparent !important;
  display: inline-block !important; position: relative !important; z-index: 3 !important;
}

/* =========== GO TO CART BUTTON =========== */
.go_cart {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important; font-size: 14px !important;
  text-align: center !important; padding: 10px 0 !important;
  display: block !important;
  box-shadow: 0 4px 14px rgba(22,163,74,0.32) !important;
  transition: all 0.3s ease !important;
}
.go_cart:hover {
  background: var(--brand-green-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22,163,74,0.5) !important;
}

/* =========== CART STORE BUTTON =========== */
.cart_store {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #ffffff !important;
  border-radius: 6px !important; font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(22,163,74,0.3) !important;
  transition: all 0.3s ease !important;
}
.cart_store:hover {
  background: var(--brand-green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22,163,74,0.45) !important;
}

/* =========== VIEW MORE BUTTON =========== */
.view_more_btn, a.view_more_btn {
  background: transparent !important;
  color: var(--brand-green) !important;
  border: 2px solid var(--brand-green) !important;
  border-radius: 6px !important;
  padding: 5px 16px !important;
  font-size: 13px !important; font-weight: 700 !important;
  transition: all 0.28s ease !important;
  display: inline-block !important;
  box-shadow: none !important;
}
.view_more_btn:hover, a.view_more_btn:hover {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(22,163,74,0.32) !important;
}

/* =========== TRACK ORDER & CART BUTTONS — 2026 Luxury Style =========== */

/* Shared keyframes */
@keyframes btnBorderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  50%       { box-shadow: 0 0 12px 2px rgba(22,163,74,0.35); }
}
@keyframes cartBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%       { transform: translateY(-4px) scale(1.08); }
  60%       { transform: translateY(-2px) scale(1.04); }
}
@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ── Track Order Button ── */
.track_btn a {
  /* 2026: Solid deep teal — clearly visible */
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important;
  backdrop-filter: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1.5px solid #22d3ee !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: btnBorderGlow 2.5s ease-in-out infinite !important;
  transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow: 0 3px 14px rgba(8,145,178,0.5),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  text-shadow: none !important;
}

/* Shimmer sweep */
.track_btn a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.22) 50%,
    transparent 80%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  transition: left 0.55s ease !important;
  z-index: 1 !important;
}
.track_btn a:hover::before { left: 140% !important; }

.track_btn a i {
  color: #e0f9ff !important;
  font-size: 13px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: transform 0.3s ease !important;
}
.track_btn a:hover {
  background: linear-gradient(135deg, #0c6882 0%, #0e7490 100%) !important;
  border-color: #67e8f9 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(8,145,178,0.6),
              0 0 0 3px rgba(8,145,178,0.2) !important;
  animation: none !important;
}
.track_btn a:hover i {
  color: #ffffff !important;
  transform: scale(1.2) !important;
}
.track_btn a:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ── Cart Button ── */
#cart-qty {
  position: relative !important;
}
#cart-qty > a {
  /* 2026: Solid deep violet — clearly visible */
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%) !important;
  backdrop-filter: none !important;
  border: 1.5px solid #a78bfa !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 3px 14px rgba(91,33,182,0.5),
              inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}
#cart-qty > a:hover {
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%) !important;
  border-color: #c4b5fd !important;
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 24px rgba(91,33,182,0.6),
              0 0 0 3px rgba(109,40,217,0.2) !important;
  animation: cartBounce 0.5s ease !important;
}

/* Cart icon */
.cart-dialog i, #cart-qty i,
#cart-qty > a i,
#cart-qty svg {
  color: #ede9fe !important;
  stroke: #ede9fe !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}
#cart-qty > a:hover i,
#cart-qty > a:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Cart count badge */
.header-list-items ul li span,
#cart-qty > a span {
  background: linear-gradient(135deg, #f97316, #ef4444) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.5),
              0 0 0 2px rgba(91,33,182,0.4) !important;
  animation: badgePop 2s ease-in-out infinite !important;
}

/* =========== SUBMIT / LOGIN BUTTON =========== */
.submit-btn {
  background: linear-gradient(135deg, var(--brand-green-dark) 0%, var(--brand-green) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important; font-size: 15px !important;
  padding: 11px 0 !important; width: 100% !important;
  box-shadow: 0 5px 18px rgba(22,163,74,0.38) !important;
  position: relative !important; overflow: hidden !important;
  display: block !important; text-align: center !important;
  transition: all 0.35s ease !important;
}
.submit-btn:hover {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(22,163,74,0.5) !important;
}

/* =========== ORDER PLACE (CHECKOUT CTA) =========== */
.order_place {
  background: linear-gradient(90deg, var(--brand-green-dark) 0%, var(--brand-green) 50%, var(--brand-green-light) 100%) !important;
  background-size: 200% auto !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 800 !important; font-size: 16px !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  padding: 13px 0 !important; width: 100% !important;
  display: block !important; text-align: center !important;
  box-shadow: 0 5px 20px rgba(22,163,74,0.4) !important;
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.order_place:hover {
  background-position: right center !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(22,163,74,0.55) !important;
}

/* =========== PRODUCT DETAIL — ADD TO CART BUTTON =========== */
.single_product.d-flex .add_cart_btn {
  background: linear-gradient(135deg, var(--brand-green-dark) 0%, var(--brand-green) 55%, var(--brand-green-light) 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: none !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;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(22,163,74,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  animation: greenShift 4s ease infinite !important;
}
@keyframes greenShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.single_product.d-flex .add_cart_btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  box-shadow: 0 14px 36px rgba(22,163,74,0.55) !important;
  animation: none !important;
}
.single_product.d-flex .add_cart_btn * { color: #ffffff !important; }

/* =========== PRODUCT DETAIL — ORDER NOW BUTTON (Electric Aurora Glow) =========== */

@keyframes auroraShift {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}
@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(249,115,22,0.6),
      0 0 20px rgba(234,88,12,0.4),
      0 4px 24px rgba(194,65,12,0.5),
      inset 0 1px 0 rgba(255,200,100,0.2);
  }
  50% {
    box-shadow:
      0 0 16px rgba(249,115,22,0.9),
      0 0 40px rgba(234,88,12,0.6),
      0 8px 36px rgba(194,65,12,0.7),
      0 0 60px rgba(251,146,60,0.2),
      inset 0 1px 0 rgba(255,220,120,0.3);
  }
}
@keyframes lightSweep {
  0%   { left: -100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(251,146,60,0.4); }
  50%       { border-color: rgba(253,186,116,0.8); }
}

.single_product.d-flex .order_now_btn {
  background: linear-gradient(
    135deg,
    #7c2d12,
    #c2410c,
    #ea580c,
    #f97316,
    #c2410c,
    #9a3412
  ) !important;
  background-size: 400% 400% !important;
  color: #fff7ed !important;
  border: 1.5px solid rgba(251,146,60,0.4) !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  cursor: pointer !important;
  /* Neon glow + aurora idle */
  animation: neonPulse 2.2s ease-in-out infinite,
             auroraShift 4s ease infinite,
             borderGlow 2.2s ease-in-out infinite !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* Light ray layer — rotating shine */
.single_product.d-flex .order_now_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -10% !important;
  left: -100% !important;
  width: 60% !important;
  height: 120% !important;
  background: linear-gradient(
    100deg,
    transparent 10%,
    rgba(255,220,150,0.4) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,220,150,0.4) 55%,
    transparent 90%
  ) !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: lightSweep 2.5s ease-in-out infinite !important;
}

/* Top edge light line */
.single_product.d-flex .order_now_btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  width: 90% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,220,120,0.8),
    rgba(255,255,255,0.6),
    rgba(255,220,120,0.8),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* HOVER — intensify everything */
.single_product.d-flex .order_now_btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  animation: none !important;
  background: linear-gradient(
    135deg,
    #9a3412,
    #c2410c,
    #f97316,
    #fb923c,
    #ea580c
  ) !important;
  border-color: rgba(253,186,116,0.9) !important;
  box-shadow:
    0 0 20px rgba(249,115,22,1),
    0 0 50px rgba(234,88,12,0.7),
    0 12px 40px rgba(194,65,12,0.8),
    0 0 80px rgba(251,146,60,0.3),
    inset 0 1px 0 rgba(255,220,120,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  color: #fff7ed !important;
}

/* Active press */
.single_product.d-flex .order_now_btn:active {
  transform: translateY(-1px) scale(0.98) !important;
}

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

/* =====================================================
   CALL & WHATSAPP BUTTONS — Product Details Page
   2026 Deep Color — কাজ অনুযায়ী রং, animation সুন্দর
   ===================================================== */

/* Shared keyframes */
@keyframes callRipple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes waSweep {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
@keyframes callPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(14,116,144,0.45); }
  50%       { box-shadow: 0 6px 28px rgba(14,116,144,0.7),
                          0 0 0 4px rgba(14,116,144,0.12); }
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(37,99,235,0.45); }
  50%       { box-shadow: 0 6px 28px rgba(37,99,235,0.7),
                          0 0 0 4px rgba(37,99,235,0.12); }
}

/* ── Base shared reset ── */
.call_now_btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 50px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.32s ease,
              border-color 0.32s ease !important;
}

/* ══════════════════════════════════════════
   BUTTON 1 — CALL
   Deep Ocean Teal: #0c4a6e → #0e7490
   Phone = trust, reliability, deep blue-teal
   ══════════════════════════════════════════ */
.call_now_btn:has(.fa-phone-square),
.call_now_btn:has(.fa-phone),
a.call_now_btn[href^="tel"] {
  background: linear-gradient(
    135deg,
    #0c4a6e 0%,
    #0e7490 40%,
    #0891b2 70%,
    #06b6d4 100%
  ) !important;
  background-size: 200% 200% !important;
  color: #e0f9ff !important;
  box-shadow: 0 4px 18px rgba(14,116,144,0.45),
              inset 0 1px 0 rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(8,145,178,0.4) !important;
  animation: callPulse 3s ease-in-out infinite !important;
}

/* Ripple effect on call button */
.call_now_btn:has(.fa-phone-square)::before,
a.call_now_btn[href^="tel"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.3) !important;
  transform: scale(0) translate(-50%, -50%) !important;
  transform-origin: top left !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.call_now_btn:has(.fa-phone-square):hover,
a.call_now_btn[href^="tel"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation: none !important;
  background: linear-gradient(
    135deg,
    #083d5c 0%,
    #0c6882 40%,
    #0e7490 100%
  ) !important;
  border-color: rgba(34,211,238,0.6) !important;
  box-shadow: 0 10px 32px rgba(14,116,144,0.65),
              0 0 0 3px rgba(14,116,144,0.15),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
.call_now_btn:has(.fa-phone-square):active,
a.call_now_btn[href^="tel"]:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ══════════════════════════════════════════
   BUTTON 2 — WHATSAPP / ASK ABOUT
   Deep Royal Blue-Indigo: #1e1b4b → #1d4ed8
   WhatsApp icon = messaging, action, deep blue
   ══════════════════════════════════════════ */
.call_now_btn:has(.fa-whatsapp),
a.call_now_btn[href*="whatsapp"] {
  background: linear-gradient(
    135deg,
    #1e1b4b 0%,
    #1d4ed8 40%,
    #2563eb 70%,
    #3b82f6 100%
  ) !important;
  background-size: 200% 200% !important;
  color: #eff6ff !important;
  box-shadow: 0 4px 18px rgba(29,78,216,0.45),
              inset 0 1px 0 rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(37,99,235,0.4) !important;
  animation: waPulse 3s ease-in-out infinite !important;
}

/* Gold shimmer sweep on WhatsApp button */
.call_now_btn:has(.fa-whatsapp)::before,
a.call_now_btn[href*="whatsapp"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255,255,255,0.2) 50%,
    transparent 85%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0 !important;
}

.call_now_btn:has(.fa-whatsapp):hover,
a.call_now_btn[href*="whatsapp"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation: none !important;
  background: linear-gradient(
    135deg,
    #1a1660 0%,
    #1a43c8 40%,
    #1d4ed8 100%
  ) !important;
  border-color: rgba(147,197,253,0.6) !important;
  box-shadow: 0 10px 32px rgba(29,78,216,0.65),
              0 0 0 3px rgba(29,78,216,0.15),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

/* Sweep fires on hover */
.call_now_btn:has(.fa-whatsapp):hover::before,
a.call_now_btn[href*="whatsapp"]:hover::before {
  animation: waSweep 0.65s ease forwards !important;
}

.call_now_btn:has(.fa-whatsapp):active,
a.call_now_btn[href*="whatsapp"]:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* Icons */
.call_now_btn i {
  font-size: 18px !important;
  color: #ffffff !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: transform 0.3s ease !important;
}
.call_now_btn:hover i { transform: scale(1.15) !important; }
.call_now_btn * {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}

/* =========== BOOTSTRAP BUTTONS =========== */
.btn-primary, .button-primary {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #ffffff !important;
  border-radius: 6px !important; font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(22,163,74,0.3) !important;
  transition: all 0.3s ease !important;
}
.btn-primary:hover, .button-primary:hover {
  background: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22,163,74,0.45) !important;
}
.btn-success {
  background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green)) !important;
  border-color: var(--brand-green-dark) !important; color: #ffffff !important;
  border-radius: 6px !important; font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(22,163,74,0.3) !important;
  transition: all 0.3s ease !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(22,163,74,0.45) !important;
}
button[type="submit"].btn, input[type="submit"].btn {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  border-color: var(--brand-green) !important;
  border-radius: 6px !important; font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(22,163,74,0.25) !important;
  transition: all 0.28s ease !important;
}
button[type="submit"].btn:hover, input[type="submit"].btn:hover {
  background: var(--brand-green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(22,163,74,0.38) !important;
}
.checkout-btn {
  background: var(--brand-green-dark) !important;
  border: 2px solid var(--brand-green) !important;
  color: #ffffff !important;
  border-radius: 8px !important; font-weight: 700 !important;
  transition: all 0.3s ease !important;
}
.checkout-btn:hover {
  background: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.25), 0 8px 20px rgba(22,163,74,0.4) !important;
  transform: translateY(-2px) !important;
}

/* =========== COUNTDOWN TIMER =========== */
.timer_inner .syotimer-cell {
  background: var(--brand-orange) !important;
  color: #ffffff !important;
  border-radius: var(--brand-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(249,115,22,0.3) !important;
  font-weight: 700 !important;
  min-width: 40px !important; padding: 8px !important;
}

/* =========== FORMS & INPUTS =========== */
.form-control, input[type="text"], input[type="email"],
input[type="number"], input[type="password"], select, textarea {
  background: var(--brand-white) !important;
  border: 1.5px solid var(--brand-border) !important;
  color: var(--brand-text) !important;
  border-radius: var(--brand-radius-sm) !important;
  transition: var(--brand-transition) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--brand-text-muted) !important;
}
.auth-title {
  color: var(--brand-dark) !important;
  font-size: 20px !important; font-weight: 700 !important;
  background: rgba(22,163,74,0.04) !important;
  border-bottom: 2px solid var(--brand-border) !important;
}
.form-content {
  border-radius: var(--brand-radius-lg) !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: var(--brand-shadow-md) !important;
}
.no-account a, .register-now a { color: var(--brand-green) !important; font-weight: 600 !important; }
.forget-link { color: var(--brand-green) !important; }
.payment-methods .form-check-input { border: 2px solid var(--brand-green) !important; }
.payment-methods .form-check-input:checked::after { background-color: var(--brand-green) !important; }
.payment-methods .form-check-input:checked { border-color: var(--brand-green) !important; }
.payment-methods .form-check-input:checked + .form-check-label {
  color: var(--brand-green) !important; font-weight: 700 !important;
}

/* =========== FOOTER — Screenshot Exact Match =========== */
footer, .footer-top, .footer-bottom, .main-footer {
  background: #0d1117 !important;
  background-image: none !important;
}

/* Footer Top */
.footer-top {
  padding: 48px 0 40px !important;
  border-top: none !important;
}

/* All footer text default */
.footer-top *, .footer-bottom *, footer * {
  color: #9ca3af !important;
}

/* ── Column 1: Logo + Address + Phone ── */
.footer-about {
  text-align: left !important;
  padding-right: 20px !important;
}
.footer-about a img {
  height: auto !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin-bottom: 14px !important;
}
.footer-about p {
  color: #9ca3af !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}
.footer-hotlint {
  color: #F97316 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: block !important;
  margin-top: 4px !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
}
.footer-hotlint:hover { color: #ffffff !important; }

/* ── Columns 2 & 3: Menu ── */
.footer-menu ul li.title a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  display: inline-block !important;
  border: none !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  background: none !important;
  position: relative !important;
}

/* Green gradient underline দাগ */
.footer-menu ul li.title a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #16A34A, #22C55E, #4ade80) !important;
  border-radius: 2px !important;
}
.footer-menu ul li {
  display: block !important;
  margin: 0 !important;
}
.footer-menu ul li a {
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  padding: 5px 0 !important;
  display: block !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
  background: none !important;
}
.footer-menu ul li a:hover {
  color: #ffffff !important;
  padding-left: 5px !important;
}

/* ── Column 4: Stay Connected ── */
.stay_conn a {
  color: #ffffff !important;
}

/* Social Icons — dark square-rounded boxes */
ul.social_link {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}
ul.social_link li {
  display: inline-flex !important;
  margin: 0 !important;
}
.social_link li a {
  background: #1e2530 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: background 0.2s ease !important;
  border: none !important;
}
.social_link li a i {
  color: #ffffff !important;
}
.social_link li a:hover {
  background: #F97316 !important;
  transform: none !important;
}
.social_link li a:hover i { color: #ffffff !important; }

/* Download App */
.d_app h2 {
  color: #F97316 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 10px !important;
}
.d_app a { display: inline-block !important; }
.d_app img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ── Footer Bottom ── */
.footer-bottom {
  background: #080c10 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 0 !important;
}
.copyright p {
  text-align: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.4) !important;
}
.copyright p span { color: rgba(255,255,255,0.4) !important; }
.developer-credit-link {
  color: #22C55E !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.developer-credit-link:hover { color: #ffffff !important; }

/* =========== MOBILE BOTTOM NAVIGATION =========== */
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  body { padding-bottom: 72px !important; }

  /* ── Glassy Luxury Bottom Nav Bar ── */
  .footer_nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; z-index: 99999 !important;
    /* Deep dark glass background */
    background: rgba(15, 15, 20, 0.96) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(22,163,74,0.35) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.55),
                0 -1px 0 rgba(22,163,74,0.2) !important;
    height: 64px !important;
    padding: 0 !important; margin: 0 !important;
  }

  .footer_nav ul {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important; height: 64px !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;
  }

  /* ── All 5 tabs — same size, glassy ── */
  .footer_nav ul li a {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 4px !important;
    width: 50px !important; height: 50px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: all 0.22s ease !important;
    position: relative !important;
  }

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

  /* ── All labels ── */
  .footer_nav ul li a span:last-child {
    font-size: 9px !important; font-weight: 600 !important;
    color: rgba(255,255,255,0.38) !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    transition: color 0.22s ease !important;
  }

  /* ── Hover / tap — glassy green glow ── */
  .footer_nav ul li a:hover,
  .footer_nav ul li a:active {
    background: rgba(22,163,74,0.15) !important;
    border-color: rgba(22,163,74,0.4) !important;
    box-shadow: 0 0 16px rgba(22,163,74,0.25),
                inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
  .footer_nav ul li a:hover span i,
  .footer_nav ul li a:active span i {
    color: #22C55E !important;
  }
  .footer_nav ul li a:hover span:last-child,
  .footer_nav ul li a:active span:last-child {
    color: #22C55E !important;
  }

  /* ── HOME tab (3rd) — same size as others, just green tint ── */
  .footer_nav ul li:nth-child(3) a {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    margin-top: 0 !important;
    background: rgba(22,163,74,0.22) !important;
    border: 1px solid rgba(34,197,94,0.45) !important;
    box-shadow: 0 0 18px rgba(22,163,74,0.3),
                inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }
  .footer_nav ul li:nth-child(3) a span i {
    color: #22C55E !important;
    font-size: 20px !important;
  }
  .footer_nav ul li:nth-child(3) a span:last-child {
    color: #22C55E !important;
    font-weight: 700 !important;
    font-size: 9px !important;
  }
  .footer_nav ul li:nth-child(3) a:hover,
  .footer_nav ul li:nth-child(3) a:active {
    background: rgba(22,163,74,0.35) !important;
    border-color: rgba(34,197,94,0.7) !important;
    box-shadow: 0 0 24px rgba(22,163,74,0.45),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
  }

  /* ── Cart badge ── */
  .footer_nav .mobilecart-qty {
    position: absolute !important; top: -3px !important; right: -3px !important;
    background: var(--brand-orange) !important; color: #ffffff !important;
    border-radius: 50% !important;
    min-width: 16px !important; height: 16px !important;
    font-size: 8px !important; font-weight: 900 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: 1.5px solid rgba(15,15,20,0.9) !important; z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(249,115,22,0.5) !important;
  }

  /* Mobile responsive tweaks */
  .slider-item { height: 150px !important; }
  .home-slider-container { border-radius: var(--brand-radius-sm) !important; }
  .product_item { padding: 8px !important; margin-bottom: 10px !important; }
  .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; }
  .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-name { font-size: 14px !important; }
  .footer-bottom { padding-bottom: 84px !important; }
}

/* =========== PAGINATION =========== */
.pagination .page-item.active .page-link {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #ffffff !important;
}
.pagination .page-link {
  color: var(--brand-green) !important;
  border-color: var(--brand-border) !important;
}
.pagination .page-link:hover {
  background: rgba(22,163,74,0.08) !important;
  color: var(--brand-green-dark) !important;
}

/* =========== BREADCRUMBS & PAGE TITLES =========== */
.page_title p { color: var(--brand-dark) !important; font-weight: 600 !important; }
.cust_according_body ul li a { color: #444444 !important; }
.cust_according_body ul li:hover a { background-color: rgba(22,163,74,0.08) !important; }
.sidebar_item h2.accordion-header button.accordion-button {
  background-color: var(--brand-green) !important;
  color: #ffffff !important;
}

/* =========== STAR RATINGS (global) =========== */
.fas.fa-star, .fas.fa-star-half-alt { color: #F59E0B !important; font-size: 11px !important; }
.far.fa-star { color: #D1D5DB !important; font-size: 11px !important; }
.review_star { color: #F59E0B !important; }

/* =========== PRODUCT DETAIL PAGE =========== */
.details-price { color: var(--brand-dark) !important; }
.features { border-top: 4px solid var(--brand-green) !important; }
.details-action-box .section-head .action .details-action-btn {
  background: var(--brand-green) !important;
  border: 2px solid var(--brand-green) !important;
  color: #ffffff !important;
}
.insert-review a { background: var(--brand-green) !important; }
button.details-review-button { background: var(--brand-green-dark) !important; }

/* =========== WHATSAPP FLOATING BUTTON =========== */
.float {
  background: #25D366 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.34) !important;
  transition: var(--brand-transition) !important;
}
.float:hover {
  background: #20BA5A !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 22px rgba(37,211,102,0.44) !important;
}

/* =========== MOBILE HOTLINE BAR =========== */
.d-sm-none.py-1 { background: var(--brand-dark) !important; }
.d-sm-none.py-1 a { color: #ffffff !important; }

/* =========== SCROLL TO TOP =========== */
.scrolltop {
  position: fixed !important;
  bottom: 90px !important; right: 20px !important;
  z-index: 9999 !important;
  display: none;
}
.scrolltop .scroll {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  width: 40px !important; height: 40px !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 12px rgba(22,163,74,0.35) !important;
  transition: var(--brand-transition) !important;
  cursor: pointer !important;
}
.scrolltop .scroll:hover {
  background: var(--brand-green-dark) !important;
  transform: translateY(-3px) !important;
}
.scrolltop .scroll i { color: #ffffff !important; }

/* =========== TABLES =========== */
.table td, .table th { color: var(--brand-text) !important; border-color: var(--brand-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(22,163,74,0.04) !important; }

/* =========== BADGES =========== */
.badge { font-weight: 600 !important; border-radius: 20px !important; }
.badge-success, .bg-success { background: var(--brand-green) !important; }
.badge-warning, .bg-warning { background: var(--brand-orange) !important; }

/* =========== TOASTR NOTIFICATIONS =========== */
#toast-container { top: 25px !important; right: 25px !important; }
#toast-container > div {
  opacity: 1 !important;
  box-shadow: 0 15px 45px rgba(0,0,0,0.25) !important;
  border-radius: 16px !important;
  padding: 24px 28px 24px 68px !important;
  width: 400px !important; max-width: 95vw !important;
  font-family: "Inter",sans-serif !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}
#toast-container > .toast-success { background-color: rgba(22,163,74,0.95) !important; }
#toast-container > .toast-success::before {
  content: "\f058"; font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  font-size: 30px; color: white;
}
#toast-container > .toast-error { background-color: rgba(231,76,60,0.95) !important; }
#toast-container > .toast-error::before {
  content: "\f06a"; font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  font-size: 30px; color: white;
}
#toast-container > .toast-warning { background-color: rgba(249,115,22,0.95) !important; }
#toast-container > .toast-warning::before {
  content: "\f071"; font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  font-size: 30px; color: white;
}
#toast-container > .toast-info { background-color: rgba(22,163,74,0.9) !important; }
#toast-container > .toast-info::before {
  content: "\f05a"; font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  font-size: 30px; color: white;
}
#toast-container > div .toast-title {
  font-size: 17px !important; font-weight: 700 !important;
  color: white !important; margin-bottom: 6px !important;
}
#toast-container > div .toast-message {
  font-size: 15px !important; color: rgba(255,255,255,0.95) !important; line-height: 1.6 !important;
}
#toast-container > div .toast-progress {
  height: 5px !important; background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important; bottom: 0 !important;
}
@media (max-width: 575px) {
  #toast-container { width: 100% !important; right: 0 !important; top: 0 !important; padding: 15px !important; }
  #toast-container > div { width: 100% !important; padding: 20px 20px 20px 60px !important; }
  #toast-container > div::before { left: 20px !important; font-size: 26px !important; }
}

/* =========== LOADING SPINNER =========== */
#loading .custom-loader {
  border: 4px solid rgba(22,163,74,0.2) !important;
  border-top: 4px solid var(--brand-green) !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  animation: spin 0.8s linear infinite !important;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========== SEARCH RESULTS DROPDOWN =========== */
.search_product {
  background: var(--brand-white) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-md) !important;
  box-shadow: var(--brand-shadow-md) !important;
}
.search_product ul li:hover { background: rgba(22,163,74,0.06) !important; }
.search_content .price { color: var(--brand-green) !important; font-weight: 700 !important; }

/* =========== CATAGORY MENU NAV LINKS =========== */
.catagory_menu ul li a {
  color: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  transition: var(--brand-transition) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
.catagory_menu ul li a:hover {
  background: rgba(22,163,74,0.18) !important;
  color: #ffffff !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--brand-green) !important;
}

/* =========== KEYFRAMES =========== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========== END OF BRAND THEME =========== */

/* =========== FOOTER TITLE EXTRA STYLING =========== */
/* Stay Connected title — same underline */
.footer-menu ul li.title.stay_conn a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  display: inline-block !important;
  border: none !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  background: none !important;
  position: relative !important;
}
.footer-menu ul li.title.stay_conn a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #16A34A, #22C55E, #4ade80) !important;
  border-radius: 2px !important;
}

/* =====================================================
   FINAL FORCE-FIX: Subcategory & Child Category
   Ensures solid background regardless of inheritance
   ===================================================== */

/* Subcategory panel — Deep Midnight Blue */
.sidebar-menu .sidebar-submenu,
.side__barsub,
ul.side__barsub,
li.all__category__list .side__barsub,
.sidebar-menu ul .side__barsub {
  background: #162032 !important;
  background-color: #162032 !important;
  opacity: 1 !important;
}

/* Child category panel — Deep Charcoal Slate */
.sidebar-menu .sidebar-childmenu,
.side__barchild,
ul.side__barchild,
li.all__category__list .side__barchild,
.sidebar-menu ul .side__barchild {
  background: #1a1a2e !important;
  background-color: #1a1a2e !important;
  opacity: 1 !important;
}

/* Force all links inside to be clearly visible */
.side__barsub li a,
.side__barsub > ul > li > a,
body .side__barsub ul li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #bfdbfe !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(100,149,237,0.12) !important;
}

.side__barchild li a,
.side__barchild > ul > li > a,
body .side__barchild ul li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #a5f3fc !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  display: block !important;
  border-bottom: 1px solid rgba(45,212,191,0.1) !important;
}

/* Hover states */
.side__barsub li:hover {
  background: rgba(37,99,235,0.25) !important;
  background-color: rgba(37,99,235,0.25) !important;
}
.side__barsub li:hover > a,
body .side__barsub li:hover > a {
  color: #ffffff !important;
  background: transparent !important;
  padding-left: 22px !important;
}

.side__barchild li:hover {
  background: rgba(20,184,166,0.25) !important;
  background-color: rgba(20,184,166,0.25) !important;
}
.side__barchild li:hover > a,
body .side__barchild li:hover > a {
  color: #ffffff !important;
  background: transparent !important;
  padding-left: 22px !important;
}