/* =====================================================
   UNDERGROUND Premium Fashion Theme — 2026 Edition
   Women's & Men's Intimate Wear eCommerce
   Design: Elegant · Feminine · Sophisticated · Premium
   ===================================================== */

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

/* =========== DESIGN TOKENS =========== */
:root {
  /* Primary Rose Palette */
  --pf-primary:          #D6336C;
  --pf-primary-dark:     #A61E4D;
  --pf-primary-light:    #E8668E;
  --pf-primary-rgb:      214, 51, 108;
  --pf-rose:             #C2185B;
  --pf-rose-dark:        #880E4F;
  --pf-rose-rgb:         194, 24, 91;

  /* Background & Surface */
  --pf-blush:            #FCE4EC;
  --pf-blush-mid:        #F8BBD0;
  --pf-blush-soft:       #FFF0F5;
  --pf-champagne:        #F6E7D8;
  --pf-ivory:            #FFFAF8;
  --pf-white:            #FFFFFF;
  --pf-body-bg:          #FFF8FB;
  --pf-card-bg:          #FFFFFF;

  /* Text */
  --pf-text:             #1E0A12;
  --pf-text-mid:         #5C2D44;
  --pf-text-muted:       #9C6B7D;
  --pf-price:            #C2185B;
  --pf-old-price:        #B0A0A7;
  --pf-border:           #F2D5E0;

  /* Semantic */
  --pf-success:          #2E7D32;
  --pf-error:            #C62828;
  --pf-warning:          #E65100;

  /* Gradients */
  --pf-grad-primary:     linear-gradient(135deg, #A61E4D 0%, #D6336C 55%, #E8668E 100%);
  --pf-grad-primary-rev: linear-gradient(135deg, #E8668E 0%, #D6336C 45%, #A61E4D 100%);
  --pf-grad-rose:        linear-gradient(135deg, #880E4F 0%, #C2185B 40%, #D6336C 100%);
  --pf-grad-blush:       linear-gradient(180deg, #FFFAF8 0%, #FCE4EC 100%);
  --pf-grad-footer:      linear-gradient(135deg, #1A0611 0%, #3D0C22 100%);

  /* Shadows */
  --pf-shadow-xs:        0 1px 3px rgba(214,51,108,0.08);
  --pf-shadow-sm:        0 2px 8px rgba(214,51,108,0.12);
  --pf-shadow-md:        0 4px 16px rgba(214,51,108,0.18);
  --pf-shadow-lg:        0 8px 32px rgba(214,51,108,0.22);
  --pf-shadow-glow:      0 0 20px rgba(214,51,108,0.35);
  --pf-shadow-hover:     0 12px 40px rgba(214,51,108,0.28);
  --pf-shadow-dark:      0 4px 20px rgba(30,10,18,0.3);

  /* Border Radius */
  --pf-radius-xs:        4px;
  --pf-radius-sm:        8px;
  --pf-radius-md:        12px;
  --pf-radius-lg:        16px;
  --pf-radius-xl:        24px;
  --pf-radius-full:      9999px;

  /* Transitions */
  --pf-transition:       all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --pf-transition-fast:  all 0.18s ease;
  --pf-transition-slow:  all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========== ICON FONT PROTECTION =========== */
/* Must preserve Font Awesome & Feather icons from font-family override */
.fa, .fas, .far, .fab, .fal,
.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;
  display: inline-block !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", "Hind Siliguri", sans-serif !important;
  box-sizing: border-box;
}

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

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

/* =====================================================
   PHASE 6 — TOP ANNOUNCEMENT BAR
   ===================================================== */
.top_header,
body .top_header,
header .top_header,
#navbar_top .top_header {
  background: #2D0B1A !important;
  background-color: #2D0B1A !important;
  background-image: none !important;
  animation: none !important;
  min-height: 36px !important;
  border-bottom: 1px solid rgba(214,51,108,0.25) !important;
  display: flex !important;
  align-items: center !important;
}

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

.top_header a[href^="tel"] {
  background: rgba(214,51,108,0.2) !important;
  border: 1px solid rgba(214,51,108,0.45) !important;
  border-radius: var(--pf-radius-xs) !important;
  padding: 3px 12px !important;
  font-weight: 700 !important;
  color: #FFD6E7 !important;
  transition: var(--pf-transition) !important;
}

.top_header a[href^="tel"]:hover {
  background: rgba(214,51,108,0.4) !important;
  color: #FFFFFF !important;
}

/* =====================================================
   PHASE 7 — DESKTOP HEADER
   ===================================================== */
.main-header, .logo-area {
  background: var(--pf-white) !important;
  background-image: none !important;
  animation: none !important;
  border-bottom: 1px solid var(--pf-border) !important;
  box-shadow: 0 2px 12px rgba(214,51,108,0.08) !important;
  position: relative !important;
}

/* Elegant rose accent line under header */
.main-header::after, .logo-area::after {
  content: "" !important;
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--pf-primary), var(--pf-rose-dark), var(--pf-primary), transparent) !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  opacity: 0.6 !important;
}

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

/* =====================================================
   MOBILE HEADER
   ===================================================== */
.mobile-header {
  background: var(--pf-white) !important;
  border-bottom: 2px solid var(--pf-blush-mid) !important;
  box-shadow: 0 2px 12px rgba(214,51,108,0.1) !important;
  background-image: none !important;
  animation: none !important;
}

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

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

.menu-bag i {
  color: var(--pf-primary) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: var(--pf-radius-full) !important;
  box-shadow: 0 2px 8px rgba(214,51,108,0.45) !important;
}

/* =====================================================
   SEARCH BAR — Premium Rose Focus
   ===================================================== */
.main-search form, .mobile-search form {
  border: 1.5px solid var(--pf-blush-mid) !important;
  border-radius: var(--pf-radius-sm) !important;
  overflow: hidden !important;
  background: var(--pf-white) !important;
  box-shadow: 0 1px 4px rgba(214,51,108,0.08) !important;
  transition: var(--pf-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}

.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(214,51,108,0.12), 0 4px 16px rgba(214,51,108,0.15) !important;
}

.search_keyword, .msearch_keyword {
  background: #FFFBFC !important;
  border: none !important;
  color: var(--pf-text) !important;
  font-weight: 400 !important;
  padding-left: 14px !important;
  flex: 1 !important;
}

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

.main-search form button, .mobile-search form button {
  background: var(--pf-grad-primary) !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 44px !important;
  transition: background 0.25s ease !important;
}

.main-search form button:hover, .mobile-search form button:hover {
  background: var(--pf-grad-rose) !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;
}

/* Live search results */
.search_product {
  background: var(--pf-white) !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 0 0 var(--pf-radius-sm) var(--pf-radius-sm) !important;
  box-shadow: var(--pf-shadow-lg) !important;
}

.search_product ul li:hover {
  background: var(--pf-blush) !important;
}

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

/* =====================================================
   HEADER ACTION ITEMS — Track, Cart Badge
   ===================================================== */
.header-list-items ul li span {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(214,51,108,0.45) !important;
}

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

.header-list-items ul li a:hover i {
  color: var(--pf-primary) !important;
}

.track_btn a {
  color: var(--pf-primary) !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--pf-blush-mid) !important;
  padding: 5px 14px !important;
  border-radius: var(--pf-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important; gap: 5px !important;
  transition: var(--pf-transition) !important;
  background: transparent !important;
  font-size: 13.5px !important;
}

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

.track_btn a:hover {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
  box-shadow: var(--pf-shadow-sm) !important;
}

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

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

.go_cart, .go_cart:hover {
  background: var(--pf-grad-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--pf-transition) !important;
}

.go_cart:hover {
  background: var(--pf-grad-rose) !important;
  box-shadow: var(--pf-shadow-glow) !important;
  transform: translateY(-1px) !important;
}

/* =====================================================
   NAVIGATION MENU BAR
   ===================================================== */
.menu-area {
  background: linear-gradient(135deg, #6B0F2C 0%, #8B1A4A 50%, #6B0F2C 100%) !important;
  box-shadow: 0 3px 12px rgba(139,26,74,0.3) !important;
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════
   ALL CATEGORIES BUTTON — PROTECTED VISUAL ONLY
   Structure/layout/JS unchanged — only colors adjusted
   ═══════════════════════════════════════════════════ */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i {
  background: linear-gradient(135deg, #A61E4D 0%, #D6336C 60%, #E8668E 100%) !important;
  background-size: 200% 200% !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(166,30,77,0.4) !important;
  animation: fashionCatShimmer 4s ease infinite !important;
}

.all__category__list > a:hover,
.all__category__list > a:hover * {
  background: linear-gradient(135deg, #880E4F 0%, #A61E4D 100%) !important;
  color: #FFFFFF !important;
  animation: none !important;
}

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

/* Nav links */
.heder__category > li:not(.all__category__list) a,
.right__menu__top li a,
.right__menu__top li p a {
  color: rgba(255,240,245,0.92) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 6px 14px !important;
  border-radius: var(--pf-radius-sm) !important;
  border: 1px solid transparent !important;
  transition: var(--pf-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

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

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

/* ═══════════════════════════════════════════════════
   CATEGORY DROPDOWN — Rose-Themed Multi-Level
   ═══════════════════════════════════════════════════ */
.side__bar {
  background: #1A0611 !important;
  border-radius: 0 0 var(--pf-radius-md) var(--pf-radius-md) !important;
  box-shadow: 0 16px 48px rgba(139,26,74,0.45), 0 4px 16px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(214,51,108,0.15) !important;
  border-top: 2px solid var(--pf-primary) !important;
  overflow: visible !important;
}

.side__bar, .side__bar *,
.side__bar ul, .side__bar ul li,
.side__bar ul li a,
.side__bar ul li a span,
.side__bar ul li a i {
  color: #F9D6E5 !important;
  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: #F0C0D0 !important;
  border-bottom: 1px solid rgba(214,51,108,0.1) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.side__bar ul li a img {
  width: 22px !important; height: 22px !important;
  object-fit: contain !important;
  border-radius: var(--pf-radius-xs) !important;
  flex-shrink: 0 !important;
}

.side__bar ul li a i,
.side__bar ul li a .fa-chevron-right {
  color: rgba(214,51,108,0.5) !important;
  font-size: 11px !important;
  margin-left: auto !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

.side__bar ul li:hover { background: rgba(214,51,108,0.12) !important; }

.side__bar ul li:hover > a {
  color: #FFFFFF !important;
  padding-left: 22px !important;
  border-left: 3px solid var(--pf-primary) !important;
}

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

/* Sub-menu (level 2) */
.side__barsub {
  background: #2D0B1A !important;
  border-left: 2px solid var(--pf-primary-light) !important;
  box-shadow: 6px 0 28px rgba(166,30,77,0.4) !important;
  min-width: 230px !important;
  border-top: 2px solid var(--pf-primary-light) !important;
}

.side__barsub, .side__barsub *,
body .side__barsub ul li a,
body .side__barsub ul li a span {
  color: #FFD6E7 !important;
  background-color: transparent !important;
}

.side__barsub ul li:hover > a,
body .side__barsub ul li:hover > a {
  color: #FFFFFF !important;
  padding-left: 20px !important;
  border-left: 3px solid var(--pf-primary-light) !important;
}

/* Sub-sub-menu (level 3) */
.side__barchild {
  background: #3D0C22 !important;
  border-left: 2px solid var(--pf-blush-mid) !important;
  box-shadow: 6px 0 28px rgba(166,30,77,0.35) !important;
  min-width: 220px !important;
  border-top: 2px solid var(--pf-blush-mid) !important;
}

.side__barchild, .side__barchild *,
body .side__barchild ul li a,
body .side__barchild ul li a span {
  color: #FFE8F0 !important;
  background-color: transparent !important;
}

.side__barchild ul li:hover > a,
body .side__barchild ul li:hover > a {
  color: #FFFFFF !important;
  padding-left: 20px !important;
  border-left: 3px solid var(--pf-blush-mid) !important;
}

/* =====================================================
   MOBILE SIDE MENU
   ===================================================== */
.mobile-menu {
  background: var(--pf-white) !important;
  box-shadow: 4px 0 30px rgba(214,51,108,0.2) !important;
  border-right: 2px solid var(--pf-blush-mid) !important;
}

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

.mobile-menu-logo {
  background: var(--pf-grad-rose) !important;
  padding: 14px 16px !important;
}

.mobile-menu-logo * { color: #FFFFFF !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;
}

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

.mobile-menu .menu-category-name:hover {
  background: var(--pf-blush) !important;
  color: var(--pf-primary) !important;
  padding-left: 22px !important;
}

.mobile-menu .menu-category-toggle,
.mobile-menu .menu-subcategory-toggle {
  color: var(--pf-primary-light) !important;
}

/* Mobile search */
.mobile-search {
  background: var(--pf-white) !important;
  border-bottom: 1px solid var(--pf-border) !important;
  box-shadow: 0 2px 8px rgba(214,51,108,0.06) !important;
  padding: 8px 12px !important;
}

.mobile-search form {
  background: var(--pf-blush-soft) !important;
  border: 1.5px solid var(--pf-blush-mid) !important;
  border-radius: var(--pf-radius-full) !important;
  box-shadow: none !important;
}

.mobile-search form input {
  background: transparent !important;
  color: var(--pf-text) !important;
  padding-left: 16px !important;
}

.mobile-search form input::placeholder { color: var(--pf-text-muted) !important; }

.mobile-search form button {
  background: var(--pf-grad-primary) !important;
  border-radius: 0 var(--pf-radius-full) var(--pf-radius-full) 0 !important;
  color: #FFFFFF !important;
}

.mobile-search form button svg,
.mobile-search form button i {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* Mobile hotline bar */
.d-flex.d-sm-none {
  background: var(--pf-primary-dark) !important;
}

/* =====================================================
   PHASE 8 — SECTION TITLES & HOME SECTIONS
   ===================================================== */
body { background: var(--pf-body-bg) !important; }

.homeproduct {
  background: transparent !important;
  padding: 12px 0 !important;
  margin-bottom: 8px !important;
}

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

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

.section-title-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid var(--pf-primary) !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;
}

/* View More button */
.view_more_btn, a.view_more_btn {
  background: transparent !important;
  color: var(--pf-primary) !important;
  border: 1.5px solid var(--pf-primary) !important;
  border-radius: var(--pf-radius-sm) !important;
  padding: 5px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: var(--pf-transition) !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: none !important;
  float: none !important;
}

.view_more_btn:hover, a.view_more_btn:hover {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--pf-shadow-sm) !important;
}

/* Slider / hero section */
.slider-section { margin-bottom: 12px !important; margin-top: 10px !important; }

.home-slider-container {
  border-radius: var(--pf-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--pf-shadow-md) !important;
}

/* Slider arrows — glassmorphism rose tint */
.main_slider .owl-prev,
.main_slider .owl-next,
.main-slider .owl-prev,
.main-slider .owl-next,
.main-slider .owl-nav button,
.main_slider .owl-nav button {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,200,220,0.35) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 16px rgba(214,51,108,0.2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  transition: var(--pf-transition) !important;
  color: #FFFFFF !important;
}

.main_slider .owl-prev:hover,
.main_slider .owl-next:hover {
  background: rgba(214,51,108,0.35) !important;
  border-color: rgba(214,51,108,0.6) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(214,51,108,0.4) !important;
}

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

/* =====================================================
   PROMOTIONAL BANNER ADS (bottom slider ads)
   ===================================================== */
.bottoads_area {
  padding: 12px 0 !important;
  background: var(--pf-body-bg) !important;
  margin-bottom: 8px !important;
}

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

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

.ads_item img {
  border-radius: var(--pf-radius-md) !important;
  transition: transform 0.5s ease !important;
}

.ads_item:hover img { transform: scale(1.03) !important; }

/* Footer top ads */
.footer_top_ads_area {
  background: var(--pf-body-bg) !important;
  padding: 20px 0 !important;
  margin-bottom: 8px !important;
}

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

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

/* Campaign items */
.campaign-item a {
  border-radius: var(--pf-radius-md) !important;
  overflow: hidden !important;
}

/* =====================================================
   PHASE 8b — CATEGORY CARDS
   ===================================================== */
.cat_item {
  background: var(--pf-white) !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: var(--pf-radius-md) !important;
  padding: 14px 6px !important;
  text-align: center !important;
  transition: var(--pf-transition) !important;
  box-shadow: var(--pf-shadow-xs) !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(--pf-primary-light) !important;
  box-shadow: var(--pf-shadow-md) !important;
  transform: translateY(-4px) scale(1.02) !important;
  background: var(--pf-blush-soft) !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(--pf-transition) !important;
}

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

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

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

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

/* =====================================================
   PHASE 9 — PRODUCT CARDS (Premium Fashion Style)
   ===================================================== */
.product_item, .product-item, .wist_item {
  background: var(--pf-card-bg) !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: var(--pf-radius-md) !important;
  box-shadow: var(--pf-shadow-xs) !important;
  transition: var(--pf-transition) !important;
  overflow: hidden !important;
  padding: 10px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
  position: relative !important;
  display: block !important;
}

.product_item:hover, .product-item:hover, .wist_item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pf-shadow-hover) !important;
  border-color: var(--pf-primary-light) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  background: var(--pf-white) !important;
}

/* Product image */
.pro_img {
  height: 200px !important;
  border-radius: var(--pf-radius-sm) !important;
  overflow: hidden !important;
  background: var(--pf-blush-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !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.5s 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;
}

/* Product name */
.pro_name {
  height: 48px !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}

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

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

/* Star ratings */
.product_item i.fas.fa-star,
.product_item i.fas.fa-star-half-alt {
  color: #F0A500 !important;
  font-size: 11px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

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

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

.pro_price p {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pf-price) !important;
  text-align: left !important;
  margin: 0 !important;
}

.pro_price del, .pro_price s {
  color: var(--pf-old-price) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-right: 5px !important;
}

/* Sale / Discount badge */
.sale-badge-box {
  background: linear-gradient(135deg, #A61E4D, #D6336C) !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(214,51,108,0.45) !important;
  animation: saleBadgePulse 2.5s ease-in-out infinite !important;
}

@keyframes saleBadgePulse {
  0%,100% { box-shadow: 0 3px 10px rgba(214,51,108,0.4); }
  50%      { box-shadow: 0 3px 18px rgba(214,51,108,0.65), 0 0 0 3px rgba(214,51,108,0.1); }
}

.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;
}

/* Quick view & wishlist hover buttons */
.quick_view_hard a {
  border-color: var(--pf-blush-mid) !important;
  color: var(--pf-text-muted) !important;
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(8px) !important;
  transition: var(--pf-transition) !important;
}

.quick_view_hard a:hover {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

/* Quick view bottom bar */
.quick_view_btn {
  background: rgba(166,30,77,0.9) !important;
  backdrop-filter: blur(8px) !important;
}

.quick_view_btn button { color: #FFFFFF !important; }

/* =====================================================
   PHASE 9b — PRODUCT CARD BUTTON SYSTEM
   ===================================================== */

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

@keyframes roseGlow {
  0%,100% { box-shadow: 0 4px 15px rgba(214,51,108,0.32); }
  50%      { box-shadow: 0 4px 24px rgba(214,51,108,0.6), 0 0 0 3px rgba(214,51,108,0.1); }
}

@keyframes roseOrderPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(166,30,77,0.4); }
  50%      { box-shadow: 0 4px 32px rgba(166,30,77,0.65), 0 0 0 3px rgba(214,51,108,0.12); }
}

@keyframes shimmerSweep {
  0%   { left: -100%; }
  100% { left: 150%; }
}

/* BTN-1: Product card "ORDER NOW" — Rose gradient shimmer */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(135deg, #A61E4D 0%, #D6336C 50%, #E8668E 100%) !important;
  background-size: 200% 200% !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  height: 38px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-shadow: 0 4px 12px rgba(214,51,108,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: var(--pf-transition) !important;
  animation: roseGradShift 4s ease infinite !important;
  margin: 0 !important;
}

/* Reset style.css slide-up animation interference */
.cart_btn.order_button a::after { display: none !important; }
.cart_btn.order_button a span {
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  display: inline !important;
  line-height: normal !important;
  background: transparent !important;
  color: #FFFFFF !important;
  transition: none !important;
}
.cart_btn.order_button a:hover span { top: 0 !important; }

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

.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background-position: right center !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(214,51,108,0.5), 0 0 0 2px rgba(232,102,142,0.25) !important;
  animation: none !important;
}

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

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

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

/* BTN-2: Cart Store */
.cart_store {
  background: var(--pf-grad-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--pf-transition) !important;
  box-shadow: 0 4px 14px rgba(214,51,108,0.3) !important;
}

.cart_store:hover {
  background: var(--pf-grad-rose) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(214,51,108,0.5) !important;
}

/* BTN-3: Go To Cart */
.go_cart, .go_cart:hover {
  background: var(--pf-grad-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 10px 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  animation: roseGlow 2.8s ease-in-out infinite !important;
}

.go_cart:hover {
  background: var(--pf-grad-rose) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--pf-shadow-glow) !important;
  animation: none !important;
}

/* BTN-4: Submit / Login */
.submit-btn {
  background: var(--pf-grad-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--pf-radius-full) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  padding: 11px 0 !important;
  width: 100% !important;
  transition: var(--pf-transition) !important;
  box-shadow: 0 5px 18px rgba(214,51,108,0.38) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  text-align: center !important;
}

.submit-btn:hover {
  background: var(--pf-grad-rose) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(214,51,108,0.5) !important;
}

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

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

/* BTN-5: Order Place (Checkout CTA) */
.order_place {
  background: linear-gradient(90deg, #A61E4D 0%, #D6336C 50%, #E8668E 100%) !important;
  background-size: 200% auto !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 13px 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 5px 20px rgba(214,51,108,0.4) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: roseOrderPulse 2.5s ease-in-out infinite !important;
}

.order_place:hover {
  background-position: right center !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(214,51,108,0.55) !important;
  animation: none !important;
}

/* =====================================================
   PHASE 10 — PRODUCT DETAIL PAGE
   ===================================================== */

/* ── Keyframes for detail page buttons ── */
@keyframes auroraNoir {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes solarRose {
  0%   { background-position: 0% 50%; box-shadow: 0 4px 20px rgba(166,30,77,0.4); }
  50%  { background-position: 100% 50%; box-shadow: 0 4px 32px rgba(166,30,77,0.65), 0 0 0 3px rgba(214,51,108,0.12); }
  100% { background-position: 0% 50%; box-shadow: 0 4px 20px rgba(166,30,77,0.4); }
}

@keyframes jadeBreath {
  0%   { background-position: 0% 50%; box-shadow: 0 4px 18px rgba(21,128,61,0.38); }
  50%  { background-position: 100% 50%; box-shadow: 0 4px 28px rgba(21,128,61,0.6), 0 0 0 3px rgba(34,211,238,0.1); }
  100% { background-position: 0% 50%; box-shadow: 0 4px 18px rgba(21,128,61,0.38); }
}

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

/* ── BTN-8: ADD TO CART — Noir Velvet Aubergine ── */
.single_product.d-flex .add_cart_btn {
  background: linear-gradient(
    135deg,
    #1A0611 0%, #3D0C22 25%, #6B1540 55%, #4D0E2F 80%, #120408 100%
  ) !important;
  background-size: 300% 300% !important;
  color: #FFD6E7 !important;
  border: 1px solid rgba(214,51,108,0.25) !important;
  border-radius: var(--pf-radius-md) !important;
  height: 52px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  width: auto !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
  box-shadow: 0 4px 20px rgba(61,12,34,0.55), inset 0 1px 0 rgba(255,180,200,0.15) !important;
  animation: auroraNoir 6s ease infinite !important;
}

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

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

.single_product.d-flex .add_cart_btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 10% !important;
  width: 80% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,160,190,0.6), transparent) !important;
  pointer-events: none !important; z-index: 3 !important;
}

.single_product.d-flex .add_cart_btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  border-color: rgba(214,51,108,0.45) !important;
  box-shadow: 0 14px 36px rgba(61,12,34,0.55), 0 0 0 1px rgba(214,51,108,0.2) !important;
  animation: none !important;
}

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

/* ── BTN-9: ORDER NOW — Solar Flare Rose ── */
.single_product.d-flex .order_now_btn {
  background: linear-gradient(
    135deg,
    #7F0929 0%, #B01245 22%, #D6336C 45%, #E8668E 65%, #C2185B 85%, #7F0929 100%
  ) !important;
  background-size: 280% 280% !important;
  color: #FFF0F5 !important;
  border: none !important;
  border-radius: var(--pf-radius-md) !important;
  height: 52px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  width: auto !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
  animation: solarRose 2.5s ease-in-out infinite !important;
}

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

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

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

.single_product.d-flex .order_now_btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  animation: none !important;
  box-shadow: 0 14px 38px rgba(166,30,77,0.6), 0 0 0 2px rgba(214,51,108,0.22) !important;
}

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

/* ── BTN-C: CALL — Deep Royal Plum ── */
.call_now_btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 50px !important;
  border-radius: var(--pf-radius-md) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.45px !important;
  width: 100% !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
  border: none !important;
  cursor: pointer !important;
  color: #FFFFFF !important;
}

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

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

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

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

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

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

/* Phone call — plum */
.call_now_btn[href^="tel"] {
  background: linear-gradient(135deg, #1E0533 0%, #3B0764 20%, #6D28D9 45%, #7C3AED 65%, #4C1D95 85%, #1E0533 100%) !important;
  background-size: 260% 260% !important;
  color: #F3E8FF !important;
  box-shadow: 0 4px 20px rgba(109,40,217,0.45), inset 0 1px 0 rgba(221,180,255,0.18) !important;
  animation: plumPulse 3.2s ease-in-out infinite !important;
}

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

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

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

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

/* WhatsApp — jade green */
.call_now_btn[href*="whatsapp"],
.call_now_btn[href*="api.whatsapp"] {
  background: linear-gradient(135deg, #052E16 0%, #14532D 18%, #15803D 38%, #16A34A 55%, #22C55E 72%, #15803D 88%, #052E16 100%) !important;
  background-size: 260% 260% !important;
  color: #F0FDF4 !important;
  box-shadow: 0 4px 20px rgba(21,128,61,0.45), inset 0 1px 0 rgba(167,243,208,0.2) !important;
  animation: jadeBreath 3s ease-in-out infinite !important;
}

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

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

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

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

/* Product detail — info layout */
.details_right {
  border: 1px solid var(--pf-border) !important;
  padding: 20px !important;
  border-radius: var(--pf-radius-md) !important;
  background: var(--pf-white) !important;
  box-shadow: var(--pf-shadow-xs) !important;
}

.product-cart .name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  line-height: 1.3 !important;
}

.details-price {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--pf-price) !important;
  margin: 10px 0 !important;
}

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

/* Product code badge */
.product-code p {
  display: inline-block !important;
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  padding: 0 10px !important;
  border-top: 15px solid transparent !important;
  border-bottom: 15px solid transparent !important;
  border-right: 15px solid var(--pf-white) !important;
  line-height: 0 !important;
  margin-bottom: 10px !important;
}

/* Quantity controls */
.qty-cart .quantity {
  border: 1.5px solid var(--pf-blush-mid) !important;
  border-radius: var(--pf-radius-sm) !important;
}

.quantity .minus, .quantity .plus {
  color: var(--pf-primary) !important;
  border-color: var(--pf-blush-mid) !important;
}

/* Size selectors */
.selector-item_label {
  border: 1.5px solid var(--pf-border) !important;
  color: var(--pf-text-mid) !important;
  border-radius: var(--pf-radius-xs) !important;
  transition: var(--pf-transition) !important;
}

.selector-item_radio:checked + .selector-item_label,
.selector-item_label:hover {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--pf-primary) !important;
}

/* Rating stars (detail page) */
.details-ratting-wrapper i { color: #F0A500 !important; }
.details-ratting-wrapper i.far.fa-star { color: var(--pf-border) !important; }
.review_star i { color: #F0A500 !important; }

/* Details page slider */
.details_slider { border-radius: var(--pf-radius-md) !important; }
.indicator-item { border-radius: var(--pf-radius-xs) !important; overflow: hidden !important; }

/* Product details discount badge */
.product-details-discount-badge .sale-badge-text {
  background: var(--pf-grad-primary) !important;
  border-radius: 50% !important;
}

/* Description nav */
.desc-nav-ul li.active a,
.desc-nav-ul li:hover a {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

.desc-nav-ul li a {
  border-radius: var(--pf-radius-sm) !important;
  transition: var(--pf-transition) !important;
}

/* Review card */
.review-card {
  background: var(--pf-blush-soft) !important;
  border-radius: var(--pf-radius-md) !important;
  border: 1px solid var(--pf-border) !important;
}

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

.details-review-button {
  background: var(--pf-success) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
}

/* Related products section title */
.related-title h5 {
  color: var(--pf-primary-dark) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border-bottom: 2px solid var(--pf-primary) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}

/* Alert info (shipping) */
.alert-info {
  background: var(--pf-blush-soft) !important;
  border-color: var(--pf-border) !important;
  color: var(--pf-text-mid) !important;
  border-radius: var(--pf-radius-sm) !important;
}

.alert-success {
  background: #E8F5E9 !important;
  border: 1px solid #C8E6C9 !important;
  color: #2E7D32 !important;
  border-radius: var(--pf-radius-md) !important;
}

/* =====================================================
   PHASE 11 — CART / WISHLIST / CHECKOUT
   ===================================================== */

/* Cart page */
.vcart-inner {
  background: var(--pf-blush-soft) !important;
  border-radius: var(--pf-radius-md) !important;
  border: 1px solid var(--pf-border) !important;
}

.cart-summary {
  background: var(--pf-blush-soft) !important;
  border-radius: var(--pf-radius-md) !important;
  border: 1px solid var(--pf-border) !important;
}

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

.cart-title h4 { color: var(--pf-primary-dark) !important; font-weight: 700 !important; }

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

.remove-cart .feather { color: #FFFFFF !important; }

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

/* Coupon form */
.coupon-form form button {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

/* Checkout */
.chheckout-section { padding: 35px 0 !important; }

.checkout-shipping .card-header,
.cart_details .card-header {
  background: var(--pf-blush-soft) !important;
  border-bottom: 1px solid var(--pf-border) !important;
}

.checkout-shipping h5,
.cart_details h5 {
  color: var(--pf-primary-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

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

.checkout-shipping input,
.checkout-shipping input:focus,
.checkout-shipping select,
.checkout-shipping select:focus {
  border: 1.5px solid var(--pf-border) !important;
  height: 40px !important;
  border-radius: var(--pf-radius-sm) !important;
  transition: var(--pf-transition) !important;
}

.checkout-shipping input:focus,
.checkout-shipping select:focus {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(214,51,108,0.1) !important;
}

.checkout-shipping label { color: var(--pf-text-mid) !important; font-weight: 600 !important; }

/* Payment methods */
.payment-methods .form-check-input {
  border: 2px solid var(--pf-primary) !important;
  border-radius: 50% !important;
}

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

.payment-methods .form-check-input:checked {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 4px rgba(214,51,108,0.1) !important;
}

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

/* =====================================================
   LOGIN / REGISTER / AUTH PAGES
   ===================================================== */
.form-content {
  background: var(--pf-white) !important;
  border-radius: var(--pf-radius-lg) !important;
  border: 1px solid var(--pf-border) !important;
  box-shadow: var(--pf-shadow-md) !important;
}

.auth-title {
  color: var(--pf-primary-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: var(--pf-blush-soft) !important;
  border-bottom: 2px solid var(--pf-border) !important;
  padding: 12px 16px !important;
}

.form-content label { color: var(--pf-text-mid) !important; font-weight: 600 !important; }
.no-account a, .register-now a { color: var(--pf-primary) !important; font-weight: 600 !important; }
.forget-link { color: var(--pf-primary) !important; }

/* Login dropdown box */
.login-box {
  border-radius: var(--pf-radius-md) !important;
  box-shadow: var(--pf-shadow-lg) !important;
  border: 1px solid var(--pf-border) !important;
}

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

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(214,51,108,0.1) !important;
  outline: none !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--pf-text-muted) !important;
  font-size: 13px !important;
}

/* Customer sidebar / profile */
.customer-sidebar, .sidebar-menu {
  background: var(--pf-white) !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius-md) !important;
  box-shadow: var(--pf-shadow-sm) !important;
}

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

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
  color: var(--pf-primary) !important;
  background: var(--pf-blush-soft) !important;
  padding-left: 22px !important;
}

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

.invoice_btn, .invoice_btn:focus {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
}

/* =====================================================
   PAGINATION
   ===================================================== */
.pagination .page-item.active .page-link {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
}

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

.pagination .page-link:hover {
  background: var(--pf-blush) !important;
  color: var(--pf-primary) !important;
}

/* =====================================================
   TABLES (Order history, tracking)
   ===================================================== */
.table td, .table th {
  color: var(--pf-text) !important;
  border-color: var(--pf-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) { background: var(--pf-blush-soft) !important; }
.tracktable thead { background: var(--pf-primary) !important; }
.tracktable thead * { color: #FFFFFF !important; }

/* =====================================================
   PHASE 12 — FOOTER
   ===================================================== */
footer, .footer-top, .footer-bottom, .main-footer {
  background: var(--pf-grad-footer) !important;
  background-color: #1A0611 !important;
  background-image: linear-gradient(135deg, #1A0611 0%, #3D0C22 100%) !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-top {
  padding: 52px 0 36px !important;
  border-top: 2px solid rgba(214,51,108,0.4) !important;
}

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

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

.footer-hotlint {
  color: var(--pf-blush-mid) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: var(--pf-transition) !important;
}

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

/* Footer menu section titles */
.footer-menu ul li.title a {
  color: var(--pf-primary-light) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  border: none !important;
  border-bottom: 2px solid rgba(214,51,108,0.3) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

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

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


/* ── Keyframes for social icons ── */
@keyframes socialIconHoverGlow {
  0%   { box-shadow: 0 4px 15px rgba(214,51,108,0.0); }
  100% { box-shadow: 0 6px 20px rgba(214,51,108,0.55), 0 0 0 2px rgba(214,51,108,0.25); }
}

/* Social icons — Square box style (like reference image) */
.social_link {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
  justify-content: center !important;
}

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

.social_link li a,
.social_link li a.mobile-social-link {
  /* Square box with rounded corners — exactly like reference */
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;          /* rounded square, not circle */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Dark background with subtle border */
  background: #1E1E1E !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;

  /* Icon color */
  color: rgba(255,255,255,0.85) !important;
  font-size: 17px !important;

  /* Depth shadow */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 2px 6px rgba(0,0,0,0.40) !important;

  transition:
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease !important;
  text-decoration: none !important;
}

/* Icon itself */
.social_link li a i,
.social_link li a.mobile-social-link i {
  color: rgba(255,255,255,0.85) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* Hover — rose glow lift */
.social_link li a:hover,
.social_link li a.mobile-social-link:hover {
  background: linear-gradient(135deg, #A61E4D, #D6336C) !important;
  border-color: rgba(214,51,108,0.50) !important;
  color: #FFFFFF !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow:
    0 1px 0 rgba(255,210,230,0.25) inset,
    0 -1px 0 rgba(80,0,20,0.30) inset,
    0 8px 20px rgba(214,51,108,0.55),
    0 0 0 2px rgba(232,102,142,0.25) !important;
}

.social_link li a:hover i,
.social_link li a.mobile-social-link:hover i {
  color: #FFFFFF !important;
  transform: scale(1.15) !important;
}


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

.footer-bottom {
  background: #0E030A !important;
  background-color: #0E030A !important;
  border-top: 1px solid rgba(214,51,108,0.15) !important;
  padding: 16px 0 !important;
}

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

.developer-credit-link {
  color: var(--pf-success) !important;
  font-weight: 700 !important;
}

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

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

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

  .footer_nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #1C1118 !important;
    border-top: 1.5px solid var(--pf-primary) !important;
    box-shadow: 0 -3px 16px rgba(166,30,77,0.3) !important;
    height: 68px !important;
    padding: 0 !important; margin: 0 !important;
  }

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

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

  .footer_nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 5px !important;
    width: 52px !important; height: 52px !important;
    border-radius: var(--pf-radius-md) !important;
    text-decoration: none !important;
    position: relative !important; cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: var(--pf-transition-fast) !important;
  }

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

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

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

  .footer_nav ul li a:hover {
    background: rgba(214,51,108,0.12) !important;
    border-color: rgba(214,51,108,0.25) !important;
  }

  .footer_nav ul li a:hover span i { color: var(--pf-primary-light) !important; }
  .footer_nav ul li a:hover span svg { stroke: var(--pf-primary-light) !important; }
  .footer_nav ul li a:hover span:last-child { color: var(--pf-primary-light) !important; }

  /* Home center button — elevated rose */
  .footer_nav ul li:nth-child(3) a {
    width: 58px !important; height: 58px !important;
    border-radius: var(--pf-radius-md) !important;
    margin-top: -16px !important;
    background: var(--pf-grad-primary) !important;
    border: 1.5px solid rgba(255,200,220,0.3) !important;
    box-shadow: 0 4px 18px rgba(214,51,108,0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: var(--pf-transition) !important;
  }

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

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

  .footer_nav ul li:nth-child(3) a:hover {
    background: var(--pf-grad-rose) !important;
    box-shadow: 0 6px 22px rgba(214,51,108,0.65) !important;
  }

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

  .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;
  }

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

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

/* =====================================================
   PHASE 12c — MOBILE LAYOUT REFINEMENTS
   ===================================================== */
@media (max-width: 767px) {
  /* Mobile content offset */
  #content { padding-top: 163px !important; }

  /* Product grid — 2 columns */
  .main_product_inner {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 8px !important;
  }

  /* Tighter product cards on mobile */
  .product_item { padding: 8px !important; margin-bottom: 10px !important; }
  .pro_img { height: 160px !important; }
  .pro_price p { font-size: 14px !important; }
  .pro_name { height: 44px !important; }
  .pro_name a { font-size: 12.5px !important; }

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

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

  /* Slider */
  .slider-item { height: 150px !important; }
  .home-slider-container { border-radius: var(--pf-radius-sm) !important; }

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

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

  /* Scroll to top hidden on mobile (bottom nav takes that space) */
  .scrolltop { bottom: 84px !important; display: none !important; }

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

  /* Promo banner — horizontal scroll strip */
  .bottoads_area {
    padding: 0 !important;
    background: var(--pf-white) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .bottoads_inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 15px 10px 15px !important;
    margin: 0 -15px !important;
    gap: 12px !important;
    grid-template-columns: none !important;
  }

  .bottoads_inner::-webkit-scrollbar { display: none !important; }

  .ads_item {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    border-radius: var(--pf-radius-md) !important;
    box-shadow: var(--pf-shadow-sm) !important;
    transition: none !important;
  }

  .ads_item:hover { transform: none !important; }

  .ads_item img {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    border-radius: var(--pf-radius-md) !important;
  }

  /* Filter sidebar */
  .filter_sidebar {
    position: fixed !important;
    visibility: hidden !important;
    opacity: 0 !important;
    top: 30px !important;
    transition: var(--pf-transition) !important;
    background: var(--pf-white) !important;
    z-index: 9999 !important;
  }

  .filter_sidebar.active {
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
    width: 97% !important;
    top: 2px !important;
    overflow-y: auto !important;
  }

  .filter_btn {
    display: inline-block !important;
    background: var(--pf-primary) !important;
    color: #FFFFFF !important;
    border-radius: var(--pf-radius-sm) !important;
  }

  .filter_close {
    background: var(--pf-primary) !important;
    color: #FFFFFF !important;
    border-radius: var(--pf-radius-sm) !important;
    display: block !important;
  }

  /* Sorting section */
  .filter_sort {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    padding: 0 6px !important;
    margin-top: 12px !important;
  }

  .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.3) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.3) !important;
  }
}

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

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

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

/* =====================================================
   PHASE 13 — ANIMATIONS & MICRO-INTERACTIONS
   ===================================================== */

/* ── Card reveal on page load ── */
@keyframes fashionFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

/* ── Section title underline reveal ── */
@keyframes underlineReveal {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Wishlist heart feedback ── */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25); }
  50%  { transform: scale(0.95); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Cart badge bounce ── */
@keyframes cartBounce {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.2); }
  60%      { transform: scale(0.9); }
}

/* ── Countdown timer cell flash ── */
@keyframes timerFlash {
  0%,100% { background: var(--pf-primary); }
  50%      { background: var(--pf-primary-dark); }
}

/* Apply reveal to cards */
.product_item, .cat_item, .homeproduct .row > *, .ads_item {
  animation: fashionFadeUp 0.42s ease both;
}

/* Stagger product cards via nth-child */
.product_item:nth-child(1) { animation-delay: 0.05s; }
.product_item:nth-child(2) { animation-delay: 0.10s; }
.product_item:nth-child(3) { animation-delay: 0.15s; }
.product_item:nth-child(4) { animation-delay: 0.20s; }
.product_item:nth-child(5) { animation-delay: 0.25s; }
.product_item:nth-child(6) { animation-delay: 0.30s; }

/* Mobile menu slide */
.mobile-menu.active { animation: fashionSlideInLeft 0.3s ease both; }

/* WhatsApp float */
.float {
  background: #25D366 !important;
  box-shadow: 0 4px 18px rgba(37,211,102,0.38) !important;
  border: none !important;
  transition: var(--pf-transition) !important;
  animation: fashionFloatBob 3s ease-in-out infinite !important;
}

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

/* ── Keyframes for scroll-to-top button ── */
@keyframes scrollBtnPulse {
  0%,100% {
    box-shadow:
      0 0 0 0 rgba(214,51,108,0.0),
      0 4px 14px rgba(214,51,108,0.40);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(214,51,108,0.12),
      0 4px 20px rgba(214,51,108,0.65),
      0 0 30px rgba(214,51,108,0.20);
  }
}

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

@keyframes scrollBtnBounce {
  0%,100% { transform: translateY(0); }
  40%      { transform: translateY(-4px); }
  60%      { transform: translateY(-2px); }
}

/* Scroll to top — Ultra Premium */
.scrolltop {
  background: linear-gradient(
    135deg,
    #7F0929 0%,
    #A61E4D 25%,
    #D6336C 60%,
    #E8668E 100%
  ) !important;
  background-size: 250% 250% !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  text-align: center !important;

  /* 3D layered shadow */
  box-shadow:
    0 1px 0 rgba(255,210,230,0.35) inset,
    0 -2px 0 rgba(80,0,20,0.40) inset,
    0 4px 14px rgba(214,51,108,0.40) !important;

  /* Dual animation — aurora shift + pulse glow */
  animation:
    scrollBtnAuroraShift 3s ease infinite,
    scrollBtnPulse 2.5s ease-in-out infinite !important;

  transition:
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.28s ease !important;

  /* Ensure it's visible on desktop */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 99 !important;
  position: fixed !important;
  right: 34px !important;
  bottom: 10px !important;
}

.scrolltop:hover {
  background: linear-gradient(
    135deg,
    #9B0B30 0%,
    #C2185B 40%,
    #E8668E 100%
  ) !important;
  transform: scale(1.15) translateY(-3px) !important;
  animation:
    scrollBtnAuroraShift 1.5s ease infinite,
    scrollBtnBounce 0.6s ease !important;
  box-shadow:
    0 1px 0 rgba(255,220,235,0.45) inset,
    0 -2px 0 rgba(80,0,20,0.50) inset,
    0 10px 28px rgba(214,51,108,0.70),
    0 0 0 3px rgba(232,102,142,0.35),
    0 0 35px rgba(214,51,108,0.25) !important;
}

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

.scrolltop .scroll i {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  text-shadow: 0 1px 3px rgba(80,0,20,0.5) !important;
  line-height: 1 !important;
}

/* Countdown timer */
.timer_inner .syotimer-cell {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(214,51,108,0.3) !important;
  font-weight: 700 !important;
  min-width: 40px !important;
  padding: 8px !important;
}

/* =====================================================
   MISC UI — Modals, Overlays, Badges, Toastr
   ===================================================== */

/* Page overlay */
#page-overlay { background: rgba(30,10,18,0.65) !important; }

/* Quick view modal */
.modal-view {
  border-radius: var(--pf-radius-lg) !important;
  box-shadow: var(--pf-shadow-dark) !important;
  border: 1px solid var(--pf-border) !important;
}

.close-modal {
  background: var(--pf-error) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
}

/* Confirm / continue buttons */
.confirm-btn {
  background: var(--pf-primary) !important;
  border-radius: var(--pf-radius-sm) !important;
  transition: var(--pf-transition) !important;
}

.confirm-btn:hover { background: var(--pf-primary-dark) !important; }
.continue-btn:hover { background: var(--pf-primary) !important; color: #FFFFFF !important; }

/* Bootstrap badges */
.badge { font-weight: 600 !important; border-radius: var(--pf-radius-full) !important; }
.badge-success, .bg-success { background: var(--pf-success) !important; }
.badge-danger,  .bg-danger  { background: var(--pf-error) !important; }
.badge-primary, .bg-primary { background: var(--pf-primary) !important; }

/* Generic btn-primary overrides */
.btn-primary, .button-primary {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--pf-transition) !important;
  box-shadow: 0 4px 14px rgba(214,51,108,0.28) !important;
}

.btn-primary:hover, .button-primary:hover {
  background: var(--pf-primary-dark) !important;
  border-color: var(--pf-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(214,51,108,0.42) !important;
}

.btn-success {
  background: linear-gradient(135deg, #2E7D32, #43A047) !important;
  border-color: #2E7D32 !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(46,125,50,0.3) !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #1B5E20, #2E7D32) !important;
  transform: translateY(-2px) !important;
}

button[type="submit"].btn, input[type="submit"].btn {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--pf-primary) !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(214,51,108,0.22) !important;
}

button[type="submit"].btn:hover, input[type="submit"].btn:hover {
  background: var(--pf-primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* Checkout button */
.checkout-btn {
  background: var(--pf-primary-dark) !important;
  border: 2px solid var(--pf-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--pf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--pf-transition) !important;
}

.checkout-btn:hover {
  background: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(214,51,108,0.2), 0 8px 20px rgba(214,51,108,0.4) !important;
  transform: translateY(-2px) !important;
}

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

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

/* Stars — generic */
.fas.fa-star, .fas.fa-star-half-alt { color: #F0A500 !important; }
.far.fa-star { color: var(--pf-border) !important; }

/* Sidebar filter accordion */
.sidebar_item .accordion-header .accordion-button,
.sidebar_item h2.accordion-header button.accordion-button {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
}

.sidebar_item .accordion-header .accordion-button::after {
  background: none !important;
  content: '\f078' !important;
  font-family: 'FontAwesome' !important;
  font-size: 17px !important;
  color: #FFFFFF !important;
}

.subcategory-filter-label input[type=checkbox] {
  border: 2px solid var(--pf-primary) !important;
}

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

.cust_according_body ul li a:hover,
.subcategory-filter-label:hover {
  background-color: var(--pf-blush) !important;
  color: var(--pf-primary) !important;
}

/* jQuery UI price slider */
.ui-slider-horizontal .ui-slider-range { background-color: var(--pf-primary) !important; }
.ui-state-default, .ui-widget-content .ui-state-default { border-radius: 50px !important; }

/* Contact form */
.contact-form {
  background: var(--pf-blush-soft) !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius-md) !important;
}

.contact-form label { color: var(--pf-text-mid) !important; font-weight: 600 !important; }

.contact-section { background: var(--pf-white) !important; }

/* Breadcrumb */
.category-breadcrumb a, .breadcrumb ul li a {
  color: var(--pf-text-muted) !important;
  font-size: 14px !important;
  transition: var(--pf-transition) !important;
}

.category-breadcrumb a:hover, .breadcrumb ul li a:hover { color: var(--pf-primary) !important; }
.category-breadcrumb strong, .category-breadcrumb span,
.breadcrumb ul li span { color: var(--pf-text-muted) !important; }

/* Page sections backgrounds */
.product-section {
  background: var(--pf-white) !important;
  border-radius: var(--pf-radius-md) !important;
  margin-bottom: 10px !important;
}

section.related-product-section {
  background: var(--pf-white) !important;
  border-radius: var(--pf-radius-md) !important;
}

section.pro_details_area { background: var(--pf-white) !important; }

.description {
  background: var(--pf-blush-soft) !important;
  border-radius: var(--pf-radius-md) !important;
}

.description h2 {
  color: var(--pf-primary-dark) !important;
  border-bottom: 2px solid var(--pf-border) !important;
}

.description-nav-wrapper {
  background: var(--pf-white) !important;
  box-shadow: var(--pf-shadow-xs) !important;
}

/* =====================================================
   TOASTR NOTIFICATIONS — Rose Premium
   ===================================================== */
#toast-container > div {
  opacity: 1 !important;
  box-shadow: 0 15px 45px rgba(30,10,18,0.3) !important;
  border-radius: var(--pf-radius-lg) !important;
  padding: 22px 24px 22px 64px !important;
  width: 380px !important;
  max-width: 95vw !important;
  font-family: "Inter", sans-serif !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275) !important;
}

#toast-container > .toast-success {
  background-color: rgba(46,125,50,0.95) !important;
}

#toast-container > .toast-error {
  background-color: rgba(198,40,40,0.95) !important;
}

#toast-container > .toast-warning {
  background-color: rgba(230,81,0,0.95) !important;
}

#toast-container > .toast-info {
  background-color: rgba(166,30,77,0.95) !important;
}

#toast-container > div .toast-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 5px !important;
}

#toast-container > div .toast-message {
  font-size: 14px !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.6 !important;
}

#toast-container > div .toast-progress {
  height: 4px !important;
  background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
  bottom: 0 !important;
}

#toast-container > div .toast-close-button {
  color: #FFFFFF !important;
  opacity: 0.75 !important;
  font-size: 18px !important;
}

#toast-container > div .toast-close-button:hover { opacity: 1 !important; }

/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pf-blush-soft); }
::-webkit-scrollbar-thumb {
  background: rgba(214,51,108,0.3);
  border-radius: var(--pf-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--pf-primary); }

/* =====================================================
   PHASE 14 — FINAL NUCLEAR OVERRIDES
   (These ensure rose theme wins over main.css blue tokens)
   ===================================================== */

/* Override --g-primary (blue) to rose everywhere it leaks */
:root {
  --g-primary:        var(--pf-primary) !important;
  --g-primary-dark:   var(--pf-primary-dark) !important;
  --g-primary-light:  var(--pf-primary-light) !important;
  --g-primary-rgb:    var(--pf-primary-rgb) !important;
  --g-accent:         var(--pf-primary) !important;
  --g-accent-dark:    var(--pf-primary-dark) !important;
  --g-bg:             var(--pf-body-bg) !important;
  --g-bg-card:        var(--pf-card-bg) !important;
  --g-text:           var(--pf-text) !important;
  --g-text-muted:     var(--pf-text-muted) !important;
  --g-border:         var(--pf-border) !important;
  --g-shadow-sm:      var(--pf-shadow-sm) !important;
  --g-shadow-md:      var(--pf-shadow-md) !important;
  --g-shadow-lg:      var(--pf-shadow-lg) !important;
  --g-shadow-hover:   var(--pf-shadow-hover) !important;
  --g-error:          var(--pf-error) !important;
  --g-success:        var(--pf-success) !important;
  --g-radius-sm:      var(--pf-radius-xs) !important;
  --g-radius-md:      var(--pf-radius-sm) !important;
  --g-radius-lg:      var(--pf-radius-md) !important;
  --g-radius-xl:      var(--pf-radius-lg) !important;
  --g-transition:     var(--pf-transition) !important;

  /* Purple tokens → rose */
  --purple-dark:          var(--pf-primary-dark) !important;
  --purple-main:          var(--pf-primary) !important;
  --purple-accent:        var(--pf-primary-light) !important;
  --purple-light:         var(--pf-blush-mid) !important;
  --purple-soft-bg:       var(--pf-blush-soft) !important;
  --purple-gradient:      var(--pf-grad-primary) !important;
  --purple-gradient-rev:  var(--pf-grad-primary-rev) !important;
  --purple-glow:          rgba(214,51,108,0.25) !important;
  --purple-glow-sm:       rgba(214,51,108,0.12) !important;
  --body-bg:              var(--pf-body-bg) !important;
  --card-bg:              var(--pf-card-bg) !important;
  --text-primary:         var(--pf-text) !important;
  --text-muted:           var(--pf-text-muted) !important;
  --text-price:           var(--pf-price) !important;
  --border-light:         var(--pf-border) !important;
  --dark-footer:          #1A0611 !important;
  --nav-bg:               #6B0F2C !important;
}

/* Section backgrounds (global) */
body, #content { background: var(--pf-body-bg) !important; }
section { background: transparent !important; }

/* Force all "blue" gradients in main.css button animations to use rose */
/* These are the animated product card buttons */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(135deg, #A61E4D 0%, #D6336C 50%, #E8668E 100%) !important;
  background-size: 200% 200% !important;
  animation: roseGradShift 4s ease infinite !important;
}
.go_cart {
  background: linear-gradient(135deg, #A61E4D, #D6336C) !important;
  animation: roseGlow 2.8s ease-in-out infinite !important;
}

/* Force nav area rose */
.menu-area {
  background: linear-gradient(135deg, #6B0F2C 0%, #8B1A4A 50%, #6B0F2C 100%) !important;
}

/* Force all admin-var buttons (--primary-color) to use rose */
/* The inline <style> in master.blade.php uses var(--primary-color) */
/* We update the CSS variable itself at :root level above — but also
   explicitly target the selectors that main.css uses with !important */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton,
.submit-btn,
.order_now_btn,
.add_cart_btn,
.footer_nav .mobilecart-qty,
.btn-primary,
.btn-success,
.go_cart,
.cart_store,
.checkout-btn {
  /* override the blue "0 4px 12px rgba(37,99,235...)" shadow from main.css */
  box-shadow: 0 4px 12px rgba(214,51,108,0.28) !important;
}

/* Override main.css blue header accent line */
.main-header::after, .logo-area::after {
  background: linear-gradient(90deg, transparent, var(--pf-primary), var(--pf-rose-dark), var(--pf-primary), transparent) !important;
  opacity: 0.6 !important;
}

/* Override main.css blue search border */
.main-search form, .mobile-search form {
  border-color: var(--pf-blush-mid) !important;
  box-shadow: 0 1px 4px rgba(214,51,108,0.08) !important;
}

.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(214,51,108,0.12), 0 4px 16px rgba(214,51,108,0.15) !important;
}

/* Override main.css section-title-name blue border */
.section-title-name {
  border-bottom-color: var(--pf-primary) !important;
  color: var(--pf-text) !important;
}

/* Override main.css blue pagination */
.pagination .page-item.active .page-link {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
}

.pagination .page-link { color: var(--pf-primary) !important; }
.pagination .page-link:hover { background: var(--pf-blush) !important; }

/* Override main.css blue scrollbar thumb */
::-webkit-scrollbar-thumb { background: rgba(214,51,108,0.3) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--pf-primary) !important; }

/* Override main.css loading spinner blue */
.custom-loader { --c: radial-gradient(farthest-side, var(--pf-primary) 92%, #0000) !important; }

/* Override blue modal close */
.close-modal { background: var(--pf-error) !important; }

/* Override main.css blue sidebar hover */
.sidebar-menu ul li:hover > a {
  background-color: var(--pf-blush-soft) !important;
  color: var(--pf-primary) !important;
}

/* Override main.css track btn blue */
.track_btn a {
  color: var(--pf-primary) !important;
  border-color: var(--pf-blush-mid) !important;
}

.track_btn a:hover {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

/* Override main.css blue filter_btn/close */
.filter_btn { background: var(--pf-primary) !important; color: #FFFFFF !important; }
.filter_close { background: var(--pf-primary) !important; color: #FFFFFF !important; }

/* Override blue add_cart_btn (non-detail-page, product listing pages) */
.add_cart_btn {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

.add_cart_btn:hover {
  background: var(--pf-primary-dark) !important;
  border-color: var(--pf-primary-dark) !important;
}

/* Override main.css blue mobile header border */
.mobile-header {
  border-bottom-color: var(--pf-blush-mid) !important;
  box-shadow: 0 2px 12px rgba(214,51,108,0.1) !important;
}

/* Override main.css blue cart summary */
.cshort-summary {
  border-color: var(--pf-border) !important;
  box-shadow: var(--pf-shadow-lg) !important;
}

/* Override main.css blue tracktable header */
.tracktable thead { background: var(--pf-primary) !important; }

/* Override main.css blue wcart-btn */
.wcart-btn, .wcart-btn:focus { background: var(--pf-primary) !important; }

/* Override main.css blue details-action-btn */
.details-action-box .section-head .action .details-action-btn {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
}

/* Override main.css blue invoice_btn */
.invoice_btn, .invoice_btn:focus {
  background: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

/* Override main.css blue coupon button */
.coupon-form form button { background: var(--pf-primary) !important; }

/* Override main.css blue confirm btn */
.confirm-btn { background: var(--pf-primary) !important; }
.confirm-btn:hover { background: var(--pf-primary-dark) !important; }
.continue-btn:hover { background: var(--pf-primary) !important; }

/* Override admin var(--primary-color) default #e30613 for badge in header */
.header-list-items ul li span {
  background: var(--pf-primary) !important;
  box-shadow: 0 2px 6px rgba(214,51,108,0.45) !important;
}

/* =====================================================
   PHASE 14b — CATEGORY DROPDOWN NUCLEAR FIXES
   (Preserving the protected All Categories structure)
   ===================================================== */

/* Force all dropdown text white against dark rose backgrounds */
.side__bar ul li a,
.side__bar ul li > a,
body .side__bar ul li a,
body .side__bar ul li a span,
body div.side__bar ul li a {
  color: #F0C0D0 !important;
}

body .side__bar,
body div.side__bar {
  background: #1A0611 !important;
  background-color: #1A0611 !important;
}

.side__bar ul li:hover > a,
body .side__bar ul li:hover > a {
  color: #FFFFFF !important;
}

/* Sub-menu */
body .side__barsub ul li a,
body .side__barsub ul li a span { color: #FFD6E7 !important; }
body .side__barsub ul li:hover > a { color: #FFFFFF !important; }

.side__barsub, .all__category__list .side__barsub,
body .side__barsub {
  background: #2D0B1A !important;
  background-color: #2D0B1A !important;
}

/* Child menu */
body .side__barchild ul li a,
body .side__barchild ul li a span { color: #FFE8F0 !important; }
body .side__barchild ul li:hover > a { color: #FFFFFF !important; }

.side__barchild, .all__category__list .side__barchild,
body .side__barchild {
  background: #3D0C22 !important;
  background-color: #3D0C22 !important;
}

/* Collapse empty panels */
.side__barsub:empty, .side__barchild:empty,
.side__barsub ul:empty, .side__barchild ul:empty {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border: none !important; box-shadow: none !important;
  background: transparent !important;
}

/* =====================================================
   PHASE 14c — FOOTER FINAL LOCK
   ===================================================== */
footer, .footer-top, .footer-bottom, .main-footer {
  background: #1A0611 !important;
  background-color: #1A0611 !important;
  background-image: linear-gradient(135deg, #1A0611 0%, #3D0C22 100%) !important;
}

.footer-bottom {
  background: #0E030A !important;
  background-color: #0E030A !important;
  background-image: none !important;
}

/* Override admin --footer-bg-color variable leak */
footer *, .footer-top *, .footer-bottom * {
  color: rgba(255,255,255,0.82) !important;
}

/* =====================================================
   PHASE 14d — BODY / SECTION BG FINAL LOCK
   ===================================================== */
body {
  background: var(--pf-body-bg) !important;
  background-color: var(--pf-body-bg) !important;
}

/* Override admin --body-bg-color that may inject purple */
body, #content { background: var(--pf-body-bg) !important; }

/* WhatsApp mobile hidden (bottom nav has it) */
@media (max-width: 767px) {
  .float { display: none !important; }
}

/* =====================================================
   PHASE 15 — SAFETY AUDIT PATCHES
   ===================================================== */

/* Ensure no horizontal overflow anywhere */
html, body { overflow-x: hidden !important; }

/* Ensure .row gutter doesn't cause overflow */
.row { margin-left: 0 !important; margin-right: 0 !important; }

/* Ensure images never overflow their containers */
img { max-width: 100%; }

/* Product card block layout — button sits naturally at bottom */
.product_item {
  display: block !important;
}

.product_item .pro_btn {
  margin-top: 8px !important;
}

/* Owl carousel nav arrows — rose themed */
.product-inner button.owl-prev i,
.related-product-section button.owl-prev i,
.product-inner button.owl-next i,
.related-product-section button.owl-next i {
  background-color: var(--pf-border) !important;
  color: var(--pf-text-mid) !important;
  border-radius: 50% !important;
}

.product-inner button.owl-prev:hover i,
.related-product-section button.owl-prev:hover i,
.product-inner button.owl-next:hover i,
.related-product-section button.owl-next:hover i {
  background-color: var(--pf-primary) !important;
  color: #FFFFFF !important;
}

/* owl nav brand/related-product arrows */
.brand-slider .owl-nav button:hover,
.main-slider .owl-nav button:hover { background: var(--pf-primary) !important; color: #FFFFFF !important; }

/* Sidebar product widget */
.feature-products p::after { background-color: var(--pf-border) !important; }

/* Order success */
.success-title h2 { color: var(--pf-text) !important; font-weight: 700 !important; }
.success-table { background: var(--pf-blush-soft) !important; border-radius: var(--pf-radius-md) !important; }

/* Order tracking */
.tracktable thead { background: var(--pf-primary) !important; }
.tfoot_bg { background: var(--pf-blush-soft) !important; }
.track_info ul li span { color: var(--pf-primary-dark) !important; }

/* Menu more link */
.menu-more, .menu-more i { color: var(--pf-primary) !important; }

/* All category front-view */
.front-view-item:hover .front-view-image a img { transform: translateY(-20px) !important; }
.front-view-title a { color: var(--pf-text) !important; font-weight: 600 !important; }

/* Category thumb (all-categories page) */
.category-thumb {
  background: var(--pf-blush-soft) !important;
  border-radius: var(--pf-radius-md) !important;
  transition: var(--pf-transition) !important;
}

.category-thumb:hover {
  background: var(--pf-blush) !important;
  transform: translateY(-3px) !important;
}

.cat_item:hover { border-color: var(--pf-primary-light) !important; }

/* category-img-banner hover */
.category-img-banner a img {
  transition: all 0.3s cubic-bezier(0.215,0.61,0.355,1) !important;
  border-radius: var(--pf-radius-md) !important;
}

.category-img-banner:hover a img { transform: scale(0.96) !important; }

/* Product detail features section */
.features { border-top-color: var(--pf-primary) !important; }

/* Section meta description box */
.section-meta-description {
  background: var(--pf-white) !important;
  box-shadow: var(--pf-shadow-sm) !important;
  border-radius: var(--pf-radius-lg) !important;
  border: 1px solid var(--pf-border) !important;
}

/* Custom buttons with class custom-button */
a.custom-button {
  color: var(--pf-text) !important;
  border-color: var(--pf-border) !important;
  transition: var(--pf-transition) !important;
}

a.custom-button:hover {
  background: var(--pf-blush-soft) !important;
  border-color: var(--pf-primary-light) !important;
  color: var(--pf-primary) !important;
}

/* =====================================================
   END OF UNDERGROUND PREMIUM FASHION THEME
   underground-premium-fashion-theme.css v1.0.0
   © 2026 — Frontend Visual Redesign Only
   Backend / Admin / Logic Untouched
   ===================================================== */

/* =====================================================
   STAR RATING — FINAL CORRECT FIX
   
   Root cause: card has display:flex + flex-direction:column
   which makes each <i> a separate full-width row.
   float:left does NOT work inside a flex container.
   
   Solution:
   1. Remove flex from the card — use display:block instead
   2. Stars are inline-block → naturally sit side by side
   3. pro_price gets display:block + clear:both to sit below
   4. pro_btn stays at the bottom with display:block
   
   Order: image+name → stars (inline row) → price → button
   ===================================================== */

/* Step 1: card back to block layout — NOT flex */
.product_item,
.product-item,
.wist_item {
  display: block !important;
  flex-direction: unset !important;
}

/* Step 2: stars sit inline-block → horizontal row naturally */
.product_item > i.fas.fa-star,
.product_item > i.fas.fa-star-half-alt,
.product_item > i.far.fa-star,
.wist_item > i.fas.fa-star,
.wist_item > i.fas.fa-star-half-alt,
.wist_item > i.far.fa-star {
  display: inline-block !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin-right: 2px !important;
  vertical-align: middle !important;
  float: none !important;
  order: unset !important;
}

/* Add top spacing before the first star using
   product_item_inner bottom margin */
.product_item > .product_item_inner,
.wist_item > .product_item_inner {
  margin-bottom: 6px !important;
  display: block !important;
}

/* Step 3: price on its own line below stars */
.product_item > .pro_price,
.wist_item > .pro_price {
  display: block !important;
  margin-top: 5px !important;
  order: unset !important;
  clear: none !important;
}

/* Step 4: button on its own line at bottom */
.product_item > .pro_btn,
.wist_item > .pro_btn {
  display: block !important;
  margin-top: 8px !important;
  order: unset !important;
  clear: none !important;
}

/* Star colors */
.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: #F0A500 !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  font-weight: 900 !important;
}

.product_item > i.far.fa-star,
.wist_item > i.far.fa-star {
  color: #D4B8C0 !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  font-weight: 400 !important;
}

/* =====================================================
   PREMIUM 3D LUXURY NAV BUTTONS
   Target: Home · Hotdeals · Contact · Login/Sign Up
   Style: 3D glass-morphic rose, depth shadow, shine
   ===================================================== */

/* ── Keyframes ── */
@keyframes navShineSwipe {
  0%   { left: -120%; }
  100% { left: 160%; }
}

@keyframes navGlowPulse {
  0%,100% { box-shadow: 0 4px 15px rgba(214,51,108,0.0), 0 2px 6px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 6px 22px rgba(214,51,108,0.5), 0 2px 8px rgba(0,0,0,0.3); }
}

@keyframes navFloatUp {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-2px); }
}

/* ── Base reset for all nav links (keep existing colors) ── */
.heder__category > li:not(.all__category__list) a,
.right__menu__top li a,
.right__menu__top li p a {
  position: relative !important;
  overflow: hidden !important;

  /* 3D base: layered gradient background */
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(0,0,0,0.12) 100%
  ) !important;

  /* Glass border */
  border: 1px solid rgba(255,200,220,0.22) !important;
  border-top-color: rgba(255,255,255,0.30) !important;
  border-bottom-color: rgba(0,0,0,0.20) !important;

  /* 3D depth shadow */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,     /* top highlight */
    0 -1px 0 rgba(0,0,0,0.20) inset,           /* bottom depth */
    0 4px 12px rgba(0,0,0,0.25),               /* drop shadow */
    0 1px 3px rgba(214,51,108,0.15) !important;

  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  color: rgba(255,240,245,0.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
  transition:
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Shine sweep pseudo-element ── */
.heder__category > li:not(.all__category__list) a::before,
.right__menu__top li a::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -120% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.28) 50%,
    transparent 80%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: none !important;
}

/* Top gloss line */
.heder__category > li:not(.all__category__list) a::after,
.right__menu__top li a::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transition: none !important;
}

/* ── Hover state — 3D lift + rose glow + shine ── */
.heder__category > li:not(.all__category__list) a:hover,
.right__menu__top li a:hover {
  background: linear-gradient(
    160deg,
    rgba(214,51,108,0.55) 0%,
    rgba(166,30,77,0.65) 50%,
    rgba(139,26,74,0.70) 100%
  ) !important;

  border-color: rgba(255,160,200,0.45) !important;
  border-top-color: rgba(255,200,230,0.55) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -2px 0 rgba(0,0,0,0.30) inset,
    0 8px 24px rgba(214,51,108,0.55),
    0 3px 8px rgba(0,0,0,0.30),
    0 0 0 1px rgba(214,51,108,0.30) !important;

  transform: translateY(-3px) scale(1.04) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 6px rgba(166,30,77,0.5) !important;
  backdrop-filter: blur(12px) !important;
}

/* Trigger shine on hover */
.heder__category > li:not(.all__category__list) a:hover::before,
.right__menu__top li a:hover::before {
  left: 160% !important;
  transition: left 0.65s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Active / pressed state ── */
.heder__category > li:not(.all__category__list) a:active,
.right__menu__top li a:active {
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 3px 8px rgba(214,51,108,0.35) !important;
}

/* ── SPECIAL: Hotdeals — animated rose glow to draw attention ── */
.heder__category > li:not(.all__category__list) a[href*="hot"],
.heder__category > li:not(.all__category__list) a[href*="deal"],
.heder__category > li:not(.all__category__list) a[href*="hotdeals"] {
  background: linear-gradient(
    160deg,
    rgba(214,51,108,0.30) 0%,
    rgba(166,30,77,0.22) 50%,
    rgba(0,0,0,0.15) 100%
  ) !important;
  border-color: rgba(214,51,108,0.40) !important;
  animation: navGlowPulse 2.8s ease-in-out infinite !important;
}

.heder__category > li:not(.all__category__list) a[href*="hot"]:hover,
.heder__category > li:not(.all__category__list) a[href*="hotdeals"]:hover {
  animation: none !important;
}

/* ── SPECIAL: Login/Sign Up — premium rose pill ── */
.right__menu__top li a {
  background: linear-gradient(
    135deg,
    rgba(214,51,108,0.45) 0%,
    rgba(166,30,77,0.55) 100%
  ) !important;
  border: 1.5px solid rgba(255,160,200,0.35) !important;
  border-top-color: rgba(255,200,230,0.50) !important;
  border-radius: 20px !important;
  padding: 7px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 -2px 0 rgba(0,0,0,0.25) inset,
    0 5px 18px rgba(214,51,108,0.40),
    0 2px 6px rgba(0,0,0,0.25) !important;
  animation: navGlowPulse 3s ease-in-out infinite !important;
}

.right__menu__top li a:hover {
  border-radius: 20px !important;
  background: linear-gradient(
    135deg,
    rgba(214,51,108,0.75) 0%,
    rgba(166,30,77,0.85) 100%
  ) !important;
  animation: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 -2px 0 rgba(0,0,0,0.30) inset,
    0 10px 28px rgba(214,51,108,0.65),
    0 3px 10px rgba(0,0,0,0.30) !important;
}

/* Icon inside login link */
.right__menu__top li a i,
.right__menu__top li p a i {
  font-size: 13px !important;
  color: rgba(255,220,235,0.95) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.right__menu__top li a:hover i {
  transform: scale(1.2) !important;
  color: #FFFFFF !important;
}

/* =====================================================
   CHILD CATEGORY (Level 3) COLOR FIX
   Overrides main.css green (#1a3d2b) with same dark
   rose as level 2 (#2D0B1A) — color only, nothing else
   ===================================================== */
.side__barchild,
.side__barchild *,
.all__category__list .side__barchild,
.sidebar-menu .side__barchild,
li.all__category__list .side__barchild,
body .side__barchild,
body div .side__barchild,
html body .side__barchild {
  background: #2D0B1A !important;
  background-color: #2D0B1A !important;
  background-image: none !important;
  border-left-color: var(--pf-primary-light) !important;
  border-top-color: var(--pf-primary-light) !important;
}

/* Text stays white/light */
.side__barchild ul li a,
.side__barchild li a,
.all__category__list .side__barchild ul li a,
body .side__barchild ul li a,
body .side__barchild li a,
body div .side__barchild ul li a {
  color: #FFD6E7 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Hover row */
.side__barchild ul li:hover {
  background: rgba(214,51,108,0.14) !important;
}

.side__barchild ul li:hover > a,
body .side__barchild ul li:hover > a {
  color: #FFFFFF !important;
  border-left-color: var(--pf-primary-light) !important;
}

/* =====================================================
   SUBCATEGORY (Level 2) COLOR FIX
   Overrides main.css blue (#1e3a5f) with same dark
   rose as level 1 (#2D0B1A) — color only, nothing else
   ===================================================== */
.side__barsub,
.all__category__list .side__barsub,
.sidebar-menu .side__barsub,
li.all__category__list .side__barsub,
body .side__barsub,
body div .side__barsub,
html body .side__barsub {
  background: #2D0B1A !important;
  background-color: #2D0B1A !important;
  background-image: none !important;
  border-left-color: var(--pf-primary-light) !important;
  border-top-color: var(--pf-primary-light) !important;
}

/* Text stays light rose */
.side__barsub ul li a,
.side__barsub li a,
.all__category__list .side__barsub ul li a,
body .side__barsub ul li a,
body .side__barsub li a,
body div .side__barsub ul li a {
  color: #FFD6E7 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: rgba(214,51,108,0.12) !important;
}

/* Hover row */
.side__barsub ul li:hover {
  background: rgba(214,51,108,0.14) !important;
}

.side__barsub ul li:hover > a,
body .side__barsub ul li:hover > a {
  color: #FFFFFF !important;
  border-left-color: var(--pf-primary-light) !important;
}

/* =====================================================
   SCROLL-TO-TOP BUTTON — FINAL OVERRIDE
   Overrides premium.css #e30613 and main.css --g-primary
   Must be last in file to win the cascade
   ===================================================== */
html body .scrolltop,
html body div.scrolltop,
body .scrolltop.gotop ~ .scrolltop,
.scrolltop {
  background: linear-gradient(
    135deg,
    #7F0929 0%, #A61E4D 25%, #D6336C 60%, #E8668E 100%
  ) !important;
  background-size: 250% 250% !important;
  background-color: #D6336C !important;
  box-shadow:
    0 1px 0 rgba(255,210,230,0.35) inset,
    0 -2px 0 rgba(80,0,20,0.40) inset,
    0 4px 14px rgba(214,51,108,0.40) !important;
  animation:
    scrollBtnAuroraShift 3s ease infinite,
    scrollBtnPulse 2.5s ease-in-out infinite !important;
  border-radius: 50% !important;
}

html body .scrolltop .scroll,
.scrolltop .scroll {
  background: transparent !important;
  background-color: transparent !important;
}

html body .scrolltop .scroll i,
.scrolltop .scroll i,
.scrolltop i {
  color: #FFFFFF !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  text-shadow: 0 1px 3px rgba(80,0,20,0.5) !important;
}

/* =====================================================
   SOCIAL ICON BOX SHAPE — FINAL OVERRIDE
   Overrides premium.css / main.css border-radius:50%
   Square rounded box (10px radius) — like reference image
   ===================================================== */
html body .social_link li a,
html body .social_link li a.mobile-social-link,
footer .social_link li a,
.footer-top .social_link li a {
  border-radius: 10px !important;   /* square box — NOT circle */
  width: 44px !important;
  height: 44px !important;
  background: #1E1E1E !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;
}

html body .social_link li a:hover,
html body .social_link li a.mobile-social-link:hover,
footer .social_link li a:hover,
.footer-top .social_link li a:hover {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #A61E4D, #D6336C) !important;
  border-color: rgba(214,51,108,0.50) !important;
}