/* =====================================================
   WOMEN'S FASHION & BEAUTY — Premium Redesign
   Deep Rose × Ruby Red × Blush Luxury Identity
   Version: 1.0 | Scope: Public Frontend Only
   PROTECTED: All Categories, Hero Banner, JS, Backend
   ===================================================== */

/* =========== GOOGLE FONTS IMPORT =========== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap");

/* =====================================================
   SECTION 1: DESIGN TOKENS — Rose × Ruby × Blush
   ===================================================== */
:root {
  /* Core Brand Colors */
  --wf-primary:         #9F1239;
  --wf-primary-dark:    #881337;
  --wf-primary-light:   #BE185D;
  --wf-ruby:            #C1123F;
  --wf-ruby-dark:       #9B0F32;
  --wf-burgundy:        #4C0519;
  --wf-burgundy-deep:   #2D0E1A;

  /* Surface Colors */
  --wf-blush:           #FFF1F2;
  --wf-blush-warm:      #FCE7F3;
  --wf-surface:         #FFF8FA;
  --wf-white:           #FFFFFF;

  /* Text Colors */
  --wf-text-dark:       #1A0A0F;
  --wf-text-primary:    #2D1520;
  --wf-text-muted:      #9C7C88;
  --wf-text-light:      #F5E6EA;

  /* Border Colors */
  --wf-border:          #F3D8E2;
  --wf-border-strong:   #E0B4C5;
  --wf-border-dark:     #C49AAD;

  /* Accent */
  --wf-gold:            #C9A84C;
  --wf-gold-light:      #E8C97A;

  /* RGB values for rgba() usage */
  --wf-primary-rgb:     159, 18, 57;
  --wf-ruby-rgb:        193, 18, 63;
  --wf-burgundy-rgb:    76, 5, 25;

  /* Shadows — rose-tinted luxury */
  --wf-shadow-sm:       0 1px 4px rgba(159,18,57,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --wf-shadow-md:       0 4px 16px rgba(159,18,57,0.11), 0 2px 8px rgba(0,0,0,0.06);
  --wf-shadow-lg:       0 8px 32px rgba(159,18,57,0.16), 0 4px 12px rgba(0,0,0,0.08);
  --wf-shadow-hover:    0 14px 44px rgba(159,18,57,0.22), 0 6px 18px rgba(0,0,0,0.10);

  /* Border Radius */
  --wf-radius-sm:   6px;
  --wf-radius-md:   10px;
  --wf-radius-lg:   16px;
  --wf-radius-xl:   24px;
  --wf-radius-pill: 50px;

  /* Typography */
  --wf-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --wf-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --wf-transition:      all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --wf-transition-slow: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --wf-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =====================================================
   SECTION 2: ICON FONT PROTECTION
   Must come before any font-family overrides
   ===================================================== */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",
               "FontAwesome","Font Awesome 4" !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

svg { font-family: inherit !important; }
svg[data-feather] { fill: none !important; stroke: currentColor !important; }

/* =====================================================
   SECTION 3: GLOBAL BODY & TYPOGRAPHY
   ===================================================== */
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: var(--wf-font-body) !important;
  box-sizing: border-box;
}

body {
  background: var(--wf-surface) !important;
  color: var(--wf-text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

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(--wf-text-primary) !important;
}

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

/* =====================================================
   SECTION 4: ANNOUNCEMENT BAR (top_header)
   Deep rose gradient — feminine, premium
   ===================================================== */
.top_header {
  background: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary) 60%, var(--wf-primary-light) 100%) !important;
  background-image: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary) 60%, var(--wf-primary-light) 100%) !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 2px 8px rgba(159,18,57,0.25) !important;
  animation: none !important;
}

.top_header, .top_header p, .top_header span,
.top_header a, .top_header div, .top_header marquee {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.top_header a[href^="tel"] {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: var(--wf-radius-pill) !important;
  padding: 3px 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  transition: var(--wf-transition) !important;
}

.top_header a[href^="tel"]:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* Mobile hotline bar */
.d-flex.d-sm-none {
  background: linear-gradient(90deg, var(--wf-primary-dark), var(--wf-primary)) !important;
}

/* =====================================================
   SECTION 5: DESKTOP HEADER (logo-area / main-header)
   White surface with elegant rose accent line
   ===================================================== */
.main-header, .logo-area {
  background: var(--wf-white) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 16px rgba(159,18,57,0.08), 0 1px 4px rgba(0,0,0,0.06) !important;
  position: relative !important;
}

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

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

/* =====================================================
   SECTION 6: MOBILE HEADER
   Clean white with rose brand accent
   ===================================================== */
.mobile-header {
  background: var(--wf-white) !important;
  border-bottom: 2px solid var(--wf-primary) !important;
  box-shadow: 0 2px 12px rgba(159,18,57,0.12) !important;
}

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

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

/* Cart icon in mobile header */
.menu-bag i, .cart-dialog i, #cart-qty i {
  color: var(--wf-primary) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
}

/* Cart count badge */
.menu-bag .margin-shopping span,
.mobilecart-qty {
  background: var(--wf-ruby) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(193,18,63,0.45) !important;
}

/* =====================================================
   SECTION 7: SEARCH BAR
   Rose-bordered elegant input with soft focus glow
   ===================================================== */
.main-search form, .mobile-search form {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-md) !important;
  overflow: hidden !important;
  background: var(--wf-white) !important;
  box-shadow: 0 2px 8px rgba(159,18,57,0.07) !important;
  transition: var(--wf-transition) !important;
  display: flex !important;
  align-items: stretch !important;
}

.main-search form:focus-within, .mobile-search form:focus-within {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 4px 18px rgba(159,18,57,0.18), 0 0 0 3px rgba(159,18,57,0.08) !important;
}

.search_keyword, .msearch_keyword {
  background: var(--wf-blush) !important;
  border: none !important;
  color: var(--wf-text-primary) !important;
  font-weight: 400 !important;
  padding-left: 16px !important;
  flex: 1 !important;
  font-family: var(--wf-font-body) !important;
}

.search_keyword::placeholder, .msearch_keyword::placeholder {
  color: var(--wf-text-muted) !important;
  font-style: italic !important;
}

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

.main-search form button:hover, .mobile-search form button:hover {
  background: var(--wf-primary-dark) !important;
}

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

/* =====================================================
   SECTION 8: HEADER ACTION ITEMS (Track Order / Cart)
   ===================================================== */
.header-list-items ul li span {
  background: var(--wf-ruby) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(193,18,63,0.4) !important;
}

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

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

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

/* Track Order link */
.track_btn a {
  color: var(--wf-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
}

.track_btn a i { color: var(--wf-primary) !important; }

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

.go_cart, .go_cart:hover {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  transition: var(--wf-transition) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.3) !important;
}

.go_cart:hover {
  background: var(--wf-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(159,18,57,0.45) !important;
}

/* Login/User link */
.for_order a { color: var(--wf-text-primary) !important; }
.for_order a i { color: var(--wf-primary) !important; }

/* =====================================================
   SECTION 9: NAVIGATION MENU BAR
   Deep burgundy × rose — premium women's fashion feel
   ===================================================== */
.menu-area {
  background: var(--wf-text-primary) !important;
  box-shadow: 0 3px 14px rgba(45,21,32,0.35) !important;
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

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

/* Rose underline hover on nav links */
.heder__category > li:not(.all__category__list) a::after {
  display: none !important;
}

.heder__category > li:not(.all__category__list) a:hover,
.right__menu__top li a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* =====================================================
   SECTION 10: ALL CATEGORIES BUTTON + DROPDOWN
   PROTECTED: Structure/behavior unchanged
   Only color scheme adapted to rose family
   ===================================================== */

/* ALL CATEGORIES button — rose gradient */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i {
  background: linear-gradient(135deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-ruby) 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 10px rgba(159,18,57,0.40) !important;
  animation: wfCatBtnShimmer 4s ease infinite !important;
  letter-spacing: 0.4px !important;
}

.all__category__list > a:hover,
.all__category__list > a:hover * {
  background: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary-dark) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(159,18,57,0.55) !important;
  animation: none !important;
}

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

/* Category dropdown — dark rose panel (PROTECTED: structure kept) */
.side__bar {
  background: #1a0a12 !important;
  border-radius: 0 0 var(--wf-radius-md) var(--wf-radius-md) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.60),
              0 4px 16px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: 2px solid var(--wf-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 i {
  color: #f5e6ea !important;
  background-color: transparent !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: #f0d8df !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !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: 4px !important;
  flex-shrink: 0 !important;
}

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

.side__bar ul li:hover { background: rgba(159,18,57,0.16) !important; }

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

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

/* Sub-menus (level 2 & 3) — muted rose panels */
.side__barsub {
  background: #2a1020 !important;
  border-left: 2px solid var(--wf-primary) !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.50) !important;
  min-width: 230px !important;
  border-top: 2px solid var(--wf-primary) !important;
}

.side__barsub, .side__barsub * { color: #f8dce6 !important; background-color: transparent !important; }

.side__barsub ul li a {
  padding: 10px 16px !important; font-size: 13px !important; font-weight: 500 !important;
  color: #f8dce6 !important; border-bottom: 1px solid rgba(159,18,57,0.14) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  transition: all 0.18s ease !important;
}

.side__barsub ul li:hover { background: rgba(159,18,57,0.18) !important; }
.side__barsub ul li:hover > a { color: #ffffff !important; padding-left: 20px !important; border-left: 2px solid var(--wf-primary-light) !important; }

.side__barchild {
  background: #3a1428 !important;
  border-left: 2px solid var(--wf-primary-light) !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.50) !important;
  min-width: 220px !important; border-top: 2px solid var(--wf-primary-light) !important;
}

.side__barchild, .side__barchild * { color: #fce7f3 !important; background-color: transparent !important; }

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

.side__barchild ul li:hover { background: rgba(190,24,93,0.16) !important; }
.side__barchild ul li:hover > a { color: #ffffff !important; padding-left: 20px !important; border-left: 2px solid var(--wf-primary-light) !important; }

/* =====================================================
   SECTION 11: HERO SLIDER COMPATIBILITY
   PROTECTED: Structure and behavior unchanged
   Only navigation button visual update
   ===================================================== */
.slider-section { margin-bottom: 16px !important; margin-top: 10px !important; }

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

.slider-item img { width: 100% !important; display: block !important; }

/* Owl nav buttons — frosted glass with rose tint */
.main_slider .owl-prev,
.main_slider .owl-next {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.3),
              0 0 12px rgba(159,18,57,0.15) !important;
  transition: var(--wf-transition) !important;
  width: 44px !important; height: 44px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
}

.main_slider .owl-prev:hover, .main_slider .owl-next:hover {
  background: rgba(159,18,57,0.30) !important;
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 6px 28px rgba(159,18,57,0.35),
              inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transform: scale(1.08) !important;
}

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

/* Ad banner sections */
.bottoads_area {
  padding: 16px 0 !important;
  background: var(--wf-surface) !important;
  margin-bottom: 8px !important;
}

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

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

/* =====================================================
   SECTION 12: SECTION TITLES — Editorial Fashion Style
   Serif heading + rose accent underline
   ===================================================== */
.homeproduct {
  background: transparent !important;
  margin-bottom: 8px !important;
  padding: 12px 0 !important;
}

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

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

.section-title-name {
  font-family: var(--wf-font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--wf-primary) !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -2px !important;
}

/* "View More" button next to section title */
.view_more_btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--wf-primary) !important;
  border: 1.5px solid var(--wf-primary) !important;
  border-radius: var(--wf-radius-pill) !important;
  padding: 4px 14px !important;
  letter-spacing: 0.5px !important;
  transition: var(--wf-transition) !important;
  text-transform: uppercase !important;
}

.view_more_btn:hover {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
}

/* =====================================================
   SECTION 13: CATEGORY CARDS
   Elegant fashion circles with rose hover
   ===================================================== */
.cat_item {
  background: var(--wf-white) !important;
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-md) !important;
  padding: 14px 6px !important;
  text-align: center !important;
  transition: var(--wf-transition) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.cat_item::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--wf-primary), var(--wf-ruby)) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.35s ease !important;
}

.cat_item:hover::before { transform: scaleX(1) !important; }

.cat_item:hover {
  border-color: var(--wf-border-strong) !important;
  box-shadow: var(--wf-shadow-md) !important;
  transform: translateY(-4px) !important;
}

.cat_img {
  width: 100% !important; height: 75px !important;
  overflow: hidden !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--wf-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;
  transition: var(--wf-transition) !important;
}

.cat_name a {
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--wf-text-primary) !important;
  display: block !important; line-height: 1.3 !important;
  transition: var(--wf-transition) !important;
  letter-spacing: 0.2px !important;
}

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

/* =====================================================
   SECTION 14: PRODUCT CARDS — Fashion Editorial Style
   White cards with rose accents, elegant hover
   ===================================================== */
.product_item, .product-item, .wist_item {
  background: var(--wf-white) !important;
  border: 1px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  transition: var(--wf-transition) !important;
  overflow: hidden !important;
  padding: 10px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
  position: relative !important;
}

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

/* Product image container — PRESERVED 190px height */
.pro_img {
  height: 190px !important;
  border-radius: var(--wf-radius-sm) !important;
  overflow: hidden !important;
  background: var(--wf-blush) !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: cover !important;
  transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

.product_item:hover .pro_img img,
.wist_item:hover .pro_img img { transform: scale(1.06) !important; }

/* Product name */
.pro_name { height: 48px !important; margin-top: 8px !important; }

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

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

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

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

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

/* Star ratings — gold */
.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: var(--wf-gold) !important; font-size: 11px !important;
}

.product_item i.far.fa-star, .wist_item i.far.fa-star {
  color: var(--wf-border-dark) !important; font-size: 11px !important;
}

/* =====================================================
   SECTION 15: SALE BADGES — Ruby Red
   ===================================================== */
.sale-badge-box {
  background: linear-gradient(135deg, var(--wf-ruby-dark), var(--wf-ruby)) !important;
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  flex-direction: column !important;
  box-shadow: 0 3px 12px rgba(193,18,63,0.45) !important;
  animation: wfBadgePulse 2.5s ease-in-out infinite !important;
}

.sale-badge-text, .sale-badge-text p {
  color: #ffffff !important;
  font-size: 10px !important; font-weight: 700 !important;
  margin: 0 !important; line-height: 1.1 !important;
}

@keyframes wfBadgePulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(193,18,63,0.45); }
  50%       { box-shadow: 0 4px 18px rgba(193,18,63,0.65); }
}

/* =====================================================
   SECTION 16: PRODUCT BUTTONS — Rose Gradient System
   Dimensions preserved: 38px card buttons, 45px detail page
   ===================================================== */

/* Product card buttons (Order Now / Add to Cart) */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  background: linear-gradient(135deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-primary-light) 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.7px !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 14px rgba(159,18,57,0.30),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: background-position 0.5s ease,
              transform 0.25s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.25s ease !important;
  animation: wfBtnShift 5s ease infinite !important;
}

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

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

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

.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  background-position: right center !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(159,18,57,0.50),
              0 0 0 2px rgba(159,18,57,0.20) !important;
  animation: none !important;
}

.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #ffffff !important; background: transparent !important;
  position: relative !important; z-index: 2 !important;
}

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

/* ─────────────────────────────────────────────────
   Product Detail Page Buttons (preserved 45px height)
   ───────────────────────────────────────────────── */
.add_cart_btn {
  background: linear-gradient(135deg, var(--wf-primary-dark), var(--wf-primary)) !important;
  color: #ffffff !important;
  border: none !important;
  height: 45px !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 16px rgba(159,18,57,0.30) !important;
  transition: var(--wf-transition) !important;
}

.add_cart_btn:hover, .add_cart_btn:active {
  background: linear-gradient(135deg, var(--wf-burgundy), var(--wf-primary-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(159,18,57,0.48) !important;
  transform: translateY(-2px) !important;
}

.add_cart_btn:hover *, .add_cart_btn:active * { color: #ffffff !important; }

/* Green Order Now button on detail page — PRESERVED as-is (existing code keeps it) */
.single_product.d-flex .order_now_btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
  color: #ffffff !important; border: none !important;
  box-shadow: 0 4px 18px rgba(56,239,125,0.4) !important;
  height: 45px !important; border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important; font-size: 14px !important;
}

.single_product.d-flex .order_now_btn:hover {
  background: linear-gradient(135deg, #12a89c 0%, #46f087 100%) !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 24px rgba(56,239,125,0.55) !important;
}

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

/* =====================================================
   SECTION 17: CALL NOW / WHATSAPP BUTTONS (Detail Page)
   ===================================================== */
.call_now_btn {
  height: 45px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 600 !important;
  border-radius: var(--wf-radius-sm) !important;
  transition: var(--wf-transition) !important;
}

/* =====================================================
   SECTION 18: PRODUCT DETAIL PAGE
   Refined gallery, typography, size & color selectors
   ===================================================== */
.product-section {
  padding: 30px 0 !important;
  background: var(--wf-white) !important;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border-radius: var(--wf-radius-md) !important;
}

/* Product name on detail page */
.product-cart .name {
  font-family: var(--wf-font-heading) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Price on detail page */
.details-price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--wf-primary) !important;
  margin: 12px 0 !important;
}

.details-price del {
  color: var(--wf-text-muted) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-right: 8px !important;
}

/* Product code badge */
.product-code p {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-right-color: var(--wf-white) !important;
  font-size: 12px !important;
}

/* Breadcrumb */
.breadcrumb ul li a { color: var(--wf-primary) !important; }
.breadcrumb ul li span { color: var(--wf-text-muted) !important; }

/* Detail page rating stars */
.details-ratting-wrapper i.fas.fa-star,
.details-ratting-wrapper i.fas.fa-star-half-alt {
  color: var(--wf-gold) !important;
}

.details-ratting-wrapper i.far.fa-star { color: var(--wf-border-dark) !important; }

/* "See Reviews" link */
.all-reviews-button {
  color: var(--wf-primary) !important;
  border: 1px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-pill) !important;
  padding: 2px 12px !important;
  font-size: 12px !important;
  margin-left: 8px !important;
  transition: var(--wf-transition) !important;
}

.all-reviews-button:hover {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-color: var(--wf-primary) !important;
}

/* =====================================================
   SECTION 19: SIZE SELECTION — Elegant pill buttons
   ===================================================== */
.pro-size, .pro-color { margin: 10px 0 !important; }

.pro-size p, .pro-color p, .size_inner p, .color_inner p {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wf-text-primary) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.3px !important;
}

.selector { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

/* Size selector labels — NO background here, handled per-type below */
.selector-item_label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wf-text-primary) !important;
  /* !! CRITICAL: background intentionally removed here.
     Color swatches use inline style="background-color:#xxx"
     from the admin panel. Setting background:white !important
     here overrides that inline style and breaks color display.
     Size labels get their white background via .pro-size below. */
  cursor: pointer !important;
  transition: var(--wf-transition) !important;
  letter-spacing: 0.3px !important;
  user-select: none !important;
}

.selector-item_label:hover {
  border-color: var(--wf-primary) !important;
  /* background intentionally NOT set here — color swatches need inline style to show */
  color: var(--wf-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(159,18,57,0.18) !important;
}

/* Size labels specifically get white background */
.pro-size .selector-item_label {
  background: var(--wf-white) !important;
}

.pro-size .selector-item_label:hover {
  background: var(--wf-blush) !important;
}

/* Selected state — SIZE labels only */
.pro-size .selector-item_radio:checked + .selector-item_label {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.35) !important;
}

/* Selected state — COLOR swatches: NO background override, just ring */
.pro-color .selector-item_radio:checked + .selector-item_label {
  border-color: var(--wf-primary) !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 2px rgba(159,18,57,0.25), 0 3px 10px rgba(159,18,57,0.30) !important;
  transform: scale(1.12) !important;
  /* background-color: NOT set — inline style from admin panel shows actual color */
}

.selector-item_radio { display: none !important; }

/* Color swatches — circular */
.pro-color .selector-item_label {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid var(--wf-border) !important;
  position: relative !important;
  overflow: visible !important;
}

.pro-color .selector-item_label span {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 100% !important;
}

.pro-color .selector-item_label span img {
  width: 14px !important; height: 14px !important; opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.pro-color .selector-item_radio:checked + .selector-item_label {
  border-color: var(--wf-primary) !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 2px rgba(159,18,57,0.25), 0 3px 10px rgba(159,18,57,0.30) !important;
  transform: scale(1.12) !important;
  /* CRITICAL: NO background-color here at all.
     inherit overrides inline style and makes it white.
     The inline style="background-color:#xxx" must win. */
}

.pro-color .selector-item_radio:checked + .selector-item_label span img { opacity: 1 !important; }

/* =====================================================
   SECTION 20: QUANTITY SELECTOR (Detail Page)
   Preserved 40px height, rose accent
   ===================================================== */
.qty-cart .quantity {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  height: 40px !important;
  width: 130px !important;
  overflow: hidden !important;
}

.quantity .minus, .quantity .plus {
  color: var(--wf-primary) !important;
  border-color: var(--wf-border-strong) !important;
  transition: var(--wf-transition) !important;
  cursor: pointer !important;
}

.quantity .minus:hover, .quantity .plus:hover {
  background: var(--wf-blush) !important;
}

/* =====================================================
   SECTION 21: FILTER SIDEBAR — Rose accordion headers
   Existing logic UNCHANGED, only visual
   ===================================================== */
.sidebar_item h2.accordion-header button.accordion-button {
  background-color: var(--wf-primary) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

.sidebar_item h2.accordion-header button.accordion-button::after {
  content: '\f078' !important;
  font-family: 'FontAwesome' !important;
  background: none !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.8) !important;
}

.cust_according_body ul li a {
  color: var(--wf-text-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  display: block !important;
  transition: var(--wf-transition) !important;
  border-radius: 4px !important;
}

.cust_according_body ul li:hover a {
  background: var(--wf-blush) !important;
  color: var(--wf-primary) !important;
  padding-left: 20px !important;
}

/* Price filter inputs */
.filter-price-inputs { display: flex !important; gap: 10px !important; }
.filter-price-inputs p { color: var(--wf-text-primary) !important; font-size: 13px !important; }
.filter-price-inputs input {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 2px 8px !important;
  width: 60px !important;
  color: var(--wf-primary) !important;
  font-weight: 600 !important;
}

/* jQuery UI slider rose theme override */
.ui-slider .ui-slider-handle {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
}

.ui-slider .ui-slider-range {
  background: var(--wf-primary) !important;
}

/* Filter checkboxes */
.form-checkbox:checked {
  accent-color: var(--wf-primary) !important;
}

.subcategory-filter-label {
  cursor: pointer !important;
  transition: var(--wf-transition) !important;
  color: var(--wf-text-primary) !important;
}

.subcategory-filter-label:hover { color: var(--wf-primary) !important; }

/* Filter button on mobile */
.filter_btn {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  border: none !important;
  font-weight: 600 !important;
}

.filter_close {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
}

/* Sort form select */
.sort-form select {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  color: var(--wf-text-primary) !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
}

/* Breadcrumb */
.category-breadcrumb a { color: var(--wf-primary) !important; }
.category-breadcrumb span { color: var(--wf-text-muted) !important; }
.category-breadcrumb strong { color: var(--wf-text-dark) !important; }

/* Pagination */
.pagination .page-link {
  color: var(--wf-primary) !important;
  border-color: var(--wf-border) !important;
  transition: var(--wf-transition) !important;
}

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

.pagination .page-item.active .page-link {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #ffffff !important;
}

/* =====================================================
   SECTION 22: DESCRIPTION / REVIEWS (Detail Page)
   ===================================================== */
.description-nav-wrapper {
  background: var(--wf-white) !important;
  border-bottom: 1px solid var(--wf-border) !important;
  margin-bottom: 10px !important;
}

.desc-nav-ul { display: flex !important; gap: 0 !important; padding: 0 !important; }

.desc-nav-ul li {
  display: inline-block !important;
  border-bottom: none !important;
}

.desc-nav-ul li a {
  display: block !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wf-text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--wf-transition) !important;
  letter-spacing: 0.3px !important;
}

.desc-nav-ul li a:hover {
  color: var(--wf-primary) !important;
  border-bottom-color: var(--wf-primary) !important;
}

.tab-content {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
}

.section-head h2 { color: var(--wf-text-dark) !important; }

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

.review_star i { color: var(--wf-gold) !important; }
.reviewer_name { color: var(--wf-primary) !important; font-weight: 600 !important; }
.review_data { color: var(--wf-text-muted) !important; font-size: 12px !important; }

/* "Write a Review" button */
.details-action-btn.question-btn {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  transition: var(--wf-transition) !important;
}

.details-action-btn.question-btn:hover {
  background: var(--wf-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.35) !important;
}

/* Review submission form */
.details-review-button {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  transition: var(--wf-transition) !important;
}

.details-review-button:hover {
  background: var(--wf-primary-dark) !important;
}

/* Rating stars */
.rating > label { color: var(--wf-primary) !important; }
.rating > label.active:before, .rating > label:hover:before {
  color: var(--wf-ruby) !important;
}

/* Empty review state */
.details-action-box .empty-content i {
  background: rgba(159,18,57,0.10) !important;
  color: var(--wf-primary) !important;
}

/* Customer login redirect */
.customer-login-redirect {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  transition: var(--wf-transition) !important;
}

.customer-login-redirect:hover {
  background: var(--wf-primary-dark) !important;
  color: #ffffff !important;
}

/* =====================================================
   SECTION 23: CART PAGE
   ===================================================== */
.cart_details { border-radius: var(--wf-radius-md) !important; }

.checkout-btn, .submit-btn {
  background: linear-gradient(135deg, var(--wf-primary-dark), var(--wf-primary)) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.28) !important;
  transition: var(--wf-transition) !important;
  border: none !important;
}

.checkout-btn:hover, .submit-btn:hover {
  background: linear-gradient(135deg, var(--wf-burgundy), var(--wf-primary-dark)) !important;
  box-shadow: 0 8px 22px rgba(159,18,57,0.45) !important;
  transform: translateY(-2px) !important;
}

.checkout-btn *, .submit-btn * { color: #ffffff !important; }

/* =====================================================
   SECTION 24: FOOTER — Deep Burgundy Luxury
   ===================================================== */
.footer-top, .footer-bottom, footer, .main-footer {
  background: var(--wf-burgundy-deep) !important;
}

.footer-top *, .footer-bottom *, footer *, .main-footer * {
  color: var(--wf-text-light) !important;
}

.footer-top { padding: 50px 0 !important; }

/* Footer heading / title */
.footer-menu .title a, .footer-menu .title {
  color: var(--wf-primary-light) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-size: 14px !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  display: block !important;
}

/* Footer links */
.footer-menu ul li a {
  color: rgba(245,230,234,0.80) !important;
  font-size: 13.5px !important;
  transition: var(--wf-transition) !important;
  padding: 3px 0 !important;
}

.footer-menu ul li a:hover {
  color: var(--wf-primary-light) !important;
  margin-left: 6px !important;
}

/* Footer about / logo area */
.footer-about p {
  color: rgba(245,230,234,0.75) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.footer-about .footer-hotlint {
  color: var(--wf-primary-light) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

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

/* Social icons */
.social_link li a {
  color: rgba(245,230,234,0.80) !important;
  border: 1.5px solid rgba(255,255,255,0.20) !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  transition: var(--wf-transition) !important;
  font-size: 14px !important;
}

.social_link li a:hover {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.40) !important;
}

/* Footer bottom */
.footer-bottom {
  background: var(--wf-burgundy) !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.copyright p {
  color: rgba(245,230,234,0.60) !important;
  font-size: 12.5px !important;
  text-align: center !important;
}

/* Developer credit link stays green — preserved */
.developer-credit-link { color: #4dbc60 !important; }

/* =====================================================
   SECTION 25: MOBILE BOTTOM NAVIGATION (footer_nav)
   Rose accents — PROTECTED: structure unchanged
   ===================================================== */
.footer_nav {
  background: var(--wf-white) !important;
  border-top: 1.5px solid var(--wf-border) !important;
  box-shadow: 0 -4px 16px rgba(159,18,57,0.10) !important;
}

.footer_nav ul li a {
  color: var(--wf-text-muted) !important;
  transition: var(--wf-transition) !important;
}

.footer_nav ul li a span { color: var(--wf-text-muted) !important; }

.footer_nav ul li a:hover,
.footer_nav ul li a:hover span {
  color: var(--wf-primary) !important;
}

.footer_nav ul li a i { color: var(--wf-text-muted) !important; transition: var(--wf-transition) !important; }
.footer_nav ul li a:hover i { color: var(--wf-primary) !important; }

/* Mobile Home "Home" button circle — PRESERVED 75px circle, only color change */
li.mobile_home {
  background: var(--wf-primary) !important;
  border: 2px solid var(--wf-border) !important;
}

li.mobile_home a, li.mobile_home a span { color: #ffffff !important; }
li.mobile_home a i { color: #ffffff !important; }

/* Cart badge count in mobile bottom nav */
.footer_nav .mobilecart-qty,
.footer_nav b.mobilecart-qty {
  background: var(--wf-ruby) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  font-size: 10px !important;
}

/* =====================================================
   SECTION 26: MOBILE MENU SLIDE-OUT
   Rose accents on existing structure
   ===================================================== */
.mobile-menu {
  background: var(--wf-white) !important;
  box-shadow: 4px 0 30px rgba(159,18,57,0.16) !important;
  border-right: 2px solid var(--wf-primary) !important;
}

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

/* Mobile menu logo header */
.mobile-menu-logo {
  background: linear-gradient(135deg, var(--wf-burgundy), var(--wf-primary)) !important;
  padding: 14px 16px !important;
  border-bottom: none !important;
}

.mobile-menu-logo * { color: #ffffff !important; }
.mobile-menu-close i { color: rgba(255,255,255,0.90) !important; font-size: 20px !important; }

/* Category name in mobile menu */
.mobile-menu .menu-category-name {
  font-weight: 600 !important;
  border-bottom: 1px solid var(--wf-border) !important;
  padding: 10px !important; padding-left: 20px !important;
  transition: var(--wf-transition) !important;
  color: var(--wf-text-primary) !important;
}

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

.mobile-menu .menu-category-name:hover * { color: var(--wf-primary) !important; }

/* Active parent category */
li.parent-category.active { background: var(--wf-blush) !important; }

/* Category toggle arrow */
.mobile-menu span.menu-category-toggle i { color: var(--wf-primary) !important; }

/* Mobile subcategory links */
.parent-subcategory .menu-subcategory-name {
  color: var(--wf-text-primary) !important;
  font-weight: 500 !important;
  transition: var(--wf-transition) !important;
}

.parent-subcategory .menu-subcategory-name:hover { color: var(--wf-primary) !important; }

/* Child category links */
.menu-childcategory-name { color: var(--wf-text-muted) !important; }
.menu-childcategory-name:hover { color: var(--wf-primary) !important; }

/* Third nav background */
ul.third-nav { background-color: var(--wf-blush) !important; }

/* Second nav background */
.second-nav { background: var(--wf-white) !important; }

/* =====================================================
   SECTION 27: SCROLL TOP BUTTON
   ===================================================== */
.scrolltop {
  background: var(--wf-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.40) !important;
  transition: var(--wf-transition) !important;
}

.scrolltop:hover {
  background: var(--wf-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(159,18,57,0.55) !important;
  transform: translateY(-2px) !important;
}

.scrolltop .scroll i { color: #ffffff !important; }

/* =====================================================
   SECTION 28: LOADING SPINNER
   ===================================================== */
#loading .custom-loader {
  border-top-color: var(--wf-primary) !important;
}

/* =====================================================
   SECTION 29: QUICK VIEW MODAL
   ===================================================== */
#custom-modal .modal-content {
  border-radius: var(--wf-radius-lg) !important;
  border: 1px solid var(--wf-border) !important;
  box-shadow: var(--wf-shadow-lg) !important;
}

#custom-modal .modal-header {
  border-bottom: 1px solid var(--wf-border) !important;
  background: var(--wf-blush) !important;
}

/* =====================================================
   SECTION 30: SEARCH RESULTS DROPDOWN
   ===================================================== */
.search_product {
  border: 1px solid var(--wf-border) !important;
  border-radius: 0 0 var(--wf-radius-md) var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-md) !important;
  background: var(--wf-white) !important;
}

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

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

/* =====================================================
   SECTION 31: CUSTOMER ACCOUNT / LOGIN FORMS
   ===================================================== */
.auth-section { background: var(--wf-white) !important; }

.submit-btn {
  background: linear-gradient(135deg, var(--wf-primary-dark), var(--wf-primary)) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.submit-btn:hover {
  background: linear-gradient(135deg, var(--wf-burgundy), var(--wf-primary-dark)) !important;
  box-shadow: 0 6px 18px rgba(159,18,57,0.40) !important;
}

.submit-btn * { color: #ffffff !important; }

.register-now a:hover {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-color: var(--wf-primary) !important;
}

/* Form controls — rose focus */
.form-control:focus, input:focus, textarea:focus {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 0 0 3px rgba(159,18,57,0.12) !important;
}

/* =====================================================
   SECTION 32: RESPONSIVE RULES
   CRITICAL: Preserve ALL existing padding-top values
   ===================================================== */

/* ─── Tablet (768px–991px) ─────────────────────────── */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title-name { font-size: 17px !important; }
  .product-cart .name { font-size: 20px !important; }
}

/* ─── Mobile (< 768px) ──────────────────────────────── */
@media only screen and (max-width: 767px) {
  /* CRITICAL: #content padding-top MUST NOT CHANGE — handled by responsive.css */

  /* Mobile header */
  .mobile-header {
    background: var(--wf-white) !important;
    border-bottom: 2px solid var(--wf-primary) !important;
  }

  /* Mobile search form */
  .mobile-search form {
    background: var(--wf-white) !important;
    border: 1.5px solid var(--wf-border-strong) !important;
    border-radius: var(--wf-radius-md) !important;
    height: 40px !important;
    border-color: var(--wf-border-strong) !important;
  }

  .mobile-search form input {
    color: var(--wf-text-primary) !important;
    background: var(--wf-white) !important;
  }

  .mobile-search form button {
    background: var(--wf-primary) !important;
    flex: 0 0 60px !important;
  }

  .mobile-search form svg, .mobile-search form button svg { color: #ffffff !important; stroke: #ffffff !important; }

  /* Mobile menu scrollbar accent */
  .mobile-menu::-webkit-scrollbar-thumb { background-color: var(--wf-primary) !important; }
  .filter_sidebar.active::-webkit-scrollbar-thumb { background-color: var(--wf-primary) !important; }

  /* Product cards mobile — ensure consistent */
  .product_item, .product-item, .wist_item {
    margin-bottom: 12px !important;
    padding: 8px !important;
  }

  .pro_img { height: 175px !important; }

  /* Section titles smaller on mobile */
  .section-title-name { font-size: 15px !important; letter-spacing: 0.8px !important; }

  /* Footer mobile */
  .footer-top { padding: 30px 0 !important; }
  .footer-bottom { padding-bottom: 77px !important; }

  /* Announcement bar on mobile */
  .top_header a[href^="tel"] { min-width: auto !important; }

  /* Size selector — keep tappable */
  .selector-item_label {
    min-width: 40px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  /* Detail page buttons */
  .add_cart_btn, .single_product.d-flex .order_now_btn {
    font-size: 13px !important;
    height: 42px !important;
  }
}

/* ─── Small mobile (< 575px) ────────────────────────── */
@media only screen and (max-width: 575px) {
  /* Preserve existing padding-top: 193px for #content — do NOT change */
  .pro_img { height: 160px !important; }

  .product-cart .name { font-size: 18px !important; }
  .details-price { font-size: 20px !important; }
}

/* ─── Large desktop (≥ 1200px) ──────────────────────── */
@media only screen and (min-width: 1200px) {
  .product-cart .name { font-size: 26px !important; }
  .details-price { font-size: 26px !important; }
}

/* =====================================================
   SECTION 33: ANIMATIONS & KEYFRAMES
   Sophisticated, performance-friendly, feminine
   ===================================================== */

/* Editorial fade-up entrance */
@keyframes wfFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle rose shimmer for section titles */
@keyframes wfRoseShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Subtle heartbeat for wishlist */
@keyframes wfHeartbeat {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.25); }
  50%       { transform: scale(1.10); }
  75%       { transform: scale(1.20); }
}

/* Badge pulse — subtle, elegant */
@keyframes wfBadgePulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(193,18,63,0.45); }
  50%       { box-shadow: 0 4px 20px rgba(193,18,63,0.68); }
}

/* Category button shimmer */
@keyframes wfCatBtnShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Product button shift */
@keyframes wfBtnShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Apply fade-up to product cards on page load (WOW.js already handles this) */
.wow.zoomIn {
  animation-duration: 0.6s !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smooth hover on category cards */
.cat_item { will-change: transform, box-shadow; }
.product_item, .wist_item { will-change: transform, box-shadow; }

/* =====================================================
   SECTION 34: MICRO-INTERACTIONS
   ===================================================== */

/* Wishlist / heart icon (used in product detail / wishlist pages) */
.details-wishlist:hover svg,
.details-wishlist:hover i {
  animation: wfHeartbeat 0.5s ease !important;
  color: var(--wf-ruby) !important;
}

/* Cart icon respond */
.cart-dialog:hover #cart-qty i {
  transform: scale(1.1) !important;
  transition: transform 0.2s var(--wf-ease-spring) !important;
}

/* Navigation hover underline micro-animation */
.heder__category > li:not(.all__category__list) > a {
  position: relative !important;
}

.heder__category > li:not(.all__category__list) > a::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--wf-primary-light) !important;
  transition: width 0.3s ease, left 0.3s ease !important;
}

.heder__category > li:not(.all__category__list) > a:hover::after {
  width: 80% !important;
  left: 10% !important;
}

/* =====================================================
   SECTION 35: ACCESSIBILITY STATES
   ===================================================== */

/* Focus states — visible and accessible */
*:focus-visible {
  outline: 2px solid var(--wf-primary) !important;
  outline-offset: 2px !important;
}

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wf-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(159,18,57,0.15) !important;
}

/* Disabled states */
button:disabled, input:disabled, select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* High contrast text on rose backgrounds */
.top_header a, .top_header span { letter-spacing: 0.2px; }

/* Skip link for accessibility */
.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 100000 !important;
}

.skip-link:focus { top: 0 !important; }

/* =====================================================
   SECTION 36: UTILITY CLASSES
   ===================================================== */
.wf-text-rose  { color: var(--wf-primary) !important; }
.wf-text-ruby  { color: var(--wf-ruby) !important; }
.wf-text-muted { color: var(--wf-text-muted) !important; }
.wf-bg-blush   { background: var(--wf-blush) !important; }
.wf-bg-surface { background: var(--wf-surface) !important; }
.wf-shadow-sm  { box-shadow: var(--wf-shadow-sm) !important; }

/* =====================================================
   SECTION 37: BODY BACKGROUND
   ===================================================== */
body {
  background: var(--wf-surface) !important;
}

/* Ensure product areas have warm surface */
.product-section, .homeproduct .container,
.pro_details_area { background: transparent; }

/* Section separators */
section.homeproduct {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  margin-bottom: 12px !important;
}

/* Overlay for mobile menu */
#page-overlay {
  background: rgba(45, 21, 32, 0.55) !important;
  backdrop-filter: blur(2px) !important;
}

/* =====================================================
   SECTION 38: CART PAGE — Rose Styling
   ===================================================== */
.vcart-section {
  padding: 24px 0 !important;
}

.vcart-inner, .cart-summary {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border: 1px solid var(--wf-border) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.cart-title h4 {
  font-family: var(--wf-font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--wf-primary) !important;
  margin-bottom: 16px !important;
  display: inline-block !important;
}

.cart-summary h5 {
  font-family: var(--wf-font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--wf-primary) !important;
  margin-bottom: 14px !important;
  display: inline-block !important;
}

/* Cart table header */
.vcart-content table thead tr th {
  background: var(--wf-blush) !important;
  color: var(--wf-text-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--wf-border) !important;
  padding: 10px 12px !important;
}

/* Cart table rows */
.vcart-content table tbody tr {
  border-bottom: 1px solid var(--wf-border) !important;
  transition: var(--wf-transition) !important;
}

.vcart-content table tbody tr:hover { background: var(--wf-blush) !important; }

.vcart-content table td {
  vertical-align: middle !important;
  color: var(--wf-text-primary) !important;
  padding: 12px !important;
  font-size: 14px !important;
}

.cart_name { font-weight: 500 !important; color: var(--wf-text-primary) !important; }

/* Remove button */
.remove-cart, .cart_remove {
  background: transparent !important;
  color: var(--wf-ruby) !important;
  border: 1px solid var(--wf-border) !important;
  border-radius: 50% !important;
  width: 28px !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: var(--wf-transition) !important;
  padding: 0 !important;
}

.remove-cart:hover, .cart_remove:hover {
  background: var(--wf-ruby) !important;
  color: #ffffff !important;
  border-color: var(--wf-ruby) !important;
  box-shadow: 0 3px 10px rgba(193,18,63,0.35) !important;
}

.remove-cart svg, .cart_remove svg { stroke: currentColor !important; }

/* Coupon form */
.coupon-form { margin-top: 16px !important; }
.coupon-form form { display: flex !important; gap: 10px !important; }

.coupon-form form input {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  flex: 1 !important;
  background: var(--wf-blush) !important;
  color: var(--wf-text-primary) !important;
}

.coupon-form form input::placeholder { color: var(--wf-text-muted) !important; }

.coupon-form form button {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: var(--wf-transition) !important;
  cursor: pointer !important;
}

.coupon-form form button:hover {
  background: var(--wf-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(159,18,57,0.30) !important;
}

/* Cart summary table */
.cart-summary table td {
  color: var(--wf-text-primary) !important;
  font-size: 14px !important;
  padding: 10px 6px !important;
  border-bottom: 1px solid var(--wf-border) !important;
}

.cart-summary table tr:last-child td {
  font-weight: 700 !important;
  color: var(--wf-primary) !important;
  font-size: 16px !important;
}

/* Breadcrumb section */
.breadcrumb-section { padding: 12px 0 !important; background: var(--wf-white) !important; }

.custom-breadcrumb ul li a {
  color: var(--wf-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.custom-breadcrumb ul li a i { color: var(--wf-text-muted) !important; margin: 0 4px !important; }

/* =====================================================
   SECTION 39: CHECKOUT PAGE — Rose premium
   ===================================================== */
.chheckout-section, .checkout-shipping {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border: 1px solid var(--wf-border) !important;
}

/* Order Place CTA */
.order_place {
  background: linear-gradient(90deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-ruby) 100%) !important;
  background-size: 200% auto !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  display: block !important;
  text-align: center !important;
  padding: 14px 0 !important;
  width: 100% !important;
  box-shadow: 0 5px 20px rgba(159,18,57,0.38) !important;
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  animation: wfOrderPulse 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(159,18,57,0.55) !important;
  animation: none !important;
  color: #ffffff !important;
}

@keyframes wfOrderPulse {
  0%, 100% { box-shadow: 0 5px 20px rgba(159,18,57,0.38); }
  50%       { box-shadow: 0 5px 28px rgba(159,18,57,0.60); }
}

/* =====================================================
   SECTION 40: COUNTDOWN TIMER — Rose theme
   ===================================================== */
.timer_inner .syotimer-cell {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(159,18,57,0.35) !important;
  font-weight: 700 !important;
  min-width: 40px !important;
  padding: 8px !important;
}

.timer_inner .syotimer-cell__value {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.timer_inner .syotimer-cell__unit {
  color: rgba(255,255,255,0.80) !important;
  font-size: 10px !important;
}

/* =====================================================
   SECTION 41: FORMS & INPUTS — Rose focus states
   ===================================================== */
.form-control, input[type="text"], input[type="email"],
input[type="number"], input[type="password"], select, textarea {
  background: var(--wf-white) !important;
  border: 1.5px solid var(--wf-border-strong) !important;
  color: var(--wf-text-primary) !important;
  border-radius: var(--wf-radius-sm) !important;
  transition: var(--wf-transition) !important;
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="password"]:focus,
select:focus, textarea:focus {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 0 0 3px rgba(159,18,57,0.10) !important;
  outline: none !important;
}

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

/* Auth / login form */
.auth-title {
  color: var(--wf-primary-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: var(--wf-blush) !important;
  border-bottom: 2px solid var(--wf-border) !important;
}

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

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

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

/* =====================================================
   SECTION 42: PRODUCT DETAIL — ADD TO CART button
   Override main.css midnight sapphire with rose
   ===================================================== */
.single_product.d-flex .add_cart_btn {
  background: linear-gradient(135deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-ruby) 100%) !important;
  background-size: 300% 300% !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--wf-radius-sm) !important;
  height: 52px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  flex: 1 !important;
  width: auto !important;
  box-shadow: 0 4px 20px rgba(159,18,57,0.35),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  animation: wfBtnShift 5s ease infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.single_product.d-flex .add_cart_btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important; z-index: 2 !important;
}

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

.single_product.d-flex .add_cart_btn::after { display: none !important; }

.single_product.d-flex .add_cart_btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 10px 28px rgba(159,18,57,0.52) !important;
  animation: none !important;
}

.single_product.d-flex .add_cart_btn * { color: #ffffff !important; }

/* =====================================================
   SECTION 43: CONTACT PAGE
   ===================================================== */
.contact-section, .contact-form {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border: 1px solid var(--wf-border) !important;
}

/* =====================================================
   SECTION 44: ORDER SUCCESS & TRACKING
   ===================================================== */
.success-section, .order-track-section {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
}

/* Success checkmark */
.success-img { text-align: center !important; }

/* =====================================================
   SECTION 45: CUSTOMER ACCOUNT / SIDEBAR
   ===================================================== */
.account-sidebar, .customer-sidebar {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  border: 1px solid var(--wf-border) !important;
  overflow: hidden !important;
}

/* Sidebar nav links */
.account-sidebar ul li a, .sidebar-menu ul li a {
  color: var(--wf-text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  display: block !important;
  transition: var(--wf-transition) !important;
  border-left: 2px solid transparent !important;
}

.account-sidebar ul li a:hover, .sidebar-menu ul li a:hover {
  background: var(--wf-blush) !important;
  color: var(--wf-primary) !important;
  border-left-color: var(--wf-primary) !important;
  padding-left: 20px !important;
}

.account-sidebar ul li.active a {
  background: var(--wf-blush-warm) !important;
  color: var(--wf-primary) !important;
  border-left-color: var(--wf-primary) !important;
  font-weight: 600 !important;
}

/* =====================================================
   SECTION 46: SHIPPING CHARGE INFO BOX (Detail Page)
   ===================================================== */
.del_charge_area .alert-info {
  background: var(--wf-blush) !important;
  border: 1px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  color: var(--wf-text-primary) !important;
}

.del_charge_area .alert-info * { color: var(--wf-text-primary) !important; }
.del_charge_area .fa-cubes { color: var(--wf-primary) !important; }

/* =====================================================
   SECTION 47: DETAIL PAGE GALLERY
   Thumbnail indicators
   ===================================================== */
.indicator_thumb { display: flex !important; gap: 8px !important; margin-top: 10px !important; }

.indicator-item {
  width: 60px !important; height: 60px !important;
  border: 2px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: var(--wf-transition) !important;
  flex-shrink: 0 !important;
}

.indicator-item:hover {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 2px 8px rgba(159,18,57,0.20) !important;
}

.indicator-item.active, .indicator-item.selected {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 3px 10px rgba(159,18,57,0.30) !important;
}

.indicator-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Product detail sale badge position */
.product-details-discount-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 10 !important; }

/* =====================================================
   SECTION 48: HOTDEALS TIMER
   ===================================================== */
.offer_timer {
  margin: 8px 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* =====================================================
   SECTION 49: MOBILE FILTER SIDEBAR
   ===================================================== */
.filter_sidebar { background: var(--wf-white) !important; }

.filter_sidebar .filter_close {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  display: inline-block !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  border: none !important;
}

/* =====================================================
   SECTION 50: PRODUCT GRID (category page)
   ===================================================== */
.category-product.main_product_inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

@media only screen and (max-width: 991px) {
  .category-product.main_product_inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media only screen and (max-width: 767px) {
  .category-product.main_product_inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* =====================================================
   SECTION 51: BODY PADDING — Preserved exactly
   ===================================================== */
@media (max-width: 767px) {
  body { padding-bottom: 78px !important; }
}

/* =====================================================
   SECTION 52: SORTING SECTION
   ===================================================== */
.sorting-section { padding: 12px 0 !important; }

.category-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}

.category-breadcrumb a { color: var(--wf-primary) !important; font-weight: 500 !important; }
.category-breadcrumb span { color: var(--wf-text-muted) !important; }
.category-breadcrumb strong { color: var(--wf-text-dark) !important; font-weight: 600 !important; }

/* Showing data count */
.showing-data span { color: var(--wf-text-muted) !important; font-size: 12.5px !important; }

/* =====================================================
   SECTION 53: DETAIL PAGE DESCRIPTION AREA
   ===================================================== */
.pro_details_area {
  background: var(--wf-surface) !important;
  padding: 10px 0 20px !important;
}

.description h2, .tab-content h2 {
  font-family: var(--wf-font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--wf-primary) !important;
  display: inline-block !important;
}

.description p, .tab-content p {
  color: var(--wf-text-primary) !important;
  line-height: 1.8 !important;
  font-size: 14px !important;
}

/* =====================================================
   SECTION 54: RELATED PRODUCTS
   ===================================================== */
.related-title h5 {
  font-family: var(--wf-font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
}

/* =====================================================
   SECTION 55: MODAL (Review, Quick View)
   ===================================================== */
.modal-content {
  border-radius: var(--wf-radius-lg) !important;
  border: 1px solid var(--wf-border) !important;
}

.modal-header {
  background: var(--wf-blush) !important;
  border-bottom: 1px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-lg) var(--wf-radius-lg) 0 0 !important;
}

.modal-title { color: var(--wf-text-dark) !important; font-weight: 600 !important; }

.btn-close { color: var(--wf-primary) !important; }

textarea#message-text {
  border: 1.5px solid var(--wf-border-strong) !important;
  border-radius: var(--wf-radius-sm) !important;
  max-width: 100% !important;
  width: 100% !important;
}

textarea#message-text:focus {
  border-color: var(--wf-primary) !important;
  box-shadow: 0 0 0 3px rgba(159,18,57,0.10) !important;
}

/* =====================================================
   SECTION 56: CAMPAIGN PAGES
   ===================================================== */
.campaign-section {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
}

/* =====================================================
   SECTION 57: SEARCH RESULTS PAGE
   ===================================================== */
.search-result-section { background: var(--wf-surface) !important; }

/* =====================================================
   SECTION 58: STATIC PAGES (Privacy, Terms, etc.)
   ===================================================== */
.page-content-area {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border: 1px solid var(--wf-border) !important;
  padding: 30px !important;
}

/* =====================================================
   SECTION 59: ACCORDION — Rose (Filter + Product Detail)
   ===================================================== */
.accordion-button:not(.collapsed) {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(159,18,57,0.12) !important;
  border-color: var(--wf-primary) !important;
}

.accordion-item { border: 1px solid var(--wf-border) !important; }

/* =====================================================
   SECTION 60: TOASTR NOTIFICATION OVERRIDE
   Rose success notifications
   ===================================================== */
.toast-success {
  background: linear-gradient(135deg, var(--wf-primary-dark), var(--wf-primary)) !important;
}

.toast-error { background: var(--wf-ruby) !important; }

/* =====================================================
   SECTION 61: QUICK VIEW DIALOG
   ===================================================== */
.modal-view.quick-product {
  background: var(--wf-white) !important;
  border-radius: var(--wf-radius-lg) !important;
  border: 1px solid var(--wf-border) !important;
  box-shadow: var(--wf-shadow-lg) !important;
}

/* =====================================================
   SECTION 62: CATAGORY NAV MENU ITEMS
   Links in menu-area row (nav bar items)
   ===================================================== */
.catagory_menu ul li a {
  color: rgba(255,255,255,0.90) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: var(--wf-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.catagory_menu ul li a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

/* =====================================================
   SECTION 63: DOWNLOAD APP SECTION (Footer)
   ===================================================== */
.d_app h2 {
  color: var(--wf-primary-light) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
}

.d_app img { border-radius: var(--wf-radius-sm) !important; max-height: 40px !important; width: auto !important; }

/* =====================================================
   SECTION 64: BTN-PRIMARY / BTN-SUCCESS BOOTSTRAP
   Override main.css blue with rose
   ===================================================== */
.btn-primary, .button-primary {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--wf-transition) !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.28) !important;
}

.btn-primary:hover, .button-primary:hover {
  background: var(--wf-primary-dark) !important;
  border-color: var(--wf-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(159,18,57,0.42) !important;
}

.btn-primary *, .button-primary * { color: #ffffff !important; }

/* btn-success stays green — it's used for WhatsApp/call buttons */
/* We preserve .btn-success as-is from main.css */

/* Generic submit buttons */
button[type="submit"].btn, input[type="submit"].btn {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-color: var(--wf-primary) !important;
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 700 !important;
  transition: var(--wf-transition) !important;
  box-shadow: 0 3px 10px rgba(159,18,57,0.22) !important;
}

button[type="submit"].btn:hover, input[type="submit"].btn:hover {
  background: var(--wf-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(159,18,57,0.36) !important;
}

/* =====================================================
   SECTION 65: HOME PAGE AD BANNERS
   ===================================================== */
.footer_top_ads_area {
  padding: 10px 0 !important;
  background: var(--wf-surface) !important;
}

.footertop_ads_inner {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footertop_ads_item {
  flex: 1 !important;
  border-radius: var(--wf-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--wf-shadow-sm) !important;
  transition: var(--wf-transition) !important;
}

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

.footertop_ads_item img { width: 100% !important; display: block !important; }

/* =====================================================
   SECTION 66: CUSTOMER REVIEW CAROUSEL (Home Page)
   ===================================================== */
.customer-review .border {
  border-color: var(--wf-border) !important;
  border-radius: var(--wf-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--wf-shadow-sm) !important;
  transition: var(--wf-transition) !important;
}

.customer-review .border:hover {
  box-shadow: var(--wf-shadow-md) !important;
  border-color: var(--wf-border-strong) !important;
}

/* =====================================================
   SECTION 67: REVIEW SECTION HEADING (Home Page)
   ===================================================== */
.homeproduct h5.text-center {
  background: linear-gradient(135deg, var(--wf-burgundy), var(--wf-primary)) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 10px 20px !important;
  font-family: var(--wf-font-heading) !important;
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
}

/* =====================================================
   SECTION 68: PREMIUM FASHION ENHANCEMENTS
   Additional polish for the Women's Fashion identity
   ===================================================== */

/* Decorative rose separator for sections */
.homeproduct::after {
  content: none !important;
}

/* Logo area subtle background refinement */
.logo-area { padding: 8px 0 !important; }

/* Main logo sizing — preserved */
.main-logo { height: 55px !important; }
.main-logo img { height: 100% !important; width: auto !important; object-fit: contain !important; }

/* Mobile logo sizing — preserved */
.menu-logo img { height: 50px !important; width: auto !important; }
.logo-image img { height: 40px !important; width: auto !important; }

/* Cart summary dropdown */
#cart-qty { position: relative !important; }

.cshort-summary {
  top: 55px !important;
  width: 390px !important;
  right: 0 !important;
}

/* Track Order button — ghost rose style */
.track_btn a {
  border: 1.5px solid var(--wf-primary) !important;
  background: transparent !important;
  border-radius: var(--wf-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: var(--wf-transition) !important;
}

.track_btn a:hover {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(159,18,57,0.30) !important;
  transform: translateY(-1px) !important;
}

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

/* =====================================================
   SECTION 69: BRAND / PRO_UNIT / PRO_BRAND (Detail)
   ===================================================== */
.pro_brand p, .pro_unig label {
  font-size: 13px !important;
  color: var(--wf-text-muted) !important;
  font-weight: 500 !important;
  margin: 4px 0 !important;
}

/* =====================================================
   SECTION 70: CATEGORY PAGE VIDEO (YouTube embed)
   ===================================================== */
.pro_vide { background: var(--wf-white) !important; border-radius: var(--wf-radius-md) !important; padding: 16px !important; box-shadow: var(--wf-shadow-sm) !important; }
.pro_vide h2 {
  font-family: var(--wf-font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--wf-text-dark) !important;
  margin-bottom: 10px !important;
}

.pro_vide iframe { border-radius: var(--wf-radius-sm) !important; }

/* =====================================================
   SECTION 71: GLOBAL ACCENT OVERRIDES
   Catch-all for any remaining blue gadget theme remnants
   that may not have been specifically targeted
   ===================================================== */

/* Note: inline styles cannot be overridden with CSS selectors alone */

/* Price anywhere on page */
.pro_price p, .details-price, .search_content .price,
.cshort-summary ul li p { color: var(--wf-primary) !important; }

/* Any remaining blue borders on focus */
*:focus { outline-color: var(--wf-primary) !important; }

/* =====================================================
   SECTION 72: FINAL — BODY BACKGROUND REINFORCEMENT
   ===================================================== */
body, html {
  background-color: var(--wf-surface) !important;
}

/* Ensure sections on white background don't bleed */
.product-section { border-radius: var(--wf-radius-md) !important; }

/* Mobile search background fix — ensure blush not old red */
@media only screen and (max-width: 767px) {
  .mobile-search {
    background: var(--wf-white) !important;
    padding: 10px 16px 12px 16px !important;
    /* padding-top: 10px gives breathing room below hotline bar */
  }
  .mobile-search form { background: var(--wf-white) !important; border-color: var(--wf-border-strong) !important; }
  .mobile-search form input { background: var(--wf-white) !important; color: var(--wf-text-primary) !important; }
  .mobile-search form button { background: var(--wf-primary) !important; flex: 0 0 60px !important; }
}

/* =====================================================
   SECTION 73: CSS CUSTOM PROPERTY BRIDGE
   Links wf- tokens → existing main.css g- variables
   so both systems co-exist cleanly
   ===================================================== */
:root {
  /* Override gadget blue tokens with rose equivalents */
  --g-primary:       var(--wf-primary) !important;
  --g-primary-dark:  var(--wf-primary-dark) !important;
  --g-primary-light: var(--wf-primary-light) !important;
  --g-bg:            var(--wf-surface) !important;
  --g-bg-card:       var(--wf-white) !important;
  --g-border:        var(--wf-border) !important;
  --g-text:          var(--wf-text-primary) !important;
  --g-text-muted:    var(--wf-text-muted) !important;
  --g-primary-rgb:   159, 18, 57 !important;
  --g-shadow-sm:     var(--wf-shadow-sm) !important;
  --g-shadow-md:     var(--wf-shadow-md) !important;
  --g-shadow-lg:     var(--wf-shadow-lg) !important;
  --g-shadow-hover:  var(--wf-shadow-hover) !important;
  /* Keep gold accent from gadget theme for stars */
  /* --g-accent stays as amber for stars */
}

/* =====================================================
   END OF WOMEN'S FASHION & BEAUTY REDESIGN CSS
   women-fashion-redesign.css
   Version 1.0 — Public Frontend Only
   Deep Rose × Ruby Red × Blush Luxury Identity
   PROTECTED: All Categories, Hero Banner, JS, Backend
   ===================================================== */

/* =====================================================
   SECTION 74: NUCLEAR OVERRIDES
   Must defeat the "FINAL OVERRIDES" section in main.css
   which loads before us. We load last, so we win.
   ===================================================== */

/* ── TOP HEADER — Rose gradient wins over main.css #1a1a1a ── */
.top_header,
body .top_header,
header .top_header,
#navbar_top .top_header {
  background: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary) 60%, var(--wf-primary-light) 100%) !important;
  background-color: var(--wf-burgundy) !important;
  background-image: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary) 60%, var(--wf-primary-light) 100%) !important;
  animation: none !important;
}

/* ── FOOTER — Deep burgundy wins over main.css #0F172A ── */
footer, .footer-top, .footer-bottom, .main-footer,
body footer, body .footer-top, body .footer-bottom {
  background: var(--wf-burgundy-deep) !important;
  background-color: var(--wf-burgundy-deep) !important;
}

.footer-bottom,
body .footer-bottom {
  background: var(--wf-burgundy) !important;
  background-color: var(--wf-burgundy) !important;
}

/* ── SECTION TITLE — Rose wins over main.css blue ── */
.section-title-name {
  border-bottom-color: var(--wf-primary) !important;
  color: var(--wf-text-dark) !important;
}

/* ── HEADER CART BADGE — Ruby wins over main.css amber gold ── */
.header-list-items ul li span {
  background: var(--wf-ruby) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(193,18,63,0.4) !important;
}

/* ── ALL CATEGORIES BUTTON — Rose wins over main.css red ── */
.all__category__list > a,
li.all__category__list > a,
.all__category__list > a *,
.all__category__list > a i,
body .all__category__list > a,
body li.all__category__list > a {
  background: linear-gradient(135deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-ruby) 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  animation: wfCatBtnShimmer 4s ease infinite !important;
}

.all__category__list > a:hover,
.all__category__list > a:hover *,
body .all__category__list > a:hover {
  background: linear-gradient(135deg, var(--wf-burgundy) 0%, var(--wf-primary-dark) 100%) !important;
  animation: none !important;
}

/* ── SIDE__BAR CATEGORY DROPDOWN — Rose dark wins over main.css navy ── */
body .side__bar,
body div.side__bar,
.side__bar {
  background: #1a0a12 !important;
  background-color: #1a0a12 !important;
}

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

body .side__bar ul li:hover > a,
.side__bar ul li:hover > a {
  color: #ffffff !important;
  background: rgba(159,18,57,0.18) !important;
  border-left-color: var(--wf-primary-light) !important;
}

/* ── LEVEL 2: SUBCATEGORY DROPDOWN — Muted rose wins over main.css sky blue ── */
.side__barsub,
body .side__barsub,
.all__category__list .side__barsub,
li.all__category__list .side__barsub {
  background: #2a1020 !important;
  background-color: #2a1020 !important;
  border-left-color: var(--wf-primary) !important;
  border-top-color: var(--wf-primary) !important;
}

body .side__barsub ul li a,
.side__barsub ul li a,
body .side__barsub li a {
  color: #f8dce6 !important;
  background: transparent !important;
}

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

/* ── LEVEL 3: CHILD CATEGORY DROPDOWN — Muted rose wins over main.css emerald ── */
.side__barchild,
body .side__barchild,
.all__category__list .side__barchild,
li.all__category__list .side__barchild {
  background: #3a1428 !important;
  background-color: #3a1428 !important;
  border-left-color: var(--wf-primary-light) !important;
  border-top-color: var(--wf-primary-light) !important;
}

body .side__barchild ul li a,
.side__barchild ul li a,
body .side__barchild li a {
  color: #fce7f3 !important;
  background: transparent !important;
}

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

/* ── DETAIL PAGE ADD TO CART — Rose wins over main.css navy blue ── */
.single_product.d-flex .add_cart_btn,
body .single_product.d-flex .add_cart_btn {
  background: linear-gradient(135deg, var(--wf-primary-dark) 0%, var(--wf-primary) 50%, var(--wf-ruby) 100%) !important;
  background-size: 300% 300% !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--wf-radius-sm) !important;
  box-shadow: 0 4px 20px rgba(159,18,57,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  animation: wfBtnShift 5s ease infinite !important;
}

.single_product.d-flex .add_cart_btn:hover,
body .single_product.d-flex .add_cart_btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 10px 28px rgba(159,18,57,0.52) !important;
  animation: none !important;
}

.single_product.d-flex .add_cart_btn *,
body .single_product.d-flex .add_cart_btn * {
  color: #ffffff !important;
}

/* ── MOBILE BOTTOM NAV — Rose wins over main.css dark charcoal+gold ── */
@media (max-width: 767px) {

  .footer_nav,
  body .footer_nav {
    background: var(--wf-white) !important;
    border-top: 1.5px solid var(--wf-border) !important;
    box-shadow: 0 -4px 16px rgba(159,18,57,0.10) !important;
  }

  /* All nav tab links — muted text */
  .footer_nav ul li a,
  body .footer_nav ul li a {
    background: transparent !important;
    border: 1px solid transparent !important;
  }

  .footer_nav ul li a span i,
  body .footer_nav ul li a span i {
    color: var(--wf-text-muted) !important;
  }

  .footer_nav ul li a span svg,
  body .footer_nav ul li a span svg {
    stroke: var(--wf-text-muted) !important;
  }

  .footer_nav ul li a span:last-child,
  body .footer_nav ul li a span:last-child {
    color: var(--wf-text-muted) !important;
  }

  /* Hover — rose */
  .footer_nav ul li a:hover,
  body .footer_nav ul li a:hover {
    background: var(--wf-blush) !important;
    border-color: var(--wf-border) !important;
  }

  .footer_nav ul li a:hover span i,
  body .footer_nav ul li a:hover span i {
    color: var(--wf-primary) !important;
  }

  .footer_nav ul li a:hover span svg,
  body .footer_nav ul li a:hover span svg {
    stroke: var(--wf-primary) !important;
  }

  .footer_nav ul li a:hover span:last-child,
  body .footer_nav ul li a:hover span:last-child {
    color: var(--wf-primary) !important;
  }

  /* ── HOME CENTER BUTTON (3rd item) — Rose elevated button ── */
  .footer_nav ul li:nth-child(3) a,
  body .footer_nav ul li:nth-child(3) a {
    background: var(--wf-primary) !important;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 18px rgba(159,18,57,0.45),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .footer_nav ul li:nth-child(3) a span i,
  body .footer_nav ul li:nth-child(3) a span i {
    color: #ffffff !important;
  }

  .footer_nav ul li:nth-child(3) a span:last-child,
  body .footer_nav ul li:nth-child(3) a span:last-child {
    color: rgba(255,255,255,0.90) !important;
  }

  .footer_nav ul li:nth-child(3) a:hover,
  body .footer_nav ul li:nth-child(3) a:hover {
    background: var(--wf-primary-dark) !important;
    box-shadow: 0 6px 22px rgba(159,18,57,0.60) !important;
    border-color: rgba(255,255,255,0.35) !important;
  }

  /* ── Cart badge — ruby red wins over main.css amber gold ── */
  .footer_nav .mobilecart-qty,
  body .footer_nav .mobilecart-qty,
  .footer_nav b.mobilecart-qty {
    background: var(--wf-ruby) !important;
    color: #ffffff !important;
    border: 2px solid var(--wf-white) !important;
  }

  /* ── mobile_home li reset — rose button, not old circle ── */
  .footer_nav li.mobile_home,
  body .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;
  }

  /* ── MOBILE DETAIL PAGE BUTTONS ── */
  .single_product.d-flex .add_cart_btn,
  .single_product.d-flex .order_now_btn {
    height: 46px !important;
    font-size: 13px !important;
  }

  /* ── MOBILE SEARCH — rose, not rounded pill ── */
  .mobile-search form,
  body .mobile-search form {
    background: var(--wf-white) !important;
    border-color: var(--wf-border-strong) !important;
    border-radius: var(--wf-radius-md) !important;
  }

  .mobile-search form button,
  body .mobile-search form button {
    background: var(--wf-primary) !important;
    border-radius: 0 var(--wf-radius-md) var(--wf-radius-md) 0 !important;
  }

  /* ── MOBILE PRO IMG HEIGHT ── */
  .pro_img { height: 150px !important; }
  .cat_img { height: 60px !important; width: 60px !important; }
  .cat_item { height: 110px !important; }
  .pro_name { height: 44px !important; }
  .pro_name a { font-size: 12.5px !important; }

  /* Scrolltop on mobile — keep hidden as per existing responsive.css */
  .scrolltop { bottom: 84px !important; }
}

/* ── SCROLLBAR — Rose tinted ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--wf-blush); }
::-webkit-scrollbar-thumb { background: rgba(159,18,57,0.30); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--wf-primary); }

/* ── CUSTOM LOADER — Rose ── */
.custom-loader {
  --c: radial-gradient(farthest-side, var(--wf-primary) 92%, #0000) !important;
}

/* ── TABLES — Rose accents ── */
.table td, .table th {
  color: var(--wf-text-primary) !important;
  border-color: var(--wf-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(159,18,57,0.03) !important;
}

/* Order tracking table header */
.tracktable thead {
  background: var(--wf-primary) !important;
}

.tracktable thead * { color: #ffffff !important; }

/* ── ALERTS — Rose themed ── */
.alert-info {
  background: var(--wf-blush) !important;
  border-color: var(--wf-border) !important;
  color: var(--wf-text-primary) !important;
}

.alert-info * { color: var(--wf-text-primary) !important; }

.alert-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

/* ── BADGES ── */
.badge-primary, .bg-primary { background: var(--wf-primary) !important; }
.badge-danger, .bg-danger { background: var(--wf-ruby) !important; }

/* ── PROGRESS BAR ── */
.progress-bar { background: var(--wf-primary) !important; }

/* ── STAR RATINGS — Gold, anywhere on page ── */
.fas.fa-star, .fas.fa-star-half-alt {
  color: var(--wf-gold) !important;
}

.far.fa-star { color: var(--wf-border-dark) !important; }

.details-ratting-wrapper i.fas.fa-star,
.details-ratting-wrapper i.fas.fa-star-half-alt {
  color: var(--wf-gold) !important;
}

.details-ratting-wrapper i.far.fa-star {
  color: var(--wf-border-dark) !important;
}

/* ── CHECKOUT CARD HEADER ── */
.checkout-shipping .card-header,
.cart_details .card-header {
  background: var(--wf-blush) !important;
  border-bottom: 1px solid var(--wf-border) !important;
}

.checkout-shipping h5, .cart_details h5 { color: var(--wf-primary-dark) !important; }
.checkout-shipping h6 { color: var(--wf-primary) !important; }

/* ── INVOICE BUTTON ── */
.invoice_btn, .invoice_btn:focus {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
  border-radius: var(--wf-radius-sm) !important;
}

.invoice_btn:hover {
  background: var(--wf-primary-dark) !important;
}

/* ── ACCOUNT TITLE ── */
.account-title {
  color: var(--wf-primary-dark) !important;
  border-bottom: 2px solid var(--wf-primary) !important;
}

/* ── TOASTR — Rose success ── */
#toast-container > div {
  border-radius: var(--wf-radius-md) !important;
  box-shadow: var(--wf-shadow-lg) !important;
}

#toast-container > .toast-success {
  background-color: rgba(159,18,57,0.93) !important;
}

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

#toast-container > .toast-info {
  background-color: rgba(159,18,57,0.85) !important;
}

/* ── WOW.JS ANIMATION SPEED ── */
.wow.zoomIn {
  animation-duration: 0.6s !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── PAGE OVERLAY — Rose tinted ── */
#page-overlay {
  background: rgba(45,21,32,0.60) !important;
}

/* =====================================================
   SECTION 75: CALL NOW / WHATSAPP BUTTON OVERRIDE
   Rose theme wins over main.css bioluminescent teal
   We keep the Call button purple-amethyst and
   WhatsApp button green — both work well with rose
   ===================================================== */

/* Phone call button — keep main.css amethyst purple (it's elegant) */
/* We only ensure color is correct and rose theme compatible */
.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;
  height: 50px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  animation: amethystPulse 3.2s ease-in-out infinite !important;
}

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

.call_now_btn[href^="tel"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation: none !important;
  box-shadow: 0 12px 32px rgba(109,40,217,0.60) !important;
}

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

/* WhatsApp button — keep jade green (brand color, not overrideable) */
.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;
  height: 50px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  animation: jadeGlow 3s ease-in-out infinite !important;
}

.call_now_btn[href*="whatsapp"] *,
.call_now_btn[href*="api.whatsapp"] * {
  color: #f0fdf4 !important;
}

@keyframes jadeGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(21,128,61,0.40); }
  50%       { box-shadow: 0 4px 28px rgba(34,197,94,0.62), 0 0 0 3px rgba(134,239,172,0.12); }
}

/* =====================================================
   SECTION 76: RESPONSIVE TABLET (768-991px)
   ===================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cat_item { height: 120px !important; }
  .pro_img { height: 170px !important; }
  .section-title-name { font-size: 17px !important; }
}

/* =====================================================
   SECTION 77: LARGE DESKTOP (≥ 992px)
   ===================================================== */
@media only screen and (min-width: 992px) {
  .product_item:hover { transform: translateY(-7px) !important; }
  .cat_item { height: 135px !important; }
  .pro_img { height: 190px !important; }
}

/* =====================================================
   SECTION 78: CSS VARIABLE BRIDGE (FINAL)
   Maps all --g- gadget tokens → --wf- rose tokens
   Ensures any remaining code using g-variables gets rose
   ===================================================== */
:root {
  --g-primary:         var(--wf-primary);
  --g-primary-dark:    var(--wf-primary-dark);
  --g-primary-light:   var(--wf-primary-light);
  --g-bg:              var(--wf-surface);
  --g-bg-card:         var(--wf-white);
  --g-border:          var(--wf-border);
  --g-text:            var(--wf-text-primary);
  --g-text-muted:      var(--wf-text-muted);
  --g-primary-rgb:     159, 18, 57;
  --g-shadow-sm:       var(--wf-shadow-sm);
  --g-shadow-md:       var(--wf-shadow-md);
  --g-shadow-lg:       var(--wf-shadow-lg);
  --g-shadow-hover:    var(--wf-shadow-hover);
  --g-error:           var(--wf-ruby);
  /* Gold/amber stays for star ratings */
  /* --g-accent: #C9A84C; (unchanged) */

  /* Legacy purple tokens → rose */
  --purple-dark:       var(--wf-burgundy);
  --purple-main:       var(--wf-primary);
  --purple-accent:     var(--wf-primary-light);
  --purple-soft-bg:    var(--wf-blush);
  --body-bg:           var(--wf-surface);
  --card-bg:           var(--wf-white);
  --text-primary:      var(--wf-text-primary);
  --text-muted:        var(--wf-text-muted);
  --text-price:        var(--wf-primary);
  --border-light:      var(--wf-border);
  --shadow-card:       var(--wf-shadow-sm);
  --shadow-hover:      var(--wf-shadow-hover);
  --dark-footer:       var(--wf-burgundy-deep);
  --nav-bg:            var(--wf-text-primary);
}

/* =====================================================
   SECTION 79: WF ANIMATION — wfBtnShift keyframe
   (redeclared here so it's available for all late-loaded elements)
   ===================================================== */
@keyframes wfBtnShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes wfBadgePulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(193,18,63,0.45); }
  50%       { box-shadow: 0 4px 18px rgba(193,18,63,0.65); }
}

@keyframes wfOrderPulse {
  0%, 100% { box-shadow: 0 5px 20px rgba(159,18,57,0.38); }
  50%       { box-shadow: 0 5px 28px rgba(159,18,57,0.60); }
}

/* =====================================================
   ★ END OF WOMEN'S FASHION & BEAUTY REDESIGN ★
   File: women-fashion-redesign.css
   Version: 1.0 | Load Order: LAST (after main.css)
   Brand: Deep Rose #9F1239 × Ruby Red #C1123F × Blush #FFF1F2
   Scope: Public Frontend ONLY — Backend untouched
   Protected: All Categories dropdown | Hero Banner
   ===================================================== */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  2026 LUXURY NAV LINK ANIMATION SYSTEM                      ║
   ║  Target: Home · Hotdeals · Contact · Login/Sign Up          ║
   ║  Style:  Premium Rose × Gold shimmer × Silk underline       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Step 1: Base nav item reset & positioning ── */
.heder__category > li:not(.all__category__list),
.right__menu__top li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Step 2: Core nav link styles ── */
.heder__category > li:not(.all__category__list) > a,
.right__menu__top li > a,
.right__menu__top li > p > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
  transition:
    color 0.30s ease,
    background 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s ease,
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  /* Prevent ALL previous ::after rules from this point */
  isolation: isolate !important;
  z-index: 1 !important;
}

/* ── Step 3: KILL all old ::after pseudo rules ── */
.heder__category > li:not(.all__category__list) > a::after,
.right__menu__top li > a::after,
.right__menu__top li > p > a::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ── Step 4: Shimmer layer via ::before ── */
.heder__category > li:not(.all__category__list) > a::before,
.right__menu__top li > a::before,
.right__menu__top li > p > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  ) !important;
  transform: translateX(-120%) skewX(-15deg) !important;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

/* ── Step 5: HOVER state — silk rose glow + shimmer sweep ── */
.heder__category > li:not(.all__category__list) > a:hover,
.right__menu__top li > a:hover,
.right__menu__top li > p > a:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.60) 0%,
    rgba(190,24,93,0.55) 50%,
    rgba(159,18,57,0.50) 100%
  ) !important;
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow:
    0 0 0 1px rgba(159,18,57,0.50),
    0 4px 18px rgba(159,18,57,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transform: translateY(-2px) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Trigger shimmer sweep on hover */
.heder__category > li:not(.all__category__list) > a:hover::before,
.right__menu__top li > a:hover::before,
.right__menu__top li > p > a:hover::before {
  transform: translateX(140%) skewX(-15deg) !important;
}

/* ── Step 6: ACTIVE / CURRENT PAGE state ── */
.heder__category > li:not(.all__category__list) > a.active,
.heder__category > li:not(.all__category__list).active > a,
.right__menu__top li > a.active {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.75) 0%,
    rgba(193,18,63,0.70) 100%
  ) !important;
  border-color: rgba(255,255,255,0.30) !important;
  box-shadow:
    0 0 0 1px rgba(159,18,57,0.60),
    0 4px 14px rgba(159,18,57,0.40),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── Step 7: Icon inside nav links (feather/FA) ── */
.heder__category > li:not(.all__category__list) > a i,
.heder__category > li:not(.all__category__list) > a svg,
.right__menu__top li > a i,
.right__menu__top li > a svg,
.right__menu__top li > p > a i {
  position: relative !important;
  z-index: 2 !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.heder__category > li:not(.all__category__list) > a:hover i,
.heder__category > li:not(.all__category__list) > a:hover svg,
.right__menu__top li > a:hover i,
.right__menu__top li > p > a:hover i {
  transform: scale(1.20) rotate(-5deg) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* ── Step 8: Text content z-index above shimmer ── */
.heder__category > li:not(.all__category__list) > a > *,
.right__menu__top li > a > *,
.right__menu__top li > p > a > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ── Step 9: STAGGERED ENTRANCE ANIMATION on page load ── */
.heder__category > li:not(.all__category__list) > a {
  animation: wfNavSlideIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* Stagger each nav item */
.heder__category > li:not(.all__category__list):nth-child(2) > a { animation-delay: 0.05s !important; }
.heder__category > li:not(.all__category__list):nth-child(3) > a { animation-delay: 0.10s !important; }
.heder__category > li:not(.all__category__list):nth-child(4) > a { animation-delay: 0.15s !important; }
.heder__category > li:not(.all__category__list):nth-child(5) > a { animation-delay: 0.20s !important; }
.heder__category > li:not(.all__category__list):nth-child(6) > a { animation-delay: 0.25s !important; }
.right__menu__top li > a,
.right__menu__top li > p > a { animation: wfNavSlideIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.28s both !important; }

@keyframes wfNavSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Step 10: LOGIN / SIGN UP SPECIAL BUTTON ── */
/* The Login/Sign Up link gets a pill-shaped rose CTA look */
.right__menu__top li > a,
.right__menu__top li > p > a {
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.30) 0%,
    rgba(193,18,63,0.25) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 50px !important;
  padding: 5px 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 8px rgba(159,18,57,0.22) !important;
}

.right__menu__top li > a:hover,
.right__menu__top li > p > a:hover {
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.80) 0%,
    rgba(190,24,93,0.75) 100%
  ) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow:
    0 0 0 2px rgba(159,18,57,0.45),
    0 6px 20px rgba(159,18,57,0.50),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ── Step 11: GOLD INDICATOR DOT for active page ──
   A tiny animated rose/gold dot below the active nav item */
.heder__category > li:not(.all__category__list) {
  --nav-dot-size: 4px;
}

/* ── Step 12: AMBIENT GLOW on the full nav bar on hover ── */
.menu-area:has(.heder__category > li:not(.all__category__list) > a:hover) {
  box-shadow: 0 4px 20px rgba(159,18,57,0.28) !important;
}

/* ── Step 13: Disable heavy animations on mobile ── */
@media (max-width: 767px) {
  .heder__category > li:not(.all__category__list) > a,
  .right__menu__top li > a,
  .right__menu__top li > p > a {
    animation: none !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  NAV ANIMATION — PRECISE SELECTOR OVERRIDE                  ║
   ║  Targets exact HTML: Home · Hotdeals · Contact · Login      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════
   HOME & HOTDEALS — Direct li > a links
   .heder__category > li (no class, not all__category__list)
   ═══════════════════════════════════════════════ */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 1 !important;
  transition:
    color 0.30s ease,
    background 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s ease,
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  animation: wfNavItemIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* Shimmer ::before */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.22) 50%,
    transparent 75%
  ) !important;
  transform: translateX(-130%) skewX(-15deg) !important;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

/* Kill old ::after underline completely */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
}

/* HOVER */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.65) 0%,
    rgba(190,24,93,0.58) 50%,
    rgba(159,18,57,0.55) 100%
  ) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(159,18,57,0.55),
    0 4px 20px rgba(159,18,57,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Trigger shimmer on hover */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a:hover::before {
  transform: translateX(140%) skewX(-15deg) !important;
}

/* Stagger delays */
.heder__category > li:not(.all__category__list):not(.contact__menu):nth-child(2) > a {
  animation-delay: 0.06s !important;
}
.heder__category > li:not(.all__category__list):not(.contact__menu):nth-child(3) > a {
  animation-delay: 0.12s !important;
}

/* ═══════════════════════════════════════════════
   CONTACT — li.contact__menu > a
   Same shimmer style, slightly different accent
   ═══════════════════════════════════════════════ */
.heder__category > li.contact__menu > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 1 !important;
  transition:
    color 0.30s ease,
    background 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s ease,
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  animation: wfNavItemIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.18s both !important;
}

.heder__category > li.contact__menu > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.22) 50%,
    transparent 75%
  ) !important;
  transform: translateX(-130%) skewX(-15deg) !important;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.heder__category > li.contact__menu > a::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.heder__category > li.contact__menu > a:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.65) 0%,
    rgba(190,24,93,0.58) 50%,
    rgba(159,18,57,0.55) 100%
  ) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(159,18,57,0.55),
    0 4px 20px rgba(159,18,57,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px) !important;
}

.heder__category > li.contact__menu > a:hover::before {
  transform: translateX(140%) skewX(-15deg) !important;
}

/* ═══════════════════════════════════════════════
   LOGIN / SIGN UP — .right__menu__top li.for_order p a
   Special pill-shaped rose CTA with pulsing glow
   ═══════════════════════════════════════════════ */
.right__menu__top li.for_order p a,
.right__menu__top .for_order p a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 20px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-decoration: none !important;

  /* Pill shape */
  border-radius: 50px !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;

  /* Subtle rose tinted glass background */
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.35) 0%,
    rgba(193,18,63,0.28) 100%
  ) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 10px rgba(159,18,57,0.30) !important;

  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 1 !important;

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

  /* Entrance animation */
  animation:
    wfNavItemIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.25s both,
    wfLoginPulse 3s ease-in-out 1s infinite !important;
}

/* Shimmer sweep on Login button */
.right__menu__top li.for_order p a::before,
.right__menu__top .for_order p a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.28) 50%,
    transparent 80%
  ) !important;
  transform: translateX(-130%) skewX(-15deg) !important;
  transition: transform 0.60s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.right__menu__top li.for_order p a::after,
.right__menu__top .for_order p a::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* LOGIN hover — full rose fill */
.right__menu__top li.for_order p a:hover,
.right__menu__top .for_order p a:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.90) 0%,
    rgba(193,18,63,0.85) 50%,
    rgba(159,18,57,0.90) 100%
  ) !important;
  border-color: rgba(255,255,255,0.50) !important;
  box-shadow:
    0 0 0 2px rgba(159,18,57,0.55),
    0 6px 24px rgba(159,18,57,0.55),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transform: translateY(-3px) scale(1.04) !important;
  animation: none !important;
}

.right__menu__top li.for_order p a:hover::before,
.right__menu__top .for_order p a:hover::before {
  transform: translateX(140%) skewX(-15deg) !important;
}

/* Icon inside login link */
.right__menu__top li.for_order p a i,
.right__menu__top .for_order p a i {
  position: relative !important;
  z-index: 2 !important;
  font-size: 14px !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  color: rgba(255,255,255,0.88) !important;
}

.right__menu__top li.for_order p a:hover i,
.right__menu__top .for_order p a:hover i {
  transform: scale(1.25) rotate(-8deg) !important;
  color: #ffffff !important;
}

/* Text inside login link */
.right__menu__top li.for_order p a > *,
.right__menu__top .for_order p a > * {
  position: relative !important;
  z-index: 2 !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════ */

/* Nav item entrance — slide down from top */
@keyframes wfNavItemIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.90);
    filter: blur(2px);
  }
  70% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Login pill subtle breathing glow */
@keyframes wfLoginPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 2px 10px rgba(159,18,57,0.28);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 2px 18px rgba(159,18,57,0.50),
      0 0 0 3px rgba(159,18,57,0.12);
  }
}

/* ═══════════════════════════════════════════════
   DISABLE REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .heder__category > li:not(.all__category__list) > a,
  .heder__category > li.contact__menu > a,
  .right__menu__top li.for_order p a {
    animation: none !important;
    transition: color 0.15s ease, background 0.15s ease !important;
  }
}

/* Mobile — animations off */
@media (max-width: 767px) {
  .heder__category > li:not(.all__category__list) > a,
  .heder__category > li.contact__menu > a,
  .right__menu__top li.for_order p a {
    animation: none !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2026 LUXURY PRODUCT CARD — COMPLETE REDESIGN                   ║
   ║  Ultra-premium hover shadow · Editorial image reveal            ║
   ║  Rose shimmer · Floating lift · Modern ORDER NOW button         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────
   CARD BASE — Clean white editorial canvas
   ───────────────────────────────────────────────────────────── */
.product_item,
.product-item,
.wist_item {
  background: var(--wf-white) !important;
  border: 1px solid rgba(243,216,226,0.80) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 3px rgba(159,18,57,0.06),
    0 1px 2px rgba(0,0,0,0.04) !important;
  transition:
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.38s cubic-bezier(0.4,0,0.2,1),
    border-color 0.30s ease !important;
  overflow: hidden !important;
  padding: 10px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
  position: relative !important;
  will-change: transform, box-shadow !important;
  /* Subtle top rose accent line */
  border-top: 2px solid transparent !important;
  background-clip: padding-box !important;
}

/* Rose top border line — always visible as brand accent */
.product_item::before,
.wist_item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--wf-primary) 30%,
    var(--wf-ruby) 50%,
    var(--wf-primary-light) 70%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  z-index: 2 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   HOVER STATE — 2026 luxury multi-layer shadow + float
   ───────────────────────────────────────────────────────────── */
.product_item:hover,
.product-item:hover,
.wist_item:hover {
  transform: translateY(-10px) scale(1.012) !important;
  border-color: rgba(224,180,197,0.90) !important;
  border-top-color: transparent !important;
  z-index: 20 !important;
  margin-top: 0 !important;

  /* ✦ LUXURY 5-LAYER SHADOW SYSTEM ✦ */
  box-shadow:
    /* Layer 1 — tight crisp shadow */
    0 2px 4px rgba(159,18,57,0.10),
    /* Layer 2 — mid rose diffusion */
    0 8px 20px rgba(159,18,57,0.18),
    /* Layer 3 — wide rose atmosphere */
    0 20px 50px rgba(159,18,57,0.20),
    /* Layer 4 — deep dark grounding shadow */
    0 30px 60px rgba(45,21,32,0.15),
    /* Layer 5 — ambient XL rose halo */
    0 0 80px rgba(159,18,57,0.08) !important;
}

/* Reveal top rose gradient line on hover */
.product_item:hover::before,
.wist_item:hover::before {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT IMAGE — Premium editorial reveal
   ───────────────────────────────────────────────────────────── */
.pro_img {
  height: 190px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: linear-gradient(
    135deg,
    #fff1f2 0%,
    #fce7f3 50%,
    #fff1f2 100%
  ) !important;
  background-size: 200% 200% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: background-position 3s ease !important;
}

/* Subtle shimmer on image container when card hovered */
.product_item:hover .pro_img,
.wist_item:hover .pro_img {
  background-position: 100% 100% !important;
}

/* Image zoom — more elegant, slightly more zoom */
.pro_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition:
    transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
    filter 0.40s ease !important;
  filter: brightness(1.0) saturate(1.0) !important;
}

.product_item:hover .pro_img img,
.wist_item:hover .pro_img img {
  transform: scale(1.10) !important;
  filter: brightness(1.04) saturate(1.08) !important;
}

/* Overlay gloss on image on hover */
.pro_img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06) 0%,
    transparent 40%,
    transparent 60%,
    rgba(159,18,57,0.04) 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.40s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 8px !important;
}

.product_item:hover .pro_img::after,
.wist_item:hover .pro_img::after {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT NAME — Animate on hover
   ───────────────────────────────────────────────────────────── */
.pro_name {
  height: 48px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.pro_name a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--wf-text-primary) !important;
  line-height: 1.45 !important;
  transition: color 0.25s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product_item:hover .pro_name a,
.wist_item:hover .pro_name a {
  color: var(--wf-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRICE — Rose luxury display
   ───────────────────────────────────────────────────────────── */
.pro_price {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.pro_price p {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wf-primary) !important;
  text-align: left !important;
  letter-spacing: -0.2px !important;
}

.pro_price del,
.pro_price s {
  color: var(--wf-text-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   ✦ 2026 ORDER NOW BUTTON — Complete Luxury Redesign ✦
   Rose × Ruby gradient · Shine sweep · Spring lift
   ───────────────────────────────────────────────────────────── */
.pro_btn {
  margin-top: 4px !important;
}

.pro_btn .cart_btn,
.pro_btn .order_button {
  width: 100% !important;
}

/* ── The Button ── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Typography */
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.90px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;

  /* 2026 Rose × Ruby gradient */
  background: linear-gradient(
    135deg,
    #881337 0%,
    #9f1239 25%,
    #be185d 55%,
    #c1123f 80%,
    #881337 100%
  ) !important;
  background-size: 250% 250% !important;

  /* Multi-layer shadow */
  box-shadow:
    0 2px 6px rgba(159,18,57,0.30),
    0 4px 14px rgba(159,18,57,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12) !important;

  /* Smooth continuous shimmer animation */
  animation: wfCardBtnFlow 4s ease infinite !important;

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

/* Continuous gradient flow animation */
@keyframes wfCardBtnFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shine sweep ::before layer */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -80% !important;
  width: 55% !important;
  height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.32) 50%,
    transparent 80%
  ) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.65s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Trigger shine on hover */
.pro_btn .cart_btn button:hover::before,
.pro_btn .order_button a:hover::before,
.addcartbutton:hover::before {
  left: 140% !important;
}

/* Top gloss line */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::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;
  opacity: 1 !important;
  display: block !important;
}

/* Text / icons above pseudo layers */
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #ffffff !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

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

/* ── HOVER STATE ── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation: none !important;
  background-position: right center !important;

  box-shadow:
    0 4px 10px rgba(159,18,57,0.35),
    0 8px 25px rgba(159,18,57,0.40),
    0 16px 40px rgba(159,18,57,0.22),
    0 0 0 2px rgba(190,24,93,0.28),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;

  color: #ffffff !important;
}

/* ── ACTIVE/PRESS STATE ── */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(-1px) scale(0.985) !important;
  box-shadow:
    0 2px 6px rgba(159,18,57,0.30),
    0 4px 12px rgba(159,18,57,0.22) !important;
  transition: transform 0.10s ease, box-shadow 0.10s ease !important;
}

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

/* ─────────────────────────────────────────────────────────────
   SALE BADGE — 2026 Luxury Ruby pulse
   ───────────────────────────────────────────────────────────── */
.sale-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
}

.sale-badge-box {
  background: linear-gradient(
    135deg,
    #9b0f32 0%,
    #c1123f 50%,
    #e11d48 100%
  ) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  box-shadow:
    0 3px 10px rgba(193,18,63,0.50),
    0 0 0 2px rgba(255,255,255,0.90),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: wfSalePop 2.8s ease-in-out infinite !important;
}

.sale-badge-text,
.sale-badge-text p {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
}

@keyframes wfSalePop {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow:
      0 3px 10px rgba(193,18,63,0.50),
      0 0 0 2px rgba(255,255,255,0.90);
  }
  30% {
    transform: scale(1.10) rotate(-4deg);
    box-shadow:
      0 5px 18px rgba(193,18,63,0.70),
      0 0 0 2px rgba(255,255,255,0.95),
      0 0 20px rgba(193,18,63,0.35);
  }
  60% {
    transform: scale(1.05) rotate(2deg);
    box-shadow:
      0 4px 14px rgba(193,18,63,0.60),
      0 0 0 2px rgba(255,255,255,0.92);
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE PERFORMANCE — simplified on small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .product_item:hover,
  .wist_item:hover {
    transform: translateY(-5px) scale(1.008) !important;
    box-shadow:
      0 6px 20px rgba(159,18,57,0.18),
      0 12px 32px rgba(45,21,32,0.12) !important;
  }

  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton {
    animation: none !important;
    height: 38px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.7px !important;
  }

  .sale-badge-box {
    animation: none !important;
    width: 40px !important;
    height: 40px !important;
  }

  .product_item::before,
  .wist_item::before {
    display: none !important;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton,
  .sale-badge-box {
    animation: none !important;
  }
  .product_item, .wist_item {
    transition: box-shadow 0.20s ease, border-color 0.20s ease !important;
    transform: none !important;
  }
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  2026 PRODUCT CARD — SIGNATURE HOVER EFFECTS                  ║
   ║  ① Animated Border Glow Trace (light travels the border)      ║
   ║  ② Corner Rose Sparkle                                        ║
   ║  ③ Card inner ambient glow on hover                           ║
   ║  ④ Product name silk underline reveal                         ║
   ║  ⑤ Price scale micro-pop                                      ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────
   ① ANIMATED BORDER GLOW TRACE
   A conic-gradient light that appears to travel around the
   card border on hover — signature 2026 premium effect
   ───────────────────────────────────────────────────────────── */
.product_item,
.wist_item {
  /* Extra wrapper needed — use outline trick */
  outline: 1.5px solid transparent !important;
  outline-offset: 0px !important;
  transition:
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.38s cubic-bezier(0.4,0,0.2,1),
    border-color 0.30s ease,
    outline-color 0.30s ease !important;
}

/* The glow trace lives on a ::after pseudo-element
   placed OUTSIDE the card using inset negative value */

/* ── BORDER TRACE ELEMENT ── */
.product_item::after,
.wist_item::after {
  content: "" !important;
  position: absolute !important;
  inset: -1.5px !important;
  border-radius: 13px !important;
  padding: 1.5px !important;
  background: conic-gradient(
    from var(--wf-trace-angle, 0deg),
    transparent 0deg,
    transparent 60deg,
    rgba(190,24,93,0.85) 100deg,
    rgba(159,18,57,1.00) 140deg,
    rgba(255,255,255,0.80) 165deg,
    rgba(193,18,63,0.90) 190deg,
    transparent 240deg,
    transparent 360deg
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}

/* On hover — reveal and spin the trace */
.product_item:hover::after,
.wist_item:hover::after {
  opacity: 1 !important;
  animation: wfBorderTrace 2.4s linear infinite !important;
}

/* The spinning conic gradient animation */
@property --wf-trace-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes wfBorderTrace {
  0%   { --wf-trace-angle: 0deg; }
  100% { --wf-trace-angle: 360deg; }
}

/* ─────────────────────────────────────────────────────────────
   ② INNER AMBIENT ROSE GLOW
   Soft rose light from inside the card on hover
   ───────────────────────────────────────────────────────────── */
.product_item::before,
.wist_item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(
    ellipse 80% 60% at 50% 110%,
    rgba(159,18,57,0.10) 0%,
    rgba(190,24,93,0.05) 50%,
    transparent 70%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.45s ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.product_item:hover::before,
.wist_item:hover::before {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   ③ PRODUCT NAME — Silk underline reveal on hover
   ───────────────────────────────────────────────────────────── */
.pro_name a {
  background-image: linear-gradient(
    90deg,
    var(--wf-primary) 0%,
    var(--wf-primary-light) 100%
  ) !important;
  background-size: 0% 1px !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  transition:
    color 0.28s ease,
    background-size 0.40s cubic-bezier(0.4,0,0.2,1) !important;
  padding-bottom: 1px !important;
}

.product_item:hover .pro_name a,
.wist_item:hover .pro_name a {
  color: var(--wf-primary) !important;
  background-size: 100% 1px !important;
}

/* ─────────────────────────────────────────────────────────────
   ④ PRICE — Micro scale-pop on card hover
   ───────────────────────────────────────────────────────────── */
.pro_price {
  transition: transform 0.30s cubic-bezier(0.34,1.56,0.64,1) !important;
  transform-origin: left center !important;
}

.product_item:hover .pro_price,
.wist_item:hover .pro_price {
  transform: scale(1.04) !important;
}

/* ─────────────────────────────────────────────────────────────
   ⑤ ORDER NOW BUTTON — Reveal animation on card hover
   Button slides up from bottom of card on hover
   ───────────────────────────────────────────────────────────── */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  transform: translateY(0) !important;
  transition:
    transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.28s ease,
    background-position 0.50s ease,
    opacity 0.28s ease !important;
}

/* Subtle lift on card hover — button comes alive */
.product_item:hover .pro_btn .cart_btn button,
.product_item:hover .pro_btn .order_button a,
.product_item:hover .addcartbutton,
.wist_item:hover .pro_btn .cart_btn button,
.wist_item:hover .pro_btn .order_button a,
.wist_item:hover .addcartbutton {
  transform: translateY(-2px) !important;
  box-shadow:
    0 4px 14px rgba(159,18,57,0.38),
    0 8px 24px rgba(159,18,57,0.25),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* Button hover (direct hover on button itself) */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  transform: translateY(-4px) scale(1.025) !important;
  box-shadow:
    0 6px 16px rgba(159,18,57,0.42),
    0 12px 32px rgba(159,18,57,0.28),
    0 0 0 2px rgba(190,24,93,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
  animation: none !important;
}

/* ─────────────────────────────────────────────────────────────
   ⑥ STAR RATINGS — Gentle glow on card hover
   ───────────────────────────────────────────────────────────── */
.product_item i.fas.fa-star,
.wist_item i.fas.fa-star {
  transition: filter 0.30s ease, transform 0.30s ease !important;
}

.product_item:hover i.fas.fa-star,
.wist_item:hover i.fas.fa-star {
  filter: drop-shadow(0 0 3px rgba(201,168,76,0.70)) !important;
  transform: scale(1.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   FALLBACK — for browsers without @property support
   (Safari < 16.4, older Firefox)
   Simple border glow without the trace spin
   ───────────────────────────────────────────────────────────── */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .product_item:hover::after,
  .wist_item:hover::after {
    background: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Fallback: simple rose outline on hover */
  .product_item:hover,
  .wist_item:hover {
    outline: 1.5px solid rgba(159,18,57,0.55) !important;
    outline-offset: 0px !important;
  }
}

/* Mobile — disable heavy effects */
@media (max-width: 767px) {
  .product_item::after,
  .wist_item::after {
    display: none !important;
  }

  .product_item::before,
  .wist_item::before {
    display: none !important;
  }

  .pro_price {
    transition: none !important;
    transform: none !important;
  }

  .product_item:hover .pro_price,
  .wist_item:hover .pro_price {
    transform: none !important;
  }

  .pro_name a {
    background-image: none !important;
    transition: color 0.20s ease !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product_item::after,
  .wist_item::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .product_item::before,
  .wist_item::before {
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2026 AERODYNAMIC BUTTON REDESIGN                               ║
   ║  VIEW MORE — Sleek outlined pill with arrow motion              ║
   ║  ORDER NOW — Compact rose capsule with thrust effect            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════
   VIEW MORE BUTTON — Aerodynamic pill with arrow
   ══════════════════════════════════════════════════ */
.view_more_btn,
a.view_more_btn {
  /* Size — compact and precise */
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 16px 5px 14px !important;
  height: 32px !important;

  /* Shape — aerodynamic pill */
  border-radius: 50px !important;

  /* Color — transparent rose outline */
  background: transparent !important;
  color: var(--wf-primary) !important;
  border: 1.5px solid var(--wf-primary) !important;

  /* Typography */
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.80px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Effects */
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  box-shadow:
    0 2px 8px rgba(159,18,57,0.12),
    inset 0 0 0 0 rgba(159,18,57,0) !important;

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

/* Animated fill background on hover via ::before */
.view_more_btn::before,
a.view_more_btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    var(--wf-primary-dark) 0%,
    var(--wf-primary) 50%,
    var(--wf-ruby) 100%
  ) !important;
  border-radius: inherit !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Arrow → symbol added via ::after */
.view_more_btn::after,
a.view_more_btn::after {
  content: "→" !important;
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  transform: translateX(0) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
  opacity: 0.75 !important;
  color: inherit !important;
  /* Override any previous ::after rules */
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  visibility: visible !important;
}

/* Text content z-index */
.view_more_btn > *,
a.view_more_btn > * {
  position: relative !important;
  z-index: 2 !important;
}

/* The text node itself sits above the fill */
.view_more_btn,
a.view_more_btn {
  color: var(--wf-primary) !important;
}

/* HOVER — fill sweeps in, arrow thrusts right */
.view_more_btn:hover,
a.view_more_btn:hover {
  color: #ffffff !important;
  border-color: var(--wf-primary) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 4px 16px rgba(159,18,57,0.35),
    0 8px 24px rgba(159,18,57,0.18) !important;
  gap: 8px !important;
  padding-right: 18px !important;
}

.view_more_btn:hover::before,
a.view_more_btn:hover::before {
  transform: scaleX(1) !important;
}

.view_more_btn:hover::after,
a.view_more_btn:hover::after {
  transform: translateX(4px) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Active press */
.view_more_btn:active,
a.view_more_btn:active {
  transform: translateY(0) scale(0.97) !important;
  transition: transform 0.10s ease !important;
}

/* ══════════════════════════════════════════════════
   ORDER NOW BUTTON — Aerodynamic capsule
   Compact · Precise · Thrust animation
   ══════════════════════════════════════════════════ */
.pro_btn .cart_btn button,
.pro_btn .order_button a,
.addcartbutton {
  /* Compact aerodynamic dimensions */
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 50px !important;          /* Full capsule shape */
  border: none !important;

  /* Rose → Ruby gradient */
  background: linear-gradient(
    135deg,
    #881337 0%,
    #9f1239 30%,
    #be185d 65%,
    #c1123f 100%
  ) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;

  /* Typography */
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  cursor: pointer !important;

  /* Depth */
  box-shadow:
    0 2px 8px rgba(159,18,57,0.30),
    0 4px 14px rgba(159,18,57,0.18),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;

  /* Gradient flow animation */
  animation: wfOrderNowFlow 4s ease infinite !important;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 1 !important;

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

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

/* Shine thrust sweep */
.pro_btn .cart_btn button::before,
.pro_btn .order_button a::before,
.addcartbutton::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -90% !important;
  width: 60% !important;
  height: 200% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.30) 50%,
    transparent 80%
  ) !important;
  transform: skewX(-22deg) !important;
  transition: left 0.60s cubic-bezier(0.4,0,0.2,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Top gloss line */
.pro_btn .cart_btn button::after,
.pro_btn .order_button a::after,
.addcartbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  width: 70% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.60),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Content above pseudo layers */
.pro_btn .cart_btn button *,
.pro_btn .order_button a *,
.addcartbutton * {
  color: #ffffff !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

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

/* HOVER — thrust effect */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  transform: translateY(-3px) scale(1.03) !important;
  animation: none !important;
  background-position: right center !important;
  box-shadow:
    0 4px 12px rgba(159,18,57,0.40),
    0 10px 28px rgba(159,18,57,0.30),
    0 0 0 2px rgba(190,24,93,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
}

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

/* ACTIVE press */
.pro_btn .cart_btn button:active,
.pro_btn .order_button a:active,
.addcartbutton:active {
  transform: translateY(-1px) scale(0.97) !important;
  box-shadow:
    0 2px 6px rgba(159,18,57,0.28),
    0 4px 10px rgba(159,18,57,0.16) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Card hover — button pre-lifts */
.product_item:hover .pro_btn .cart_btn button,
.product_item:hover .pro_btn .order_button a,
.product_item:hover .addcartbutton,
.wist_item:hover .pro_btn .cart_btn button,
.wist_item:hover .pro_btn .order_button a,
.wist_item:hover .addcartbutton {
  transform: translateY(-2px) !important;
  box-shadow:
    0 3px 10px rgba(159,18,57,0.35),
    0 6px 18px rgba(159,18,57,0.20),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  animation: none !important;
}

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

/* Mobile — simplified */
@media (max-width: 767px) {
  .view_more_btn, a.view_more_btn {
    height: 28px !important;
    font-size: 10px !important;
    padding: 4px 12px 4px 11px !important;
    letter-spacing: 0.6px !important;
  }

  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton {
    height: 36px !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    border-radius: 50px !important;
    animation: none !important;
  }

  .pro_btn .cart_btn button:hover,
  .pro_btn .order_button a:hover,
  .addcartbutton:hover {
    transform: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .view_more_btn, a.view_more_btn,
  .pro_btn .cart_btn button,
  .pro_btn .order_button a,
  .addcartbutton {
    animation: none !important;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  2026 LUXURY SCROLL-TO-TOP BUTTON                           ║
   ║  Rose × Ruby · Conic glow ring · Floating pulse             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.scrolltop {
  /* Position & size */
  position: fixed !important;
  bottom: 32px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  z-index: 9999 !important;

  /* Shape */
  border-radius: 14px !important;

  /* Rose gradient background */
  background: linear-gradient(
    135deg,
    #881337 0%,
    #9f1239 40%,
    #be185d 70%,
    #c1123f 100%
  ) !important;

  /* Layered luxury shadow */
  box-shadow:
    0 4px 14px rgba(159,18,57,0.45),
    0 8px 24px rgba(159,18,57,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.12) !important;

  /* Center the icon */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;

  /* Transitions */
  transition:
    transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.28s ease,
    border-radius 0.28s ease,
    background 0.28s ease !important;

  /* Breathing ambient animation */
  animation: wfScrollBreathe 3s ease-in-out infinite !important;

  /* Subtle top gloss */
  position: fixed !important;
  overflow: hidden !important;
}

/* Top gloss sheen */
.scrolltop::before {
  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.65),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Sweep shine on hover */
.scrolltop::after {
  content: "" !important;
  position: absolute !important;
  top: -60% !important;
  left: -80% !important;
  width: 55% !important;
  height: 220% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.28) 50%,
    transparent 80%
  ) !important;
  transform: skewX(-18deg) !important;
  transition: left 0.60s cubic-bezier(0.4,0,0.2,1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Icon */
.scrolltop .scroll,
.scrolltop .scroll i {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* HOVER — lift + sharper corners + shine sweep */
.scrolltop:hover {
  transform: translateY(-5px) scale(1.08) !important;
  border-radius: 16px !important;
  animation: none !important;
  background: linear-gradient(
    135deg,
    #7f0920 0%,
    #881337 35%,
    #be185d 70%,
    #9f1239 100%
  ) !important;
  box-shadow:
    0 8px 24px rgba(159,18,57,0.55),
    0 16px 40px rgba(159,18,57,0.28),
    0 0 0 2px rgba(190,24,93,0.35),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.scrolltop:hover::after {
  left: 140% !important;
}

.scrolltop:hover .scroll i {
  transform: translateY(-2px) !important;
}

/* ACTIVE press */
.scrolltop:active {
  transform: translateY(-2px) scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* Breathing ambient glow */
@keyframes wfScrollBreathe {
  0%, 100% {
    box-shadow:
      0 4px 14px rgba(159,18,57,0.42),
      0 8px 24px rgba(159,18,57,0.20),
      inset 0 1px 0 rgba(255,255,255,0.20);
  }
  50% {
    box-shadow:
      0 5px 18px rgba(159,18,57,0.60),
      0 10px 32px rgba(159,18,57,0.30),
      0 0 0 3px rgba(159,18,57,0.14),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
}

/* Arrow bounce — icon floats up on idle */
@keyframes wfArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

.scrolltop .scroll i {
  animation: wfArrowBounce 2s ease-in-out infinite !important;
}

.scrolltop:hover .scroll i {
  animation: none !important;
  transform: translateY(-3px) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .scrolltop {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    bottom: 90px !important;
    right: 16px !important;
    animation: none !important;
  }

  .scrolltop .scroll i {
    font-size: 14px !important;
    animation: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scrolltop {
    animation: none !important;
  }
  .scrolltop .scroll i {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  SCROLL-TO-TOP — FUNCTIONAL FIX                             ║
   ║  Problem: overflow:hidden shrinks .scroll div clickarea     ║
   ║  Problem: heavy animation causes lag/delay                  ║
   ║  Solution: full-size .scroll div + lightweight animation    ║
   ║  JS uses: $(".scroll").click() to trigger scroll            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Override the broken scrolltop completely */
.scrolltop {
  position: fixed !important;
  bottom: 32px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  z-index: 9999 !important;
  border-radius: 14px !important;
  background: linear-gradient(
    135deg,
    #881337 0%,
    #9f1239 45%,
    #be185d 100%
  ) !important;
  box-shadow:
    0 4px 14px rgba(159,18,57,0.45),
    0 8px 24px rgba(159,18,57,0.20),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  cursor: pointer !important;
  /* NO overflow:hidden — keeps .scroll div fully accessible */
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.25s ease !important;
  /* Light breathing — NO heavy keyframe animation */
  animation: none !important;
}

/* .scroll div — must fill the ENTIRE .scrolltop button
   This is the actual click target for JS */
.scrolltop .scroll {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: inherit !important;
  z-index: 5 !important;
  /* Entire area is clickable */
}

/* Icon */
.scrolltop .scroll i {
  color: #ffffff !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  line-height: 1 !important;
  display: block !important;
  position: relative !important;
  z-index: 6 !important;
  pointer-events: none !important;
  /* Simple smooth bounce */
  animation: wfArrowBounceClean 2.2s ease-in-out infinite !important;
  transition: transform 0.22s ease !important;
}

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

/* HOVER */
.scrolltop:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow:
    0 8px 22px rgba(159,18,57,0.55),
    0 14px 36px rgba(159,18,57,0.25),
    0 0 0 2px rgba(190,24,93,0.30),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: none !important;
}

.scrolltop:hover .scroll i {
  animation: none !important;
  transform: translateY(-2px) !important;
}

/* ACTIVE */
.scrolltop:active {
  transform: translateY(-1px) scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* Mobile */
@media (max-width: 767px) {
  .scrolltop {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    bottom: 90px !important;
    right: 14px !important;
  }
  .scrolltop .scroll i {
    font-size: 15px !important;
    animation: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scrolltop .scroll i { animation: none !important; }
  .scrolltop { transition: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SCROLL-TO-TOP — DEFINITIVE FINAL VERSION (loads last, wins)    ║
   ║  Cancels all previous conflicting scrolltop rules above         ║
   ║  HTML: div.scrolltop > div.scroll > i.fa-angle-up              ║
   ║  JS clicks .scroll — must fill full button area                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── WRAPPER ── */
.scrolltop {
  position: fixed !important;
  bottom: 32px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  z-index: 9999 !important;

  /* Rounded square — premium 2026 style */
  border-radius: 13px !important;

  /* Rose gradient */
  background: linear-gradient(
    145deg,
    #7f0920 0%,
    #9f1239 40%,
    #be185d 80%,
    #c1123f 100%
  ) !important;

  /* Shadows */
  box-shadow:
    0 4px 12px rgba(159,18,57,0.42),
    0 8px 20px rgba(159,18,57,0.20),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;

  /* NO overflow:hidden — keeps .scroll div fully tappable */
  overflow: visible !important;

  /* Flex center for fallback */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  /* Light, snappy transition */
  transition:
    transform 0.26s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.26s ease,
    border-radius 0.26s ease !important;

  /* NO heavy keyframe animation on wrapper */
  animation: none !important;
}

/* Pseudo elements OFF — they were causing click area issues */
.scrolltop::before,
.scrolltop::after {
  display: none !important;
  content: none !important;
}

/* ── INNER CLICK TARGET ── */
/* .scroll must cover 100% of .scrolltop so JS click always works */
.scrolltop .scroll {
  position: absolute !important;
  inset: 0 !important;          /* top:0 right:0 bottom:0 left:0 */
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: inherit !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* ── ICON ── */
.scrolltop .scroll i {
  color: #ffffff !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome" !important;
  display: block !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: none !important; /* icon doesn't intercept clicks */

  /* Gentle float animation */
  animation: wfScrollIconFloat 2.4s ease-in-out infinite !important;
  transition: transform 0.22s ease !important;
}

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

/* ── HOVER ── */
.scrolltop:hover {
  transform: translateY(-5px) scale(1.09) !important;
  border-radius: 15px !important;
  animation: none !important;
  box-shadow:
    0 8px 22px rgba(159,18,57,0.58),
    0 16px 36px rgba(159,18,57,0.24),
    0 0 0 2px rgba(190,24,93,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.scrolltop:hover .scroll i {
  animation: none !important;
  transform: translateY(-3px) !important;
}

/* ── ACTIVE PRESS ── */
.scrolltop:active {
  transform: translateY(-1px) scale(0.95) !important;
  box-shadow:
    0 2px 8px rgba(159,18,57,0.30),
    0 4px 12px rgba(159,18,57,0.16) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .scrolltop {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    bottom: 88px !important;
    right: 14px !important;
    animation: none !important;
  }
  .scrolltop .scroll i {
    font-size: 16px !important;
    animation: none !important;
  }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .scrolltop,
  .scrolltop .scroll i {
    animation: none !important;
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MOBILE SEARCH BAR — SPACING FIX + SUBTLE LUXURY UPGRADE    ║
   ║  Fix: padding-top was 0, search touched hotline bar          ║
   ║  Now: balanced spacing top + bottom around search bar        ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media only screen and (max-width: 767px) {

  /* ── Wrapper spacing ── */
  .mobile-search {
    background: var(--wf-white) !important;
    /* Top: space from hotline bar, Bottom: visual balance */
    padding: 10px 14px 10px 14px !important;
  }

  /* ── Search form — subtle rose luxury upgrade ── */
  .mobile-search form {
    display: flex !important;
    align-items: stretch !important;
    height: 42px !important;
    border-radius: 50px !important;           /* Full pill — modern 2026 */
    border: 1.5px solid var(--wf-border-strong) !important;
    overflow: hidden !important;
    background: var(--wf-white) !important;
    box-shadow:
      0 2px 8px rgba(159,18,57,0.08),
      0 1px 3px rgba(0,0,0,0.05) !important;
    transition:
      border-color 0.25s ease,
      box-shadow 0.25s ease !important;
  }

  /* Focus glow */
  .mobile-search form:focus-within {
    border-color: var(--wf-primary) !important;
    box-shadow:
      0 3px 12px rgba(159,18,57,0.18),
      0 0 0 3px rgba(159,18,57,0.08) !important;
  }

  /* Input */
  .mobile-search form input,
  .mobile-search form .msearch_keyword {
    background: var(--wf-white) !important;
    border: none !important;
    color: var(--wf-text-primary) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    padding-left: 18px !important;
    flex: 1 !important;
    outline: none !important;
    font-family: var(--wf-font-body) !important;
  }

  .mobile-search form input::placeholder {
    color: var(--wf-text-muted) !important;
    font-style: italic !important;
    font-size: 13px !important;
  }

  /* Search button — rose pill cap */
  .mobile-search form button {
    background: linear-gradient(
      135deg,
      var(--wf-primary-dark),
      var(--wf-primary)
    ) !important;
    border: none !important;
    border-radius: 0 50px 50px 0 !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.22s ease !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
  }

  .mobile-search form button:hover {
    background: linear-gradient(
      135deg,
      var(--wf-burgundy),
      var(--wf-primary-dark)
    ) !important;
  }

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

  /* Search results dropdown */
  .mobile-search .search_result {
    position: relative !important;
  }
}

/* Extra small screens (< 400px) */
@media only screen and (max-width: 400px) {
  .mobile-search {
    padding: 9px 12px 9px 12px !important;
  }

  .mobile-search form {
    height: 40px !important;
  }

  .mobile-search form button {
    flex: 0 0 46px !important;
    width: 46px !important;
  }
}

/* ── #content padding-top PRESERVED — must not change ──
   responsive.css: 163px (<767px), 193px (<575px)
   We do NOT touch these values. */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2026 LUXURY MOBILE BOTTOM NAV — DEFINITIVE FINAL VERSION       ║
   ║  Deep Burgundy × Rose × Blush glow                             ║
   ║  Loads last — overrides all previous footer_nav rules           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 767px) {

  /* ── BAR WRAPPER ── */
  .footer_nav,
  body .footer_nav {
    /* Deep luxury dark background */
    background: linear-gradient(
      180deg,
      #1a0812 0%,
      #2D0E1A 40%,
      #1a0812 100%
    ) !important;

    /* Rose top accent line */
    border-top: 2px solid var(--wf-primary) !important;

    /* Elevated shadow */
    box-shadow:
      0 -4px 20px rgba(159,18,57,0.22),
      0 -1px 6px rgba(0,0,0,0.35) !important;

    /* Fixed bottom */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 68px !important;
    z-index: 99999 !important;
    padding: 0 !important;
  }

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

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

  /* ── ALL TAB LINKS (default inactive) ── */
  .footer_nav ul li a,
  body .footer_nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition:
      background 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
  }

  /* ── ICONS — soft blush/muted on dark bg ── */
  .footer_nav ul li a span i,
  body .footer_nav ul li a span i {
    font-size: 20px !important;
    font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
    color: rgba(245,230,234,0.55) !important;
    display: block !important;
    line-height: 1 !important;
    transition: color 0.22s ease, transform 0.22s ease !important;
  }

  .footer_nav ul li a span svg,
  body .footer_nav ul li a span svg {
    width: 20px !important;
    height: 20px !important;
    stroke: rgba(245,230,234,0.55) !important;
    stroke-width: 2px !important;
    fill: none !important;
    display: block !important;
    transition: stroke 0.22s ease !important;
  }

  /* ── LABELS ── */
  .footer_nav ul li a span:last-child,
  body .footer_nav ul li a span:last-child {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    text-transform: capitalize !important;
    color: rgba(245,230,234,0.45) !important;
    line-height: 1 !important;
    transition: color 0.22s ease !important;
  }

  /* ── HOVER / ACTIVE TAB ── */
  .footer_nav ul li a:hover,
  body .footer_nav ul li a:hover {
    background: rgba(159,18,57,0.18) !important;
    border-color: rgba(159,18,57,0.28) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
  }

  .footer_nav ul li a:hover span i,
  body .footer_nav ul li a:hover span i {
    color: rgba(245,230,234,0.92) !important;
    transform: scale(1.12) !important;
  }

  .footer_nav ul li a:hover span svg,
  body .footer_nav ul li a:hover span svg {
    stroke: rgba(245,230,234,0.92) !important;
  }

  .footer_nav ul li a:hover span:last-child,
  body .footer_nav ul li a:hover span:last-child {
    color: rgba(245,230,234,0.85) !important;
  }

  /* ── HOME CENTER BUTTON (3rd tab) — Elevated Rose Gem ── */
  .footer_nav ul li:nth-child(3) a,
  body .footer_nav ul li:nth-child(3) a {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    margin-top: -14px !important;

    /* Rose gradient */
    background: linear-gradient(
      145deg,
      #7f0920 0%,
      #9f1239 35%,
      #be185d 70%,
      #c1123f 100%
    ) !important;

    border: 1.5px solid rgba(255,255,255,0.20) !important;

    box-shadow:
      0 4px 16px rgba(159,18,57,0.55),
      0 8px 24px rgba(159,18,57,0.28),
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(0,0,0,0.14) !important;

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

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

  .footer_nav ul li:nth-child(3) a span:last-child,
  body .footer_nav ul li:nth-child(3) a span:last-child {
    color: rgba(255,255,255,0.88) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  .footer_nav ul li:nth-child(3) a:hover,
  body .footer_nav ul li:nth-child(3) a:hover {
    transform: translateY(-4px) scale(1.06) !important;
    background: linear-gradient(
      145deg,
      #6e071a 0%,
      #881337 35%,
      #a81050 70%,
      #aa0f38 100%
    ) !important;
    box-shadow:
      0 8px 24px rgba(159,18,57,0.65),
      0 14px 32px rgba(159,18,57,0.30),
      0 0 0 2px rgba(190,24,93,0.30),
      inset 0 1px 0 rgba(255,255,255,0.28) !important;
    border-color: rgba(255,255,255,0.30) !important;
  }

  .footer_nav ul li:nth-child(3) a:hover span i,
  body .footer_nav ul li:nth-child(3) a:hover span i {
    color: #ffffff !important;
    transform: scale(1.05) !important;
  }

  /* ── CART BADGE ── */
  .footer_nav .mobilecart-qty,
  body .footer_nav .mobilecart-qty,
  .footer_nav b.mobilecart-qty {
    position: absolute !important;
    top: -4px !important;
    right: -3px !important;
    background: var(--wf-ruby) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #1a0812 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(193,18,63,0.50) !important;
  }

  /* ── mobile_home li structural reset ── */
  .footer_nav li.mobile_home,
  body .footer_nav li.mobile_home {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Body padding so content not hidden behind nav */
  body { padding-bottom: 78px !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2026 SIGNATURE HOVER GLOW — ALL PRIMARY BUTTONS               ║
   ║  Multi-spectrum rose × gold × blush aurora shadow system       ║
   ║  Each button type gets its own unique shadow character          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────
   PRODUCT CARD — ORDER NOW BUTTON
   Hover shadow: Rose × Ruby × Gold tri-color aurora
   ───────────────────────────────────────────────────────────────── */
.pro_btn .cart_btn button:hover,
.pro_btn .order_button a:hover,
.addcartbutton:hover {
  box-shadow:
    /* Tight crisp base */
    0 2px 6px rgba(159,18,57,0.40),
    /* Mid rose bloom */
    0 6px 18px rgba(159,18,57,0.38),
    /* Wide ruby atmosphere */
    0 14px 36px rgba(193,18,63,0.22),
    /* Gold shimmer halo — makes it look lit */
    0 20px 50px rgba(201,168,76,0.12),
    /* Outer blush glow — dreamy edge */
    0 0 60px rgba(190,24,93,0.10),
    /* Top inset gloss */
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transform: translateY(-4px) scale(1.025) !important;
}

/* ─────────────────────────────────────────────────────────────────
   VIEW MORE BUTTON
   Hover shadow: Rose bloom + gold edge
   ───────────────────────────────────────────────────────────────── */
.view_more_btn:hover,
a.view_more_btn:hover {
  box-shadow:
    0 3px 10px rgba(159,18,57,0.30),
    0 8px 24px rgba(159,18,57,0.20),
    0 16px 40px rgba(193,18,63,0.12),
    0 0 40px rgba(201,168,76,0.10) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ─────────────────────────────────────────────────────────────────
   ADD TO CART (detail page)
   Hover shadow: Deep rose + wide blush corona
   ───────────────────────────────────────────────────────────────── */
.add_cart_btn:hover,
.single_product.d-flex .add_cart_btn:hover {
  box-shadow:
    0 2px 8px rgba(159,18,57,0.42),
    0 8px 22px rgba(159,18,57,0.35),
    0 18px 44px rgba(193,18,63,0.20),
    0 0 70px rgba(190,24,93,0.12),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
  transform: translateY(-3px) scale(1.015) !important;
}

/* ─────────────────────────────────────────────────────────────────
   SUBMIT / LOGIN BUTTON
   Hover shadow: Rose pulse + gold warmth
   ───────────────────────────────────────────────────────────────── */
.submit-btn:hover {
  box-shadow:
    0 3px 10px rgba(159,18,57,0.38),
    0 8px 24px rgba(159,18,57,0.28),
    0 18px 48px rgba(193,18,63,0.16),
    0 30px 60px rgba(201,168,76,0.09),
    0 0 80px rgba(159,18,57,0.08) !important;
  transform: translateY(-3px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   GO TO CART / CHECKOUT BUTTON
   ───────────────────────────────────────────────────────────────── */
.go_cart:hover,
.checkout-btn:hover,
.order_place:hover {
  box-shadow:
    0 4px 12px rgba(159,18,57,0.40),
    0 10px 28px rgba(159,18,57,0.28),
    0 20px 50px rgba(193,18,63,0.16),
    0 0 65px rgba(190,24,93,0.10) !important;
  transform: translateY(-3px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   NAV LINKS hover — subtle nav glow
   ───────────────────────────────────────────────────────────────── */
.heder__category > li:not(.all__category__list):not(.contact__menu) > a:hover,
.heder__category > li.contact__menu > a:hover {
  box-shadow:
    0 4px 16px rgba(159,18,57,0.38),
    0 8px 28px rgba(159,18,57,0.20),
    0 0 40px rgba(193,18,63,0.12),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Login pill hover */
.right__menu__top li.for_order p a:hover,
.right__menu__top .for_order p a:hover {
  box-shadow:
    0 0 0 2px rgba(159,18,57,0.45),
    0 6px 20px rgba(159,18,57,0.42),
    0 12px 36px rgba(193,18,63,0.20),
    0 0 50px rgba(190,24,93,0.12),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* ─────────────────────────────────────────────────────────────────
   CATEGORY CARD hover — blush + rose aurora
   ───────────────────────────────────────────────────────────────── */
.cat_item:hover {
  box-shadow:
    0 4px 14px rgba(159,18,57,0.14),
    0 10px 30px rgba(159,18,57,0.10),
    0 20px 50px rgba(193,18,63,0.06) !important;
  transform: translateY(-5px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   SCROLL TO TOP hover
   ───────────────────────────────────────────────────────────────── */
.scrolltop:hover {
  box-shadow:
    0 6px 18px rgba(159,18,57,0.55),
    0 14px 36px rgba(159,18,57,0.30),
    0 24px 60px rgba(193,18,63,0.16),
    0 0 80px rgba(190,24,93,0.10),
    0 0 0 2px rgba(190,24,93,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE HOME CENTER BUTTON hover
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer_nav ul li:nth-child(3) a:hover,
  body .footer_nav ul li:nth-child(3) a:hover {
    box-shadow:
      0 6px 20px rgba(159,18,57,0.62),
      0 12px 32px rgba(159,18,57,0.34),
      0 20px 48px rgba(193,18,63,0.18),
      0 0 60px rgba(190,24,93,0.14),
      0 0 0 2px rgba(190,24,93,0.30),
      inset 0 1px 0 rgba(255,255,255,0.28) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ALL CATEGORIES BUTTON hover
   ───────────────────────────────────────────────────────────────── */
.all__category__list > a:hover,
body .all__category__list > a:hover {
  box-shadow:
    0 4px 14px rgba(159,18,57,0.50),
    0 10px 28px rgba(159,18,57,0.28),
    0 0 50px rgba(193,18,63,0.14) !important;
}

/* ─────────────────────────────────────────────────────────────────
   SALE BADGE — peak of animation
   ───────────────────────────────────────────────────────────────── */
@keyframes wfSalePop {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow:
      0 3px 10px rgba(193,18,63,0.45),
      0 0 0 2px rgba(255,255,255,0.90);
  }
  30% {
    transform: scale(1.12) rotate(-4deg);
    box-shadow:
      0 6px 20px rgba(193,18,63,0.65),
      0 12px 36px rgba(193,18,63,0.22),
      0 0 0 2px rgba(255,255,255,0.95),
      0 0 28px rgba(193,18,63,0.30);
  }
  60% {
    transform: scale(1.06) rotate(2deg);
    box-shadow:
      0 4px 14px rgba(193,18,63,0.55),
      0 8px 24px rgba(193,18,63,0.16),
      0 0 0 2px rgba(255,255,255,0.92);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pro_btn .cart_btn button:hover,
  .pro_btn .order_button a:hover,
  .addcartbutton:hover,
  .add_cart_btn:hover,
  .submit-btn:hover,
  .go_cart:hover,
  .view_more_btn:hover {
    box-shadow: 0 4px 14px rgba(159,18,57,0.35) !important;
    transform: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2026 HOT DEAL — SIGNATURE SECTION HEADER REDESIGN             ║
   ║  Animated flame title + luxury countdown timer                 ║
   ║  Completely unique — elevates the entire section               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── SECTION TITLE HEADER wrapper ── */
.sec_title .section-title-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.sec_title .timer_inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════
   HOT DEAL TITLE — Signature flame badge
   ══════════════════════════════════════════ */
.sec_title .section-title-name {
  /* Override the standard section title */
  font-family: var(--wf-font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;

  /* Pill badge shape */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 18px 6px 14px !important;
  border-radius: 50px !important;

  /* Rose → Ruby gradient */
  background: linear-gradient(
    135deg,
    #7f0920 0%,
    #9f1239 30%,
    #be185d 65%,
    #c1123f 100%
  ) !important;
  background-size: 200% 200% !important;

  /* Glow shadow */
  box-shadow:
    0 3px 10px rgba(159,18,57,0.45),
    0 6px 20px rgba(159,18,57,0.22),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;

  /* Gradient flow */
  animation: wfHotDealFlow 3.5s ease infinite !important;

  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
  bottom: auto !important;
}

/* Gradient flow for title badge */
@keyframes wfHotDealFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shine sweep on title badge */
.sec_title .section-title-name::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -80% !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;
  animation: wfHotDealShine 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes wfHotDealShine {
  0%   { left: -80%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

/* Flame icon before "Hot Deal" text */
.sec_title .section-title-name::after {
  content: "🔥" !important;
  font-size: 14px !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 2 !important;
  animation: wfFlamePulse 1.4s ease-in-out infinite !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  left: auto !important;
  bottom: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin-left: 2px !important;
}

@keyframes wfFlamePulse {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50%       { transform: scale(1.25) rotate(5deg); }
}

/* Text content z-index */
.sec_title .section-title-name > * {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════
   COUNTDOWN TIMER — Luxury digit blocks
   ══════════════════════════════════════════ */
.offer_timer,
#simple_timer {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

/* Each time cell (HH · MM · SS) */
.timer_inner .syotimer-cell,
.offer_timer .syotimer-cell,
#simple_timer .syotimer-cell {
  /* Shape */
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;

  /* Deep dark background — contrasts with rose title */
  background: linear-gradient(
    145deg,
    #1a0812 0%,
    #2D0E1A 100%
  ) !important;

  /* Rose border glow */
  border: 1px solid rgba(159,18,57,0.45) !important;

  box-shadow:
    0 2px 8px rgba(159,18,57,0.28),
    0 4px 14px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;

  /* Flip animation on each tick */
  animation: wfTimerPop 1s ease-in-out !important;
  transition: transform 0.15s ease !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Digit value */
.timer_inner .syotimer-cell__value,
.offer_timer .syotimer-cell__value,
#simple_timer .syotimer-cell__value {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  font-family: var(--wf-font-body) !important;
  letter-spacing: -0.5px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Unit label (h/m/s) */
.timer_inner .syotimer-cell__unit,
.offer_timer .syotimer-cell__unit,
#simple_timer .syotimer-cell__unit {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: rgba(159,18,57,0.85) !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Inner gloss line */
.timer_inner .syotimer-cell::before,
#simple_timer .syotimer-cell::before {
  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.15),
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Separator dot between cells */
.timer_inner .syotimer-cell + .syotimer-cell::after,
#simple_timer .syotimer-cell + .syotimer-cell::after {
  content: none !important;
}

/* Pop animation when digits change */
@keyframes wfTimerPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); box-shadow: 0 4px 16px rgba(159,18,57,0.45); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════
   WHOLE HOT DEAL SECTION — subtle bg strip
   ══════════════════════════════════════════ */
.sec_title {
  position: relative !important;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
  .sec_title .section-title-name {
    font-size: 11px !important;
    padding: 5px 14px 5px 11px !important;
    letter-spacing: 1.5px !important;
  }

  .sec_title .section-title-name::after {
    font-size: 12px !important;
  }

  .timer_inner .syotimer-cell,
  #simple_timer .syotimer-cell {
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
  }

  .timer_inner .syotimer-cell__value,
  #simple_timer .syotimer-cell__value {
    font-size: 13px !important;
  }

  .timer_inner .syotimer-cell__unit,
  #simple_timer .syotimer-cell__unit {
    font-size: 6.5px !important;
  }

  .sec_title .timer_inner {
    gap: 8px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sec_title .section-title-name,
  .sec_title .section-title-name::before,
  .sec_title .section-title-name::after {
    animation: none !important;
  }
  .timer_inner .syotimer-cell,
  #simple_timer .syotimer-cell {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SALE BADGE — ABSOLUTE FINAL OVERRIDE (loads last, always wins) ║
   ║  Circle shape · 36px · Golden color · No rotation/scale anim   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Position */
.sale-badge,
.product_item_inner .sale-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
}

/* Inner size wrapper */
.sale-badge-inner,
.product_item_inner .sale-badge-inner {
  --sale-badge-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
}

/* ── THE CIRCLE ── */
.sale-badge-box,
.product_item_inner .sale-badge-box {
  /* Size — compact */
  width: 36px !important;
  height: 36px !important;

  /* Circle — preserved as requested */
  border-radius: 50% !important;

  /* Golden luxury gradient */
  background: linear-gradient(
    145deg,
    #9a7000 0%,
    #c9a84c 35%,
    #f0d080 58%,
    #c9a84c 78%,
    #8a6200 100%
  ) !important;
  background-size: 200% 200% !important;

  /* White ring around circle */
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.85),
    0 2px 8px rgba(201,168,76,0.55),
    0 4px 14px rgba(201,168,76,0.28),
    inset 0 1px 0 rgba(255,255,255,0.40) !important;

  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  position: relative !important;

  /* Subtle glow pulse — NO scale, NO rotate */
  animation: wfGoldCircleGlow 2.8s ease-in-out infinite !important;

  /* Cancel any transform from wfSalePop */
  transform: none !important;
}

@keyframes wfGoldCircleGlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.82),
      0 2px 8px rgba(201,168,76,0.50),
      0 4px 14px rgba(201,168,76,0.24);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.92),
      0 3px 12px rgba(201,168,76,0.72),
      0 6px 20px rgba(201,168,76,0.38),
      0 0 24px rgba(232,201,122,0.32);
  }
}

/* Top gloss on circle */
.sale-badge-box::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 45% !important;
  height: 1px !important;
  background: rgba(255,255,255,0.60) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
}

/* ── TEXT — dark on gold for readability ── */
.sale-badge-text,
span.sale-badge-text,
.product_item_inner span.sale-badge-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2D1520 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
  /* Reset any background from premium.css */
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Percentage number */
.sale-badge-text p,
span.sale-badge-text p,
.product_item_inner span.sale-badge-text p {
  color: #1a0a0f !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
}

/* ── PRODUCT DETAIL PAGE — slightly larger ── */
.product-details-discount-badge .sale-badge-inner {
  width: 44px !important;
  height: 44px !important;
}

.product-details-discount-badge .sale-badge-box {
  width: 44px !important;
  height: 44px !important;
}

.product-details-discount-badge span.sale-badge-text {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

.product-details-discount-badge span.sale-badge-text p {
  font-size: 13px !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .sale-badge-inner,
  .product_item_inner .sale-badge-inner {
    width: 32px !important;
    height: 32px !important;
  }

  .sale-badge-box,
  .product_item_inner .sale-badge-box {
    width: 32px !important;
    height: 32px !important;
    animation: none !important;
    transform: none !important;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.80),
      0 2px 8px rgba(201,168,76,0.45) !important;
  }

  .sale-badge-text p,
  span.sale-badge-text p { font-size: 9.5px !important; }
  .sale-badge-text,
  span.sale-badge-text { font-size: 7.5px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sale-badge-box { animation: none !important; transform: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SALE BADGE — RED BORDER FIX                                    ║
   ║  Root cause: premium.css sets .sale-badge wrapper to            ║
   ║  background:#ff0018 + border-radius:50% + width:45px            ║
   ║  This red circle shows AROUND the golden inner circle           ║
   ║  Fix: reset wrapper + inner + text backgrounds completely       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── WRAPPER .sale-badge — must be transparent ── */
.sale-badge,
.product_item_inner .sale-badge {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  display: block !important;
  padding: 0 !important;
}

/* ── INNER .sale-badge-inner — transparent wrapper ── */
.sale-badge-inner,
.product_item_inner .sale-badge-inner {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── .sale-badge-text — transparent, no bg ── */
.sale-badge-text,
span.sale-badge-text,
.product_item_inner span.sale-badge-text {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── .sale-badge-box — the ONLY element that has color/shape ── */
.sale-badge-box,
.product_item_inner .sale-badge-box {
  /* Size */
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;

  /* Circle */
  border-radius: 50% !important;

  /* Gold gradient — ONLY this element has color */
  background: linear-gradient(
    145deg,
    #8a6500 0%,
    #c9a84c 30%,
    #f0d080 52%,
    #d4a830 72%,
    #8a6500 100%
  ) !important;
  background-size: 200% 200% !important;

  /* NO red ring — white ring only */
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.88),
    0 2px 10px rgba(201,168,76,0.60),
    0 5px 18px rgba(201,168,76,0.32) !important;

  border: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  position: relative !important;

  /* Golden glow — no rotation, no scale */
  animation: wfGoldFinalGlow 2.8s ease-in-out infinite !important;
  transform: none !important;
}

/* Enhanced golden glow animation */
@keyframes wfGoldFinalGlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.85),
      0 2px 10px rgba(201,168,76,0.55),
      0 5px 16px rgba(201,168,76,0.28);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.95),
      0 3px 14px rgba(201,168,76,0.80),
      0 6px 22px rgba(201,168,76,0.45),
      0 0 30px rgba(240,208,128,0.38);
  }
}

/* Gloss top highlight */
.sale-badge-box::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 45% !important;
  height: 1px !important;
  background: rgba(255,255,255,0.65) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ── TEXT ── */
.sale-badge-text p,
span.sale-badge-text p {
  color: #1a0a0f !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: -0.2px !important;
}

.sale-badge-text,
span.sale-badge-text {
  color: #2d1520 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ── DETAIL PAGE badge ── */
.product-details-discount-badge .sale-badge-inner {
  width: 44px !important;
  height: 44px !important;
}

.product-details-discount-badge .sale-badge-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

.product-details-discount-badge span.sale-badge-text {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

.product-details-discount-badge span.sale-badge-text p {
  font-size: 13px !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .sale-badge-inner,
  .product_item_inner .sale-badge-inner {
    width: 32px !important;
    height: 32px !important;
  }

  .sale-badge-box,
  .product_item_inner .sale-badge-box {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-badge-box { animation: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   NAV BAR LAYOUT FIX — Flex layout so Contact + Login push to right
   Layout: [ALL CATEGORIES] [Home] [Hotdeals] ←spacer→ [Contact] [Login/Sign Up]
   ═══════════════════════════════════════════════════════════════════ */

/* Override grid with flex on the nav list */
ul.heder__category {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 48px !important;
  line-height: 48px !important;
  width: 100% !important;
}

/* Spacer pushes right__menu__top all the way to the right */
ul.heder__category > li.nav__spacer {
  flex: 1 1 auto !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* right__menu__top sits at the end as a flex row */
ul.heder__category .right__menu__top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  text-align: unset !important;
}

/* ALL CATEGORIES keeps its fixed width */
ul.heder__category > li.all__category__list {
  flex-shrink: 0 !important;
}

/* Home / Hotdeals — no shrink */
ul.heder__category > li:not(.all__category__list):not(.nav__spacer) {
  flex-shrink: 0 !important;
}

/* Contact inside right__menu__top — regular nav style, not pill */
.right__menu__top li.contact__menu {
  display: inline-flex !important;
  align-items: center !important;
}

.right__menu__top li.contact__menu > a {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.35px !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color 0.30s ease, background 0.30s ease,
              border-color 0.30s ease, box-shadow 0.30s ease,
              transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.right__menu__top li.contact__menu > a:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(159,18,57,0.65) 0%,
    rgba(190,24,93,0.58) 50%,
    rgba(159,18,57,0.55) 100%
  ) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(159,18,57,0.55),
    0 4px 20px rgba(159,18,57,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px) !important;
}

/* Mobile responsive — stack normally */
@media (max-width: 991px) {
  ul.heder__category {
    flex-wrap: wrap !important;
    height: auto !important;
  }
  ul.heder__category > li.nav__spacer {
    display: none !important;
  }
  ul.heder__category .right__menu__top {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}