/* =========================================================
   ADDICT 502 - addict-fonts.css (FINAL)
   - Un solo archivo de overrides
   - No tocar app-*.css (build)
========================================================= */


/* ===============================
   HEADER PRINCIPAL
================================ */

header {
  background: #2EC4FF !important;
}

header .border-b {
  border-color: rgba(255,255,255,.25) !important;
}

/* Respeta elementos ocultos (muy importante para no “mostrar” paneles) */
header .hidden {
  display: none !important;
}


/* ===============================
   BADGE CARRITO
   ✅ FIX REAL: Bagisto suele renderizar el contador como <span class="absolute ...">1</span>
   - Solo afecta el header
   - Solo afecta el área del carrito
   - No toca el resto del sitio
================================ */

/* Mantener compatibilidad con tus clases anteriores (por si alguna vista las usa) */
.addict-cart-badge,
.badge-cart {
  background: #FF7A00 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
}

/* El contenedor/link del carrito (varias formas comunes) */
header a[href*="checkout/cart"],
header a[href*="/cart"],
header [aria-label*="Cart"],
header [aria-label*="carrito"] {
  position: relative !important;
}

/* El contador real: normalmente es un span con 'absolute' */
header a[href*="checkout/cart"] span.absolute,
header a[href*="/cart"] span.absolute,
header [aria-label*="Cart"] span.absolute,
header [aria-label*="carrito"] span.absolute {
  background: #FF7A00 !important;
  color: #ffffff !important;

  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  padding: 0 6px !important;
  border-radius: 9999px !important;

  /* Burbuja arriba-derecha */
  top: -6px !important;
  right: -8px !important;

  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  z-index: 999 !important;
}

/* Si Tailwind le puso fondo/transparencia o border raro, lo anulamos */
header a[href*="checkout/cart"] span.absolute * ,
header a[href*="/cart"] span.absolute * ,
header [aria-label*="Cart"] span.absolute * ,
header [aria-label*="carrito"] span.absolute * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ===============================
   BOTONES MENÚ HORIZONTAL (Amazon/Vender/Ofertas)
   ⚠️ NO tocamos spacing ni display (solo sombra suave)
================================ */

header a[style*="background"] {
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}


/* =========================================================
   DROPDOWNS DEL HEADER (GLASS) - SAFE
   IMPORTANTÍSIMO:
   - NO forzar display/flex
   - Solo dar estilo visual y eliminar “franjas”
========================================================= */

/* Panel dropdown: glass 50% */
header [role="menu"],
header [data-dropdown],
header .dropdown-menu,
header .menu-dropdown,
header .v-dropdown-content,
header .v-menu__content,
header .relative > .absolute {
  background: rgba(0,0,0,0.50) !important;   /* 50% */
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35) !important;

  border-radius: 14px !important;
  overflow: hidden !important;              /* recorta bordes y elimina franjas */
  padding: 0 !important;                    /* sin “aire” interno */

  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;

  z-index: 999999 !important;
}

/* Texto dentro del dropdown: blanco */
header [role="menu"] *,
header [data-dropdown] *,
header .dropdown-menu *,
header .menu-dropdown *,
header .v-dropdown-content *,
header .v-menu__content *,
header .relative > .absolute * {
  color: rgba(255,255,255,0.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.96) !important;
}

/* Quitar espacios típicos (wrappers / listas / gaps / space-y) */
header [role="menu"] ul,
header [data-dropdown] ul,
header .dropdown-menu ul,
header .menu-dropdown ul,
header .v-dropdown-content ul,
header .v-menu__content ul,
header .relative > .absolute ul,
header [role="menu"] ol,
header [data-dropdown] ol,
header .dropdown-menu ol,
header .menu-dropdown ol,
header .v-dropdown-content ol,
header .v-menu__content ol,
header .relative > .absolute ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 0 !important;
}

/* Mata el “space-y-*” de Tailwind si existe */
header [role="menu"] > * + *,
header [data-dropdown] > * + *,
header .dropdown-menu > * + *,
header .menu-dropdown > * + *,
header .v-dropdown-content > * + *,
header .v-menu__content > * + *,
header .relative > .absolute > * + * {
  margin-top: 0 !important;
}

/* Wrappers comunes alrededor de <a> */
header [role="menu"] li,
header [role="menu"] div,
header [role="menu"] p,
header [data-dropdown] li,
header [data-dropdown] div,
header [data-dropdown] p,
header .dropdown-menu li,
header .dropdown-menu div,
header .dropdown-menu p,
header .menu-dropdown li,
header .menu-dropdown div,
header .menu-dropdown p,
header .v-dropdown-content li,
header .v-dropdown-content div,
header .v-dropdown-content p,
header .v-menu__content li,
header .v-menu__content div,
header .v-menu__content p,
header .relative > .absolute li,
header .relative > .absolute div,
header .relative > .absolute p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Evita que “gap” interno se meta por contenedores flex/grid */
header [role="menu"] .flex,
header [role="menu"] .grid,
header [data-dropdown] .flex,
header [data-dropdown] .grid,
header .dropdown-menu .flex,
header .dropdown-menu .grid,
header .menu-dropdown .flex,
header .menu-dropdown .grid,
header .v-dropdown-content .flex,
header .v-dropdown-content .grid,
header .v-menu__content .flex,
header .v-menu__content .grid,
header .relative > .absolute .flex,
header .relative > .absolute .grid {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Items (links) dentro del dropdown */
header [role="menu"] a,
header [data-dropdown] a,
header .dropdown-menu a,
header .menu-dropdown a,
header .v-dropdown-content a,
header .v-menu__content a,
header .relative > .absolute a {
  display: block !important;
  width: 100% !important;

  margin: 0 !important;
  border: 0 !important;

  background: rgba(255,255,255,0.50) !important; /* 50% */
  border-radius: 0 !important;

  padding: 14px 16px !important;
  text-decoration: none !important;

  transition: background-color .14s ease !important;
}

/* Hover */
header [role="menu"] a:hover,
header [data-dropdown] a:hover,
header .dropdown-menu a:hover,
header .menu-dropdown a:hover,
header .v-dropdown-content a:hover,
header .v-menu__content a:hover,
header .relative > .absolute a:hover {
  background: rgba(255,255,255,0.40) !important; /* 40% */
}

/* Separadores */
header [role="menu"] hr,
header [data-dropdown] hr,
header .dropdown-menu hr,
header .menu-dropdown hr,
header .v-dropdown-content hr,
header .v-menu__content hr,
header .relative > .absolute hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* pseudo */
header [role="menu"] *::before,
header [role="menu"] *::after,
header [data-dropdown] *::before,
header [data-dropdown] *::after,
header .dropdown-menu *::before,
header .dropdown-menu *::after,
header .menu-dropdown *::before,
header .menu-dropdown *::after,
header .v-dropdown-content *::before,
header .v-dropdown-content *::after,
header .v-menu__content *::before,
header .v-menu__content *::after,
header .relative > .absolute *::before,
header .relative > .absolute *::after {
  border: 0 !important;
}


/* ===============================
   TIPOGRAFÍA MARCA
================================ */

.addict-catlink,
.addict-catdropdown,
.addict-catdropdown * {
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* =========================================================
   USER DROPDOWN (panel de cuenta) - SOLO si contiene login/register
   No afecta dropdown de categorías.
========================================================= */

/* 1) El contenedor del dropdown que tenga links de login/register */
header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]),
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]),
header .v-dropdown-content:has(a[href*="/customer/login"], a[href*="/customer/register"]),
header .v-menu__content:has(a[href*="/customer/login"], a[href*="/customer/register"]) {
  padding: 14px !important;
  border-radius: 16px !important;
}

/* 2) Título y subtítulo */
header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]) h1,
header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]) h2,
header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]) h3,
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]) h1,
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]) h2,
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]) h3 {
  margin: 0 0 6px 0 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]) p,
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]) p,
header .v-dropdown-content:has(a[href*="/customer/login"], a[href*="/customer/register"]) p,
header .v-menu__content:has(a[href*="/customer/login"], a[href*="/customer/register"]) p {
  margin: 0 0 12px 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* 3) Contenedor de botones */
header .absolute:has(a[href*="/customer/login"], a[href*="/customer/register"]) .flex,
header .dropdown-menu:has(a[href*="/customer/login"], a[href*="/customer/register"]) .flex,
header .v-dropdown-content:has(a[href*="/customer/login"], a[href*="/customer/register"]) .flex,
header .v-menu__content:has(a[href*="/customer/login"], a[href*="/customer/register"]) .flex {
  gap: 0 !important;
}

/* 4) Botones Login/Register */
header a[href*="/customer/login"],
header a[href*="/customer/register"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50% !important;
  height: 54px !important;

  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;

  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;

  background: rgba(255,255,255,0.45) !important;
}

/* 5) Redondeo */
header a[href*="/customer/login"] {
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

header a[href*="/customer/register"] {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* 6) Hover */
header a[href*="/customer/login"]:hover,
header a[href*="/customer/register"]:hover {
  background: rgba(255,255,255,0.35) !important;
}

/* BADGE CARRITO - FIX FINAL (burbuja real) */
header .addict-cart-badge {
  background: #FF7A00 !important;
  background-color: #FF7A00 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 18px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;

  border-radius: 9999px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 18px !important;

  position: absolute !important;
  top: -6px !important;   /* antes estaba demasiado arriba (-top-4) */
  right: -6px !important; /* mejor pegado al icono */

  z-index: 999999 !important;
  pointer-events: none !important;
}