/* ============================================================
   SILENT STATUS — LOREN'Z Premium Design Override
   Old Money · Luxury Streetwear · Elegancia Agresiva
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════ */
:root {
  --black: #111827;
  --secondary: #6B7280;
  --secondary2: #9CA3AF;
  --white: #FFFFFF;
  --surface: #F9F9F9;
  --surface-alt: #EEEEEE;
  --line: #F3F4F6;
  --outline: #787587;
  /* LOREN'Z Electric Purple — identidad de marca */
  --accent: #7B2FFF;
  --accent-hover: #9B5FFF;
  --accent-light: rgba(123, 47, 255, 0.08);
  --accent-glow: rgba(123, 47, 255, 0.20);
  --green: #10B981;
  --red: #EF4444;
  --yellow: #F59E0B;
  --purple: #7B2FFF;
  --pink: #EC4899;
  --success: #10B981;
  --surface1: rgba(255, 255, 255, 0.12);
  --surface2: rgba(255, 255, 255, 0.24);
  /* LOREN'Z Nav — negro profundo */
  --nav-bg: #0a0a0b;
  --nav-border: rgba(123, 47, 255, 0.18);
  --nav-text: rgba(255, 255, 255, 0.72);
  --nav-text-hover: #ffffff;
  --nav-height: 72px;
  --shadow-xs: 0 1px 2px rgba(123, 47, 255, 0.04);
  --shadow-sm: 0 2px 8px rgba(123, 47, 255, 0.06);
  --shadow-md: 0 4px 24px rgba(123, 47, 255, 0.08);
  --shadow-lg: 0 12px 48px rgba(123, 47, 255, 0.10);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-2xl: 40px;
  --radius-pill: 9999px;
}

/* ══════════════════════════════════════════
   2. GLOBAL TYPOGRAPHY & BODY
   ══════════════════════════════════════════ */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
  color: var(--black) !important;
  background-color: var(--white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: var(--accent);
  color: var(--white);
}

/* ── Headings: Plus Jakarta Sans for high-contrast editorial look ── */
.text-display {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

.heading1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
}

.heading2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.heading3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

.heading4 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.heading5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.heading6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.text-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
}

.body1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  color: var(--secondary) !important;
  line-height: 1.65 !important;
}

.caption1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  color: var(--secondary) !important;
}

.caption2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

/* Labels: uppercase, wide tracking — editorial feel */
.text-button-uppercase {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

.text-sub-display {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

.text-button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* ── Color utilities ── */
.text-secondary { color: var(--secondary) !important; }
.text-secondary2 { color: var(--secondary2) !important; }
.text-red { color: var(--accent) !important; }
.text-yellow { color: var(--yellow) !important; }

/* ══════════════════════════════════════════
   3. TOP NAV BAR — oculto
   ══════════════════════════════════════════ */
#top-nav, .top-nav {
  display: none !important;
}

/* ══════════════════════════════════════════
   4. HEADER — LOREN'Z Silent Status
   Full-width, negro profundo, editorial
   ══════════════════════════════════════════ */
.header-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--nav-height) !important;
  border-radius: 0 !important;
  background-color: var(--nav-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow: 0 1px 0 rgba(123, 47, 255, 0.12), 0 4px 32px rgba(0,0,0,0.6) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* Línea de acento inferior animada al hacer scroll */
.header-menu::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-hover) 50%, var(--accent) 70%, transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}

.header-menu.fixed {
  background-color: rgba(6, 6, 8, 0.97) !important;
  border-bottom: 1px solid rgba(123, 47, 255, 0.28) !important;
  box-shadow: 0 4px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(123,47,255,0.06) !important;
}

.header-menu.fixed::after {
  opacity: 1 !important;
}

/* Layout principal del header */
.header-main {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

/* Botón hamburguesa mobile */
.menu-mobile-icon {
  z-index: 1020 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}
.menu-mobile-icon i {
  color: var(--nav-text) !important;
  font-size: 22px !important;
}
.menu-mobile-icon:hover {
  background-color: rgba(123, 47, 255, 0.10) !important;
}
.menu-mobile-icon:hover i {
  color: var(--accent) !important;
}

/* ── LOREN'Z Logo — centrado, imagen de marca ── */
.header-main a.logo-link,
.header-main a[href="/"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 190px !important;
  height: 52px !important;
  background-image: url('../images/brand/logo-footer.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 1010 !important;
  transition: all 0.35s ease !important;
  filter: brightness(1) !important;
}

.header-main a.logo-link:hover,
.header-main a[href="/"]:hover {
  transform: translate(-50%, -50%) scale(1.04) !important;
  filter: drop-shadow(0 0 12px rgba(123, 47, 255, 0.45)) brightness(1.1) !important;
}

.header-main a.logo-link::before,
.header-main a[href="/"]::before {
  display: none !important;
}

/* Ocultar el texto del logo (se usa imagen) */
.header-main .heading4 {
  display: none !important;
}

/* ── Desktop: menú centrado dividido ── */
@media (min-width: 1024px) {
  .header-main .left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-grow: 0 !important;
  }

  /* Menú partido en dos grupos anclados a los bordes del logo —
     robusto ante cualquier cantidad de items en cada lado (ej. el
     link "Dashboard" que se inyecta de forma asíncrona) en lugar de
     un margen fijo que dependía de que ambos lados pesaran igual. */
  .header-main .menu-main {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1005 !important;
    margin: 0 !important;
  }

  .header-main .menu-main-left {
    right: calc(50% + 119px) !important;
    justify-content: flex-end !important;
  }

  .header-main .menu-main-right {
    left: calc(50% + 119px) !important;
    justify-content: flex-start !important;
  }

  .menu-main > ul {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .header-main .right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    z-index: 1010 !important;
  }
}

/* El nav de escritorio completo (logo + 6 links + iconos) necesita
   ~1150px reales para no solaparse consigo mismo — no cabe con margen
   en pantallas de 1024-1279px (ej. laptops pequeños), aunque ese sea
   el breakpoint "lg" en el que Tailwind ya lo muestra por defecto. El
   corte a menú hamburguesa se fuerza aquí a 1280px (xl) en su lugar.
   Debe ir DESPUÉS del bloque "min-width:1024px" de arriba: mismo
   selector + !important en ambos, así que gana por orden de cascada. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu-mobile-icon {
    display: flex !important;
  }
}

@media (min-width: 1280px) {
  .menu-mobile-icon {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .header-main .menu-main {
    display: none !important;
  }
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  .header-menu {
    height: 62px !important;
    --nav-height: 62px !important;
  }
  .header-main a.logo-link,
  .header-main a[href="/"] {
    width: 155px !important;
    height: 42px !important;
  }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .header-menu {
    height: 56px !important;
    --nav-height: 56px !important;
  }
  .header-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .header-main a.logo-link,
  .header-main a[href="/"] {
    width: 130px !important;
    height: 36px !important;
  }
  .header-main .right {
    gap: 4px !important;
  }
}

/* ── Nav links — LOREN'Z editorial ── */
.menu-main > ul > li {
  display: flex !important;
  align-items: center !important;
}

.menu-main > ul > li > a,
.menu-main > ul > li > .link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--nav-text) !important;
  transition: color 0.25s ease, background-color 0.25s ease !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

/* Línea inferior eléctrica al hover */
.menu-main > ul > li > a::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 14px !important;
  right: 14px !important;
  height: 1px !important;
  background: var(--accent) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
}

.menu-main > ul > li > a:hover::before,
.menu-main > ul > li > a.active::before {
  transform: scaleX(1) !important;
}

.menu-main > ul > li > .link::before,
.menu-main ul li .link::before {
  display: none !important;
}

.menu-main > ul > li > a:hover,
.menu-main > ul > li > .link:hover,
.menu-main > ul > li > a.active,
.menu-main > ul > li > .link.active {
  color: var(--nav-text-hover) !important;
  background-color: transparent !important;
}

/* Indicadores dropdown (caret) */
.menu-main > ul > li:has(.sub-menu) > a::after,
.menu-main > ul > li:has(.mega-menu) > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  border-right: 1px solid currentColor !important;
  border-bottom: 1px solid currentColor !important;
  transform: rotate(45deg) translateY(-2px) !important;
  margin-left: 7px !important;
  transition: transform 0.3s ease !important;
  opacity: 0.5 !important;
}

.menu-main > ul > li:has(.sub-menu):hover > a::after,
.menu-main > ul > li:has(.mega-menu):hover > a::after {
  transform: rotate(-135deg) translateY(1px) !important;
}

/* ── Submenús & mega-menús — dark editorial ── */
.menu-main .sub-menu {
  background-color: #111114 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(123,47,255,0.15) !important;
  border: 1px solid rgba(123, 47, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 0 !important;
  z-index: 1015 !important;
  top: 100% !important;
  transform: translateY(-8px) scaleY(0.95) !important;
  transform-origin: top center !important;
  opacity: 0 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* position:fixed a propósito — el trigger ahora vive dentro de
   .menu-main-right (que es position:absolute), así que un
   position:absolute aquí quedaría centrado respecto a ese ancla
   angosta en vez del viewport completo. fixed lo escapa siempre
   que ningún ancestro (.header-main, .menu-main-right) use
   transform, lo cual evitamos deliberadamente. */
.menu-main .mega-menu {
  position: fixed !important;
  background-color: #0f0f12 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(123,47,255,0.12) !important;
  border: 1px solid rgba(123, 47, 255, 0.12) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 36px !important;
  margin-top: 0 !important;
  z-index: 1015 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-6px) scaleY(0.96) !important;
  transform-origin: top center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  opacity: 0 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  top: var(--nav-height) !important;
}

.menu-main > ul > li:hover .sub-menu {
  transform: translateY(0) scaleY(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-main > ul > li:hover .mega-menu {
  transform: translateY(0) scaleY(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Popup de login — dark theme */
.login-popup {
  top: 100% !important;
  margin-top: 0 !important;
  right: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.7) !important;
  border: 1px solid rgba(123, 47, 255, 0.15) !important;
  background-color: #111114 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Compensar el navbar fijo full-width */
body {
  padding-top: var(--nav-height) !important;
}

.menu-main .sub-menu li a,
.menu-main .sub-menu li .link,
.menu-main .mega-menu li a,
.menu-main .mega-menu li .link {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: color 0.2s ease, transform 0.2s ease, padding-left 0.2s ease !important;
}

.menu-main .sub-menu li:hover a,
.menu-main .sub-menu li:hover .link,
.menu-main .mega-menu li:hover a,
.menu-main .mega-menu li:hover .link {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* Encabezados de sección en mega-menú */
.mega-menu .nav-item .text-button-uppercase {
  color: rgba(123, 47, 255, 0.85) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(123, 47, 255, 0.20) !important;
  margin-bottom: 10px !important;
  position: relative !important;
}

.mega-menu .nav-item .text-button-uppercase::after {
  display: none !important;
}

/* ── Íconos de acción del header — dark ── */
.search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border-radius: 6px !important;
  transition: all 0.25s ease !important;
}

.search-icon i {
  font-size: 17px !important;
  color: var(--nav-text) !important;
  transition: all 0.25s ease !important;
}

.search-icon:hover {
  background-color: rgba(123, 47, 255, 0.10) !important;
}

.search-icon:hover i {
  color: var(--accent) !important;
  opacity: 1 !important;
}

.search-icon .line {
  display: none !important;
}

.header-main .list-action {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

@media (min-width: 1024px) {
  .header-main .list-action {
    gap: 4px !important;
  }

  .user-icon, 
  .wishlist-icon, 
  .cart-icon {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--nav-text) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    padding: 10px !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
  }

  .user-icon:hover, 
  .wishlist-icon:hover, 
  .cart-icon:hover {
    background-color: rgba(123, 47, 255, 0.10) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
  }

  .user-icon i, 
  .wishlist-icon i, 
  .cart-icon i {
    font-size: 17px !important;
    margin-right: 0 !important;
    color: var(--nav-text) !important;
    transition: color 0.25s ease !important;
  }

  .user-icon:hover i, 
  .wishlist-icon:hover i, 
  .cart-icon:hover i {
    color: var(--accent) !important;
  }

  .user-icon::after,
  .wishlist-icon::after,
  .cart-icon::after {
    display: none !important;
  }

  /* Cantidades — punto de acento morado */
  .header-main .wishlist-quantity,
  .header-main .cart-quantity,
  .header-main .wishlist-count,
  .header-main .cart-count {
    position: absolute !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    top: 4px !important;
    right: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1.5px solid var(--nav-bg) !important;
  }

  .header-main .wishlist-quantity::before,
  .header-main .cart-quantity::before,
  .header-main .wishlist-count::before,
  .header-main .cart-count::before {
    content: '' !important;
  }

  .header-main .wishlist-quantity::after,
  .header-main .cart-quantity::after,
  .header-main .wishlist-count::after,
  .header-main .cart-count::after {
    content: '' !important;
  }
}

/* ══════════════════════════════════════════
   5. PRIMARY BUTTON — pill, glowing
   ══════════════════════════════════════════ */
.button-main {
  background-color: var(--accent) !important;
  color: var(--white) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: uppercase !important;
}

.button-main:hover {
  background-color: var(--accent-hover) !important;
  color: var(--white) !important;
  box-shadow: 0 6px 28px rgba(58, 12, 163, 0.3) !important;
  transform: translateY(-2px) !important;
}

.button-main.bg-white,
.button-main.bg-transparent {
  background-color: transparent !important;
  color: var(--black) !important;
  border: 1.5px solid var(--black) !important;
  box-shadow: none !important;
}

.button-main.bg-white:hover,
.button-main.bg-transparent:hover {
  background-color: var(--black) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   6. SLIDER / HERO — clean, editorial
   ══════════════════════════════════════════ */
.slider-block {
  position: relative !important;
  overflow: hidden !important;
}

/* Abstract watermark circle from LOREN'Z design */
.slider-block::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(45deg) scaleY(1.3) !important;
  width: 700px !important;
  height: 700px !important;
  border-radius: 50% !important;
  border: 56px solid var(--black) !important;
  opacity: 0.022 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: blur(4px) !important;
}

.slider-block .text-display,
.slider-block .heading1 {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  position: relative !important;
  z-index: 2 !important;
}

.slider-block .text-sub-display {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ══════════════════════════════════════════
   7. PRODUCT FILTER TABS — pill indicator
   ══════════════════════════════════════════ */
.tab-features-block .menu-tab,
.filter-product-block .menu-tab {
  background-color: var(--surface) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px !important;
  border: 1px solid var(--line) !important;
}

.tab-features-block .menu-tab .tab-item,
.filter-product-block .menu-tab .tab-item {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: var(--secondary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease !important;
  text-transform: capitalize !important;
}

.tab-features-block .menu-tab .tab-item:hover,
.filter-product-block .menu-tab .tab-item:hover {
  color: var(--black) !important;
}

.tab-features-block .menu-tab .tab-item.active,
.filter-product-block .menu-tab .tab-item.active {
  color: var(--black) !important;
  font-weight: 600 !important;
}

.tab-features-block .menu-tab .indicator,
.filter-product-block .menu-tab .indicator {
  background-color: var(--white) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Small category tabs (What's New) */
.what-new-block .menu-tab .tab-item {
  border-radius: var(--radius-pill) !important;
  padding: 8px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.3s ease !important;
}

/* ══════════════════════════════════════════
   8. PRODUCT CARDS — ultra-clean
   ══════════════════════════════════════════ */
.product-item .product-thumb {
  background-color: var(--surface) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.product-item:hover .product-thumb {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

.product-item .product-infor {
  padding-top: 14px !important;
}

.product-item .product-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: var(--black) !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  transition: color 0.2s ease !important;
}

.product-item .product-name:hover {
  color: var(--accent) !important;
}

.product-item .product-price {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
}

.product-item .product-origin-price {
  color: var(--secondary2) !important;
}

/* Product tags — pill badges */
.product-item .product-tag {
  background-color: var(--accent) !important;
  color: var(--white) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
}

.product-item .product-sale {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* Action buttons */
.product-item .quick-view-btn,
.product-item .add-cart-btn {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--black) !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.product-item .quick-view-btn:hover,
.product-item .add-cart-btn:hover {
  background-color: var(--accent) !important;
  color: var(--white) !important;
}

/* Wishlist / Compare icons */
.product-item .add-wishlist-btn,
.product-item .compare-btn {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.product-item .add-wishlist-btn:hover,
.product-item .compare-btn:hover {
  background-color: var(--accent) !important;
}

.product-item .add-wishlist-btn:hover i,
.product-item .compare-btn:hover i {
  color: var(--white) !important;
}

/* Tooltips */
.product-item .tag-action {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Progress bar */
.product-item .progress { background-color: var(--line) !important; border-radius: var(--radius-pill) !important; }
.product-item .progress-sold { background-color: var(--accent) !important; border-radius: var(--radius-pill) !important; }

/* Color swatches */
.product-item .list-color .color-item {
  border: 2px solid var(--white) !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  width: 24px !important;
  height: 24px !important;
  transition: all 0.2s ease !important;
}

.product-item .list-color .color-item:hover,
.product-item .list-color .color-item.active {
  box-shadow: 0 0 0 2px var(--accent) !important;
  transform: scale(1.15) !important;
}

/* ══════════════════════════════════════════
   9. COLLECTION CARDS — rounded, elevated
   ══════════════════════════════════════════ */
.collection-item {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.collection-item:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.01) !important;
}

.collection-item .collection-name {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--radius-lg) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* ══════════════════════════════════════════
   10. BANNER BLOCKS — elevated cards
   ══════════════════════════════════════════ */
.banner-block .banner-item {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.banner-block .banner-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.banner-block .banner-content .heading2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.banner-block .banner-content .text-button {
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.banner-ads-item {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
}

.banner-ads-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   11. BENEFIT SECTION — pill-shaped badges
   ══════════════════════════════════════════ */
.benefit-block {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.benefit-block .benefit-item {
  padding: 32px 24px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-2xl) !important;
  background-color: var(--white) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.benefit-block .benefit-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent-light) !important;
}

.benefit-block .benefit-item i {
  color: var(--accent) !important;
  font-size: 40px !important;
}

.benefit-block .benefit-item .heading6 {
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  margin-top: 16px !important;
}

.benefit-block .benefit-item .caption1 {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--secondary) !important;
  margin-top: 8px !important;
}

@media (max-width: 767.98px) {
  .benefit-block { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ══════════════════════════════════════════
   12. TESTIMONIALS — clean cards
   ══════════════════════════════════════════ */
.testimonial-block {
  background-color: var(--surface) !important;
}

.testimonial-block .heading3 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.testimonial-block .testimonial-item .testimonial-main {
  background-color: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: none !important;
  padding: 32px !important;
  transition: all 0.4s ease !important;
}

.testimonial-block .testimonial-item .testimonial-main:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Star ratings */
.ph-fill.ph-star.text-yellow {
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════
   13. INSTAGRAM SECTION — rounded grid
   ══════════════════════════════════════════ */
.instagram-block .item {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
}

.instagram-block .item:hover {
  transform: scale(0.97) !important;
}

.instagram-block .item .icon {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.3s ease !important;
}

.instagram-block .item:hover .icon {
  background-color: var(--accent) !important;
}

.instagram-block .item:hover .icon .icon-instagram {
  color: var(--white) !important;
}

/* ══════════════════════════════════════════
   14. BRAND LOGOS — grayscale, fade-in
   ══════════════════════════════════════════ */
.brand-block {
  padding: 60px 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.brand-block .swiper-slide {
  opacity: 0.35 !important;
  filter: grayscale(100%) !important;
  transition: all 0.4s ease !important;
}

.brand-block .swiper-slide:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* ══════════════════════════════════════════
   15. FOOTER — clean, light bg with dividers
   ══════════════════════════════════════════ */
#footer .footer-main {
  background-color: var(--surface) !important;
}

#footer .footer-main .content-footer {
  padding: 72px 0 !important;
}

/* Footer logo */
#footer .company-infor a.logo {
  display: block !important;
  width: 140px !important;
  height: 40px !important;
  background-image: url('../images/brand/logo-footer.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#footer .company-infor a.logo:hover {
  transform: scale(1.03) !important;
}

#footer .heading3 {
  display: none !important;
}

/* Footer section titles */
#footer .text-button-uppercase {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--black) !important;
  margin-bottom: 4px !important;
}

/* Footer links */
#footer .caption1.has-line-before {
  color: var(--secondary) !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
}

#footer .caption1.has-line-before:hover {
  color: var(--accent) !important;
}

/* Newsletter input in footer */
#footer .newsletter .input-block {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

#footer .newsletter input {
  background-color: var(--white) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  font-size: 13px !important;
}

#footer .newsletter input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

#footer .newsletter button {
  background-color: var(--accent) !important;
  border-radius: var(--radius-md) !important;
}

/* Footer social icons */
#footer .list-social a {
  color: var(--secondary) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

#footer .list-social a:hover {
  color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

#footer .list-social a div {
  color: inherit !important;
}

/* Footer bottom bar */
#footer .footer-bottom {
  border-top: 1px solid var(--line) !important;
  padding: 20px 0 !important;
}

/* ══════════════════════════════════════════
   16. SECTION SPACING — Apple-level breathing room
   ══════════════════════════════════════════ */
.collection-block,
.tab-features-block,
.filter-product-block {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.what-new-block {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.banner-block {
  padding-top: 40px !important;
}

@media (max-width: 767.98px) {
  .collection-block,
  .tab-features-block,
  .filter-product-block {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .what-new-block {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Section headings */
.collection-block .heading3,
.tab-features-block .heading3,
.filter-product-block .heading3 {
  margin-bottom: 48px !important;
}

/* ══════════════════════════════════════════
   17. BG UTILITIES — refined
   ══════════════════════════════════════════ */
.bg-surface { background-color: var(--surface) !important; }
.bg-linear { background: linear-gradient(145deg, #F5F5F7 0%, #ECECEE 100%) !important; }
.bg-green { background-color: var(--accent) !important; color: var(--white) !important; }
.bg-red { background-color: var(--accent) !important; }
.bg-purple { background-color: var(--accent) !important; }
.bg-black { background-color: var(--black) !important; }

/* ══════════════════════════════════════════
   18. MODALS — frosted glass
   ══════════════════════════════════════════ */
.modal-newsletter .modal-newsletter-main,
.modal-cart-block .modal-cart-main,
.modal-wishlist-block .modal-wishlist-main,
.modal-quickview-block .modal-quickview-main,
.modal-search-block .modal-search-main,
.modal-sizeguide-block .modal-sizeguide-main {
  background-color: var(--white) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-cart-main .footer-modal .button-main,
.modal-wishlist-main .footer-modal .button-main {
  background-color: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
}

/* ══════════════════════════════════════════
   19. FORM ELEMENTS — clean, focused
   ══════════════════════════════════════════ */
input, textarea, select {
  font-family: 'Inter', sans-serif !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
textarea {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  background-color: var(--white) !important;
  color: var(--black) !important;
  font-size: 14px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-light) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--secondary2) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════
   20. SWIPER CONTROLS — refined
   ══════════════════════════════════════════ */
.swiper-pagination .swiper-pagination-bullet {
  border-color: var(--secondary2) !important;
  background: transparent !important;
  width: 8px !important;
  height: 8px !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: scale(1.4) !important;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-color: var(--accent) !important;
}

.section-swiper-navigation .swiper-button-prev,
.section-swiper-navigation .swiper-button-next,
.section-swiper-navigation .swiper-button-prev2,
.section-swiper-navigation .swiper-button-next2 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--black) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s ease !important;
}

.section-swiper-navigation .swiper-button-prev:hover,
.section-swiper-navigation .swiper-button-next:hover,
.section-swiper-navigation .swiper-button-prev2:hover,
.section-swiper-navigation .swiper-button-next2:hover {
  background-color: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

/* ══════════════════════════════════════════
   21. SCROLL TO TOP — floating pill
   ══════════════════════════════════════════ */
.scroll-to-top-btn {
  background-color: var(--accent) !important;
  color: var(--white) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 20px var(--accent-glow) !important;
  transition: all 0.3s ease !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-to-top-btn:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(58, 12, 163, 0.3) !important;
}

/* ══════════════════════════════════════════
   22. MOBILE MENU — clean overlay
   ══════════════════════════════════════════ */
#menu-mobile {
  background-color: var(--white) !important;
}

#menu-mobile .logo {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

#menu-mobile .list-nav > ul > li > a {
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.015em !important;
}

#menu-mobile .form-search input {
  border-radius: var(--radius-lg) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
}

#menu-mobile .form-search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

#menu-mobile .close-menu-mobile-btn {
  background-color: var(--surface) !important;
}

/* ══════════════════════════════════════════
   23. SHADOW & BOX OVERRIDES
   ══════════════════════════════════════════ */
.box-shadow-xs { box-shadow: var(--shadow-xs) !important; }
.box-shadow-sm { box-shadow: var(--shadow-sm) !important; }

.menu_bar {
  box-shadow: var(--shadow-lg) !important;
}

/* ══════════════════════════════════════════
   24. NEWSLETTER MODAL — special offer
   ══════════════════════════════════════════ */
.modal-newsletter-main .left {
  background-color: var(--accent) !important;
}

.modal-newsletter-main .left .text-red {
  color: var(--yellow) !important;
}

.modal-newsletter-main .close-newsletter-btn {
  border-color: var(--line) !important;
  transition: all 0.3s ease !important;
}

.modal-newsletter-main .close-newsletter-btn:hover {
  background-color: var(--surface) !important;
  border-color: var(--secondary2) !important;
}

/* ══════════════════════════════════════════
   25. SCROLLBAR — refined, minimal
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--secondary2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* ══════════════════════════════════════════
   26. FOCUS ACCESSIBILITY
   ══════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ══════════════════════════════════════════
   27. SMOOTH TRANSITIONS — global
   ══════════════════════════════════════════ */
a, button, .button-main, .product-item, .collection-item, .banner-item, .benefit-item {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════
   28. COMPARE MODAL
   ══════════════════════════════════════════ */
.modal-compare-block .modal-compare-main {
  background-color: var(--white) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ══════════════════════════════════════════
   29. DEAL / COUNTDOWN
   ══════════════════════════════════════════ */
.deal-block .countdown-time {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════
   30. BLOG ITEMS
   ══════════════════════════════════════════ */
.blog-item {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
}

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

.blog-item .blog-tag {
  background-color: var(--accent) !important;
  color: var(--white) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

/* ══════════════════════════════════════════
   31. FAQs
   ══════════════════════════════════════════ */
.faq-block .faq-item {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.faq-block .faq-item:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════
   32. LOOKBOOK
   ══════════════════════════════════════════ */
.lookbook-block .lookbook-item .dots {
  background-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(58, 12, 163, 0.15) !important;
}

/* ══════════════════════════════════════════
   33. BREADCRUMBS
   ══════════════════════════════════════════ */
.breadcrumb-block {
  background-color: var(--surface) !important;
  padding: 40px 0 !important;
}

.breadcrumb-block a {
  color: var(--secondary) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

.breadcrumb-block a:hover {
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════
   34. SEARCH FORM IN HEADER
   ══════════════════════════════════════════ */
.form-search input {
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface) !important;
  border: 1.5px solid transparent !important;
  font-size: 13px !important;
}

.form-search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
  background-color: var(--white) !important;
}

/* ══════════════════════════════════════════
   35. QUANTITY SELECTOR
   ══════════════════════════════════════════ */
.quantity-block {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
}

/* ══════════════════════════════════════════
   36. CART & WISHLIST COUNT BADGES — clean text style (desktop-only)
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
  .header-main .cart-count,
  .header-main .wishlist-count {
    background: transparent !important;
    color: var(--black) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
  }
}

/* ══════════════════════════════════════════
   37. MODALS STACKING OVERRIDE (FIX FOR FIXED NAVBAR)
   ══════════════════════════════════════════ */
.modal-newsletter,
.modal-video-block,
.modal-sizeguide-block,
.modal-quickview-block,
.modal-order-detail-block,
.modal-cart-block,
.modal-wishlist-block,
.modal-search-block {
  z-index: 100000 !important;
}

/* ══════════════════════════════════════════
   38. NAV SCROLL PROGRESS
   ══════════════════════════════════════════ */
.nav-scroll-progress {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  z-index: 1001 !important;
  pointer-events: none !important;
}

/* Divisor sutil entre nav primaria y nav secundaria */
.menu-main > ul > li.nav-divider::after {
  content: '' !important;
  position: absolute !important;
  right: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ══════════════════════════════════════════
   39. MEGA-MENU PRODUCTOS — panel visual creativo
   ══════════════════════════════════════════ */
.mega-productos {
  align-items: flex-start !important;
}

.mega-links {
  padding: 8px 0 !important;
}

.mega-link-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 10px !important;
  border-radius: 10px !important;
  transition: background-color 0.25s ease, transform 0.25s ease !important;
}

.mega-link-item:hover {
  background-color: rgba(123, 47, 255, 0.10) !important;
  transform: translateX(4px) !important;
}

.mega-link-icon {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(123, 47, 255, 0.12) !important;
  border: 1px solid rgba(123, 47, 255, 0.22) !important;
  color: var(--accent-hover) !important;
  font-size: 16px !important;
  transition: all 0.25s ease !important;
}

.mega-link-item:hover .mega-link-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

.mega-link-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mega-link-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: none !important;
}

.mega-link-sub {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.42) !important;
}

.mega-featured {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 260px !important;
  height: 300px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: block !important;
  margin: 8px 0 !important;
}

.mega-featured img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mega-featured:hover img {
  transform: scale(1.08) !important;
}

.mega-featured-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10,10,11,0.05) 0%, rgba(10,10,11,0.85) 100%) !important;
}

.mega-featured-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}

.mega-featured-copy {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mega-featured-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
}

.mega-featured-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  transition: gap 0.25s ease !important;
}

.mega-featured:hover .mega-featured-cta {
  gap: 10px !important;
}

.mega-featured-cta i {
  font-size: 13px !important;
  color: var(--accent-hover) !important;
}

/* Iconos dentro del dropdown Soporte */
.sub-menu-icon {
  font-size: 14px !important;
  color: rgba(123, 47, 255, 0.7) !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   40. LOGIN POPUP — texto legible en fondo oscuro
   ══════════════════════════════════════════ */
.login-popup .text-secondary {
  color: rgba(255, 255, 255, 0.5) !important;
}

.login-popup .text-black {
  color: #fff !important;
}

.login-popup .text-black:hover {
  color: var(--accent-hover) !important;
}

.login-popup .button-main.bg-white {
  background-color: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.24) !important;
}

.login-popup .button-main.bg-white:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

.login-popup .bottom.border-t {
  border-color: rgba(123, 47, 255, 0.18) !important;
}

.login-popup .body1 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.login-popup .body1:hover {
  color: var(--accent-hover) !important;
}

/* ══════════════════════════════════════════
   41. MOBILE MENU — tema oscuro Silent Status
   ══════════════════════════════════════════ */
#menu-mobile {
  background-color: var(--nav-bg) !important;
}

#menu-mobile .menu-container {
  background-color: var(--nav-bg) !important;
}

#menu-mobile .heading {
  border-bottom: 1px solid rgba(123, 47, 255, 0.16) !important;
  padding-bottom: 16px !important;
  margin-bottom: 4px !important;
}

#menu-mobile .logo {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
}

#menu-mobile .close-menu-mobile-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

#menu-mobile .close-menu-mobile-btn i {
  color: #fff !important;
}

#menu-mobile .form-search input {
  border-radius: var(--radius-lg) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

#menu-mobile .form-search input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

#menu-mobile .form-search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

#menu-mobile .form-search i {
  color: rgba(255, 255, 255, 0.5) !important;
}

#menu-mobile .list-nav > ul > li > a {
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 13px 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#menu-mobile .list-nav > ul > li:last-child > a {
  border-bottom: none !important;
}

#menu-mobile .list-nav > ul > li > a .mobile-link-icon {
  font-size: 18px !important;
  color: var(--accent-hover) !important;
}

#menu-mobile .list-nav > ul > li > a > span > i.ph-caret-right {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 15px !important;
}

/* Toggle rápido Mujer / Hombre */
.mobile-gender-row {
  border-bottom: none !important;
  padding: 4px 0 14px !important;
}

.mobile-gender-toggle {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}

.gender-pill {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 0 !important;
  border-radius: 999px !important;
  background-color: rgba(123, 47, 255, 0.10) !important;
  border: 1px solid rgba(123, 47, 255, 0.28) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 0.25s ease !important;
}

.gender-pill:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Sub-navegación mobile (Productos / Soporte) */
#menu-mobile .list-nav > ul > li .sub-nav-mobile {
  background-color: var(--nav-bg) !important;
}

#menu-mobile .list-nav > ul > li .sub-nav-mobile .back-btn {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 4px !important;
}

#menu-mobile .list-nav > ul > li .sub-nav-mobile .nav-item-mobile {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 15px !important;
}

#menu-mobile .list-nav > ul > li .sub-nav-mobile .nav-item-mobile:hover,
#menu-mobile .list-nav > ul > li .sub-nav-mobile .nav-item-mobile.active {
  color: #fff !important;
}

/* Enlaces de cuenta / carrito al pie del menú mobile */
#menu-mobile .list-nav > ul > li.pt-4.border-t {
  border-color: rgba(123, 47, 255, 0.16) !important;
}

#menu-mobile .list-nav > ul > li .text-secondary {
  color: rgba(255, 255, 255, 0.55) !important;
}

#menu-mobile .list-nav > ul > li .mobile-link-icon {
  font-size: 16px !important;
  color: var(--accent-hover) !important;
}

/* Ocultar elementos de cupón y notas en el modal del carrito */
.modal-cart-block .coupon-btn,
.modal-cart-block .note-btn,
.modal-cart-block .note-block,
.modal-cart-block .coupon-block,
.modal-cart-block .footer-modal > .flex.justify-center.border-b,
.modal-cart-block input[id="select-discount"],
.modal-cart-block label[for="select-discount"] {
  display: none !important;
}


/* Fix cart drawer width after removing wishlist sidebar */
.modal-cart-block .modal-cart-main {
    width: 540px !important;
}
@media (max-width: 1023.98px) {
    .modal-cart-block .modal-cart-main {
        width: 480px !important;
    }
}
@media (max-width: 575.98px) {
    .modal-cart-block .modal-cart-main {
        width: 100% !important;
    }
}