/* ============================================================
   FASHION_ALL — Premium Universal Fashion eCommerce Theme
   Version    : 1.0  |  2026
   Description: Controlled visual transformation layer.
                Loads last. Overrides only visual appearance.
                Backend, JS, functionality unchanged.
   Protected  : .all__category__list, .side__bar, .slider-section
   Palette    : Premium Fashion Orange (#EA4B00) family
   ============================================================ */

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

/* ===========================================================
   SECTION 2 — CSS DESIGN TOKENS (Fashion Palette)
   These use --f- prefix to avoid conflicts with existing vars
   =========================================================== */
:root {
  /* ── Core Orange Palette ── */
  --f-orange:           #EA4B00;
  --f-orange-deep:      #B93600;
  --f-orange-burnt:     #C94208;
  --f-orange-luxury:    #F05A00;
  --f-orange-warm:      #FF7A18;
  --f-orange-soft:      #FFF0E8;
  --f-orange-pale:      #FFF8F4;
  --f-orange-rgb:       234, 75, 0;

  /* ── Neutrals ── */
  --f-white:            #FFFFFF;
  --f-bg:               #FAFAFA;
  --f-bg-warm:          #FFF8F4;
  --f-dark:             #171717;
  --f-dark-2:           #2A2A2A;
  --f-muted:            #6B6B6B;
  --f-muted-2:          #9A9A9A;
  --f-border:           #EBEBEB;
  --f-border-warm:      #F0DDD4;

  /* ── Gradients ── */
  --f-gradient-primary: linear-gradient(135deg, #EA4B00 0%, #F05A00 60%, #FF7A18 100%);
  --f-gradient-deep:    linear-gradient(135deg, #B93600 0%, #C94208 50%, #EA4B00 100%);
  --f-gradient-dark:    linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

  /* ── Shadows ── */
  --f-shadow-card:      0 2px 16px rgba(234, 75, 0, 0.06), 0 1px 4px rgba(0,0,0,0.04);
  --f-shadow-hover:     0 8px 32px rgba(234, 75, 0, 0.18), 0 4px 12px rgba(0,0,0,0.08);
  --f-shadow-float:     0 12px 40px rgba(234, 75, 0, 0.22), 0 6px 16px rgba(0,0,0,0.1);
  --f-shadow-btn:       0 4px 16px rgba(234, 75, 0, 0.30);
  --f-shadow-header:    0 2px 16px rgba(0,0,0,0.08);
  --f-shadow-sm:        0 1px 4px rgba(0,0,0,0.06);

  /* ── Radius ── */
  --f-radius-sm:        4px;
  --f-radius-md:        8px;
  --f-radius-lg:        12px;
  --f-radius-btn:       6px;

  /* ── Transitions ── */
  --f-transition:       all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --f-transition-slow:  all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================================
   SECTION 3 — ICON FONT PROTECTION
   Must stay first to prevent font override breaking icons
   =========================================================== */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands,
[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;
}
svg[data-feather] { fill: none !important; stroke: currentColor !important; }

/* ===========================================================
   SECTION 4 — GLOBAL BODY & TYPOGRAPHY
   =========================================================== */
body {
  font-family: "Inter", "Plus Jakarta Sans", "Hind Siliguri", sans-serif !important;
  background: var(--f-bg) !important;
  color: var(--f-dark) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Text nodes — safe selectors only */
body p, body span, body a,
body li, body label, body td, body th,
body strong, body b, body input, body select,
body textarea, body button {
  font-family: "Inter", "Plus Jakarta Sans", "Hind Siliguri", sans-serif !important;
}

/* Headings — editorial luxury */
body h1, body h2, body h3 {
  font-family: "Cormorant Garamond", "Plus Jakarta Sans", serif !important;
  color: var(--f-dark) !important;
}
body h4, body h5, body h6 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
  color: var(--f-dark) !important;
}

/* ===========================================================
   SECTION 5 — ANNOUNCEMENT TOP BAR
   =========================================================== */
.top_header {
  background: var(--f-dark) !important;
  min-height: 36px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}

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

.top_header a[href^="tel"] {
  background: rgba(234, 75, 0, 0.18) !important;
  border: 1px solid rgba(234, 75, 0, 0.40) !important;
  border-radius: 3px !important;
  padding: 2px 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  transition: var(--f-transition) !important;
}
.top_header a[href^="tel"]:hover {
  background: rgba(234, 75, 0, 0.30) !important;
}

/* ===========================================================
   SECTION 6 — DESKTOP HEADER (logo-area + main-header)
   =========================================================== */
.main-header,
.logo-area {
  background: var(--f-white) !important;
  border-bottom: 1px solid var(--f-border) !important;
  box-shadow: var(--f-shadow-header) !important;
  position: relative !important;
}

/* Thin orange accent line at bottom of header */
.logo-area::after {
  content: "" !important;
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--f-orange-deep), var(--f-orange), var(--f-orange-warm), var(--f-orange)) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

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

/* ===========================================================
   SECTION 7 — MOBILE HEADER
   =========================================================== */
.mobile-header {
  background: var(--f-white) !important;
  border-bottom: 2px solid var(--f-orange) !important;
  box-shadow: 0 2px 12px rgba(234, 75, 0, 0.10) !important;
}
.mobile-header * { color: var(--f-dark) !important; }

/* Mobile hamburger + cart icon color */
.menu-bar i,
.toggle i {
  color: var(--f-dark) !important;
  font-size: 22px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Mobile cart icon */
.menu-bag i,
.menu-bag .margin-shopping i {
  color: var(--f-dark) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Mobile cart badge counter */
.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(var(--f-orange-rgb), 0.40) !important;
}

/* Mobile hotline bar (inline style override) */
.d-flex.d-sm-none[style*="background: #4A2390"],
.d-flex.d-sm-none[style*="background:#4A2390"] {
  background: var(--f-dark) !important;
}

/* ===========================================================
   SECTION 8 — SEARCH BAR (Desktop + Mobile)
   =========================================================== */
.main-search form,
.mobile-search form {
  border: 1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius-md) !important;
  overflow: hidden !important;
  background: var(--f-white) !important;
  box-shadow: var(--f-shadow-sm) !important;
  transition: var(--f-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}

.main-search form:focus-within,
.mobile-search form:focus-within {
  border-color: var(--f-orange) !important;
  box-shadow: 0 0 0 3px rgba(var(--f-orange-rgb), 0.12),
              0 4px 16px rgba(var(--f-orange-rgb), 0.10) !important;
}

.search_keyword,
.msearch_keyword {
  background: #FAFAFA !important;
  border: none !important;
  color: var(--f-dark) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding-left: 16px !important;
  flex: 1 !important;
  transition: var(--f-transition) !important;
}

.search_keyword::placeholder,
.msearch_keyword::placeholder {
  color: var(--f-muted-2) !important;
  font-size: 13px !important;
}

.main-search form button,
.mobile-search form button {
  background: var(--f-orange) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0 20px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 48px !important;
  transition: background 0.25s ease !important;
  cursor: pointer !important;
}
.main-search form button:hover,
.mobile-search form button:hover {
  background: var(--f-orange-deep) !important;
}

/* Feather icon in search button */
.main-search form button svg,
.mobile-search form button svg,
.main-search form button i,
.mobile-search form button i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  width: 17px !important;
  height: 17px !important;
  pointer-events: none !important;
}

/* Live search results */
.search_product {
  border-radius: 0 0 var(--f-radius-md) var(--f-radius-md) !important;
  border: 1px solid var(--f-border-warm) !important;
  box-shadow: var(--f-shadow-hover) !important;
  background: var(--f-white) !important;
}
.search_product ul li:hover {
  background: var(--f-orange-pale) !important;
}
.search_content .price {
  color: var(--f-orange-deep) !important;
  font-weight: 700 !important;
}

/* ===========================================================
   SECTION 9 — DESKTOP HEADER ACTIONS (Track + Cart)
   =========================================================== */
.header-list-items ul li a {
  color: var(--f-dark) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: var(--f-transition) !important;
}
.header-list-items ul li a:hover {
  color: var(--f-orange) !important;
}
.header-list-items ul li a:hover i {
  color: var(--f-orange) !important;
  transform: scale(1.12) !important;
  transition: var(--f-transition) !important;
}

/* Cart badge counter */
.header-list-items ul li span {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(var(--f-orange-rgb), 0.40) !important;
  font-weight: 700 !important;
}

/* Cart summary dropdown */
.cshort-summary {
  border-radius: var(--f-radius-md) !important;
  box-shadow: var(--f-shadow-float) !important;
  border: 1px solid var(--f-border-warm) !important;
}
.cshort-summary ul li {
  border-bottom: 1px solid var(--f-border) !important;
}

/* ===========================================================
   SECTION 10 — NAVIGATION MENU BAR
   !! The .all__category__list and .side__bar are PROTECTED.
   !! We only touch the non-category nav items here.
   =========================================================== */

/* Nav links (non-category) */
.heder__category > li:not(.all__category__list) > a,
.right__menu__top li a,
.right__menu__top li p a {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.2px !important;
  padding: 5px 12px !important;
  border-radius: var(--f-radius-sm) !important;
  transition: var(--f-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-transform: capitalize !important;
  position: relative !important;
}

/* Elegant underline effect on nav links */
.heder__category > li:not(.all__category__list) > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 2px !important;
  background: var(--f-orange) !important;
  transform: scaleX(0) !important;
  transition: transform 0.25s ease !important;
  border-radius: 2px !important;
}
.heder__category > li:not(.all__category__list) > a:hover::after {
  transform: scaleX(1) !important;
}
.heder__category > li:not(.all__category__list) > a:hover,
.right__menu__top li a:hover,
.right__menu__top li p a:hover {
  color: #ffffff !important;
  background: rgba(234, 75, 0, 0.18) !important;
}

/* Login/Account button — premium orange accent */
.right__menu__top li a {
  background: rgba(234, 75, 0, 0.14) !important;
  border: 1px solid rgba(234, 75, 0, 0.30) !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 5px 14px !important;
  font-weight: 700 !important;
}
.right__menu__top li a:hover {
  background: var(--f-orange) !important;
  border-color: var(--f-orange) !important;
  color: #ffffff !important;
}

/* ===========================================================
   SECTION 11 — MOBILE SLIDE MENU
   =========================================================== */
.mobile-menu {
  background: var(--f-white) !important;
  box-shadow: 4px 0 30px rgba(var(--f-orange-rgb), 0.12) !important;
  border-right: 2px solid var(--f-orange) !important;
}
.mobile-menu * { color: var(--f-dark) !important; }

.mobile-menu-logo {
  background: var(--f-gradient-dark) !important;
  padding: 14px 16px !important;
}
.mobile-menu-logo * { color: #ffffff !important; }

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

.mobile-menu .menu-category-name {
  font-weight: 600 !important;
  border-bottom: 1px solid var(--f-border) !important;
  padding: 12px 16px !important;
  transition: var(--f-transition) !important;
  font-size: 14px !important;
}
.mobile-menu .menu-category-name:hover {
  background: var(--f-orange-pale) !important;
  color: var(--f-orange) !important;
  padding-left: 22px !important;
}
.mobile-menu .menu-category-name:hover * {
  color: var(--f-orange) !important;
}

.side_cat_img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  margin-right: 8px !important;
  border-radius: 3px !important;
}

/* Mobile subcategory + childcategory */
.second-nav .parent-subcategory .menu-subcategory-name {
  font-size: 13px !important;
  color: var(--f-muted) !important;
  padding: 8px 16px 8px 36px !important;
  transition: var(--f-transition) !important;
}
.second-nav .parent-subcategory .menu-subcategory-name:hover {
  color: var(--f-orange) !important;
  background: var(--f-orange-pale) !important;
}

/* ===========================================================
   SECTION 12 — BODY BACKGROUND
   =========================================================== */
body {
  background: var(--f-bg) !important;
}

/* Section backgrounds */
.homeproduct {
  background: var(--f-white) !important;
  margin-bottom: 12px !important;
  padding: 16px 0 !important;
  border-radius: 0 !important;
}

/* Page overlay (cart hover / mobile menu) */
#page-overlay {
  background: rgba(23, 23, 23, 0.52) !important;
  backdrop-filter: blur(2px) !important;
}

/* ===========================================================
   SECTION 13 — SECTION TITLES
   =========================================================== */
.sec_title {
  margin-bottom: 14px !important;
}

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

.section-title-name {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--f-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid var(--f-orange) !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;
}

/* Timer (hot deal) */
.timer_inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.offer_timer {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  color: var(--f-muted) !important;
}

/* View More button */
.view_more_btn,
.view_more_btn:hover {
  background: transparent !important;
  border: 1.5px solid var(--f-orange) !important;
  color: var(--f-orange) !important;
  border-radius: 20px !important;
  padding: 4px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  letter-spacing: 0.3px !important;
  transition: var(--f-transition) !important;
  text-transform: uppercase !important;
}
.view_more_btn:hover {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(var(--f-orange-rgb), 0.25) !important;
}

/* Customer reviews header */
.homeproduct .col-sm-12 h5[style] {
  background: var(--f-dark) !important;
  color: #ffffff !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 8px 16px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* ===========================================================
   SECTION 14 — CATEGORY CARDS
   =========================================================== */
.cat_item {
  background: var(--f-white) !important;
  border: 1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius-md) !important;
  padding: 12px 6px !important;
  text-align: center !important;
  transition: var(--f-transition) !important;
  box-shadow: var(--f-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(--f-orange) !important;
  box-shadow: 0 6px 24px rgba(var(--f-orange-rgb), 0.14) !important;
  transform: translateY(-4px) !important;
}

.cat_img {
  width: 100% !important;
  height: 75px !important;
  overflow: hidden !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--f-transition) !important;
  background: transparent !important;
  border: none !important;
}
.cat_img img {
  width: auto !important;
  max-width: 90% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.38s ease !important;
}
.cat_item:hover .cat_img img {
  transform: scale(1.08) !important;
}

.cat_name a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--f-dark) !important;
  display: block !important;
  line-height: 1.3 !important;
  transition: var(--f-transition) !important;
}
.cat_item:hover .cat_name a {
  color: var(--f-orange) !important;
}

/* ===========================================================
   SECTION 15 — AD BANNER AREAS (bottoads, hotdeals banner, etc)
   =========================================================== */
.bottoads_area {
  padding: 14px 0 !important;
  margin-bottom: 10px !important;
}
.ads_item {
  border-radius: var(--f-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--f-shadow-sm) !important;
  transition: var(--f-transition) !important;
}
.ads_item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
}
.ads_item img {
  border-radius: var(--f-radius-md) !important;
  display: block !important;
}

/* Footer top ads */
.footer_top_ads_area {
  padding: 14px 0 !important;
}
.footertop_ads_inner {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.footertop_ads_item {
  border-radius: var(--f-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--f-shadow-sm) !important;
  transition: var(--f-transition) !important;
  flex: 1 !important;
}
.footertop_ads_item:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--f-shadow-hover) !important;
}

/* ===========================================================
   SECTION 16 — PRODUCT CARDS
   The most critical redesign element.
   =========================================================== */
.product_item,
.product-item,
.wist_item,
.product-inner,
.product-card {
  background: var(--f-white) !important;
  border: 1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius-md) !important;
  box-shadow: var(--f-shadow-card) !important;
  transition: var(--f-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,
.product-inner:hover,
.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--f-shadow-hover) !important;
  border-color: var(--f-border-warm) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}

/* Product image container */
.pro_img {
  height: 190px !important;
  border-radius: var(--f-radius-sm) !important;
  overflow: hidden !important;
  background: var(--f-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--f-transition) !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,
.product-item:hover .pro_img img {
  transform: scale(1.06) !important;
}

/* Product inner wrapper */
.product_item_inner {
  position: relative !important;
}

/* Product name */
.pro_des {
  margin-top: 8px !important;
}
.pro_name {
  min-height: 44px !important;
  margin-top: 6px !important;
}
.pro_name a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--f-dark) !important;
  line-height: 1.45 !important;
  transition: var(--f-transition) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.pro_name a:hover {
  color: var(--f-orange) !important;
  text-decoration: none !important;
}

/* Star ratings */
.product_item i.fas.fa-star,
.product_item i.fas.fa-star-half-alt,
.wist_item i.fas.fa-star,
.wist_item i.fas.fa-star-half-alt {
  color: #F5A623 !important;
  font-size: 10.5px !important;
}
.product_item i.far.fa-star,
.wist_item i.far.fa-star {
  color: var(--f-border) !important;
  font-size: 10.5px !important;
}

/* Product price */
.pro_price {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}
.pro_price p {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--f-orange-deep) !important;
  text-align: left !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.pro_price del,
.pro_price s {
  color: var(--f-muted-2) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Sale / Discount Badge */
.sale-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
}
.sale-badge-inner {
  display: flex !important;
}
.sale-badge-box {
  background: var(--f-orange) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  box-shadow: 0 3px 10px rgba(var(--f-orange-rgb), 0.45) !important;
  animation: saleBadgePulse 2.5s ease-in-out infinite !important;
}
.sale-badge-text,
.sale-badge-text p {
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}
.sale-badge-text p {
  font-size: 10px !important;
}

@keyframes saleBadgePulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(234, 75, 0, 0.45); }
  50%       { box-shadow: 0 3px 18px rgba(234, 75, 0, 0.70); }
}

/* ===========================================================
   SECTION 17 — PRODUCT ACTION BUTTONS
   "Order Now" buttons on product cards
   =========================================================== */
.pro_btn,
.cart_btn,
.order_button {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pro_btn form {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

/* Primary Order Now / Add to Cart — Orange gradient */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: var(--f-gradient-primary) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--f-radius-btn) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  height: 38px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-shadow: var(--f-shadow-btn) !important;
  transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

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

.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background: var(--f-gradient-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.45) !important;
}

/* Fix span inside .addcartbutton (from style.css animation) */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span,
.addcartbutton span {
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  display: inline-block !important;
  line-height: normal !important;
  background: transparent !important;
  color: #ffffff !important;
  z-index: 2 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.cart_btn.order_button a:hover span { top: 0 !important; }

.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #ffffff !important;
  background: transparent !important;
}

/* ===========================================================
   SECTION 18 — GENERAL BUTTONS SYSTEM
   =========================================================== */

/* Go to Cart / Checkout */
.go_cart,
.go_cart:hover {
  background: var(--f-gradient-primary) !important;
  color: #ffffff !important;
  border-radius: var(--f-radius-btn) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: var(--f-shadow-btn) !important;
  transition: var(--f-transition) !important;
}
.go_cart:hover {
  background: var(--f-gradient-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.40) !important;
}

/* Bootstrap .btn-primary */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--f-gradient-primary) !important;
  border-color: var(--f-orange) !important;
  color: #ffffff !important;
  box-shadow: var(--f-shadow-btn) !important;
  border-radius: var(--f-radius-btn) !important;
  font-weight: 700 !important;
  transition: var(--f-transition) !important;
}
.btn-primary:hover {
  background: var(--f-gradient-deep) !important;
  border-color: var(--f-orange-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.40) !important;
}

/* Submit buttons */
.submit-btn {
  background: var(--f-gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--f-radius-btn) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: var(--f-shadow-btn) !important;
  transition: var(--f-transition) !important;
}
.submit-btn:hover {
  background: var(--f-gradient-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.40) !important;
}

/* Remove cart button */
.remove-cart,
.remove-cart:focus {
  background: #EF4444 !important;
  border-radius: 50% !important;
  height: 28px !important;
  width: 28px !important;
}
.remove-cart .feather { color: #ffffff !important; stroke: #ffffff !important; }

/* Confirm / continue buttons */
.confirm-btn {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  border-radius: var(--f-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--f-transition) !important;
}
.confirm-btn:hover {
  background: var(--f-orange-deep) !important;
  color: #ffffff !important;
}

/* Filter button (category page) */
.filter_btn {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  border-color: var(--f-orange) !important;
  border-radius: var(--f-radius-sm) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
  background: var(--f-orange) !important;
  border-color: var(--f-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.pagination .page-link {
  color: var(--f-orange) !important;
  border-color: var(--f-border) !important;
  transition: var(--f-transition) !important;
}
.pagination .page-link:hover {
  background: var(--f-orange-pale) !important;
  color: var(--f-orange) !important;
  border-color: var(--f-border-warm) !important;
}

/* ===========================================================
   SECTION 19 — PRODUCT DETAILS PAGE
   =========================================================== */
.product-section {
  background: var(--f-white) !important;
  border-radius: var(--f-radius-md) !important;
  box-shadow: var(--f-shadow-sm) !important;
  padding: 24px 0 !important;
  margin: 10px 0 !important;
}

.product-cart .name {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--f-dark) !important;
  line-height: 1.3 !important;
}

.details-price {
  font-family: "Inter", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--f-orange-deep) !important;
  margin: 10px 0 !important;
}
.details-price del {
  color: var(--f-muted-2) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Breadcrumb */
.breadcrumb ul {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
.breadcrumb ul li {
  display: inline-flex !important;
  align-items: center !important;
}
.breadcrumb ul li a {
  color: var(--f-muted) !important;
  font-size: 12.5px !important;
  transition: var(--f-transition) !important;
}
.breadcrumb ul li a:hover {
  color: var(--f-orange) !important;
}
.breadcrumb ul li span {
  color: var(--f-muted-2) !important;
  font-size: 12px !important;
}

/* Product action buttons on details page */
.add_cart_btn {
  background: var(--f-gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--f-radius-btn) !important;
  font-weight: 700 !important;
  box-shadow: var(--f-shadow-btn) !important;
  transition: var(--f-transition) !important;
}
.add_cart_btn:hover {
  background: var(--f-gradient-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.40) !important;
  color: #ffffff !important;
}

/* Order Now on details page — keep special styling */
.single_product.d-flex .order_now_btn {
  background: var(--f-dark) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--f-radius-btn) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  transition: var(--f-transition) !important;
}
.single_product.d-flex .order_now_btn:hover {
  background: var(--f-dark-2) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
}
.single_product.d-flex .order_now_btn * { color: #ffffff !important; }

/* Qty selector */
.qty-cart .quantity {
  border: 1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  transition: var(--f-transition) !important;
}
.qty-cart .quantity:hover {
  border-color: var(--f-orange) !important;
}
.quantity .minus,
.quantity .plus {
  color: var(--f-orange) !important;
  transition: var(--f-transition) !important;
}
.quantity .minus:hover,
.quantity .plus:hover {
  background: var(--f-orange-pale) !important;
}

/* Review stars */
.review_star { color: #F5A623 !important; }

/* Details features */
.features {
  border-top: 3px solid var(--f-orange) !important;
  border-radius: 0 0 var(--f-radius-sm) var(--f-radius-sm) !important;
}

/* Product code badge */
.product-code p {
  background: var(--f-orange) !important;
}

/* Tab content */
.details-action-box .details-action-btn {
  background: var(--f-orange) !important;
  border-color: var(--f-orange) !important;
  color: #ffffff !important;
  border-radius: var(--f-radius-sm) !important;
  font-weight: 700 !important;
}
.details-action-box .empty-content i {
  background-color: var(--f-orange-soft) !important;
  color: var(--f-orange) !important;
}

/* Review button */
button.details-review-button {
  background: var(--f-orange) !important;
  border-radius: var(--f-radius-sm) !important;
}

/* ===========================================================
   SECTION 20 — CART / CHECKOUT / AUTH PAGES
   =========================================================== */

/* Form inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  background: #ffffff !important;
  border: 1.5px solid var(--f-border) !important;
  color: var(--f-dark) !important;
  border-radius: var(--f-radius-sm) !important;
  transition: var(--f-transition) !important;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--f-orange) !important;
  box-shadow: 0 0 0 3px rgba(var(--f-orange-rgb), 0.10) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--f-muted-2) !important; }

/* Auth pages */
.auth-title {
  color: var(--f-dark) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: var(--f-bg) !important;
  border-bottom: 2px solid var(--f-orange) !important;
}

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

/* Cart summary */
.cart-summary {
  background: var(--f-bg-warm) !important;
  border-radius: var(--f-radius-md) !important;
  border: 1px solid var(--f-border-warm) !important;
}
.cart-summary h5 {
  color: var(--f-dark) !important;
  border-bottom: 2px solid var(--f-orange) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

/* Loading spinner */
.custom-loader {
  --c: radial-gradient(farthest-side, var(--f-orange) 92%, transparent) !important;
}

/* ===========================================================
   SECTION 21 — FOOTER
   Premium dark editorial footer — orange accent system
   =========================================================== */
footer {
  background: #0D0D0D !important;
}

.footer-top {
  background: #0D0D0D !important;
  padding: 52px 0 40px !important;
  border-top: 3px solid var(--f-orange) !important;
  position: relative !important;
}

/* Subtle texture line above footer */
.footer-top::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    var(--f-orange-deep) 0%,
    var(--f-orange) 30%,
    var(--f-orange-warm) 60%,
    var(--f-orange) 80%,
    var(--f-orange-deep) 100%) !important;
}

.footer-bottom {
  background: #080808 !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Column 1: Logo + Address + Hotline ── */
.footer-about {
  text-align: left !important;
  padding-right: 20px !important;
}

.footer-about a img {
  height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(1.1) contrast(1.05) !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.footer-about > p {
  color: rgba(255,255,255,0.52) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  margin: 0 0 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px !important;
}

.footer-hotlint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--f-orange-warm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  transition: var(--f-transition) !important;
  border-bottom: 1.5px solid transparent !important;
}
.footer-hotlint:hover {
  color: #ffffff !important;
  border-bottom-color: var(--f-orange) !important;
}

/* ── Footer Menu Columns ── */
.footer-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-menu ul li { display: block !important; }

/* Column title */
.footer-menu ul li.title a,
.footer-menu .title a {
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  display: block !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  position: relative !important;
  border-bottom: none !important;
}
/* Orange underline line under title */
.footer-menu ul li.title a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 28px !important;
  height: 2px !important;
  background: var(--f-orange) !important;
  border-radius: 2px !important;
}

/* Menu links */
.footer-menu ul li a {
  color: rgba(255,255,255,0.50) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  padding: 6px 0 !important;
  display: block !important;
  transition: var(--f-transition) !important;
  position: relative !important;
  padding-left: 0 !important;
  letter-spacing: 0.1px !important;
}
.footer-menu ul li a:hover {
  color: var(--f-orange-warm) !important;
  padding-left: 8px !important;
}
/* Hover arrow indicator */
.footer-menu ul li a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) scaleX(0) !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--f-orange) !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  transform-origin: left center !important;
}
.footer-menu ul li a:hover::before {
  transform: translateY(-50%) scaleX(1) !important;
}

/* ── Social Icons — Per-platform brand styled ── */
.social_link {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  list-style: none !important;
}
.social_list {
  display: inline-block !important;
  list-style: none !important;
}

/* Base — shared layout */
.social_list a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Icon base size */
.social_list a i {
  font-size: 15px !important;
  display: block !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.26s ease !important;
  color: #ffffff !important;
}

/* Shine sweep on hover */
.social_list a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left 0.45s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.social_list a:hover::before { left: 160% !important; }

/* ── Facebook — #1877F2 ── */
.social_list a:has(.fa-facebook),
.social_list a:has(.fa-facebook-f) {
  background: #1877F2 !important;
  border: 1px solid #1565d8 !important;
  box-shadow: 0 3px 10px rgba(24,119,242,0.35) !important;
}
.social_list a:has(.fa-facebook):hover,
.social_list a:has(.fa-facebook-f):hover {
  background: #0d65d9 !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(24,119,242,0.55) !important;
}

/* ── Twitter / X — #1DA1F2 ── */
.social_list a:has(.fa-twitter),
.social_list a:has(.fa-x-twitter) {
  background: #1DA1F2 !important;
  border: 1px solid #0d8fd8 !important;
  box-shadow: 0 3px 10px rgba(29,161,242,0.35) !important;
}
.social_list a:has(.fa-twitter):hover,
.social_list a:has(.fa-x-twitter):hover {
  background: #0c8edc !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(29,161,242,0.55) !important;
}

/* ── WhatsApp — #25D366 ── */
.social_list a:has(.fa-whatsapp) {
  background: #25D366 !important;
  border: 1px solid #1db954 !important;
  box-shadow: 0 3px 10px rgba(37,211,102,0.35) !important;
}
.social_list a:has(.fa-whatsapp):hover {
  background: #1cb950 !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(37,211,102,0.55) !important;
}

/* ── YouTube — #FF0000 ── */
.social_list a:has(.fa-youtube) {
  background: #FF0000 !important;
  border: 1px solid #e00000 !important;
  box-shadow: 0 3px 10px rgba(255,0,0,0.30) !important;
}
.social_list a:has(.fa-youtube):hover {
  background: #df0000 !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(255,0,0,0.50) !important;
}

/* ── Instagram — gradient ── */
.social_list a:has(.fa-instagram) {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border: 1px solid #cc2366 !important;
  box-shadow: 0 3px 10px rgba(220,39,67,0.35) !important;
}
.social_list a:has(.fa-instagram):hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(220,39,67,0.55) !important;
  filter: brightness(1.12) !important;
}

/* ── LinkedIn — #0A66C2 ── */
.social_list a:has(.fa-linkedin),
.social_list a:has(.fa-linkedin-in) {
  background: #0A66C2 !important;
  border: 1px solid #0855a3 !important;
  box-shadow: 0 3px 10px rgba(10,102,194,0.35) !important;
}
.social_list a:has(.fa-linkedin):hover,
.social_list a:has(.fa-linkedin-in):hover {
  background: #0853a0 !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(10,102,194,0.55) !important;
}

/* ── TikTok — dark with teal glow ── */
.social_list a:has(.fa-tiktok) {
  background: #010101 !important;
  border: 1px solid #333 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.40) !important;
}
.social_list a:has(.fa-tiktok):hover {
  background: #111111 !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(105,201,208,0.45) !important;
  border-color: #69c9d0 !important;
}

/* ── Pinterest — #E60023 ── */
.social_list a:has(.fa-pinterest),
.social_list a:has(.fa-pinterest-p) {
  background: #E60023 !important;
  border: 1px solid #c7001e !important;
  box-shadow: 0 3px 10px rgba(230,0,35,0.30) !important;
}
.social_list a:has(.fa-pinterest):hover,
.social_list a:has(.fa-pinterest-p):hover {
  background: #c7001e !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(230,0,35,0.50) !important;
}

/* ── Fallback — any other icon → orange brand ── */
.social_list a {
  background: rgba(234,75,0,0.75) !important;
  border: 1px solid rgba(234,75,0,0.50) !important;
  box-shadow: 0 3px 8px rgba(234,75,0,0.20) !important;
}
.social_list a:hover {
  background: var(--f-orange) !important;
  border-color: var(--f-orange) !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(var(--f-orange-rgb), 0.50) !important;
}
/* This fallback is intentionally placed BEFORE platform-specific rules
   so platform rules override it via cascade specificity order.
   Platform-specific :has() selectors come AFTER so they win. */

/* Re-declare platform specifics AFTER fallback to ensure they override */
.social_list a:has(.fa-facebook),
.social_list a:has(.fa-facebook-f) {
  background: #1877F2 !important;
  border: 1px solid #1565d8 !important;
  box-shadow: 0 3px 10px rgba(24,119,242,0.35) !important;
}
.social_list a:has(.fa-twitter),
.social_list a:has(.fa-x-twitter) {
  background: #1DA1F2 !important;
  border: 1px solid #0d8fd8 !important;
  box-shadow: 0 3px 10px rgba(29,161,242,0.35) !important;
}
.social_list a:has(.fa-whatsapp) {
  background: #25D366 !important;
  border: 1px solid #1db954 !important;
  box-shadow: 0 3px 10px rgba(37,211,102,0.35) !important;
}
.social_list a:has(.fa-youtube) {
  background: #FF0000 !important;
  border: 1px solid #e00000 !important;
  box-shadow: 0 3px 10px rgba(255,0,0,0.30) !important;
}
.social_list a:has(.fa-instagram) {
  background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  border: 1px solid #cc2366 !important;
  box-shadow: 0 3px 10px rgba(220,39,67,0.35) !important;
}
.social_list a:has(.fa-linkedin),
.social_list a:has(.fa-linkedin-in) {
  background: #0A66C2 !important;
  border: 1px solid #0855a3 !important;
  box-shadow: 0 3px 10px rgba(10,102,194,0.35) !important;
}
.social_list a:has(.fa-tiktok) {
  background: #010101 !important;
  border: 1px solid #333 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.40) !important;
}

/* All icons white color */
.social_list a i { color: #ffffff !important; }

/* ── Download App Section ── */
.d_app {
  margin-top: 4px !important;
}
.d_app h2 {
  color: rgba(255,255,255,0.55) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  margin-bottom: 10px !important;
}
.d_app a {
  display: inline-block !important;
  transition: var(--f-transition) !important;
}
.d_app a img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0.85) !important;
  transition: var(--f-transition) !important;
  border-radius: 6px !important;
}
.d_app a:hover img {
  filter: brightness(1) !important;
  transform: translateY(-2px) !important;
}

/* ── Copyright bar ── */
.copyright {
  text-align: center !important;
}
.copyright p,
.copyright p span {
  color: rgba(255,255,255,0.30) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
}
/* Developer credit link */
.developer-credit-link {
  color: #4dbc60 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--f-transition) !important;
  position: relative !important;
}
.developer-credit-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: #4dbc60 !important;
  transition: width 0.3s ease !important;
}
.developer-credit-link:hover {
  color: #6ee087 !important;
}
.developer-credit-link:hover::after {
  width: 100% !important;
}

/* ===========================================================
   SECTION 22 — MOBILE BOTTOM NAVIGATION
   Override main.css dark gold theme → orange fashion theme
   =========================================================== */
@media (max-width: 767px) {
  /* Bar — dark fashion, orange accent border */
  .footer_nav {
    background: #111111 !important;
    border-top: 2px solid var(--f-orange) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important;
    height: 64px !important;
    padding: 0 !important;
  }

  /* Grid */
  .footer_nav ul {
    height: 64px !important;
    align-items: center !important;
  }

  /* Tab links */
  .footer_nav ul li a {
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: var(--f-transition) !important;
  }

  /* Icons — muted */
  .footer_nav ul li a span i {
    color: rgba(255,255,255,0.50) !important;
    font-size: 19px !important;
    transition: color 0.22s ease !important;
    font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  }

  /* Labels — muted */
  .footer_nav ul li a span:last-child {
    color: rgba(255,255,255,0.40) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: color 0.22s ease !important;
  }

  /* Hover — orange accent */
  .footer_nav ul li a:hover {
    background: rgba(234,75,0,0.12) !important;
    border-color: rgba(234,75,0,0.22) !important;
  }
  .footer_nav ul li a:hover span i { color: var(--f-orange) !important; }
  .footer_nav ul li a:hover span:last-child { color: var(--f-orange-warm) !important; }

  /* Home center button — orange elevated circle */
  .footer_nav ul li:nth-child(3) a {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    margin-top: -14px !important;
    background: var(--f-gradient-primary) !important;
    border: 1.5px solid rgba(255,130,30,0.35) !important;
    box-shadow: 0 4px 18px rgba(var(--f-orange-rgb), 0.50),
                inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: var(--f-transition) !important;
  }
  .footer_nav ul li:nth-child(3) a span i {
    color: #ffffff !important;
    font-size: 21px !important;
  }
  .footer_nav ul li:nth-child(3) a span:last-child {
    color: rgba(255,255,255,0.90) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }
  .footer_nav ul li:nth-child(3) a:hover {
    background: var(--f-gradient-deep) !important;
    box-shadow: 0 6px 24px rgba(var(--f-orange-rgb), 0.65),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
  }
  .footer_nav ul li:nth-child(3) a:hover span i { color: #ffffff !important; }

  /* Cart badge */
  .footer_nav .mobilecart-qty {
    background: var(--f-orange) !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    top: -4px !important;
    right: -3px !important;
  }

  /* Reset the mobile_home li override from main.css */
  .footer_nav li.mobile_home {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Body bottom padding for nav bar */
  body { padding-bottom: 74px !important; }
  .footer-bottom { padding-bottom: 80px !important; margin-bottom: 0 !important; }
}

/* ===========================================================
   SECTION 23 — SCROLL TO TOP + WHATSAPP FLOAT
   =========================================================== */
.scrolltop {
  background: var(--f-orange) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(var(--f-orange-rgb), 0.40) !important;
  transition: var(--f-transition) !important;
}
.scrolltop:hover {
  background: var(--f-orange-deep) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(var(--f-orange-rgb), 0.50) !important;
}
.scrolltop .scroll {
  color: #ffffff !important;
}
.scrolltop .scroll i { color: #ffffff !important; }

/* ===========================================================
   SECTION 24 — NOTIFICATIONS (Toastr)
   Premium orange/dark glassmorphic design
   =========================================================== */
#toast-container {
  top: 20px !important;
  right: 20px !important;
}
#toast-container > div {
  opacity: 1 !important;
  border-radius: 10px !important;
  padding: 18px 22px 18px 60px !important;
  width: 340px !important;
  max-width: 95vw !important;
  font-family: "Inter", sans-serif !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22) !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#toast-container > .toast-success {
  background-color: rgba(22, 163, 74, 0.95) !important;
}
#toast-container > .toast-error {
  background-color: rgba(220, 38, 38, 0.95) !important;
}
#toast-container > .toast-warning {
  background-color: rgba(234, 75, 0, 0.95) !important;
}
#toast-container > div .toast-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: white !important;
}
#toast-container > div .toast-message {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.5 !important;
}
#toast-container > div .toast-progress {
  background: rgba(255,255,255,0.35) !important;
  height: 4px !important;
}

/* ===========================================================
   SECTION 25 — CATEGORY / SUBCATEGORY PRODUCT LISTING PAGES
   =========================================================== */

/* Page title */
.page_title p {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--f-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Sidebar accordion */
.sidebar_item h2.accordion-header button.accordion-button {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}
.sidebar_item .accordion-header .accordion-button::after {
  filter: invert(1) !important;
}

/* Subcategory filter checkbox */
.subcategory-filter-label input {
  border: 2px solid var(--f-orange) !important;
}
.subcategory-filter-label input[type=checkbox]:checked {
  background-color: var(--f-orange) !important;
}
.subcategory-filter-label:hover {
  background-color: var(--f-orange-pale) !important;
}

/* Price slider */
.ui-slider-horizontal .ui-slider-range {
  background-color: var(--f-orange) !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
  background: var(--f-orange) !important;
  border-color: var(--f-orange) !important;
}

/* ===========================================================
   SECTION 26 — QUICK VIEW MODAL
   =========================================================== */
.modal-view {
  border-radius: var(--f-radius-md) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28) !important;
  border: none !important;
}
.close-modal {
  background: var(--f-orange) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 12px rgba(var(--f-orange-rgb), 0.40) !important;
}

/* ===========================================================
   SECTION 27 — ANIMATIONS & MICRO-INTERACTIONS
   =========================================================== */

/* Fade-up for WOW.js sections */
.wow.zoomIn {
  animation-duration: 0.5s !important;
}

/* Category card entrance */
@keyframes fashionFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Product card hover glow */
@keyframes orangeGlow {
  0%, 100% { box-shadow: var(--f-shadow-card); }
  50%       { box-shadow: var(--f-shadow-hover); }
}

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

/* Smooth underline expand */
@keyframes underlineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Mobile menu slide */
.mobile-menu { transition: left 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* Icon hover micro-motion */
.header-list-items ul li a i,
.footer_nav ul li a i {
  transition: transform 0.22s ease, color 0.22s ease !important;
  display: inline-block !important;
}
.header-list-items ul li a:hover i {
  transform: scale(1.15) !important;
}

/* Cart icon bounce on add */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.25); }
  60%       { transform: scale(0.95); }
}

/* Sale badge pulse handled above in saleBadgePulse */

/* Page loading overlay */
#loading {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(4px) !important;
}

/* ===========================================================
   SECTION 28 — SIDEBAR / FEATURE PRODUCTS (Filter panel)
   =========================================================== */
.feature-products p {
  color: var(--f-dark) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
}
.feature-products p::after {
  background-color: var(--f-orange) !important;
  width: 36px !important;
  height: 2px !important;
}
.feature-products .title {
  color: var(--f-dark) !important;
  font-weight: 600 !important;
}

/* ===========================================================
   SECTION 29 — TABLE STYLES (orders, cart)
   =========================================================== */
.table td, .table th {
  color: var(--f-dark) !important;
  border-color: var(--f-border) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: var(--f-bg-warm) !important;
}

/* ===========================================================
   SECTION 30 — BADGES (Bootstrap)
   =========================================================== */
.badge {
  font-weight: 700 !important;
  border-radius: 12px !important;
}
.badge-success, .bg-success { background: #16A34A !important; }
.badge-danger,  .bg-danger  { background: var(--f-orange) !important; }
.badge-warning, .bg-warning { background: var(--f-orange-warm) !important; }

/* ===========================================================
   SECTION 31 — RESPONSIVE — TABLET (768px - 991px)
   =========================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cat_item { height: 120px !important; }
  .cat_img  { height: 70px !important; }
  .pro_img  { height: 180px !important; }
}

/* ===========================================================
   SECTION 32 — RESPONSIVE — MOBILE (< 768px)
   =========================================================== */
@media only screen and (max-width: 767px) {

  /* Body */
  body { font-size: 13px !important; }

  /* Mobile header accent line */
  .mobile-header {
    border-bottom: 2px solid var(--f-orange) !important;
  }

  /* Mobile search */
  .mobile-search form {
    border: 1.5px solid var(--f-border) !important;
    border-radius: 6px !important;
    height: 40px !important;
    background: #ffffff !important;
  }
  .mobile-search form:focus-within {
    border-color: var(--f-orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--f-orange-rgb), 0.10) !important;
  }
  .mobile-search form input {
    background: #ffffff !important;
    color: var(--f-dark) !important;
    font-size: 13px !important;
  }
  .mobile-search form button {
    background: var(--f-orange) !important;
  }
  .mobile-search form svg { stroke: #ffffff !important; }

  /* Product cards — 2 per row */
  .product_item,
  .wist_item,
  .product-item {
    padding: 8px !important;
    margin-bottom: 10px !important;
    border-radius: var(--f-radius-md) !important;
  }

  .pro_img {
    height: 150px !important;
  }

  .pro_name { min-height: 38px !important; }
  .pro_name a { font-size: 12px !important; }
  .pro_price p { font-size: 13.5px !important; }

  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton {
    height: 34px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .sale-badge-box {
    width: 36px !important;
    height: 36px !important;
  }
  .sale-badge-text,
  .sale-badge-text p { font-size: 8.5px !important; }

  /* Category cards — 3 per row */
  .cat_item {
    height: 110px !important;
    padding: 8px 4px !important;
  }
  .cat_img { height: 62px !important; }
  .cat_name a { font-size: 10.5px !important; }

  /* Section title */
  .section-title-name { font-size: 13px !important; letter-spacing: 0.5px !important; }

  /* Footer */
  .footer-top { padding: 28px 0 !important; }
  .footer-about { padding-right: 0 !important; text-align: center !important; }
  .footer-menu ul li a { text-align: center !important; }
  .footer-menu .title,
  .footer-menu ul li.title a { text-align: center !important; display: block !important; }
  .social_link { justify-content: center !important; }
  .d_app { text-align: center !important; }
  /* footer-bottom padding handled in mobile nav section above */

  /* Mobile bottom nav — only non-overriding tweaks here */
  .footer_nav ul li a span { font-size: 9px !important; }
  .footer_nav ul li i { font-size: 17px !important; }

  /* WhatsApp float hidden on mobile (keep existing rule) */
  .float { display: none !important; }

  /* View more btn */
  .view_more_btn { font-size: 10.5px !important; padding: 3px 10px !important; }

  /* Quick view modal */
  .modal-view { width: 95% !important; padding: 16px !important; }

  /* Toastr */
  #toast-container {
    width: 100% !important;
    right: 0 !important;
    top: 0 !important;
    padding: 10px !important;
  }
  #toast-container > div {
    width: 100% !important;
    padding: 14px 14px 14px 48px !important;
  }

  /* Breadcrumb */
  .breadcrumb ul { gap: 3px !important; }
  .breadcrumb ul li a { font-size: 11px !important; }
}

/* ===========================================================
   SECTION 33 — SMALL MOBILE (< 576px) FINE-TUNING
   =========================================================== */
@media only screen and (max-width: 575px) {
  .pro_img { height: 140px !important; }
  .cat_item { height: 100px !important; }
  .cat_img  { height: 55px !important; }
  .cat_name a { font-size: 10px !important; }
}

/* ===========================================================
   SECTION 34 — UTILITY OVERRIDES (small fixes)
   =========================================================== */

/* Prevent gutter issues on mobile */
@media (max-width: 767px) {
  .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.3) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.3) !important;
  }
}

/* Smooth anchor transitions */
a { transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease !important; }

/* No horizontal overflow */
html, body { overflow-x: hidden !important; }
.container { overflow-x: visible !important; }

/* ===========================================================
   SECTION 35 — PREFERS-REDUCED-MOTION
   Respect user accessibility preferences
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sale-badge-box { animation: none !important; }
}

/* ===========================================================
   SOCIAL ICONS — BROWSER COMPATIBILITY FALLBACK
   For browsers that don't support :has() (older versions)
   We target the <i> icon class directly and use
   CSS custom properties on the parent via data-* workaround.
   Since the icon <i> is a direct child of <a>, we use
   adjacent/child combinator tricks for maximum coverage.
   =========================================================== */

/* Ensure the <a> wrapper always shows correctly */
.social_list > a,
.social_list a.mobile-social-link {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.26s cubic-bezier(0.4,0,0.2,1) !important;
  /* Fallback background if :has() not supported */
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Icon inside — always white */
.social_list > a i,
.social_list a.mobile-social-link i {
  color: #ffffff !important;
  font-size: 15px !important;
  display: block !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Hover lift — universal */
.social_list > a:hover,
.social_list a.mobile-social-link:hover {
  transform: translateY(-4px) scale(1.07) !important;
  filter: brightness(1.15) !important;
}

/* ─ Facebook ─ */
.social_list a .fa-facebook ~ *,
.social_list a .fa-facebook-f { color: #fff !important; }
.social_list a:has(.fa-facebook),
.social_list a:has(.fa-facebook-f),
.social_list a[href*="facebook"] {
  background: #1877F2 !important;
  border-color: #1565d8 !important;
  box-shadow: 0 3px 12px rgba(24,119,242,0.40) !important;
}
.social_list a[href*="facebook"]:hover {
  box-shadow: 0 8px 24px rgba(24,119,242,0.60) !important;
}

/* ─ Twitter / X ─ */
.social_list a:has(.fa-twitter),
.social_list a:has(.fa-x-twitter),
.social_list a[href*="twitter"],
.social_list a[href*="x.com"] {
  background: #1DA1F2 !important;
  border-color: #0d8fd8 !important;
  box-shadow: 0 3px 12px rgba(29,161,242,0.40) !important;
}
.social_list a[href*="twitter"]:hover,
.social_list a[href*="x.com"]:hover {
  box-shadow: 0 8px 24px rgba(29,161,242,0.60) !important;
}

/* ─ WhatsApp ─ */
.social_list a:has(.fa-whatsapp),
.social_list a[href*="whatsapp"],
.social_list a[href*="wa.me"] {
  background: #25D366 !important;
  border-color: #1ab954 !important;
  box-shadow: 0 3px 12px rgba(37,211,102,0.40) !important;
}
.social_list a[href*="whatsapp"]:hover,
.social_list a[href*="wa.me"]:hover {
  box-shadow: 0 8px 24px rgba(37,211,102,0.60) !important;
}

/* ─ YouTube ─ */
.social_list a:has(.fa-youtube),
.social_list a[href*="youtube"] {
  background: #FF0000 !important;
  border-color: #cc0000 !important;
  box-shadow: 0 3px 12px rgba(255,0,0,0.35) !important;
}
.social_list a[href*="youtube"]:hover {
  box-shadow: 0 8px 24px rgba(255,0,0,0.55) !important;
}

/* ─ Instagram ─ */
.social_list a:has(.fa-instagram),
.social_list a[href*="instagram"] {
  background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  border-color: #cc2366 !important;
  box-shadow: 0 3px 12px rgba(220,39,67,0.40) !important;
}
.social_list a[href*="instagram"]:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 8px 24px rgba(220,39,67,0.60) !important;
}

/* ─ LinkedIn ─ */
.social_list a:has(.fa-linkedin),
.social_list a:has(.fa-linkedin-in),
.social_list a[href*="linkedin"] {
  background: #0A66C2 !important;
  border-color: #0855a3 !important;
  box-shadow: 0 3px 12px rgba(10,102,194,0.40) !important;
}
.social_list a[href*="linkedin"]:hover {
  box-shadow: 0 8px 24px rgba(10,102,194,0.60) !important;
}

/* ─ TikTok ─ */
.social_list a:has(.fa-tiktok),
.social_list a[href*="tiktok"] {
  background: #010101 !important;
  border-color: #2a2a2a !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.45) !important;
}
.social_list a[href*="tiktok"]:hover {
  border-color: #69c9d0 !important;
  box-shadow: 0 8px 24px rgba(105,201,208,0.50) !important;
}

/* ─ Pinterest ─ */
.social_list a:has(.fa-pinterest),
.social_list a:has(.fa-pinterest-p),
.social_list a[href*="pinterest"] {
  background: #E60023 !important;
  border-color: #c7001e !important;
  box-shadow: 0 3px 12px rgba(230,0,35,0.35) !important;
}
.social_list a[href*="pinterest"]:hover {
  box-shadow: 0 8px 24px rgba(230,0,35,0.55) !important;
}

/* ===========================================================
   SECTION 26 — CATEGORY MENU (IDENTICAL LEVEL COLORS)
   Main Category, Subcategory, and Child Category all use identical color (#0f1729)
   =========================================================== */
.side__bar,
.side__barsub,
.side__barchild,
.all__category__list .side__bar,
.all__category__list .side__barsub,
.all__category__list .side__barchild,
.sidebar-menu .side__bar,
.sidebar-menu .side__barsub,
.sidebar-menu .side__barchild,
li.all__category__list .side__bar,
li.all__category__list .side__barsub,
li.all__category__list .side__barchild {
  background: #0f1729 !important;
  background-color: #0f1729 !important;
}

.side__barsub,
.side__barchild,
.all__category__list .side__barsub,
.all__category__list .side__barchild {
  border-left-color: #38BDF8 !important;
  border-top-color: #38BDF8 !important;
}