/* =====================================================
   Mobile Gadgets — Gadget & Accessories Theme v2
   Primary:    #2563EB  |  Secondary: #1E40AF
   Accent:     #F59E0B  |  BG:        #F8FAFC
   Text:       #111827  |  Success:   #22C55E
   Error:      #EF4444
   ===================================================== */

/* =========== 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 {
  --g-primary:        hwb(226 9% 10%);
  --g-primary-dark:   #1E40AF;
  --g-primary-light:  #3B82F6;
  --g-accent:         #F59E0B;
  --g-accent-dark:    #D97706;
  --g-bg:             #F8FAFC;
  --g-bg-card:        #FFFFFF;
  --g-text:           #111827;
  --g-text-muted:     #6B7280;
  --g-success:        #22C55E;
  --g-error:          #EF4444;
  --g-border:         #E2E8F0;
  --g-shadow-sm:      0 1px 3px rgba(37,99,235,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --g-shadow-md:      0 4px 16px rgba(37,99,235,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --g-shadow-lg:      0 8px 32px rgba(37,99,235,0.18), 0 4px 12px rgba(0,0,0,0.08);
  --g-shadow-hover:   0 12px 40px rgba(37,99,235,0.22), 0 6px 16px rgba(0,0,0,0.1);
  --g-radius-sm:      6px;
  --g-radius-md:      10px;
  --g-radius-lg:      16px;
  --g-radius-xl:      24px;
  --g-transition:     all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --g-primary-rgb:    37, 99, 235;
  --g-accent-rgb:     245, 158, 11;
}

/* =====================================================
   ICON FONT PROTECTION — must come first
   Prevents font-family override breaking FA & Feather
   ===================================================== */
.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
   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: "Inter","Plus Jakarta Sans","Hind Siliguri",sans-serif !important;
  box-sizing: border-box;
}

body {
  background: var(--g-bg) !important;
  color: var(--g-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(--g-text) !important;
}

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

/* =====================================================
   TOP ANNOUNCEMENT BAR
   ===================================================== */
.top_header {
  background: #1a1a1a !important;
  background-image: none !important;
  background-size: unset !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  animation: none !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(245,158,11,0.18) !important;
  border: 1px solid rgba(245,158,11,0.4) !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* =====================================================
   DESKTOP HEADER
   ===================================================== */
.main-header, .logo-area {
  background: #ffffff !important;
  border-bottom: 1px solid var(--g-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, #1E40AF, #2563EB, #F59E0B) !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  opacity: 0.85 !important;
}

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

/* =====================================================
   MOBILE HEADER
   ===================================================== */
.mobile-header {
  background: #ffffff !important;
  border-bottom: 2px solid var(--g-primary) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,0.1) !important;
}

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

.menu-bar i, .toggle i {
  color: var(--g-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(--g-primary) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--g-accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4) !important;
}

/* =====================================================
   SEARCH BAR
   ===================================================== */
.main-search form, .mobile-search form {
  border: 2px solid var(--g-primary) !important;
  border-radius: var(--g-radius-md) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.1) !important;
  transition: var(--g-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}

.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: var(--g-accent) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.2) !important;
}

.search_keyword, .msearch_keyword {
  background: #f8fafc !important;
  border: none !important;
  color: var(--g-text) !important;
  font-weight: 500 !important;
  padding-left: 16px !important;
  flex: 1 !important;
}

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

.main-search form button, .mobile-search form button {
  background: var(--g-primary) !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(--g-primary-dark) !important;
}

/* Feather search SVG inside button */
.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 (Track Order / Cart badge)
   ===================================================== */
.header-list-items ul li span {
  background: var(--g-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245,158,11,0.4) !important;
}

.header-list-items svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--g-primary) !important;
  fill: none !important;
}

.header-list-items ul li a:hover i {
  color: var(--g-accent) !important;
  transform: scale(1.15) !important;
}

/* Cart summary dropdown */
.cshort-summary {
  border-radius: var(--g-radius-md) !important;
  box-shadow: var(--g-shadow-lg) !important;
  border: 1px solid var(--g-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(--g-primary-dark) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,0.25) !important;
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

/* ALL CATEGORIES button — Red family, matches logo red */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i {
  background: linear-gradient(135deg, #c0000a 0%, #e30613 50%, #ff1a2a 100%) !important;
  background-size: 200% 200% !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(227,6,19,0.35) !important;
  animation: catBtnShimmer 3s ease infinite !important;
  transition: all 0.28s ease !important;
}

.all__category__list > a:hover,
.all__category__list > a:hover * {
  background: linear-gradient(135deg, #a50008 0%, #c0000a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(227,6,19,0.5) !important;
  animation: none !important;
}

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

/* 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.92) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 6px 14px !important;
  border-radius: var(--g-radius-sm) !important;
  border: 1px solid transparent !important;
  transition: var(--g-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.heder__category > li:not(.all__category__list) a:hover,
.right__menu__top li a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(8px) !important;
}

.heder__category > li:not(.all__category__list) a::after { display: none !important; }

/* ═══════════════════════════════════════════════════
   CATEGORY DROPDOWN SIDEBAR — Full Fix
   Dark navy background + white text — always visible
   ═══════════════════════════════════════════════════ */

/* Main dropdown container */
.side__bar {
  background: #0f1729 !important;
  border-radius: 0 0 var(--g-radius-md) var(--g-radius-md) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55),
              0 4px 16px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 3px solid var(--g-accent) !important;
  overflow: visible !important;
}

/* ALL text inside .side__bar — force 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 {
  color: #f1f5f9 !important;
  background-color: transparent !important;
}

/* Category list items */
.side__bar ul li {
  background: transparent !important;
  transition: all 0.2s ease !important;
}

/* Category links */
.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: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  text-decoration: none !important;
}

/* Category image (icon) inside link */
.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;
}

/* Chevron arrow icon */
.side__bar ul li a i,
.side__bar ul li a .fa-chevron-right {
  color: rgba(255,255,255,0.4) !important;
  font-size: 11px !important;
  margin-left: auto !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Hover — blue accent left border + bg highlight */
.side__bar ul li:hover {
  background: rgba(37,99,235,0.15) !important;
}

.side__bar ul li:hover > a {
  color: #ffffff !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--g-accent) !important;
  background: transparent !important;
}

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

/* ── Sub-menu (level 2) — Subcategory ── */
.side__barsub {
  background: #1e3a5f !important;
  border-left: 3px solid #38BDF8 !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.5) !important;
  min-width: 230px !important;
  border-top: 2px solid #38BDF8 !important;
}

/* Force ALL text inside barsub white */
.side__barsub,
.side__barsub *,
body .side__barsub ul li a,
body .side__barsub ul li a span,
body div .side__barsub ul li a {
  color: #e0f2fe !important;
  background-color: transparent !important;
}

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

.side__barsub ul li a {
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e0f2fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(56,189,248,0.12) !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.2px !important;
}

.side__barsub ul li a i {
  color: rgba(56,189,248,0.6) !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.side__barsub ul li:hover {
  background: rgba(56,189,248,0.14) !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 #38BDF8 !important;
  background: transparent !important;
}

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

/* ── Sub-sub-menu (level 3) — Child Category ── */
.side__barchild {
  background: #1a3d2b !important;
  border-left: 3px solid #34D399 !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.5) !important;
  min-width: 220px !important;
  border-top: 2px solid #34D399 !important;
}

/* Force ALL text inside barchild white */
.side__barchild,
.side__barchild *,
body .side__barchild ul li a,
body .side__barchild ul li a span,
body div .side__barchild ul li a {
  color: #d1fae5 !important;
  background-color: transparent !important;
}

.side__barchild ul li {
  background: transparent !important;
  transition: all 0.18s ease !important;
}

.side__barchild ul li a {
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #d1fae5 !important;
  display: block !important;
  border-bottom: 1px solid rgba(52,211,153,0.1) !important;
  transition: all 0.18s ease !important;
}

.side__barchild ul li:hover {
  background: rgba(52,211,153,0.14) !important;
}

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

/* ── catagory_menu links (items in nav bar row) ── */
.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(--g-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.catagory_menu ul li a:hover {
  background: rgba(37,99,235,0.18) !important;
  color: #ffffff !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--g-accent) !important;
}

/* Mobile slide menu */
.mobile-menu {
  background: #ffffff !important;
  box-shadow: 4px 0 30px rgba(37,99,235,0.18) !important;
  border-right: 2px solid var(--g-primary) !important;
}

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

.mobile-menu-logo {
  background: linear-gradient(135deg, #1E40AF, #2563EB) !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(--g-border) !important;
  padding: 12px 16px !important;
  transition: var(--g-transition) !important;
}

.mobile-menu .menu-category-name:hover {
  background: rgba(37,99,235,0.06) !important;
  color: var(--g-primary) !important;
  padding-left: 22px !important;
}

/* =====================================================
   HERO SLIDER
   ===================================================== */
.slider-section { margin-bottom: 16px !important; margin-top: 10px !important; }

.home-slider-container {
  border-radius: var(--g-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--g-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.12) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.3) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !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(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.22),
              inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transform: scale(1.1) !important;
}

.main_slider .owl-prev i,
.main_slider .owl-next i {
  color: #ffffff !important;
  font-size: 18px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.main_slider .owl-prev:hover i,
.main_slider .owl-next:hover i {
  color: #ffffff !important;
}

/* Bottom ad banners */
.bottoads_area {
  padding: 16px 0 !important;
  background: var(--g-bg) !important;
  margin-bottom: 8px !important;
}

.ads_item {
  border-radius: var(--g-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--g-shadow-sm) !important;
  transition: var(--g-transition) !important;
}

.ads_item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--g-shadow-md) !important;
}

.ads_item img { border-radius: var(--g-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(--g-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(--g-primary-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid var(--g-primary) !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;
}

/* =====================================================
   CATEGORY CARDS
   ===================================================== */
.cat_item {
  background: #ffffff !important;
  border: 1.5px solid var(--g-border) !important;
  border-radius: var(--g-radius-md) !important;
  padding: 14px 6px !important;
  text-align: center !important;
  transition: var(--g-transition) !important;
  box-shadow: var(--g-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(--g-primary) !important;
  box-shadow: var(--g-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(--g-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(--g-text) !important;
  display: block !important; line-height: 1.3 !important;
  transition: var(--g-transition) !important;
}

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

/* =====================================================
   PRODUCT CARDS
   ===================================================== */
.product_item, .product-item, .wist_item {
  background: var(--g-bg-card) !important;
  border: 1.5px solid var(--g-border) !important;
  border-radius: var(--g-radius-md) !important;
  box-shadow: var(--g-shadow-sm) !important;
  transition: var(--g-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(--g-shadow-hover) !important;
  border-color: var(--g-primary-light) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}

.pro_img {
  height: 190px !important;
  border-radius: var(--g-radius-sm) !important;
  overflow: hidden !important;
  background: #f8fafc !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(--g-text) !important; line-height: 1.4 !important;
  transition: var(--g-transition) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

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

.pro_price { margin-top: 8px !important; margin-bottom: 6px !important; }

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

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

.product_item i.fas.fa-star,
.product_item i.fas.fa-star-half-alt { color: var(--g-accent) !important; font-size: 11px !important; }
.product_item i.far.fa-star { color: var(--g-border) !important; font-size: 11px !important; }

/* Sale badge */
.sale-badge-box {
  background: var(--g-error) !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(239,68,68,0.4) !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;
}

/* =====================================================
   ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗  ██╗███████╗
   ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗ ██║██╔════╝
   ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗██║███████╗
   ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚████║╚════██║
   ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚███║███████║
   LUXURY ANIMATED BUTTON SYSTEM
   ===================================================== */

/* ---------------------------------------------------
   BTN-1: Product Card "ORDER NOW" — Blue Gradient Shimmer
   Animation: infinite gradient shift + shine sweep on hover
   --------------------------------------------------- */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.8px !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 15px rgba(37,99,235,0.35),
              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: btnBlueShift 4s ease infinite !important;
}

/* Reset style.css slide-up animation on order_button a */
.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: #ffffff !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.02) !important;
  box-shadow: 0 8px 25px rgba(37,99,235,0.5),
              0 0 0 2px rgba(59,130,246,0.3),
              inset 0 1px 0 rgba(255,255,255,0.2) !important;
  animation: none !important;
}

/* Shine sweep pseudo-element */
.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: #ffffff !important; background: transparent !important; }

.addcartbutton span {
  color: #ffffff !important; background: transparent !important;
  display: inline-block !important; position: relative !important; z-index: 2 !important;
}

/* ---------------------------------------------------
   BTN-2: Go To Cart — Bold Gradient Blue
   Animation: glow pulse
   --------------------------------------------------- */
.go_cart {
  background: linear-gradient(135deg, #1E40AF, #2563EB) !important;
  color: #ffffff !important;
  border-radius: 6px !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: 0 4px 16px rgba(37,99,235,0.32) !important;
  position: relative !important; overflow: hidden !important;
  animation: cartGlow 2.8s ease-in-out infinite !important;
}

.go_cart:hover {
  background: linear-gradient(135deg, #1e3a8a, #1E40AF) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.5) !important;
  animation: none !important;
}

/* ---------------------------------------------------
   BTN-3: Cart Store — Amber Gold
   Animation: warm glow
   --------------------------------------------------- */
.cart_store {
  background: linear-gradient(135deg, #D97706, #F59E0B) !important;
  border-color: #D97706 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.35) !important;
}

.cart_store:hover {
  background: linear-gradient(135deg, #B45309, #D97706) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(245,158,11,0.5) !important;
}

/* ---------------------------------------------------
   BTN-4: View More — Outlined Blue → Solid on hover
   Animation: border glow
   --------------------------------------------------- */
.view_more_btn, a.view_more_btn {
  background: transparent !important;
  background-image: none !important;
  color: var(--g-primary) !important;
  border: 2px solid var(--g-primary) !important;
  border-radius: 6px !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(--g-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(37,99,235,0.32) !important;
}

/* ---------------------------------------------------
   BTN-5: Track Order — Ghost Blue with border
   Animation: lift on hover
   --------------------------------------------------- */
.track_btn a {
  color: var(--g-primary) !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--g-primary) !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important; gap: 5px !important;
  transition: all 0.26s ease !important;
  background: transparent !important; font-size: 13.5px !important;
}

.track_btn a i {
  color: var(--g-primary) !important;
  font-size: 14px !important; transition: inherit !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.track_btn a:hover {
  background: var(--g-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
  transform: translateY(-1px) !important;
}

.track_btn a:hover i { color: #ffffff !important; }

/* ---------------------------------------------------
   BTN-6: Submit / Login / Register — Blue Pill
   Animation: shine sweep on hover
   --------------------------------------------------- */
.submit-btn {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  color: #ffffff !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: 0 5px 18px rgba(37,99,235,0.38) !important;
  position: relative !important; overflow: hidden !important;
  display: block !important; text-align: center !important;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1E40AF 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(37,99,235,0.5) !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; }

/* ---------------------------------------------------
   BTN-7: Order Place (Checkout CTA) — Animated Gradient Pulse
   Animation: background sweep + size pulse
   --------------------------------------------------- */
.order_place {
  background: linear-gradient(90deg, #1E40AF 0%, #2563EB 50%, #3B82F6 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;
  transition: background-position 0.5s ease,
              transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 5px 20px rgba(37,99,235,0.4) !important;
  position: relative !important; overflow: hidden !important;
  animation: orderPulse 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(37,99,235,0.55) !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2026 LUXURY PRODUCT DETAIL BUTTONS — Exclusive Palette
   ═══════════════════════════════════════════════════════════

   BTN-8: ADD TO CART
   ─ Midnight Sapphire — deep oceanic blue-black
   ─ Cool, premium, trustworthy. Feels like a high-end tech brand.
   ─ Animation: slow aurora shift + crystalline shimmer sweep

   BTN-9: ORDER NOW
   ─ Solar Flare Crimson — rich red-rose to magenta
   ─ Warm, urgent, desire-triggering. Commands immediate action.
   ─ Animation: pulsing intensity + lightning sweep

   BTN-C/D: CALL + WHATSAPP (pair)
   ─ Bioluminescent Teal — deep forest to aqua mint
   ─ Calm, accessible, trustworthy communication feel.
   ─ Animation: breathing glow + liquid shimmer
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes auroraDrift {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes solarFlare {
  0%   { background-position: 0% 50%; box-shadow: 0 4px 20px rgba(190,18,60,0.4); }
  50%  { background-position: 100% 50%; box-shadow: 0 4px 32px rgba(190,18,60,0.65), 0 0 0 3px rgba(244,63,94,0.12); }
  100% { background-position: 0% 50%; box-shadow: 0 4px 20px rgba(190,18,60,0.4); }
}

@keyframes biolumBreath {
  0%   { background-position: 0% 50%; box-shadow: 0 4px 18px rgba(6,148,162,0.38); }
  50%  { background-position: 100% 50%; box-shadow: 0 4px 28px rgba(6,148,162,0.6), 0 0 0 3px rgba(34,211,238,0.1); }
  100% { background-position: 0% 50%; box-shadow: 0 4px 18px rgba(6,148,162,0.38); }
}

/* ─────────────────────────────────────────
   BTN-8: ADD TO CART — Midnight Sapphire
   ───────────────────────────────────────── */
.single_product.d-flex .add_cart_btn {
  background: linear-gradient(
    135deg,
    #0a0f2e 0%,
    #0d1f5c 25%,
    #1a3a8f 55%,
    #0e2872 80%,
    #070d24 100%
  ) !important;
  background-size: 300% 300% !important;
  color: #e8f0ff !important;
  border: 1px solid rgba(99,179,255,0.2) !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(13,31,92,0.5),
              inset 0 1px 0 rgba(148,196,255,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  animation: auroraDrift 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(180,220,255,0.18) 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(148,196,255,0.6), 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(99,179,255,0.45) !important;
  box-shadow: 0 14px 36px rgba(13,31,92,0.55),
              0 0 0 1px rgba(99,179,255,0.2),
              inset 0 1px 0 rgba(148,196,255,0.22) !important;
  animation: none !important;
}

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

/* ─────────────────────────────────────────
   BTN-9: ORDER NOW — Solar Flare Crimson
   ───────────────────────────────────────── */
.single_product.d-flex .order_now_btn {
  background: linear-gradient(
    135deg,
    #7f0920 0%,
    #be123c 22%,
    #e11d48 45%,
    #f43f5e 65%,
    #c0143a 85%,
    #7f0920 100%
  ) !important;
  background-size: 280% 280% !important;
  color: #fff0f3 !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: solarFlare 2.5s 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,200,210,0.25) 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,180,194,0.7), 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(190,18,60,0.6),
              0 0 0 2px rgba(244,63,94,0.22) !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: #fff0f3 !important; }

/* ─────────────────────────────────────────
   BTN-C + BTN-D: CALL & WHATSAPP
   Bioluminescent Deep Teal (pair)
   ───────────────────────────────────────── */
.call_now_btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  height: 50px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.4px !important;
  width: 100% !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease !important;
  border: none !important;
  color: #e0fdf8 !important;
  background: linear-gradient(
    135deg,
    #042f2e 0%,
    #065f46 20%,
    #0d9488 45%,
    #06b6d4 70%,
    #0e7490 90%,
    #042f2e 100%
  ) !important;
  background-size: 280% 280% !important;
  box-shadow: 0 4px 18px rgba(6,148,162,0.38),
              inset 0 1px 0 rgba(110,255,235,0.15) !important;
  animation: biolumBreath 3s ease-in-out infinite !important;
}

.call_now_btn * {
  color: #e0fdf8 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Liquid shimmer sweep */
.call_now_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important; left: -80% !important;
  width: 48% !important; height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(167,255,235,0.22) 50%,
    transparent 75%
  ) !important;
  transform: skewX(-15deg) !important;
  transition: none !important;
  pointer-events: none !important; z-index: 2 !important;
}

.call_now_btn:hover::before {
  left: 130% !important;
  transition: left 0.65s ease !important;
}

/* Top aqua glow line */
.call_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(110,255,220,0.65), transparent) !important;
  pointer-events: none !important; z-index: 3 !important;
}

.call_now_btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation: none !important;
  box-shadow: 0 12px 32px rgba(6,148,162,0.55),
              0 0 0 2px rgba(34,211,238,0.18) !important;
}

.call_now_btn:active {
  transform: translateY(-1px) scale(0.985) !important;
}

.call_now_btn i {
  font-size: 16px !important;
  color: #a7ffee !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* ---------------------------------------------------
   BTN-10: Primary / Success generic Bootstrap buttons
   --------------------------------------------------- */
.btn-primary, .button-primary {
  background: var(--g-primary) !important;
  border-color: var(--g-primary) !important;
  color: #ffffff !important;
  border-radius: 6px !important; font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.32) !important;
}

.btn-primary:hover, .button-primary:hover {
  background: var(--g-primary-dark) !important;
  border-color: var(--g-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(37,99,235,0.45) !important;
}

.btn-success {
  background: linear-gradient(135deg, #059669, #10B981) !important;
  border-color: #059669 !important; color: #ffffff !important;
  border-radius: 6px !important; font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3) !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #047857, #059669) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(16,185,129,0.45) !important;
}

/* submit type buttons */
button[type="submit"].btn, input[type="submit"].btn {
  background: var(--g-primary) !important;
  color: #ffffff !important;
  border-color: var(--g-primary) !important;
  border-radius: 6px !important; font-weight: 700 !important;
  transition: all 0.28s ease !important;
  box-shadow: 0 3px 10px rgba(37,99,235,0.25) !important;
}

button[type="submit"].btn:hover, input[type="submit"].btn:hover {
  background: var(--g-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37,99,235,0.38) !important;
}

/* Checkout btn */
.checkout-btn {
  background: var(--g-primary-dark) !important;
  border: 2px solid var(--g-primary) !important;
  color: #ffffff !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(--g-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25),
              0 8px 20px rgba(37,99,235,0.4) !important;
  transform: translateY(-2px) !important;
}

/* =====================================================
   COUNTDOWN TIMER
   ===================================================== */
.timer_inner .syotimer-cell {
  background: var(--g-primary) !important;
  color: #ffffff !important;
  border-radius: var(--g-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,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: #ffffff !important;
  border: 1.5px solid var(--g-border) !important;
  color: var(--g-text) !important;
  border-radius: var(--g-radius-sm) !important;
  transition: var(--g-transition) !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--g-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
  outline: none !important;
}

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

/* Auth / Login forms */
.auth-title {
  color: var(--g-primary-dark) !important;
  font-size: 20px !important; font-weight: 700 !important;
  background: rgba(37,99,235,0.04) !important;
  border-bottom: 2px solid var(--g-border) !important;
}

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

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

/* Payment radio buttons */
.payment-methods .form-check-input { border: 2px solid var(--g-primary) !important; }
.payment-methods .form-check-input:checked::after { background-color: var(--g-primary) !important; }
.payment-methods .form-check-input:checked { border-color: var(--g-primary) !important; }
.payment-methods .form-check-input:checked + .form-check-label {
  color: var(--g-primary) !important; font-weight: 700 !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer, .footer-top, .footer-bottom, .main-footer {
  background: #0F172A !important;
  background-image: none !important;
}

.footer-top {
  padding: 52px 0 36px !important;
  border-top: 3px solid var(--g-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-hotlint {
  color: var(--g-accent) !important;
  font-weight: 700 !important; font-size: 15px !important; transition: var(--g-transition) !important;
}

.footer-hotlint:hover { color: #ffffff !important; }

.footer-menu ul li.title a {
  color: var(--g-accent) !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(245,158,11,0.3) !important;
  padding-bottom: 8px !important; margin-bottom: 16px !important;
}

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

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

.social_link li a {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 15px !important;
  transition: var(--g-transition) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.social_link li a:hover {
  background: var(--g-primary) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  border-color: var(--g-primary) !important;
}

.d_app h2 {
  color: var(--g-accent) !important;
  font-size: 14px !important; font-weight: 700 !important;
  text-transform: uppercase !important; margin-bottom: 12px !important;
}

.footer-bottom {
  background: #050d1a !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(--g-success) !important; font-weight: 700 !important;
}

.developer-credit-link:hover { color: #ffffff !important; }

/* =====================================================
   MOBILE BOTTOM NAVIGATION — Classic Luxury
   Deep charcoal bar · Gold active accent · Clean
   ===================================================== */

/* ─── Minimal keyframes — only subtle fade in ─── */
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cartBadge {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

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

  /* ─── Bar — Deep charcoal, solid, clean ─── */
  .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: #1c1c1e !important;
    border-top: 1px solid #C9A84C !important;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.45) !important;
    height: 68px !important;
    padding: 0 !important; margin: 0 !important;
  }

  /* ─── Grid ─── */
  .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;
  }

  /* ─── Base Tab — all same neutral style ─── */
  .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 for all tabs ─── */
  .footer_nav ul li a:hover {
    background: rgba(201,168,76,0.1) !important;
    border-color: rgba(201,168,76,0.25) !important;
  }
  .footer_nav ul li a:hover span i { color: #C9A84C !important; }
  .footer_nav ul li a:hover span svg { stroke: #C9A84C !important; }
  .footer_nav ul li a:hover span:last-child { color: #C9A84C !important; }

  /* ─── TAB 3 — HOME — elevated gold center button ─── */
  .footer_nav ul li:nth-child(3) a {
    width: 58px !important; height: 58px !important;
    border-radius: 16px !important;
    margin-top: -16px !important;
    background: #C9A84C !important;
    border: 1.5px solid rgba(255,220,120,0.35) !important;
    box-shadow: 0 4px 18px rgba(201,168,76,0.45),
                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: #ffffff !important;
    font-size: 22px !important;
  }
  .footer_nav ul li:nth-child(3) a span:last-child {
    color: rgba(255,255,255,0.9) !important;
    font-size: 9.5px !important; font-weight: 700 !important;
  }
  .footer_nav ul li:nth-child(3) a:hover {
    background: #b8962f !important;
    box-shadow: 0 6px 22px rgba(201,168,76,0.55),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
    border-color: rgba(255,220,120,0.5) !important;
  }
  .footer_nav ul li:nth-child(3) a:hover span i { color: #ffffff !important; }
  .footer_nav ul li:nth-child(3) a:hover span:last-child { color: rgba(255,255,255,0.95) !important; }

  /* ─── Cart Badge ─── */
  .footer_nav .mobilecart-qty {
    position: absolute !important;
    top: -4px !important; right: -3px !important;
    background: #C9A84C !important; color: #1c1c1e !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 #1c1c1e !important;
    z-index: 10 !important;
  }

  /* ─── Home item reset ─── */
  .footer_nav 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;
  }

  /* ─── General mobile tweaks ─── */
  .slider-item { height: 150px !important; }
  .home-slider-container { border-radius: var(--g-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; margin-bottom: 0 !important; }
  .footer-top { padding: 30px 0 28px !important; }
  .mobile-search form { border-radius: 24px !important; }
  .mobile-search form button { border-radius: 0 24px 24px 0 !important; }
  .menu-logo img { height: 44px !important; }
  #content { padding-top: 163px !important; }
  .scrolltop { bottom: 84px !important; display: none !important; }
  .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; }
}

/* =====================================================
   MISC UI — Scroll, Pagination, Tables, Modals etc
   ===================================================== */

/* WhatsApp float */
.float {
  background: #25D366 !important;
  box-shadow: 0 4px 18px rgba(37,211,102,0.38) !important;
  border: none !important; transition: var(--g-transition) !important;
  animation: floatBob 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.5) !important;
}

/* Scroll to top */
.scrolltop {
  background: var(--g-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.4) !important;
  transition: var(--g-transition) !important;
}

.scrolltop:hover { background: var(--g-primary-dark) !important; transform: scale(1.08) !important; }
.scrolltop .scroll i { color: #ffffff !important; font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important; }

/* Pagination */
.pagination .page-item.active .page-link {
  background: var(--g-primary) !important; border-color: var(--g-primary) !important;
  color: #ffffff !important; border-radius: var(--g-radius-sm) !important;
}

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

.pagination .page-link:hover {
  background: rgba(37,99,235,0.08) !important; color: var(--g-primary) !important;
}

/* Tables */
.table td, .table th { color: var(--g-text) !important; border-color: var(--g-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(37,99,235,0.03) !important; }
.tracktable thead { background: var(--g-primary) !important; }
.tracktable thead * { color: #ffffff !important; }

/* Remove cart button */
.remove-cart, .remove-cart:focus { background: var(--g-error) !important; border-radius: 50% !important; }

/* Filter */
.filter_btn { background: var(--g-primary) !important; color: #ffffff !important; border-radius: var(--g-radius-sm) !important; }
.filter_close { background: var(--g-primary) !important; color: #ffffff !important; border-radius: var(--g-radius-sm) !important; }

/* Modal */
.modal-view { border-radius: var(--g-radius-lg) !important; box-shadow: var(--g-shadow-lg) !important; border: 1px solid var(--g-border) !important; }
.close-modal { background: var(--g-error) !important; color: #ffffff !important; border-radius: 50% !important; }

/* Confirm / continue */
.confirm-btn { background: var(--g-primary) !important; border-radius: var(--g-radius-sm) !important; transition: var(--g-transition) !important; }
.confirm-btn:hover { background: var(--g-primary-dark) !important; }
.continue-btn:hover { background: var(--g-primary) !important; color: #ffffff !important; }

/* Badges */
.badge { font-weight: 600 !important; border-radius: var(--g-radius-xl) !important; }
.badge-success, .bg-success { background: var(--g-success) !important; }
.badge-danger, .bg-danger { background: var(--g-error) !important; }
.badge-primary, .bg-primary { background: var(--g-primary) !important; }

/* Alerts */
.alert-success { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #166534 !important; border-radius: var(--g-radius-md) !important; }
.alert-info { background: rgba(37,99,235,0.05) !important; border-color: rgba(37,99,235,0.2) !important; color: var(--g-primary-dark) !important; }

/* Progress */
.progress-bar { background: var(--g-primary) !important; }

/* Loading spinner */
.custom-loader { --c: radial-gradient(farthest-side, var(--g-primary) 92%, #0000); }

/* Stars */
.fas.fa-star, .fas.fa-star-half-alt { color: var(--g-accent) !important; }
.far.fa-star { color: var(--g-border) !important; }
.details-ratting-wrapper i { color: var(--g-accent) !important; }
.details-ratting-wrapper i.far.fa-star { color: var(--g-border) !important; }

/* Toastr */
#toast-container > div { border-radius: var(--g-radius-md) !important; box-shadow: var(--g-shadow-lg) !important; }
#toast-container > .toast-success { background-color: rgba(34,197,94,0.95) !important; }
#toast-container > .toast-error { background-color: rgba(239,68,68,0.95) !important; }
#toast-container > .toast-warning { background-color: rgba(245,158,11,0.95) !important; }
#toast-container > .toast-info { background-color: rgba(37,99,235,0.95) !important; }

/* Checkout */
.checkout-shipping .card-header, .cart_details .card-header {
  background: rgba(37,99,235,0.04) !important; border-bottom: 1px solid var(--g-border) !important;
}
.checkout-shipping h5, .cart_details h5 { color: var(--g-primary-dark) !important; }
.checkout-shipping h6 { color: var(--g-primary) !important; }

/* Contact */
.contact-form { background: rgba(37,99,235,0.04) !important; border: 1px solid var(--g-border) !important; border-radius: var(--g-radius-md) !important; }

/* Customer sidebar */
.customer-sidebar, .sidebar-menu {
  background: #ffffff !important; border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-md) !important; box-shadow: var(--g-shadow-sm) !important;
}
.sidebar-menu li a { color: var(--g-text) !important; border-bottom: 1px solid var(--g-border) !important; transition: var(--g-transition) !important; }
.sidebar-menu li a:hover, .sidebar-menu li a.active { color: var(--g-primary) !important; background: rgba(37,99,235,0.05) !important; padding-left: 20px !important; }
.account-title { color: var(--g-primary-dark) !important; border-bottom: 2px solid var(--g-primary) !important; }
.invoice_btn, .invoice_btn:focus { background: var(--g-primary) !important; color: #ffffff !important; border-radius: var(--g-radius-sm) !important; }

/* Coupon / wcart */
.coupon-form form button { background: var(--g-primary) !important; }
.wcart-btn, .wcart-btn:focus { background: var(--g-primary) !important; }

/* Details action button */
.details-action-box .section-head .action .details-action-btn { background: var(--g-primary) !important; border-color: var(--g-primary) !important; }

/* Page overlay */
#page-overlay { background: rgba(15,23,42,0.6) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-primary); }

/* =====================================================
   ANIMATIONS (all keyframes — single definition each)
   ===================================================== */

/* Top bar gradient shimmer */
@keyframes topBarShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Product card button gradient */
@keyframes btnBlueShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Amber order now shimmer */
@keyframes amberShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Cart glow pulse */
@keyframes cartGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,99,235,0.32); }
  50%       { box-shadow: 0 4px 28px rgba(37,99,235,0.6), 0 0 0 4px rgba(37,99,235,0.12); }
}

/* Order place pulse */
@keyframes orderPulse {
  0%, 100% { box-shadow: 0 5px 20px rgba(37,99,235,0.4); }
  50%       { box-shadow: 0 5px 30px rgba(37,99,235,0.65), 0 0 0 4px rgba(37,99,235,0.15); }
}

/* WhatsApp float */
@keyframes floatBob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* Card fade in */
@keyframes gadgetFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button glow pulse */
@keyframes gadgetGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(37,99,235,0.32); }
  50%       { box-shadow: 0 4px 24px rgba(37,99,235,0.55), 0 0 0 3px rgba(37,99,235,0.12); }
}

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

/* Apply animations */
.product_item, .cat_item, .homeproduct .row > * {
  animation: gadgetFadeUp 0.4s ease both;
}

.float { animation: floatBob 3s ease-in-out infinite !important; }
.float:hover { animation: none !important; transform: scale(1.12) !important; }

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

/* =====================================================
   LEGACY TOKEN OVERRIDE — maps purple→blue
   ===================================================== */
:root {
  --purple-dark:          var(--g-primary-dark);
  --purple-main:          var(--g-primary);
  --purple-accent:        var(--g-primary-light);
  --purple-light:         rgba(37,99,235,0.25);
  --purple-soft-bg:       rgba(37,99,235,0.06);
  --purple-gradient:      linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
  --purple-gradient-rev:  linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  --purple-glow:          rgba(37,99,235,0.25);
  --purple-glow-sm:       rgba(37,99,235,0.12);
  --body-bg:              var(--g-bg);
  --card-bg:              var(--g-bg-card);
  --text-primary:         var(--g-text);
  --text-muted:           var(--g-text-muted);
  --text-price:           var(--g-primary-dark);
  --border-light:         var(--g-border);
  --shadow-card:          var(--g-shadow-sm);
  --shadow-hover:         var(--g-shadow-hover);
  --radius-card:          var(--g-radius-md);
  --radius-btn:           var(--g-radius-sm);
  --dark-footer:          #0F172A;
  --nav-bg:               #0F172A;
}

/* =====================================================
   FINAL OVERRIDES — strip remaining red/purple bleed
   ===================================================== */

/* ─── NUCLEAR FIX: Category Dropdown text always white ───
   Overrides the body div { color: #111827 } rule
   that was turning all sidebar text dark               */
.side__bar ul li a,
.side__bar ul li > a,
.sidebar-menu .side__bar ul li a,
.all__category__list .side__bar ul li a,
body .side__bar ul li a,
body .side__bar ul li a span,
body div.side__bar ul li a {
  color: #e2e8f0 !important;
}

body .side__bar,
body div.side__bar {
  background: #0f1729 !important;
  background-color: #0f1729 !important;
}

/* Hover row */
.side__bar ul li:hover > a,
body .side__bar ul li:hover > a {
  color: #ffffff !important;
  background: rgba(37,99,235,0.18) !important;
}

/* Sub-menu text — sky blue theme */
body .side__barsub ul li a,
body .side__barsub ul li a span {
  color: #e0f2fe !important;
}

body .side__barsub ul li:hover > a {
  color: #ffffff !important;
}

/* Child menu text — emerald green theme */
body .side__barchild ul li a,
body .side__barchild ul li a span {
  color: #d1fae5 !important;
}

body .side__barchild ul li:hover > a {
  color: #ffffff !important;
}

/* Footer background (overrides admin var) */
footer, .footer-top, .footer-bottom {
  background: #0F172A !important;
  background-color: #0F172A !important;
}

/* All-categories — red gradient matching logo */
.all__category__list > a, li.all__category__list > a {
  background: linear-gradient(135deg, #c0000a 0%, #e30613 50%, #ff1a2a 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
}

/* Section title blue underline */
.section-title-name { border-bottom-color: var(--g-primary) !important; color: var(--g-primary-dark) !important; }

/* Header cart badge amber */
.header-list-items ul li span { background: var(--g-accent) !important; }

/* Sidebar hover */
.sidebar-menu ul li:hover > a { background-color: rgba(37,99,235,0.06) !important; color: var(--g-primary) !important; }

/* Details add to cart (non-single_product context) */
.add_cart_btn { background: var(--g-primary) !important; border-color: var(--g-primary) !important; }
.add_cart_btn:hover { background: var(--g-primary-dark) !important; border-color: var(--g-primary-dark) !important; }

/* ═══════════════════════════════════════════════════════
   SUBCATEGORY & CHILD CATEGORY — Ultra-specific overrides
   Ensures premium.css #ff0018 background is fully replaced
   ═══════════════════════════════════════════════════════ */

/* Level 2 — Subcategory: Sky Blue theme */
.side__barsub,
.all__category__list .side__barsub,
.sidebar-menu .side__barsub,
li.all__category__list .side__barsub {
  background: #1e3a5f !important;
  background-color: #1e3a5f !important;
}

.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,
body .side__barsub ul li a {
  color: #e0f2fe !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Level 3 — Child Category: Emerald Green theme */
.side__barchild,
.all__category__list .side__barchild,
.sidebar-menu .side__barchild,
li.all__category__list .side__barchild {
  background: #1a3d2b !important;
  background-color: #1a3d2b !important;
}

.side__barchild ul li a,
.side__barchild li a,
.all__category__list .side__barchild ul li a,
.sidebar-menu .side__barchild ul li a,
body .side__barchild li a,
body .side__barchild ul li a {
  color: #d1fae5 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   HIDE EMPTY SUBCATEGORY / CHILDCATEGORY PANELS
   Empty panels show a blank line — this prevents that
   ═══════════════════════════════════════════════════════ */
.side__barsub:empty,
.side__barchild:empty,
.side__barsub ul:empty,
.side__barchild ul:empty,
.side__barsub:not(:has(li)),
.side__barchild:not(:has(li)) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Extra safety — collapse panels with no children via min dimensions */
.side__barsub,
.side__barchild {
  min-height: 0 !important;
  min-width: 0 !important;
}

/* When ul inside has no li children, collapse the panel */
.side__barsub ul:not(:has(li)),
.side__barchild ul:not(:has(li)) {
  display: none !important;
}

/* Hide the whole panel if it contains only empty ul */
.side__barsub:has(ul:empty),
.side__barchild:has(ul:empty) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   HERO SLIDER ARROWS — Glassmorphism (final override)
   Overrides style.css .main-slider .owl-nav button white bg
   ═══════════════════════════════════════════════════════ */
.main-slider .owl-nav button,
.main_slider .owl-nav button,
.main_slider .owl-prev,
.main_slider .owl-next,
.main-slider .owl-prev,
.main-slider .owl-next {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  color: #ffffff !important;
}

.main-slider .owl-nav button:hover,
.main_slider .owl-nav button:hover,
.main_slider .owl-prev:hover,
.main_slider .owl-next:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.55) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Arrow icon text color */
.main-slider .owl-nav button span,
.main_slider .owl-nav button span,
.main_slider .owl-prev i,
.main_slider .owl-next i,
.main-slider .owl-prev i,
.main-slider .owl-next i {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  font-size: 20px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* ═══════════════════════════════════════════════════
   TOP HEADER — Match exact black of nav bar
   Overrides admin var(--header-top-bg-color) and
   premium.css gradient
   ═══════════════════════════════════════════════════ */
.top_header,
body .top_header,
header .top_header,
#navbar_top .top_header {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2026 LUXURY CONTACT BUTTONS — Individual Premium Styles

   BTN-C: PHONE CALL — Deep Royal Amethyst Purple
   BTN-D: WHATSAPP   — Luminous Forest Jade Green
   ═══════════════════════════════════════════════════════════ */

/* ── Shared base layout ── */
.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.45px !important;
  width: 100% !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              opacity 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
  color: #ffffff !important;
}

.call_now_btn * {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}

.call_now_btn i {
  font-size: 17px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Shimmer sweep — shared pseudo */
.call_now_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -60% !important;
  left: -90% !important;
  width: 46% !important;
  height: 220% !important;
  transform: skewX(-16deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transition: none !important;
}

.call_now_btn:hover::before {
  left: 135% !important;
  transition: left 0.68s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Top gloss line — shared */
.call_now_btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  width: 84% !important;
  height: 1px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Active press */
.call_now_btn:active {
  transform: translateY(-1px) scale(0.982) !important;
  transition: transform 0.1s ease !important;
}

/* ─────────────────────────────────────────
   PHONE CALL — Deep Royal Amethyst
   Velvet purple → violet → deep plum
   Feels: trustworthy, premium, professional
   ───────────────────────────────────────── */
.call_now_btn[href^="tel"] {
  background: linear-gradient(
    135deg,
    #1e0533 0%,
    #3b0764 20%,
    #6d28d9 45%,
    #7c3aed 65%,
    #4c1d95 85%,
    #1e0533 100%
  ) !important;
  background-size: 260% 260% !important;
  color: #f3e8ff !important;
  box-shadow: 0 4px 20px rgba(109,40,217,0.45),
              inset 0 1px 0 rgba(221,180,255,0.18),
              inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  animation: amethystPulse 3.2s ease-in-out infinite !important;
}

.call_now_btn[href^="tel"] * { color: #f3e8ff !important; }
.call_now_btn[href^="tel"] i { color: #dda6ff !important; }

.call_now_btn[href^="tel"]::before {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(221,166,255,0.28) 50%,
    transparent 80%
  ) !important;
}

.call_now_btn[href^="tel"]::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200,150,255,0.7),
    transparent
  ) !important;
}

.call_now_btn[href^="tel"]:hover {
  transform: translateY(-4px) scale(1.025) !important;
  animation: none !important;
  background-position: right center !important;
  box-shadow: 0 14px 36px rgba(109,40,217,0.6),
              0 0 0 2px rgba(167,139,250,0.25),
              inset 0 1px 0 rgba(221,180,255,0.22) !important;
}

@keyframes amethystPulse {
  0%   { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(109,40,217,0.42); }
  50%  { background-position: 100% 50%;
         box-shadow: 0 4px 30px rgba(124,58,237,0.65),
                     0 0 0 3px rgba(167,139,250,0.12); }
  100% { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(109,40,217,0.42); }
}

/* ─────────────────────────────────────────
   WHATSAPP — Luminous Forest Jade
   Deep emerald → vivid green → lime frost
   Feels: friendly, vibrant, instant, alive
   ───────────────────────────────────────── */
.call_now_btn[href*="whatsapp"],
.call_now_btn[href*="api.whatsapp"] {
  background: linear-gradient(
    135deg,
    #052e16 0%,
    #14532d 18%,
    #15803d 38%,
    #16a34a 55%,
    #22c55e 72%,
    #15803d 88%,
    #052e16 100%
  ) !important;
  background-size: 260% 260% !important;
  color: #f0fdf4 !important;
  box-shadow: 0 4px 20px rgba(21,128,61,0.45),
              inset 0 1px 0 rgba(167,243,208,0.2),
              inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  animation: jadeGlow 3s ease-in-out infinite !important;
}

.call_now_btn[href*="whatsapp"] * { color: #f0fdf4 !important; }
.call_now_btn[href*="whatsapp"] i { color: #86efac !important; }

.call_now_btn[href*="whatsapp"]::before {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(187,247,208,0.3) 50%,
    transparent 80%
  ) !important;
}

.call_now_btn[href*="whatsapp"]::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(134,239,172,0.65),
    transparent
  ) !important;
}

.call_now_btn[href*="whatsapp"]:hover {
  transform: translateY(-4px) scale(1.025) !important;
  animation: none !important;
  background-position: right center !important;
  box-shadow: 0 14px 36px rgba(21,128,61,0.6),
              0 0 0 2px rgba(74,222,128,0.28),
              inset 0 1px 0 rgba(187,247,208,0.25) !important;
}

@keyframes jadeGlow {
  0%   { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(21,128,61,0.42); }
  50%  { background-position: 100% 50%;
         box-shadow: 0 4px 30px rgba(34,197,94,0.62),
                     0 0 0 3px rgba(74,222,128,0.12); }
  100% { background-position: 0% 50%;
         box-shadow: 0 4px 20px rgba(21,128,61,0.42); }
}