/* =====================================================
   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");

/* =====================================================
   GOLDEN LUXURY THEME — 2026
   Complete brand color override: Green → Golden
   Primary Gold : #C8962A  |  Deep Gold  : #A07010
   Light Gold   : #E8B84B  |  Crimson    : #8B1A0A
   Dark BG      : #1A1200  |  Light BG   : #FBF7EE
   ===================================================== */

:root {
  --brand-green:        #C8962A !important;
  --brand-green-dark:   #A07010 !important;
  --brand-green-light:  #E8B84B !important;
  --brand-dark:         #1A1200 !important;
  --brand-white:        #FFFFFF !important;
  --brand-bg:           #FBF7EE !important;
  --brand-orange:       #B8380A !important;
  --brand-orange-dark:  #8B1A0A !important;
  --brand-card:         #FFFFFF !important;
  --brand-text:         #1A1200 !important;
  --brand-text-muted:   #7A6030 !important;
  --brand-border:       #E8D5A0 !important;
  --brand-shadow-sm:    0 1px 3px rgba(200,150,42,0.10), 0 1px 2px rgba(0,0,0,0.05) !important;
  --brand-shadow-md:    0 4px 16px rgba(200,150,42,0.15), 0 2px 6px rgba(0,0,0,0.07) !important;
  --brand-shadow-lg:    0 8px 32px rgba(200,150,42,0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
  --brand-shadow-hover: 0 12px 40px rgba(200,150,42,0.22), 0 6px 16px rgba(0,0,0,0.09) !important;
  --brand-green-rgb:    200, 150, 42 !important;
  --brand-orange-rgb:   184, 56, 10 !important;
}

/* =========== 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 — Classic Glossy Gold Luxury 2026 =========== */

@keyframes classicGoldShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes classicGoldBreath {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(101,67,0,0.6),
      0 4px 16px rgba(180,130,10,0.4),
      inset 0 1px 0 rgba(255,240,150,0.3),
      inset 0 -1px 0 rgba(0,0,0,0.25);
  }
  50% {
    box-shadow:
      0 2px 12px rgba(101,67,0,0.8),
      0 6px 24px rgba(180,130,10,0.6),
      0 0 30px rgba(212,168,52,0.2),
      inset 0 1px 0 rgba(255,245,160,0.45),
      inset 0 -1px 0 rgba(0,0,0,0.3);
  }
}
@keyframes goldSweepCard {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}
@keyframes goldUnderlineIn {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* ── Base button — Classic Deep Gold ── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(
    180deg,
    #c8920a 0%,
    #a06a00 20%,
    #7a4d00 40%,
    #9a6200 60%,
    #c8920a 80%,
    #e8b020 100%
  ) !important;
  background-size: 100% 300% !important;
  color: #fffbeb !important;
  border: 1px solid rgba(212,168,52,0.55) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 1.2px !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;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
  animation: classicGoldBreath 2.8s ease-in-out infinite,
             classicGoldShift 4s ease infinite !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
}

/* Glossy highlight — top half shine */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 45% !important;
  background: linear-gradient(
    180deg,
    rgba(255,250,200,0.22) 0%,
    rgba(255,240,150,0.08) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Gold sweep — fires 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(255,245,180,0.45) 50%,
    transparent 85%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 0 !important;
}

/* ── HOVER — warm bright gold + sweep ── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  transform: translateY(-3px) scale(1.03) !important;
  animation: none !important;
  background: linear-gradient(
    180deg,
    #e8b020 0%,
    #c8920a 25%,
    #a07000 50%,
    #c8920a 75%,
    #f0cc40 100%
  ) !important;
  color: #fffbeb !important;
  border-color: rgba(255,220,80,0.9) !important;
  box-shadow:
    0 0 14px rgba(212,168,52,0.8),
    0 0 30px rgba(180,130,10,0.5),
    0 8px 28px rgba(101,67,0,0.7),
    0 0 50px rgba(212,168,52,0.15),
    inset 0 1px 0 rgba(255,248,180,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.35) !important;
}

.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: goldSweepCard 0.6s ease forwards !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: #fffbeb !important;
  z-index: 4 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #fffbeb !important;
  background: transparent !important;
  z-index: 4 !important;
}
.addcartbutton span {
  color: #fffbeb !important;
  background: transparent !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 4 !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 (Royal Deep Gold — 2026 Luxury) =========== */

@keyframes goldAurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes goldNeonBreath {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(212,168,52,0.6),
      0 0 24px rgba(180,130,20,0.4),
      0 4px 28px rgba(120,80,10,0.55),
      inset 0 1px 0 rgba(255,235,150,0.25),
      inset 0 -1px 0 rgba(0,0,0,0.35);
  }
  50% {
    box-shadow:
      0 0 20px rgba(212,168,52,0.95),
      0 0 50px rgba(180,130,20,0.65),
      0 8px 40px rgba(120,80,10,0.75),
      0 0 80px rgba(212,168,52,0.25),
      inset 0 1px 0 rgba(255,240,160,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.4);
  }
}
@keyframes goldBorderFlicker {
  0%, 100% { border-color: rgba(212,168,52,0.5); }
  50%       { border-color: rgba(255,220,80,0.9); }
}
@keyframes goldRaySweep {
  0%   { left: -100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}

.single_product.d-flex .order_now_btn {
  /* Deep Royal Gold — multiple gold tones layered */
  background: linear-gradient(
    135deg,
    #3d2600 0%,
    #7a4a00 15%,
    #b8860b 30%,
    #d4a817 45%,
    #f0c030 55%,
    #d4a817 65%,
    #a07010 80%,
    #6b3d00 100%
  ) !important;
  background-size: 300% 300% !important;
  color: #fffbeb !important;
  border: 1.5px solid rgba(212,168,52,0.5) !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  cursor: pointer !important;
  /* Layered luxury shadow */
  animation: goldNeonBreath 2.5s ease-in-out infinite,
             goldAurora 5s ease infinite,
             goldBorderFlicker 2.5s ease-in-out infinite !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5) !important;
}

/* Continuous gold ray sweep */
.single_product.d-flex .order_now_btn::before {
  content: "" !important;
  position: absolute !important;
  top: -10% !important;
  left: -100% !important;
  width: 55% !important;
  height: 120% !important;
  background: linear-gradient(
    100deg,
    transparent 10%,
    rgba(255,240,150,0.5) 40%,
    rgba(255,255,220,0.25) 50%,
    rgba(255,240,150,0.5) 60%,
    transparent 90%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: goldRaySweep 2.5s ease-in-out infinite !important;
}

/* Top gold shimmer 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,240,120,0.9),
    rgba(255,255,200,1),
    rgba(255,240,120,0.9),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* HOVER — maximum gold luxury */
.single_product.d-flex .order_now_btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  animation: none !important;
  background: linear-gradient(
    135deg,
    #5a3800 0%,
    #a07010 20%,
    #d4a817 40%,
    #f5cc30 55%,
    #d4a817 70%,
    #8a5a00 100%
  ) !important;
  border-color: rgba(255,220,80,1) !important;
  box-shadow:
    0 0 25px rgba(212,168,52,1),
    0 0 60px rgba(180,130,20,0.7),
    0 14px 44px rgba(120,80,10,0.85),
    0 0 100px rgba(212,168,52,0.3),
    inset 0 1px 0 rgba(255,245,160,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.4) !important;
  color: #fffbeb !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: #fffbeb !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;
}

/* =====================================================
   ORDER NOW — Apple iOS Premium Glassmorphism (FINAL)
   Overrides all previous card button styles
   ===================================================== */

@keyframes iosGlassBreath {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.2),
      0 8px 22px rgba(0,0,0,0.14),
      0 0 0 0.5px rgba(255,255,255,0.2),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(0,0,0,0.24),
      0 14px 32px rgba(0,0,0,0.16),
      0 0 0 0.5px rgba(255,255,255,0.3),
      0 0 20px rgba(255,255,255,0.05),
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 -1px 0 rgba(0,0,0,0.1);
  }
}
@keyframes iosSheen {
  from { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  to   { transform: translateX(230%) skewX(-20deg); opacity: 0; }
}

.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: rgba(18, 18, 22, 0.52) !important;
  backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !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;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.2),
    0 8px 22px rgba(0,0,0,0.14),
    0 0 0 0.5px rgba(255,255,255,0.2),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.08) !important;
  animation: iosGlassBreath 3.5s ease-in-out infinite !important;
  transition:
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease !important;
}

/* Specular glass highlight — top */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 42% !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  ) !important;
  border-radius: 12px 12px 0 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Sheen sweep layer */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -20% !important; left: 0 !important;
  width: 45% !important; height: 140% !important;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.12) 55%,
    transparent 80%
  ) !important;
  transform: translateX(-120%) skewX(-20deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Hover */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background: rgba(28, 28, 36, 0.7) !important;
  border-color: rgba(255,255,255,0.35) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,1) !important;
  transform: translateY(-3px) scale(1.025) !important;
  animation: none !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.24),
    0 18px 42px rgba(0,0,0,0.2),
    0 0 0 0.5px rgba(255,255,255,0.38),
    0 0 28px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}
.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: iosSheen 0.65s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* Press — iPhone haptic */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(1px) scale(0.97) !important;
  background: rgba(10,10,14,0.72) !important;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 2px 6px rgba(0,0,0,0.14) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Text */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span {
  position: relative !important; top: 0 !important;
  display: inline !important;
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  z-index: 4 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
}
.addcartbutton span {
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 4 !important;
}

/* =====================================================
   ORDER NOW — Glassic Golden Lightning 2026
   Unified golden glass · Localized glimmer spots ·
   Smart · Luxurious · Refined
   ===================================================== */

@keyframes glassicGoldBreath {
  0%, 100% {
    box-shadow:
      0 2px 12px rgba(0,0,0,0.28),
      0 6px 24px rgba(0,0,0,0.18),
      0 0 0 0.5px rgba(212,168,52,0.35),
      inset 0 1px 0 rgba(255,240,140,0.30),
      inset 0 -1px 0 rgba(0,0,0,0.18);
  }
  50% {
    box-shadow:
      0 4px 18px rgba(0,0,0,0.32),
      0 10px 32px rgba(0,0,0,0.20),
      0 0 0 0.5px rgba(212,168,52,0.6),
      0 0 22px rgba(212,168,52,0.12),
      inset 0 1px 0 rgba(255,245,160,0.45),
      inset 0 -1px 0 rgba(0,0,0,0.22);
  }
}

/* Lightning spot 1 — left glimmer */
@keyframes lightningSpot1 {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  45%       { opacity: 0; }
  50%       { opacity: 0.7; transform: scale(1.2); }
  55%       { opacity: 0; transform: scale(0.6); }
}

/* Lightning spot 2 — right glimmer, offset timing */
@keyframes lightningSpot2 {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  70%       { opacity: 0; }
  75%       { opacity: 0.6; transform: scale(1.1); }
  80%       { opacity: 0; transform: scale(0.5); }
}

/* Surface sheen sweep */
@keyframes glassicSweep {
  from { transform: translateX(-130%) skewX(-22deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translateX(240%) skewX(-22deg); opacity: 0; }
}

/* ── BASE: Glassic Golden ── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  /* Deep amber glass — unified golden base */
  background:
    linear-gradient(
      160deg,
      rgba(180,120,10,0.82) 0%,
      rgba(140,88,4,0.88) 40%,
      rgba(100,60,2,0.90) 65%,
      rgba(150,100,8,0.84) 100%
    ) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

  border: 0.5px solid rgba(212,168,52,0.45) !important;
  border-top-color: rgba(255,230,100,0.55) !important;
  border-bottom-color: rgba(100,60,0,0.5) !important;

  border-radius: 12px !important;
  color: #fff8dc !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.9px !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;
  text-shadow: 0 1px 6px rgba(80,40,0,0.55) !important;

  animation: glassicGoldBreath 3.2s ease-in-out infinite !important;
  transition:
    transform 0.36s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.36s ease,
    background 0.36s ease,
    border-color 0.36s ease !important;
}

/* Specular glass highlight — top */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 44% !important;
  background: linear-gradient(
    180deg,
    rgba(255,240,140,0.18) 0%,
    rgba(255,220,80,0.06) 60%,
    transparent 100%
  ) !important;
  border-radius: 12px 12px 0 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Sheen sweep — always animating */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -15% !important; left: 0 !important;
  width: 38% !important; height: 130% !important;
  background: linear-gradient(
    100deg,
    transparent 15%,
    rgba(255,235,120,0.14) 42%,
    rgba(255,248,180,0.24) 50%,
    rgba(255,235,120,0.14) 58%,
    transparent 85%
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  animation: glassicSweep 3.8s ease-in-out infinite !important;
}

/* Lightning spot LEFT — localized glimmer */
.pro_btn .cart_btn button .order-lightning-l,
.pro_btn .order_button a .order-lightning-l,
.addcartbutton .order-lightning-l,
.pro_btn .cart_btn button span::before,
.pro_btn .order_button a span::before {
  display: none !important;
}

/* Lightning spot injected via filter — golden haze at specific positions */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  filter: drop-shadow(0 0 2px rgba(212,168,52,0.18)) !important;
}

/* ── HOVER ── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background:
    linear-gradient(
      160deg,
      rgba(210,148,16,0.88) 0%,
      rgba(165,108,8,0.92) 40%,
      rgba(120,74,4,0.94) 65%,
      rgba(190,130,12,0.88) 100%
    ) !important;
  border-color: rgba(255,215,60,0.75) !important;
  border-top-color: rgba(255,240,130,0.85) !important;
  color: #fffde7 !important;
  transform: translateY(-3px) scale(1.025) !important;
  animation: none !important;
  filter: drop-shadow(0 0 8px rgba(212,168,52,0.35)) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.32),
    0 14px 38px rgba(0,0,0,0.20),
    0 0 0 0.5px rgba(255,215,60,0.65),
    0 0 28px rgba(212,168,52,0.16),
    inset 0 1px 0 rgba(255,245,150,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.22) !important;
  text-shadow: 0 0 10px rgba(255,210,60,0.45) !important;
}

.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: glassicSweep 0.6s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* ── ACTIVE press ── */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(1px) scale(0.97) !important;
  filter: drop-shadow(0 0 4px rgba(212,168,52,0.3)) !important;
  box-shadow:
    0 1px 6px rgba(0,0,0,0.3),
    0 3px 10px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,235,100,0.20),
    inset 0 2px 8px rgba(0,0,0,0.18) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease !important;
}

/* Text */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span {
  position: relative !important; top: 0 !important;
  display: inline !important;
  background: transparent !important;
  color: #fff8dc !important;
  z-index: 5 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #fff8dc !important;
  background: transparent !important;
}
.addcartbutton span {
  color: #fff8dc !important;
  background: transparent !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 5 !important;
}

/* =====================================================
   ORDER NOW — Champagne Rose Gold Glassic (ULTIMATE)
   Amber + Gold + Deep Red mixed = Rose Gold Glass
   Semi-transparent · Glassy · Premium · 2026
   ===================================================== */

@keyframes roseGoldBreath {
  0%, 100% {
    box-shadow:
      0 3px 14px rgba(0,0,0,0.28),
      0 8px 26px rgba(0,0,0,0.18),
      0 0 0 0.5px rgba(198,120,60,0.40),
      inset 0 1px 0 rgba(255,210,150,0.32),
      inset 0 -1px 0 rgba(80,20,10,0.22);
  }
  50% {
    box-shadow:
      0 4px 18px rgba(0,0,0,0.32),
      0 12px 34px rgba(0,0,0,0.20),
      0 0 0 0.5px rgba(198,120,60,0.65),
      0 0 24px rgba(198,100,50,0.14),
      inset 0 1px 0 rgba(255,220,160,0.45),
      inset 0 -1px 0 rgba(80,20,10,0.26);
  }
}

@keyframes roseGoldSweep {
  from { transform: translateX(-130%) skewX(-22deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { transform: translateX(240%) skewX(-22deg); opacity: 0; }
}

/* ── BASE: Rose Gold Glass ── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  /* Amber + Gold + deep Red = Champagne Rose Gold */
  background: linear-gradient(
    145deg,
    rgba(165,72,36,0.78)  0%,
    rgba(190,110,30,0.82) 25%,
    rgba(172,95,22,0.86)  50%,
    rgba(148,58,28,0.82)  75%,
    rgba(168,85,30,0.78)  100%
  ) !important;
  backdrop-filter: blur(18px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) !important;

  /* Rose gold edge */
  border: 0.5px solid rgba(210,140,70,0.45) !important;
  border-top-color: rgba(255,200,130,0.55) !important;
  border-bottom-color: rgba(120,40,15,0.40) !important;

  border-radius: 12px !important;
  color: rgba(255,235,200,0.95) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.9px !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;
  text-shadow: 0 1px 5px rgba(80,20,5,0.50) !important;
  filter: drop-shadow(0 2px 4px rgba(160,70,30,0.20)) !important;
  animation: roseGoldBreath 3s ease-in-out infinite !important;
  transition:
    transform 0.36s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.34s ease,
    background 0.34s ease,
    border-color 0.34s ease,
    filter 0.34s ease !important;
}

/* Glassy specular top highlight */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 44% !important;
  background: linear-gradient(
    180deg,
    rgba(255,215,155,0.20) 0%,
    rgba(255,190,110,0.08) 55%,
    transparent 100%
  ) !important;
  border-radius: 12px 12px 0 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Rose gold sheen sweep */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -15% !important; left: 0 !important;
  width: 36% !important; height: 130% !important;
  background: linear-gradient(
    100deg,
    transparent 12%,
    rgba(255,200,140,0.16) 40%,
    rgba(255,220,170,0.26) 50%,
    rgba(255,200,140,0.16) 60%,
    transparent 88%
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  animation: roseGoldSweep 3.6s ease-in-out infinite !important;
}

/* ── HOVER ── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background: linear-gradient(
    145deg,
    rgba(195,88,44,0.88)  0%,
    rgba(220,132,38,0.92) 25%,
    rgba(200,112,28,0.94) 50%,
    rgba(175,72,36,0.90)  75%,
    rgba(200,105,40,0.88) 100%
  ) !important;
  border-color: rgba(255,190,100,0.70) !important;
  border-top-color: rgba(255,220,160,0.85) !important;
  color: rgba(255,245,215,1) !important;
  transform: translateY(-3px) scale(1.025) !important;
  animation: none !important;
  filter: drop-shadow(0 0 8px rgba(180,90,40,0.35)) !important;
  text-shadow: 0 0 10px rgba(255,180,80,0.40) !important;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.34),
    0 16px 40px rgba(0,0,0,0.20),
    0 0 0 0.5px rgba(240,160,80,0.65),
    0 0 28px rgba(198,100,50,0.18),
    inset 0 1px 0 rgba(255,220,160,0.50),
    inset 0 -1px 0 rgba(80,20,10,0.26) !important;
}
.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: roseGoldSweep 0.58s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* ── PRESS ── */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(1px) scale(0.97) !important;
  filter: drop-shadow(0 1px 3px rgba(120,40,15,0.30)) !important;
  box-shadow:
    0 1px 6px rgba(0,0,0,0.32),
    0 3px 12px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,200,130,0.18),
    inset 0 3px 8px rgba(0,0,0,0.20) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Text */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span {
  position: relative !important; top: 0 !important;
  display: inline !important;
  background: transparent !important;
  color: rgba(255,235,200,0.95) !important;
  z-index: 5 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: rgba(255,235,200,0.95) !important;
  background: transparent !important;
}
.addcartbutton span {
  color: rgba(255,235,200,0.95) !important;
  background: transparent !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 5 !important;
}

/* =====================================================
   ORDER NOW — Liquid Crimson Gold (2026 Lightning Glass)
   Deep Red · Pure Gold · Electric Lightning · Glass
   ===================================================== */

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

@keyframes electricFlash {
  0%, 89%, 91%, 93%, 100% { opacity: 0; }
  90%  { opacity: 0.85; }
  92%  { opacity: 0.3; }
}

@keyframes crimsonGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0.5px rgba(220,60,40,0.45),
      0 4px 16px rgba(180,20,10,0.35),
      0 10px 30px rgba(0,0,0,0.30),
      inset 0 1px 0 rgba(255,200,80,0.28),
      inset 0 -1px 0 rgba(120,10,5,0.30);
  }
  50% {
    box-shadow:
      0 0 0 0.5px rgba(255,100,40,0.65),
      0 4px 22px rgba(200,40,10,0.50),
      0 12px 36px rgba(0,0,0,0.32),
      0 0 28px rgba(220,60,20,0.18),
      inset 0 1px 0 rgba(255,215,90,0.40),
      inset 0 -1px 0 rgba(120,10,5,0.35);
  }
}

@keyframes goldSheenRun {
  from { transform: translateX(-130%) skewX(-22deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translateX(240%) skewX(-22deg); opacity: 0; }
}

/* ── BASE ── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  /* Crimson → Deep Red → Gold merged with transparency */
  background:
    linear-gradient(
      135deg,
      rgba(180, 20, 8, 0.80)  0%,
      rgba(200, 50, 15, 0.82) 20%,
      rgba(170, 110, 8, 0.80) 45%,
      rgba(190, 35, 12, 0.82) 70%,
      rgba(160, 15, 5, 0.80)  100%
    ) !important;
  background-size: 300% 300% !important;
  backdrop-filter: blur(20px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(220%) !important;
  border: 0.5px solid rgba(255,100,50,0.40) !important;
  border-top-color: rgba(255,200,80,0.55) !important;
  border-bottom-color: rgba(100,5,2,0.45) !important;
  border-radius: 12px !important;
  color: rgba(255,230,180,0.96) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.9px !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;
  text-shadow: 0 1px 6px rgba(80,5,2,0.60) !important;
  animation:
    crimsonGoldFlow 5s ease infinite,
    crimsonGlow 2.8s ease-in-out infinite !important;
  transition:
    transform 0.36s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.34s ease,
    background 0.34s ease,
    border-color 0.34s ease !important;
}

/* Glass specular top shine */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 44% !important;
  background: linear-gradient(
    180deg,
    rgba(255,200,80,0.18) 0%,
    rgba(255,150,50,0.07) 55%,
    transparent 100%
  ) !important;
  border-radius: 12px 12px 0 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Gold sheen sweep */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -15% !important; left: 0 !important;
  width: 36% !important; height: 130% !important;
  background: linear-gradient(
    100deg,
    transparent 10%,
    rgba(255,200,80,0.16) 42%,
    rgba(255,230,120,0.28) 50%,
    rgba(255,200,80,0.16) 58%,
    transparent 90%
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  animation: goldSheenRun 3.5s ease-in-out infinite !important;
}

/* ── HOVER ── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background:
    linear-gradient(
      135deg,
      rgba(220, 30, 10, 0.90)  0%,
      rgba(230, 70, 20, 0.92)  20%,
      rgba(200, 135, 12, 0.90) 45%,
      rgba(215, 45, 15, 0.92)  70%,
      rgba(195, 20, 8, 0.90)   100%
    ) !important;
  border-color: rgba(255,170,60,0.75) !important;
  border-top-color: rgba(255,220,100,0.90) !important;
  color: rgba(255,245,200,1) !important;
  transform: translateY(-3px) scale(1.028) !important;
  animation: none !important;
  text-shadow: 0 0 12px rgba(255,160,50,0.50) !important;
  box-shadow:
    0 0 18px rgba(220,50,15,0.55),
    0 6px 24px rgba(0,0,0,0.36),
    0 16px 42px rgba(0,0,0,0.22),
    0 0 0 0.5px rgba(255,160,60,0.70),
    0 0 32px rgba(200,80,20,0.20),
    inset 0 1px 0 rgba(255,220,100,0.52),
    inset 0 -1px 0 rgba(100,5,2,0.32) !important;
}
.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  animation: goldSheenRun 0.55s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* ── PRESS ── */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow:
    0 1px 6px rgba(0,0,0,0.35),
    0 3px 12px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,190,60,0.18),
    inset 0 3px 8px rgba(0,0,0,0.22) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Text */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span {
  position: relative !important; top: 0 !important;
  display: inline !important; background: transparent !important;
  color: rgba(255,230,180,0.96) !important; z-index: 5 !important;
}
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: rgba(255,230,180,0.96) !important; background: transparent !important;
}
.addcartbutton span {
  color: rgba(255,230,180,0.96) !important; background: transparent !important;
  display: inline-block !important; position: relative !important; z-index: 5 !important;
}

/* =====================================================
   GOLDEN LUXURY THEME — COMPLETE FINAL POLISH
   Roadmap:
   1. ALL CATEGORIES button fix
   2. Nav bar golden
   3. Search golden
   4. Header accent line golden
   5. Mobile header golden
   6. Slider nav golden
   7. Section titles golden
   8. Product card hovers golden
   9. Buttons golden shadows
   10. Footer golden
   11. Mobile nav golden
   12. Sidebar dropdown fix
   13. Remaining rgba green → gold
   ===================================================== */

/* ── 1. ALL CATEGORIES Button ── */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i {
  background: linear-gradient(135deg, #A07010 0%, #C8962A 50%, #D4A832 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              0 2px 8px rgba(200,150,42,0.4) !important;
  animation: none !important;
}
.all__category__list > a:hover,
.all__category__list > a:hover * {
  background: linear-gradient(135deg, #8A5E08 0%, #A07010 100%) !important;
  box-shadow: 0 4px 16px rgba(200,150,42,0.55) !important;
}

/* ── 2. Top bar hotline tel button ── */
.top_header a[href^="tel"] {
  background: rgba(200,150,42,0.20) !important;
  border: 1px solid rgba(200,150,42,0.50) !important;
}

/* ── 3. Header accent line — golden gradient ── */
.main-header::after, .logo-area::after {
  background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B, #C8962A, #A07010) !important;
  height: 2px !important;
}

/* ── 4. Mobile header ── */
.mobile-header {
  border-bottom: 2px solid #C8962A !important;
  box-shadow: 0 2px 10px rgba(200,150,42,0.15) !important;
}
.menu-bar i, .toggle i { color: #C8962A !important; }
.mobile-menu-logo {
  background: linear-gradient(135deg, #7A4A00, #C8962A) !important;
}
.mobile-menu {
  border-right: 2px solid #C8962A !important;
  box-shadow: 4px 0 30px rgba(200,150,42,0.18) !important;
}
.mobile-menu .menu-category-name:hover {
  background: rgba(200,150,42,0.06) !important;
  color: #C8962A !important;
}

/* ── 5. Search bar ── */
.main-search form, .mobile-search form {
  border: 2px solid #C8962A !important;
  box-shadow: 0 2px 8px rgba(200,150,42,0.12) !important;
}
.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: #A07010 !important;
  box-shadow: 0 4px 16px rgba(200,150,42,0.22) !important;
}
.main-search form button, .mobile-search form button {
  background: #C8962A !important;
}
.main-search form button:hover, .mobile-search form button:hover {
  background: #A07010 !important;
}

/* ── 6. Nav menu ── */
.menu-area {
  background: #1A1200 !important;
  box-shadow: 0 3px 12px rgba(26,18,0,0.5) !important;
}

/* ── 7. Slider nav arrows ── */
.main_slider .owl-prev:hover, .main_slider .owl-next:hover {
  background: rgba(200,150,42,0.75) !important;
  border-color: #C8962A !important;
}

/* ── 8. Section title underline ── */
.section-title-name {
  border-bottom: 3px solid #C8962A !important;
  color: #1A1200 !important;
}

/* ── 9. Category card hover ── */
.cat_item:hover {
  border-color: #C8962A !important;
  box-shadow: 0 4px 16px rgba(200,150,42,0.18) !important;
}
.cat_item:hover .cat_name a { color: #A07010 !important; }

/* ── 10. Product card hover ── */
.product_item:hover, .wist_item:hover {
  border-color: #C8962A !important;
  box-shadow: 0 12px 40px rgba(200,150,42,0.22) !important;
}
.pro_name a:hover { color: #A07010 !important; }

/* ── 11. Sale badge ── */
.sale-badge-box {
  background: #B8380A !important;
  box-shadow: 0 3px 10px rgba(184,56,10,0.45) !important;
}

/* ── 12. Buttons golden shadows ── */
.go_cart {
  background: #C8962A !important;
  box-shadow: 0 4px 14px rgba(200,150,42,0.35) !important;
}
.go_cart:hover {
  background: #A07010 !important;
  box-shadow: 0 8px 22px rgba(200,150,42,0.5) !important;
}
.cart_store {
  background: #C8962A !important;
  border-color: #C8962A !important;
  box-shadow: 0 4px 14px rgba(200,150,42,0.3) !important;
}
.cart_store:hover {
  background: #A07010 !important;
  box-shadow: 0 8px 22px rgba(200,150,42,0.45) !important;
}
.view_more_btn, a.view_more_btn {
  color: #A07010 !important;
  border: 2px solid #C8962A !important;
}
.view_more_btn:hover, a.view_more_btn:hover {
  background: #C8962A !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(200,150,42,0.35) !important;
}
.submit-btn {
  background: linear-gradient(135deg, #A07010 0%, #C8962A 100%) !important;
  box-shadow: 0 5px 18px rgba(200,150,42,0.40) !important;
}
.submit-btn:hover {
  background: linear-gradient(135deg, #C8962A 0%, #A07010 100%) !important;
  box-shadow: 0 10px 28px rgba(200,150,42,0.52) !important;
}
.order_place {
  background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
  box-shadow: 0 5px 20px rgba(200,150,42,0.42) !important;
}
.order_place:hover {
  box-shadow: 0 10px 30px rgba(200,150,42,0.58) !important;
}
.btn-primary, .button-primary {
  background: #C8962A !important;
  border-color: #C8962A !important;
  box-shadow: 0 4px 14px rgba(200,150,42,0.32) !important;
}
.btn-primary:hover { background: #A07010 !important; border-color: #A07010 !important; }
.btn-success {
  background: linear-gradient(135deg, #A07010, #C8962A) !important;
  border-color: #A07010 !important;
}

/* ── 13. Countdown timer ── */
.timer_inner .syotimer-cell {
  background: #B8380A !important;
  box-shadow: 0 2px 8px rgba(184,56,10,0.35) !important;
}

/* ── 14. Sidebar dropdown top border ── */
.side__bar { border-top: 3px solid #C8962A !important; }
.side__bar ul li:hover { background: rgba(200,150,42,0.12) !important; }
.side__bar ul li:hover > a { border-left: 3px solid #C8962A !important; }

/* ── 15. Form focus golden ── */
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: #C8962A !important;
  box-shadow: 0 0 0 3px rgba(200,150,42,0.14) !important;
}
.no-account a, .register-now a { color: #A07010 !important; }
.forget-link { color: #A07010 !important; }

/* ── 16. Pagination golden ── */
.pagination .page-item.active .page-link {
  background: #C8962A !important; border-color: #C8962A !important;
}
.pagination .page-link { color: #A07010 !important; }
.pagination .page-link:hover { background: rgba(200,150,42,0.10) !important; }

/* ── 17. Footer ── */
.footer-top { border-top: 3px solid #C8962A !important; }
.footer-menu ul li.title a {
  color: #E8B84B !important;
  border-bottom: 2px solid rgba(232,184,75,0.35) !important;
}
.footer-menu ul li a:hover { color: #E8B84B !important; }
.footer-hotlint { color: #E8B84B !important; }
.social_link li a:hover {
  background: #C8962A !important;
  border-color: #C8962A !important;
}
.d_app h2 { color: #E8B84B !important; }
.developer-credit-link { color: #E8B84B !important; }

/* ── 18. Footer title underline ── */
.footer-menu ul li.title a::after {
  background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
}
.footer-menu ul li.title.stay_conn a::after {
  background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
}

/* ── 19. Mobile bottom navigation ── */
@media (max-width: 767px) {
  .footer_nav {
    border-top: 1px solid rgba(200,150,42,0.4) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.55),
                0 -1px 0 rgba(200,150,42,0.2) !important;
  }
  .footer_nav ul li a:hover {
    background: rgba(200,150,42,0.15) !important;
    border-color: rgba(200,150,42,0.35) !important;
  }
  .footer_nav ul li a:hover span i { color: #E8B84B !important; }
  .footer_nav ul li a:hover span:last-child { color: #E8B84B !important; }
  .footer_nav ul li:nth-child(3) a {
    background: rgba(200,150,42,0.22) !important;
    border: 1px solid rgba(232,184,75,0.50) !important;
    box-shadow: 0 0 18px rgba(200,150,42,0.35) !important;
  }
  .footer_nav ul li:nth-child(3) a span i { color: #E8B84B !important; }
  .footer_nav ul li:nth-child(3) a span:last-child { color: #E8B84B !important; }
  .footer_nav .mobilecart-qty {
    background: #B8380A !important;
    border: 1.5px solid rgba(26,18,0,0.9) !important;
  }
}

/* ── 20. Search result price ── */
.search_content .price { color: #A07010 !important; font-weight: 700 !important; }
.search_product ul li:hover { background: rgba(200,150,42,0.06) !important; }

/* ── 21. Scrolltop golden ── */
.scrolltop .scroll {
  background: #C8962A !important;
  box-shadow: 0 4px 12px rgba(200,150,42,0.40) !important;
}
.scrolltop .scroll:hover { background: #A07010 !important; }

/* ── 22. Page background warm cream ── */
body { background: #FBF7EE !important; }
.homeproduct { background: transparent !important; }
.bottoads_area { background: #FBF7EE !important; }

/* ── 23. Nav links gold underline ── */
.heder__category > li:not(.all__category__list) a:hover::after {
  background: linear-gradient(
    90deg, transparent, #C8962A, #E8B84B, #D4A832, transparent
  ) !important;
}

/* ── 24. Login/signup pill border ── */
.right__menu__top li a {
  border: 1px solid rgba(200,150,42,0.35) !important;
  background: rgba(200,150,42,0.06) !important;
}
.right__menu__top li a:hover {
  background: rgba(200,150,42,0.18) !important;
  border-color: rgba(232,184,75,0.70) !important;
  color: #fde68a !important;
}
.right__menu__top li a i { color: #C8962A !important; }

/* ── 25. Star ratings ── */
.fas.fa-star, .fas.fa-star-half-alt { color: #C8962A !important; }

/* ── 26. Table header ── */
.tracktable thead { background: #C8962A !important; color: #fff !important; }

/* ── 27. Checkout ── */
.checkout-btn {
  background: #A07010 !important;
  border: 2px solid #C8962A !important;
}
.checkout-btn:hover {
  background: #C8962A !important;
  box-shadow: 0 0 0 3px rgba(200,150,42,0.28) !important;
}

/* =====================================================
   GOLDEN THEME — GLOBAL LUXURY KEYFRAMES & POLISH
   ===================================================== */

/* Subtle warm background shimmer on body */
@keyframes bodyWarmPulse {
  0%, 100% { background-color: #FBF7EE; }
  50%       { background-color: #F9F4E6; }
}

/* Product card — warm gold hover glow */
.product_item, .wist_item {
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.28s ease,
              border-color 0.28s ease !important;
}
.product_item:hover, .wist_item:hover {
  box-shadow:
    0 8px 32px rgba(200,150,42,0.20),
    0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Category card golden warm hover */
.cat_item {
  transition: transform 0.28s ease,
              box-shadow 0.28s ease,
              border-color 0.28s ease !important;
}
.cat_item:hover {
  box-shadow:
    0 4px 16px rgba(200,150,42,0.22),
    0 1px 4px rgba(0,0,0,0.06) !important;
}

/* Section title golden gradient underline animation */
@keyframes goldLineExpand {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* Homeproduct section — subtle warm bg */
.homeproduct {
  background: transparent !important;
}

/* ALL CATEGORIES dropdown — golden warm bg */
.side__bar {
  background: #1e1508 !important;
  border-top: 3px solid #C8962A !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 0 0 0.5px rgba(200,150,42,0.20) !important;
}

/* Slider nav arrows golden */
.main_slider .owl-prev, .main_slider .owl-next {
  border: 1px solid rgba(200,150,42,0.30) !important;
}
.main_slider .owl-prev:hover, .main_slider .owl-next:hover {
  background: linear-gradient(135deg, rgba(200,150,42,0.75), rgba(160,112,16,0.80)) !important;
  border-color: #C8962A !important;
}

/* Mobile menu logo golden */
.mobile-menu-logo {
  background: linear-gradient(135deg, #7A4A00 0%, #C8962A 60%, #E8B84B 100%) !important;
}

/* Search btn icon golden */
.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;
}

/* Header cart/track icon golden */
.header-list-items svg { stroke: #C8962A !important; }
.header-list-items ul li a:hover i { color: #C8962A !important; }

/* Go to cart button golden */
.go_cart, .go_cart:hover { color: #ffffff !important; }

/* Footer social icons golden hover */
.social_link li a {
  border: 1px solid rgba(200,150,42,0.15) !important;
}

/* Scrollbar golden */
::-webkit-scrollbar-thumb { background: #C8962A !important; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #A07010 !important; }
::-webkit-scrollbar-track { background: #F5EDD5; }

/* Payment radio golden */
.payment-methods .form-check-input { border: 2px solid #C8962A !important; }
.payment-methods .form-check-input:checked::after { background-color: #C8962A !important; }
.payment-methods .form-check-input:checked { border-color: #C8962A !important; }
.payment-methods .form-check-input:checked + .form-check-label { color: #A07010 !important; }

/* Alert golden tint */
.alert-info {
  background: rgba(200,150,42,0.06) !important;
  border-color: rgba(200,150,42,0.25) !important;
  color: #A07010 !important;
}
.alert-success {
  border-color: rgba(200,150,42,0.2) !important;
  box-shadow: 0 4px 12px rgba(200,150,42,0.08) !important;
}

/* Table golden striped */
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(200,150,42,0.04) !important;
}
.table td, .table th {
  border-color: #E8D5A0 !important;
}

/* Pro price keep dark on warm bg */
.pro_price p { color: #1A1200 !important; }
.pro_price del, .pro_price s { color: #9A7830 !important; }

/* =====================================================
   TRACK ORDER & CART — Deep Gold Glossy Luxury (FINAL)
   Deep antique gold glass · Perfect golden theme match
   ===================================================== */

@keyframes deepGoldBreath {
  0%, 100% {
    box-shadow:
      0 2px 10px rgba(0,0,0,0.28),
      0 0 0 0.5px rgba(200,150,42,0.35),
      inset 0 1px 0 rgba(255,235,130,0.30),
      inset 0 -1px 0 rgba(0,0,0,0.18);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(0,0,0,0.32),
      0 0 0 0.5px rgba(200,150,42,0.60),
      0 0 16px rgba(200,150,42,0.16),
      inset 0 1px 0 rgba(255,240,150,0.42),
      inset 0 -1px 0 rgba(0,0,0,0.20);
  }
}
@keyframes deepGoldSheen {
  from { transform: translateX(-130%) skewX(-20deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translateX(250%) skewX(-20deg); opacity: 0; }
}

/* ── TRACK ORDER — Deep Antique Gold Glass ── */
.track_btn a {
  background: linear-gradient(
    135deg,
    rgba(120,75,5,0.92)   0%,
    rgba(172,110,14,0.88) 30%,
    rgba(200,150,42,0.85) 55%,
    rgba(155,96,8,0.88)   80%,
    rgba(110,65,4,0.92)   100%
  ) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  color: #fff8dc !important;
  font-weight: 700 !important;
  border: 0.5px solid rgba(232,184,75,0.55) !important;
  border-top-color: rgba(255,235,140,0.70) !important;
  border-bottom-color: rgba(80,45,2,0.50) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  overflow: hidden !important;
  text-shadow: 0 1px 4px rgba(60,25,0,0.55) !important;
  animation: deepGoldBreath 3s ease-in-out infinite !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.32s ease, background 0.32s ease !important;
}
/* Specular highlight */
.track_btn a::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 42% !important;
  background: linear-gradient(180deg, rgba(255,235,130,0.18) 0%, transparent 100%) !important;
  border-radius: 8px 8px 0 0 !important;
  pointer-events: none !important; z-index: 2 !important;
}
/* Sheen sweep */
.track_btn a::before {
  content: "" !important;
  position: absolute !important;
  top: -10% !important; left: 0 !important;
  width: 40% !important; height: 120% !important;
  background: linear-gradient(100deg, transparent 10%, rgba(255,240,165,0.28) 50%, transparent 90%) !important;
  pointer-events: none !important; z-index: 3 !important;
  animation: deepGoldSheen 3.2s ease-in-out infinite !important;
}
.track_btn a i {
  color: #fde68a !important; font-size: 12px !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,
    rgba(150,95,8,0.95)   0%,
    rgba(200,142,22,0.92) 35%,
    rgba(225,172,50,0.90) 55%,
    rgba(178,115,14,0.92) 80%,
    rgba(135,80,6,0.95)   100%
  ) !important;
  border-color: rgba(255,215,70,0.80) !important;
  border-top-color: rgba(255,240,150,0.95) !important;
  color: #fffde7 !important;
  transform: translateY(-2px) scale(1.04) !important;
  animation: none !important;
  text-shadow: 0 0 8px rgba(200,150,42,0.55) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.32),
    0 0 0 0.5px rgba(255,210,70,0.65),
    0 0 20px rgba(200,150,42,0.20),
    inset 0 1px 0 rgba(255,240,160,0.48) !important;
}
.track_btn a:hover::before { animation: deepGoldSheen 0.55s ease forwards !important; }
.track_btn a:hover i { color: #fff8dc !important; transform: scale(1.15) !important; }
.track_btn a:active { transform: translateY(1px) scale(0.97) !important; }

/* ── CART — Same deep gold, slightly compact ── */
#cart-qty { position: relative !important; }
#cart-qty > a {
  background: linear-gradient(
    135deg,
    rgba(110,65,4,0.92)   0%,
    rgba(168,108,12,0.88) 40%,
    rgba(155,95,8,0.88)   70%,
    rgba(110,65,4,0.92)   100%
  ) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 0.5px solid rgba(200,150,42,0.55) !important;
  border-top-color: rgba(255,230,120,0.65) !important;
  border-bottom-color: rgba(80,45,2,0.45) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important; overflow: hidden !important;
  animation: deepGoldBreath 3s ease-in-out infinite 0.6s !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.32s ease, background 0.32s ease !important;
}
#cart-qty > a::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 42% !important;
  background: linear-gradient(180deg, rgba(255,230,120,0.18) 0%, transparent 100%) !important;
  border-radius: 8px 8px 0 0 !important;
  pointer-events: none !important; z-index: 2 !important;
}
#cart-qty > a::before {
  content: "" !important;
  position: absolute !important;
  top: -10% !important; left: 0 !important;
  width: 40% !important; height: 120% !important;
  background: linear-gradient(100deg, transparent 10%, rgba(255,235,155,0.26) 50%, transparent 90%) !important;
  pointer-events: none !important; z-index: 3 !important;
  animation: deepGoldSheen 3.6s ease-in-out infinite 1.2s !important;
}
.cart-dialog i, #cart-qty i, #cart-qty > a i, #cart-qty svg {
  color: #fde68a !important; stroke: #fde68a !important;
  font-size: 16px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}
#cart-qty > a:hover {
  background: linear-gradient(
    135deg,
    rgba(140,84,6,0.95)   0%,
    rgba(195,138,18,0.92) 40%,
    rgba(178,112,12,0.92) 70%,
    rgba(140,84,6,0.95)   100%
  ) !important;
  border-color: rgba(255,210,70,0.80) !important;
  border-top-color: rgba(255,238,150,0.95) !important;
  transform: translateY(-2px) scale(1.06) !important;
  animation: none !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.32),
    0 0 0 0.5px rgba(255,205,70,0.65),
    0 0 20px rgba(200,150,42,0.20),
    inset 0 1px 0 rgba(255,238,150,0.48) !important;
}
#cart-qty > a:hover::before { animation: deepGoldSheen 0.55s ease forwards !important; }
#cart-qty > a:hover i, #cart-qty > a:hover svg {
  color: #fff8dc !important; stroke: #fff8dc !important; transform: scale(1.12) !important;
}
#cart-qty > a:active { transform: translateY(1px) scale(0.97) !important; }

/* Cart badge */
.header-list-items ul li span, #cart-qty > a span {
  background: linear-gradient(135deg, #B8380A, #8B1A0A) !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(184,56,10,0.55), 0 0 0 1.5px rgba(110,65,4,0.35) !important;
  animation: badgePop 2s ease-in-out infinite !important;
}

/* =====================================================
   TRACK ORDER — Refined Hover (FINAL OVERRIDE)
   Softer shadow · Lighter hover · More elegant
   ===================================================== */

.track_btn a:hover {
  /* Lighter, cleaner gold — not too heavy */
  background: linear-gradient(
    135deg,
    rgba(168,108,12,0.78) 0%,
    rgba(212,158,36,0.72) 40%,
    rgba(200,150,42,0.68) 60%,
    rgba(160,100,10,0.75) 100%
  ) !important;
  /* Softer border — barely visible golden halo */
  border-color: rgba(255,220,100,0.55) !important;
  border-top-color: rgba(255,238,160,0.70) !important;
  color: #fffbeb !important;
  transform: translateY(-2px) scale(1.02) !important;
  animation: none !important;
  text-shadow: 0 1px 3px rgba(60,25,0,0.30) !important;
  /* Clean 2-layer shadow — no excess glow */
  box-shadow:
    0 4px 14px rgba(0,0,0,0.22),
    0 1px 4px rgba(0,0,0,0.12),
    0 0 0 0.5px rgba(220,175,60,0.40),
    inset 0 1px 0 rgba(255,240,150,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.14) !important;
}

/* Hover icon — subtle scale only */
.track_btn a:hover i {
  color: #fff8dc !important;
  transform: scale(1.1) !important;
}

/* Hover sheen — quicker, lighter */
.track_btn a:hover::before {
  animation: deepGoldSheen 0.5s ease forwards !important;
  opacity: 0.7 !important;
}

/* Active press — clean sink */
.track_btn a:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow:
    0 1px 6px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,230,110,0.20),
    inset 0 2px 6px rgba(0,0,0,0.14) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* =====================================================
   MOBILE — Footer Stay Connected Center Fix
   ===================================================== */
@media (max-width: 767px) {

  /* STAY CONNECTED section — full center */
  .footer-menu .stay_conn,
  .footer-menu .stay_conn a {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* Social icons row — center */
  ul.social_link {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 12px auto 20px !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  ul.social_link li {
    display: inline-flex !important;
    margin: 0 !important;
  }

  /* Social icon boxes — uniform size */
  .social_link li a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
  }

  /* DOWNLOAD APP — center */
  .d_app {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .d_app h2 {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  .d_app a {
    display: inline-block !important;
    margin: 0 auto !important;
  }
  .d_app img {
    display: block !important;
    margin: 0 auto !important;
  }

  /* Footer about — center on mobile */
  .footer-about {
    text-align: center !important;
    padding-right: 0 !important;
  }
  .footer-about a img {
    margin: 0 auto 12px !important;
  }
  .footer-about p {
    text-align: center !important;
  }
  .footer-hotlint {
    text-align: center !important;
    display: block !important;
  }

  /* Footer menu links — center on mobile */
  .footer-menu ul li a {
    text-align: center !important;
  }
  .footer-menu ul li.title a {
    text-align: center !important;
  }
}

/* =====================================================
   MOBILE BOTTOM NAV — Golden Fix + Smart Animation
   Home hover green → golden fix
   All 5 tabs smooth gold animation
   ===================================================== */

/* Shared gold tap keyframe */
@keyframes navTabTap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.88); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes navIconGoldPulse {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(200,150,42,0)); }
  50%       { filter: drop-shadow(0 0 5px rgba(200,150,42,0.55)); }
}
@keyframes navLabelFadeUp {
  from { opacity: 0.4; transform: translateY(2px); }
  to   { opacity: 1;   transform: translateY(0); }
}

@media (max-width: 767px) {

  /* ── All 5 tabs base ── */
  .footer_nav ul li a {
    transition: background 0.22s ease,
                border-color 0.22s ease,
                transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
  }

  /* ── Hover/focus — ALL tabs → golden only, NO green ── */
  .footer_nav ul li a:hover,
  .footer_nav ul li a:focus,
  .footer_nav ul li a:active {
    background: rgba(200,150,42,0.14) !important;
    border-color: rgba(200,150,42,0.35) !important;
    /* Smart bounce animation on tap */
    animation: navTabTap 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
  }
  .footer_nav ul li a:hover span i,
  .footer_nav ul li a:focus span i,
  .footer_nav ul li a:active span i {
    color: #E8B84B !important;
    filter: drop-shadow(0 0 4px rgba(200,150,42,0.50)) !important;
    transition: color 0.2s ease, filter 0.2s ease !important;
  }
  .footer_nav ul li a:hover span:last-child,
  .footer_nav ul li a:focus span:last-child,
  .footer_nav ul li a:active span:last-child {
    color: #E8B84B !important;
    animation: navLabelFadeUp 0.2s ease forwards !important;
  }

  /* ── HOME button (3rd) — golden, never green ── */
  .footer_nav ul li:nth-child(3) a {
    background: rgba(200,150,42,0.22) !important;
    border: 1px solid rgba(232,184,75,0.50) !important;
    box-shadow:
      0 0 14px rgba(200,150,42,0.28),
      inset 0 1px 0 rgba(255,235,130,0.18) !important;
    transition: background 0.22s ease,
                box-shadow 0.22s ease,
                transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
    /* Subtle idle pulse */
    animation: navIconGoldPulse 3s ease-in-out infinite !important;
  }
  .footer_nav ul li:nth-child(3) a span i {
    color: #E8B84B !important;
    transition: color 0.2s ease, filter 0.2s ease !important;
  }
  .footer_nav ul li:nth-child(3) a span:last-child {
    color: #E8B84B !important;
    font-weight: 700 !important;
  }

  /* Home hover — golden deeper, never green */
  .footer_nav ul li:nth-child(3) a:hover,
  .footer_nav ul li:nth-child(3) a:focus,
  .footer_nav ul li:nth-child(3) a:active {
    background: rgba(200,150,42,0.35) !important;
    border-color: rgba(232,184,75,0.70) !important;
    box-shadow:
      0 0 22px rgba(200,150,42,0.45),
      inset 0 1px 0 rgba(255,240,150,0.28) !important;
    animation: navTabTap 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
  }
  .footer_nav ul li:nth-child(3) a:hover span i,
  .footer_nav ul li:nth-child(3) a:focus span i,
  .footer_nav ul li:nth-child(3) a:active span i {
    color: #fff8dc !important;
    filter: drop-shadow(0 0 6px rgba(200,150,42,0.65)) !important;
  }

  /* ── Cart badge golden ── */
  .footer_nav .mobilecart-qty {
    background: #B8380A !important;
    border: 1.5px solid rgba(26,18,0,0.9) !important;
    box-shadow: 0 2px 6px rgba(184,56,10,0.55) !important;
  }
}

/* =====================================================
   MOBILE FOOTER — USEFUL LINK & LINK titles center fix
   ===================================================== */
@media (max-width: 767px) {

  /* All footer menu columns — center everything */
  .footer-menu {
    text-align: center !important;
  }

  /* Section titles (USEFUL LINK, LINK) — center */
  .footer-menu ul li.title a {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Underline on title — center aligned */
  .footer-menu ul li.title a::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* All footer links — center */
  .footer-menu ul li {
    text-align: center !important;
    display: block !important;
  }
  .footer-menu ul li a {
    text-align: center !important;
    display: block !important;
  }

  /* Column padding fix — equal spacing */
  .col-sm-3.mb-3,
  .col-sm-2.mb-3,
  .col-6.mb-3 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* =====================================================
   MOBILE FOOTER — Complete Center Fix (FINAL)
   Stay Connected + Social Icons + Download App
   ===================================================== */
@media (max-width: 767px) {

  /* ── Footer column 4 (Stay Connected) — full center ── */
  .footer-menu .stay_conn,
  .footer-menu .stay_conn a {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* ── Social icons container — center ── */
  ul.social_link {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px auto 20px !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
    text-align: center !important;
  }

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

  /* Social icon boxes — uniform square */
  .social_link li a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin: 0 !important;
    float: none !important;
  }

  /* ── Download App section — full center ── */
  .d_app {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .d_app h2 {
    text-align: center !important;
    margin-bottom: 12px !important;
    display: block !important;
  }
  .d_app a {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .d_app img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* ── Footer col-sm-3 (Stay Connected column) — center ── */
  .col-sm-3.mb-3:last-child .footer-menu {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* =====================================================
   MOBILE FOOTER — Precise Fix (FINAL)
   1. Stay Connected underline → center
   2. Social icon logos → centered inside box
   ===================================================== */
@media (max-width: 767px) {

  /* ── 1. STAY CONNECTED title underline fix ── */
  /* The ::after pseudo creates the underline in main.css */
  .footer-menu ul li.title.stay_conn a {
    display: inline-block !important;
    text-align: center !important;
    position: relative !important;
    width: auto !important;
    padding-bottom: 10px !important;
  }
  /* Center the whole title li */
  .footer-menu ul li.title.stay_conn {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
  /* Underline — starts from left of inline text, not full width */
  .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, #A07010, #C8962A, #E8B84B) !important;
    border-radius: 2px !important;
  }

  /* ── 2. Social icon logos — center inside box ── */
  .social_link li a {
    /* Override any position/float causing top-left shift */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  /* Icon element itself — force center */
  .social_link li a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    line-height: 1 !important;
    font-size: 16px !important;
  }

  /* Social list — flex center */
  ul.social_link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px auto 20px !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }
  ul.social_link li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =====================================================
   STAY CONNECTED underline — final precise fix
   Line stays exactly below text, not full-width
   ===================================================== */
@media (max-width: 767px) {

  /* Wrapper li — center the inline title */
  .footer-menu ul li.title.stay_conn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Title anchor — inline so underline matches text width */
  .footer-menu ul li.title.stay_conn a {
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 8px !important;
    text-align: center !important;
    /* Do NOT set width: 100% — keeps it text-width only */
    width: auto !important;
  }

  /* Underline — sits directly under the text, centered */
  .footer-menu ul li.title.stay_conn a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Match roughly the text width */
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
    border-radius: 2px !important;
  }
}

/* Same fix for desktop — all footer titles */
.footer-menu ul li.title a {
  display: inline-block !important;
  position: relative !important;
  width: auto !important;
}
.footer-menu ul li.title a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
  border-radius: 2px !important;
}

/* =====================================================
   DESKTOP FOOTER RESTORE — Override mobile-only changes
   Ensures desktop stays exactly as it was
   ===================================================== */
@media (min-width: 768px) {

  /* ── Footer title underline — desktop: left-aligned as original ── */
  .footer-menu ul li.title a {
    display: block !important;
    position: relative !important;
    width: auto !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  .footer-menu ul li.title a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #A07010, #C8962A, #E8B84B) !important;
    border-radius: 2px !important;
  }

  /* Stay connected title — desktop left aligned */
  .footer-menu ul li.title.stay_conn a {
    display: block !important;
    text-align: left !important;
    width: auto !important;
  }
  .footer-menu ul li.title.stay_conn a::after {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
  }

  /* ── Social icons — desktop: flex row, left-aligned ── */
  ul.social_link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  ul.social_link li {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
  }
  .social_link li a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
  .social_link li a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* ── Footer menu links — desktop: left-aligned ── */
  .footer-menu {
    text-align: left !important;
  }
  .footer-menu ul li {
    text-align: left !important;
  }
  .footer-menu ul li a {
    text-align: left !important;
  }

  /* ── Download App — desktop: left-aligned ── */
  .d_app {
    text-align: left !important;
  }
  .d_app h2 { text-align: left !important; }
  .d_app a { display: inline-block !important; margin: 0 !important; }
  .d_app img { margin: 0 !important; }
}