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

/* Fuente y variables (puedes quitar la import si ya la usas) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root{
  --annika-purple:#6f3a7c;
  --annika-pink:#ff3b9d;
  --annika-text:#111;
  --annika-muted:#8b8b8b;
}

/* Tipografía base del header */
header, header .navbar, header .nav-link, header input, header .item-cart-menu {
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.1px;
}

/* Ocultar barra “top-nav” (no aparece en la captura) */
header .top-nav{ display:none !important; }

/* ---------- Franja superior (logo + buscador + iconos) ---------- */
.angulo-header-main .top-content{ padding:14px 0; background:#fff; }
.angulo-header-main .top-content .d-flex{ align-items:center; gap:16px; }

/* Logo: altura visual limpia */
.angulo-header-main .top-content .img-with{ max-height:42px; width:auto; }

/* Contenedor del buscador ocupa todo */
.angulo-header-main .form-box{ flex:1 1 auto; max-width:980px; }

/* Input como “pill” grande */
.angulo-header-main .intBuscar{
  height:56px; border:2px solid #E5E6EA !important; background:#fafafa;
  border-radius:36px; padding:0 64px 0 20px; font-size:16px; color:var(--annika-text);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}

/* Botón lupa: círculo rosa pegado a la derecha del input */
.angulo-header-main .search-input{
  position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--annika-pink); color:#fff !important; display:grid; place-items:center;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.12);
  cursor:pointer;
}
.angulo-header-main .search-input i{ color:#fff !important; font-size:18px !important; }

/* ---------- Barra morada (menú) ---------- */
.navbar-fondo{ background:var(--annika-purple) !important; }
.navbar-fondo .navbar-nav{ align-items:center; gap:12px; }
.navbar-fondo .nav-link{
  color:#fff !important; opacity:.92; font-weight:500; font-size:15px; padding:12px 14px !important;
}
.navbar-fondo .nav-link:hover{ opacity:1; text-decoration:none; }

/* “Categorías” como chip blanco con icono dentro rosa */
#products_item .nav-link{
  background:#fff; color:#000 !important; border-radius:999px; padding:10px 16px 10px 54px !important;
  line-height:1; display:inline-block; position:relative; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#products_item .nav-link::before{
  content:"\f0c9"; /* fa-bars */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--annika-pink); color:#fff; box-shadow:0 0 0 4px #fff;
}
#products_item .nav-link:hover{ box-shadow:0 3px 12px rgba(0,0,0,.12); }

/* Quitar subrayado/marker activo “Home (current)” */
.navbar-fondo .nav-item.active .nav-link .sr-only{ display:none; }

/* ---------- Iconos derechos (usuario, carrito) ---------- */
.item-cart-menu{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; }
.item-cart-menu i{ font-size:20px !important; }

/* Usuario: círculo blanco */
.navbar .fa-user{ color:#000; }
.navbar a.item-cart-menu[href="#"][data-action="session-login"],
.angulo-header-main .d-lg-flex .item-cart-menu{
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* Carrito: círculo rosa */
.navbar .fa-shopping-cart{ color:#fff !important; }
a.item-cart-menu .fa-shopping-cart{ }
a.item-cart-menu[href*="carrito"]{ background:var(--annika-pink); box-shadow:0 2px 8px rgba(0,0,0,.18); }

/* Badge del carrito pequeño, arriba a la derecha */
.cart-items-badge{
  position:absolute; top:-6px; right:-6px; background:#fff; color:var(--annika-pink);
  font-weight:700; border-radius:12px; min-width:20px; height:20px; display:grid; place-items:center;
  font-size:12px; padding:0 6px; box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* Mostrar “$ 0.00” al lado del carrito (la captura lo muestra) */
.text-order{ color:#fff; font-size:13px; line-height:1.1; }
.cart-items-total{ display:inline !important; font-weight:600; }

/* Ocultar el texto “Ingresá o registrate” para que quede solo el icono en desktop */
@media (min-width: 992px){
  .d-lg-flex .p-2 > a[data-action="session-login"] span:first-child{ display:none !important; }
}

/* Dropdowns de categorías: fondo morado y textos blancos */
#dropdown-submenu-products,
#dropdown-submenu-products-responsive{
  background:var(--annika-purple) !important; color:#fff !important;
  border:0; box-shadow:0 12px 28px rgba(0,0,0,.22);
}
#dropdown-submenu-products a,
#dropdown-submenu-products-responsive a{ color:#fff !important; }
#dropdown-submenu-products .fas,
#dropdown-submenu-products-responsive .fas{ color:#fff !important; }

/* Bordes y detalles */
.navbar-dark-v{ border-top:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px){
  /* Mantener UX móvil nativa del tema */
  .angulo-header-main .intBuscar{ height:48px; }
  .angulo-header-main .search-input{ width:40px; height:40px; }
  /* Chip de categorías se vuelve link plano */
  #products_item .nav-link{
    background:transparent; color:#fff !important; padding:10px 14px !important; box-shadow:none;
  }
  #products_item .nav-link::before{ display:none; }
  /* Ocultar “Pedidos” en móvil */
  .text-order{ display:none !important; }
}

/* ====== ANNIKA – Revisión alineación y alturas ====== */
:root{
  --annika-purple:#6f3a7c;
  --annika-pink:#ff3b9d;

  /* Dimensiones claves según el boceto */
  --h-pill:46px;      /* alto del buscador */
  --h-chip:36px;      /* alto del chip "Categorías" */
  --h-icon:36px;      /* alto/ancho de los íconos circulares */
}

/* Quita la barra superior del todo (no aparece en el boceto) */
header .top-nav{ display:none !important; }

/* ---------- Franja blanca (logo + buscador + iconos) ---------- */
.angulo-header-main .top-content{
  padding:10px 0 !important;   /* más baja */
  background:#fff;
}
.angulo-header-main .top-content .d-flex{
  align-items:center !important;
  gap:14px;
}

/* Logo */
.angulo-header-main .top-content .img-with{
  max-height:40px; width:auto;
}

/* Buscador más corto y con alturas precisas */
.angulo-header-main .form-box{ flex:1 1 auto; max-width:720px !important; }
.angulo-header-main .intBuscar{
  height:var(--h-pill) !important;
  border:2px solid #E5E6EA !important;
  background:#fafafa;
  border-radius:28px !important;
  padding:0 54px 0 16px !important;
  font-size:15px !important;
  line-height:var(--h-pill) !important;
}
.angulo-header-main .search-input{
  right:6px !important; top:50% !important; transform:translateY(-50%);
  width:var(--h-icon); height:var(--h-icon);
  border-radius:50%;
  background:var(--annika-pink) !important; color:#fff !important;
  display:grid; place-items:center;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.angulo-header-main .search-input i{ color:#fff !important; font-size:17px !important; }

/* Compactar paddings de los contenedores de iconos para alinear eje vertical */
header .top-content .p-2{ padding:.2rem .35rem !important; }

/* ---------- Barra morada (menú) ---------- */
.navbar-fondo{
  background:var(--annika-purple) !important;
  padding:6px 0 !important;                 /* más baja */
  border-bottom:3px solid var(--annika-pink);
}
.navbar-fondo .container,
.navbar-fondo .navbar-nav{ align-items:center !important; }
.navbar-fondo .nav-link{
  color:#fff !important; font-weight:500; font-size:15px;
  padding:8px 12px !important; line-height:1 !important;
}

/* Subrayado blanco solo en el activo (Home) como en el boceto */
.navbar-fondo .nav-item.active .nav-link{ position:relative; }
.navbar-fondo .nav-item.active .nav-link::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:68px; height:3px; background:#fff; border-radius:3px;
}

/* ---------- Chip “Categorías” ---------- */
#products_item .nav-link{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#000 !important; font-weight:600;
  min-height:var(--h-chip); border-radius:999px;
  padding:6px 14px 6px 48px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#products_item .nav-link::before{
  content:"\f0c9"; /* fa-bars (Font Awesome 5/6) */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--annika-pink); color:#fff;
  box-shadow:0 0 0 4px #fff;
}

/* ---------- Íconos: usuario (blanco) y carrito (rosa) alineados ---------- */
.item-cart-menu{
  width:var(--h-icon); height:var(--h-icon);
  border-radius:50%; display:grid; place-items:center;
  position:relative;
}

/* Usuario: círculo blanco */
.angulo-header-main .d-lg-flex .item-cart-menu,
.navbar [data-action="session-login"].item-cart-menu{
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.navbar .fa-user{ font-size:18px !important; color:#000; }

/* Carrito: círculo rosa */
a.item-cart-menu[href*="carrito"]{
  background:var(--annika-pink) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.navbar .fa-shopping-cart{ font-size:18px !important; color:#fff !important; }

/* Badge del carrito como en el print (negro, pequeño) */
.cart-items-badge{
  position:absolute; top:-6px; right:-8px;
  background:#111; color:#fff; border:2px solid #fff;
  font-weight:700; border-radius:10px; min-width:18px; height:18px;
  display:grid; place-items:center; font-size:11px; padding:0 5px;
}

/* Texto “Pedidos $0.00” en línea con los íconos */
.text-order{ color:#fff; font-size:13px; margin-left:8px; line-height:1.15; }
.cart-items-total{ display:inline !important; font-weight:700; }

/* ---------- Dropdowns (mismo look) ---------- */
#dropdown-submenu-products,
#dropdown-submenu-products-responsive{
  background:var(--annika-purple) !important; color:#fff !important; border:0;
}
#dropdown-submenu-products a,
#dropdown-submenu-products-responsive a{ color:#fff !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .angulo-header-main .intBuscar{ height:44px !important; }
  .angulo-header-main .search-input{ width:34px; height:34px; }
  /* Chip de categorías plano en móvil */
  #products_item .nav-link{
    background:transparent; color:#fff !important; box-shadow:none; padding:8px 10px !important;
  }
  #products_item .nav-link::before{ display:none; }
  .text-order{ display:none !important; }
}


/* ===== Fix final – altura/alineación según boceto ===== */
:root{
  --annika-purple:#6f3a7c;
  --annika-pink:#ff3b9d;

  --bar-pad-y: 3px;     /* barra violeta ~mitad de alta */
  --icon: 30px;         /* diámetro iconos (usuario, carrito, lupa) */
  --chip-h: 32px;       /* alto chip “Categorías” */
  --search-h: 42px;     /* alto buscador */
  --search-w: 640px;    /* ancho buscador más corto */
  --lupa: 32px;         /* diámetro botón lupa */
}

/* quitar barra superior extra */
header .top-nav{ display:none !important; }

/* ---------- franja blanca (logo + buscador + iconos) ---------- */
.angulo-header-main .top-content{ padding:8px 0 !important; background:#fff; }
.angulo-header-main .top-content .d-flex{ align-items:center !important; gap:14px; }
.angulo-header-main .top-content .img-with{ max-height:38px; width:auto; }

/* buscador más corto y más bajo */
.angulo-header-main .form-box{ flex:1 1 auto; max-width:var(--search-w) !important; }
.angulo-header-main .intBuscar{
  height:var(--search-h) !important;
  line-height:var(--search-h) !important;
  border:2px solid #E5E6EA !important;
  background:#fafafa;
  border-radius:26px !important;
  padding:0 48px 0 14px !important;
  font-size:14.5px !important;
}
.angulo-header-main .search-input{
  right:6px !important; top:50% !important; transform:translateY(-50%);
  width:var(--lupa); height:var(--lupa); border-radius:50%;
  background:var(--annika-pink) !important; color:#fff !important;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.angulo-header-main .search-input i{ font-size:16px !important; color:#fff !important; }

/* ---------- barra violeta (menú) ---------- */
.navbar-fondo{
  background:var(--annika-purple) !important;
  padding:var(--bar-pad-y) 0 !important;            /* mitad de alta */
  border-bottom:3px solid var(--annika-pink);
}
.navbar-fondo .container{ display:flex; align-items:center; }
.navbar-fondo .navbar-nav{ display:flex; align-items:center; gap:10px; }
.navbar-fondo .nav-link{
  color:#fff !important; font-weight:500; font-size:14.5px;
  padding:8px 10px !important; line-height:1 !important;
}

/* subrayado de “Home” */
.navbar-fondo .nav-item.active .nav-link{ position:relative; }
.navbar-fondo .nav-item.active .nav-link::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:64px; height:3px; background:#fff; border-radius:3px;
}

/* ---------- chip “Categorías” (alineado) ---------- */
#products_item .nav-link{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  min-height:var(--chip-h); border-radius:999px;
  background:#fff; color:#000 !important; font-weight:600;
  padding:5px 14px 5px 46px !important; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#products_item .nav-link::before{
  content:"\f0c9";  /* fa-bars */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--annika-pink); color:#fff;
  box-shadow:0 0 0 4px #fff;
}

/* ---------- iconos derechos (alineados al píxel) ---------- */
.item-cart-menu{
  width:var(--icon); height:var(--icon);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  line-height:1; position:relative; transform:translateY(1px); /* corrige desfase visual */
}

/* usuario: círculo blanco */
.angulo-header-main .d-lg-flex .item-cart-menu,
.navbar [data-action="session-login"].item-cart-menu{
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.navbar .fa-user{ font-size:17px !important; color:#000; transform:translateY(-1px); }

/* carrito: círculo rosa */
a.item-cart-menu[href*="carrito"]{
  background:var(--annika-pink) !important; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.navbar .fa-shopping-cart{ font-size:17px !important; color:#fff !important; transform:translateY(-1px); }

/* badge negro pequeño como en boceto */
.cart-items-badge{
  position:absolute; top:-6px; right:-8px; background:#111; color:#fff;
  border:2px solid #fff; font-weight:700; border-radius:10px;
  min-width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; padding:0 4px;
}

/* “Pedidos $0.00” alineado al eje de iconos */
.text-order{ color:#fff; font-size:13px; margin-left:8px; line-height:1; transform:translateY(1px); }
.cart-items-total{ display:inline !important; font-weight:700; }

/* oculta texto “Ingresá o registrate” en desktop para no desalinear */
@media (min-width: 992px){
  .d-lg-flex .p-2 > a[data-action="session-login"] span:first-child{ display:none !important; }
}

/* dropdowns */
#dropdown-submenu-products,
#dropdown-submenu-products-responsive{
  background:var(--annika-purple) !important; color:#fff !important; border:0;
}
#dropdown-submenu-products a,
#dropdown-submenu-products-responsive a{ color:#fff !important; }

/* responsive */
@media (max-width: 991.98px){
  .angulo-header-main .intBuscar{ height:40px !important; }
  .angulo-header-main .search-input{ width:30px; height:30px; }
  #products_item .nav-link{ background:transparent; color:#fff !important; box-shadow:none; padding:8px 10px !important; }
  #products_item .nav-link::before{ display:none; }
  .text-order{ display:none !important; }
}


/* ====== FIX: Hamburguesa dentro del chip y centrado de iconos ====== */

/* Dimensiones consistentes */
:root{
  --chip-h: 32px;      /* alto del chip "Categorías" */
  --chip-icon: 26px;   /* diámetro del círculo rosa dentro del chip */
  --icon: 30px;        /* diámetro de usuario/carrito */
}

/* --- Chip "Categorías": el icono NO sobresale y queda centrado --- */
#products_item .nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:var(--chip-h);
  padding:4px 14px 4px 52px !important;  /* deja espacio al círculo rosa */
  border-radius:999px;
}
#products_item .nav-link::before{
  content:"\f0c9"; /* fa-bars */
  font-family:"Font Awesome 5 Free","Font Awesome 6 Free"; /* fallback */
  font-weight:900;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:var(--chip-icon);
  height:var(--chip-icon);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--annika-pink);
  color:#fff;
  box-shadow:0 0 0 4px #fff;                /* aro blanco como en el boceto */
  line-height:1;                            /* evita desbordes verticales */
  pointer-events:none;                      /* no bloquea el click del link */
}

/* --- Usuario y Carrito: perfectamente centrados en su círculo --- */
.item-cart-menu{
  width:var(--icon);
  height:var(--icon);
  border-radius:50%;
  display:grid;
  place-items:center;     /* centro real */
  line-height:0;          /* quita ascendentes del <i> */
  transform:none !important;               /* elimina ajustes previos */
}
.item-cart-menu i{
  display:block;
  line-height:1;          /* tamaño exacto del glifo */
  margin:0 !important;
  transform:none !important;
  font-size:17px !important;
}
/* círculos específicos (colores ya definidos en tu CSS anterior) */
.navbar [data-action="session-login"].item-cart-menu{ background:#fff; }
a.item-cart-menu[href*="carrito"]{ background:var(--annika-pink) !important; }

/* Badge del carrito, fino y bien colocado */
.cart-items-badge{
  top:-6px; right:-8px;
  transform:none !important;
}

/* Alineación vertical del texto "Pedidos $0.00" con los iconos */
.text-order{ line-height:1; transform:none !important; }

/* En caso de que el tema imponga line-height a los enlaces del menú */
.navbar-fondo .nav-link{ line-height:1 !important; }


/* ===== Centrados verticales exactos (usuario y carrito) ===== */

/* Fuerza centrado del contenedor circular */
.item-cart-menu{
  display:grid !important;
  place-items:center !important;
  line-height:0 !important;
}

/* Nudge fino hacia abajo para compensar la línea base de Font Awesome */
.item-cart-menu i{
  display:block;
  line-height:0.5;
  transform:translateY(0.5px) !important;  /* si aún lo notas alto, prueba 2px */
}

/* (opcional) ajustes independientes si ves diferencia entre ambos */
.item-cart-menu .fa-user{ transform:translateY(0.5px) !important; }
.item-cart-menu .fa-shopping-cart{ transform:translateY(0.5px) !important; }


/* === Usuario: solo borde, sin relleno === */
:root{ --user-stroke: 2px; --user-stroke-color:#111; } /* ajusta grosor/color si quieres */

.item-cart-menu .fa-user{
  /* centrado fino que ya veníamos usando */
  transform: translateY(0.5px) !important;

  /* outline-only */
  color: transparent !important;
  -webkit-text-fill-color: transparent;          /* Chrome/Safari */
  -webkit-text-stroke: var(--user-stroke) var(--user-stroke-color);
  text-stroke: var(--user-stroke) var(--user-stroke-color); /* fallback futuro */
}

/* === Carrito: badge blanco con texto #E4418D === */
.cart-items-badge{
  background:#fff !important;
  color:#E4418D !important;
  border:none !important;             /* sin aro */
  box-shadow:0 1px 3px rgba(0,0,0,.12); /* suave para que se lea sobre el rosa */
}

/* Asegura el centrado vertical del carrito también */
.item-cart-menu .fa-shopping-cart{
  transform: translateY(0.5px) !important;
}


/* === Categorías: círculo/“hamburguesa” más chico y 100% dentro del chip === */
:root{
  --chip-h: 32px;        /* alto del botón */
  --chip-icon: 24px;     /* diámetro del círculo rosa (antes 26) */
  --chip-ring: 3px;      /* aro blanco (antes 4) */
}

/* altura y padding del chip */
#products_item .nav-link{
  height: var(--chip-h);
  line-height: var(--chip-h);
  /* deja el espacio exacto para el círculo + aro + separación */
  padding: 4px 14px 4px calc(12px + var(--chip-icon) + (var(--chip-ring)*2) + 12px) !important;
  border-radius: 999px;
}

/* círculo rosa centrado, sin sobresalir */
#products_item .nav-link::before{
  content:"\f0c9"; /* fa-bars */
  font-family:"Font Awesome 5 Free","Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:var(--chip-icon) !important;
  height:var(--chip-icon) !important;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--annika-pink);
  color:#fff;
  box-shadow:0 0 0 var(--chip-ring) #fff !important; /* aro más fino */
  line-height:1;
  font-size:12px;  /* tamaño del glifo dentro del círculo */
  pointer-events:none;
}

/* ===== Dropdown de CATEGORÍAS: pegado al botón + efecto ===== */

/* El contenedor del navbar será el referente para posicionar */
.navbar-fondo .container{ position:relative; z-index:60; }

/* Caja del dropdown (desktop) */
#dropdown-submenu-products{
  position:absolute !important;
  left: var(--dd-left, 12px) !important;    /* se actualiza por JS */
  top:  var(--dd-top, 48px) !important;     /* se actualiza por JS */
  min-width: 360px;
  max-width: 820px;
  border:0 !important;
  border-radius:12px;
  background:var(--annika-purple) !important;
  color:#fff !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.06);
  /* efecto moderno: fade + slide + micro-scale */
  transform: translateY(-8px) scale(.985);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}

/* Cuando se abre (Bootstrap agrega .show) */
#dropdown-submenu-products.show{
  transform: translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}

/* Contenido interno más compacto */
#dropdown-submenu-products .content-container{ padding:12px 16px !important; }
#dropdown-submenu-products a{ color:#fff !important; }

/* “Flechita” opcional hacia el chip */
#dropdown-submenu-products::before{
  content:"";
  position:absolute; top:-6px; left:18px;
  width:12px; height:12px;
  background:var(--annika-purple);
  transform: rotate(45deg);
  box-shadow:-2px -2px 6px rgba(0,0,0,.06);
}

/* Asegura que los estilos viejos no desplacen el menú */
#dropdown-submenu-products{
  width:auto !important;
  max-height: 60vh !important;
  overflow:auto !important;
  left: auto; transform-origin: 24px top;
}

/* En mobile seguimos usando el menú responsive nativo */
@media (max-width: 991.98px){
  #dropdown-submenu-products{ display:none !important; }
}

/* ===== Dropdown CATEGORÍAS ===== */

/* el container del nav será el referente del posicionamiento */
.navbar-fondo .container{ position:relative; z-index:70; }

/* caja del dropdown (desktop) */
#dropdown-submenu-products{
  position:absolute !important;
  /* coords se setean por JS con variables CSS */
  left:var(--dd-left, 0) !important;
  top:var(--dd-top, 0) !important;

  width:auto !important;    
  max-width:820px !important;
  min-width:360px !important;

  border:0 !important;
  border-radius:12px !important;
  background:var(--annika-purple) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.06);

  transform:translateY(-8px) scale(.985);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  overflow:auto !important;              /* solo vertical si hiciera falta */
  overflow-x:hidden !important;          /* asegura 0 scroll horizontal */
}

#dropdown-submenu-products.show{
  transform:translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}

#dropdown-submenu-products .content-container{ padding:12px 16px !important; }
#dropdown-submenu-products a{ color:#fff !important; }

/* flechita opcional hacia el chip */
#dropdown-submenu-products::before{
  content:"";
  position:absolute; top:-6px; left:24px;
  width:12px; height:12px; transform:rotate(45deg);
  background:var(--annika-purple);
  box-shadow:-2px -2px 6px rgba(0,0,0,.06);
}

/* por si algo externo intenta imponer un ancho con viewport */
#dropdown-submenu-products,
#dropdown-submenu-products *{ max-width:unset; }

/* mobile: seguimos usando el menú responsive nativo */
@media (max-width:991.98px){
  #dropdown-submenu-products{ display:none !important; }
}

/* Dropdown categorías: sobre todo y sin desbordes */
#dropdown-submenu-products{
  position:absolute !important;
  left:var(--dd-left, 0) !important;
  top:var(--dd-top, 0) !important;
  z-index: 90 !important;
  width:auto !important;
  max-width:820px !important;
  min-width:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:0 !important;
  border-radius:7px !important;
  background:var(--annika-purple) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-8px) scale(.985);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}
#dropdown-submenu-products.show{
  transform: translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}

/* Flechita alineada al texto del chip (no al círculo) */
#dropdown-submenu-products::before{
  content:"";
  position:absolute;
  top:-8px;                      /* más arriba para “pegarlo” */
  left:calc( var(--dd-arrow-left, 56px) ); /* se setea por JS */
  width:12px; height:12px;
  transform:rotate(45deg);
  background:var(--annika-purple);
  box-shadow:-2px -2px 6px rgba(0,0,0,.06);
}

/* Evita que estilos viejos impongan 100vw */
#dropdown-submenu-products, #dropdown-submenu-products *{ max-width:unset; }


/* === Quitar por completo la línea inferior del header === */

/* 1) Anula cualquier borde/sombra en los contenedores del header */
header,
header .angulo-header-main,
header .angulo-header-main .top-content,
header nav.navbar-fondo,
header nav.navbar-dark-v,
header nav.navbar-fondo > .container {
  border-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: 0 !important;
}

/* 2) Si la línea viene de pseudo-elementos del nav o container */
header nav.navbar-fondo::before,
header nav.navbar-fondo::after,
header nav.navbar-fondo > .container::before,
header nav.navbar-fondo > .container::after,
header .angulo-header-main::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

/* 3) (IMPORTANTE) Nuestro CSS previo agregaba esta línea rosa:
      .navbar-fondo { border-bottom:3px solid var(--annika-pink); }
   La anulamos explícitamente aquí. */
.navbar-fondo { border-bottom: 0 !important; }

/* 4) Fallback: si algún borde sigue “filtrándose”, lo tapamos con un mask */
header nav.navbar-fondo {
  position: relative;
}
header nav.navbar-fondo::after {
  /* Capa del color de fondo para ocultar cualquier línea residual */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 6px;
  background: var(--annika-purple);
  pointer-events: none;
  z-index: 1;
}

footer .pre-footer {
    border-top: 0px !important;
}


/*===============HEADER MOVIL ===================*/
/* ========== MOBILE POLISH (≤991.98px) ========== */
@media (max-width: 991.98px){

  /* --- HAMBURGUESA (botón que despliega el menú) EN GRIS --- */
  header .navbar-toggler{
    border:0 !important;
    padding:6px !important;
  }
  header .navbar-toggler:focus{ outline:0; box-shadow:none !important; }
  header .navbar-toggler .navbar-toggler-icon{
    width:28px; height:28px; background-repeat:no-repeat; background-size:100% 100%;
    /* SVG embebido con barras grises (#9EA0A5) */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%239EA0A5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    filter:none !important;
  }

  /* --- ICONOS: buscar / usuario / carrito (alineados y del mismo tamaño) --- */
  .item-cart-menu{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; }
  .item-cart-menu i{ font-size:16px !important; line-height:1; transform:translateY(0.5px) !important; }

  /* Usuario: sólo contorno */
  .item-cart-menu .fa-user{
    color:transparent !important; -webkit-text-fill-color:transparent;
    -webkit-text-stroke:2px #111; text-stroke:2px #111;
  }
  /* Buscar: círculo blanco y lupa rosa como desktop */
  .search-movil.item-cart-menu{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12); }
  .search-movil .fa-search{ color:var(--annika-pink); }

  /* Carrito rosa + badge blanco con texto #E4418D */
  a.item-cart-menu[href*="carrito"]{ background:var(--annika-pink); }
  .cart-items-badge{
    top:-5px; right:-6px; min-width:14px; height:14px; font-size:10px;
    background:#fff !important; color:#E4418D !important; border:none !important;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
  }

  /* --- Franja superior compacta --- */
  .angulo-header-main .top-content{ padding:8px 0 !important; }

  /* --- DROPDOWN DE CATEGORÍAS (versión móvil) A 100% --- */
  #dropdown-submenu-products{ display:none !important; } /* oculta el de desktop */
  #dropdown-submenu-products-responsive.dropdown-menu{
    position:fixed !important;
    left:0 !important; right:0 !important;
    top:var(--ddm-top, 88px);                      /* se ajusta con JS de abajo */
    width:100vw !important; max-width:100vw !important;
    height:calc(100vh - var(--ddm-top, 88px)) !important;
    max-height:calc(100vh - var(--ddm-top, 88px)) !important;

    margin:0 !important; padding:0 !important; border:0 !important;
    border-radius:12px 12px 0 0 !important;
    background:var(--annika-purple) !important; color:#fff !important;
    overflow-y:auto !important; overflow-x:hidden !important;

    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .24s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 -6px 24px rgba(0,0,0,.28);
    z-index:9999;
  }
  #dropdown-submenu-products-responsive.show{
    transform:translateY(0); opacity:1; pointer-events:auto;
  }
  #dropdown-submenu-products-responsive .content-container{ padding:14px 16px !important; }
  #dropdown-submenu-products-responsive a{ color:#fff !important; }
}
/* ============= MOBILE FIXES (≤991.98px) ============= */
@media (max-width: 991.98px){

  /* 1) HAMBURGUESA (botón del menú) EN GRIS y visible */
  .navbar-toggler{
    border: none !important;
    background: transparent !important;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    padding: 0 !important;
  }
  /* Forzamos el icono a barras grises (#9EA0A5) */
  .navbar-toggler .navbar-toggler-icon,
  .navbar-dark .navbar-toggler-icon,
  .navbar-light .navbar-toggler-icon{
    width: 24px; height: 24px;
    background-repeat: no-repeat; background-size: 100% 100%;
    filter: none !important; opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%239EA0A5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }

  /* 2) ICONOS alineados al centro del círculo */
  .item-cart-menu{
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    line-height: 0 !important;
  }
  .item-cart-menu i{
    font-size: 16px !important;
    line-height: 1; transform: translateY(0.5px) !important;
  }

  /* 3) USUARIO con círculo blanco detrás y SIN flecha/caret */
  /* (Aplica al botón que tiene .dropdown-toggle en móvil) */
  .item-cart-menu.dropdown-toggle{
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }
  .item-cart-menu.dropdown-toggle::after{   /* quita la flecha */
    display: none !important;
    content: none !important;
  }
  /* Usuario en contorno (sin relleno) */
  .item-cart-menu .fa-user{
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #111;
    text-stroke: 2px #111;
  }

  /* 4) CARRITO: icono BLANCO sobre fondo rosa */
  a.item-cart-menu[href*="carrito"]{ background: var(--annika-pink) !important; }
  a.item-cart-menu[href*="carrito"] i{ color: #fff !important; }

  /* Badge del carrito (blanco con #E4418D) */
  .cart-items-badge{
    top: -5px; right: -6px;
    min-width: 14px; height: 14px; font-size: 10px;
    background: #fff !important; color: #E4418D !important;
    border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }
}

/*=============================================
FIN HEADER
===============================================*/

/*=============================================
FOOTER
===============================================*/

/*=============================================
FIN FOOTER
===============================================*/


/*=============================================
GENERAL
===============================================*/
/* === Fondo global del sitio === */
html, body{
  background-color:#efefef !important;
}

/* Asegura que el fondo global se vea detrás del contenido principal */
main, #main, .main, .content, .content-wrapper, .page-content, .page-wrapper,
.wrapper, .site, #app, .container-fluid{
  background-color:transparent !important;
}

/* (No tocamos el header: conserva sus colores) */

/*=============================================
FIN GENERAL
===============================================*/

/*=============================================
LISTA DE PRODUCTOS
===============================================*/
/* Botón “SOLICITAR COTIZACIÓN” */
#product-container .angulo-item-button{
  background: #724082 !important;
  color: #ffffff !important;
  border-color: #724082 !important;
  font-size: 0.85rem !important;   /* pequeño */
  font-weight: 400 !important;      /* más fino */
  border-radius: 7px !important;    /* borde solicitado */
  padding: 7px 7px !important;
  line-height: 1 !important;
  letter-spacing: .2px;
  text-decoration: none !important;
}

/* Hover/Focus accesible (ligeramente más oscuro) */
#product-container .angulo-item-button:hover,
#product-container .angulo-item-button:focus{
  background: #623673 !important;
  border-color: #623673 !important;
  color: #ffffff !important;
}

/* Active (sin “rebote” raro) */
#product-container .angulo-item-button:active{
  transform: none !important;
  box-shadow: none !important;
}


/*=============================================
FIN LISTA DE PRODUCTOS
===============================================*/



/*===============OCULTAR FORM ORIGINAL================*/
section.mb-5.mt-5 .form-contact { display:none !important; }

/*===============FIN OCULTAR FORM ORIGINAL================*/