/* =========================================================
   CUSTOM.CSS - JHOVANA STORE (LIMPIO Y ESTABLE)
   ========================================================= */

/* =======================
   TOP LINE (BARRA SUPERIOR)
   ======================= */
.top_line{
  background:#111 !important;
  padding:6px 0;
  font-size:14px;
}

/* Por si la plantilla lo oculta por versión */
header.version_2 .top_line{
  display:block !important;
}

/* Forzar visibilidad en pantallas chicas */
@media (max-width: 991px){
  .top_line{
    display:block !important;
    visibility:visible !important;
    height:auto !important;
    overflow:visible !important;
  }
}

/* ===== TOP LINE MÓVIL ===== */
@media (max-width:575px){
  .top_line{
    padding:4px 0 !important;
    font-size:12.5px;
  }
  .top_line .container{
    padding-left:10px;
    padding-right:10px;
  }
  .top_line .col-12{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
  }
  .top_line span{
    margin-bottom:4px;
    font-size:12.5px;
    letter-spacing:0.3px;
  }
  .top_line a{
    font-size:13px;
    font-weight:600;
  }
  .hide-mobile{ display:none !important; }
}

/* =======================
   LOGO RESPONSIVO
   ======================= */
header #logo img{
  max-height:60px;
  width:auto;
}
@media (max-width:575px){
  header #logo img{
    max-height:48px;
    width:auto;
  }
}

/* =======================
   CARRITO (BOTÓN + BADGE PRO)
   ======================= */
header .dropdown-cart .cart_bt{
  position:relative !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#f3f3f3;
}

/* BADGE: usamos SOLO #countCart (no strong genérico) */
header .dropdown-cart .cart_bt #countCart{
  position:absolute !important;
  top:-2px !important;
  right:-2px !important;

  min-width:16px !important;
  height:16px !important;
  padding:0 3px !important;

  border-radius:999px !important;
  background:#e60023 !important;   /* rojo e-commerce */
  color:#fff !important;

  font-size:10px !important;
  font-weight:700 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;

  box-shadow:0 0 0 2px #fff !important;
}

/* =======================
   HAMBURGUESA (CLICKABLE)
   ======================= */
header nav .open_close .hamburger{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#f3f3f3;
}

/* =======================
   BOTÓN CATEGORÍAS
   ======================= */
header .main-menu ul li a[data-target="#size-modal"]{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#f3f3f3;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
/* ===== FIX MÓVIL: HEADER NO DEBE ENCIMARSE AL SLIDER ===== */
@media (max-width:575px){

  /* 1) Asegurar que el header no sea flotante */
  header,
  header .main_header{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* 2) Reservar altura real del header blanco */
  header .main_header{
    background: #fff;              /* asegura fondo */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    z-index: 50 !important;
  }

  /* 3) Evitar que el slider se “suba” debajo del header */
  main,
  .container,
  .hero_single,
  .carousel_home,
  .hero_in,
  .header-video,
  .slider,
  .owl-carousel{
    margin-top: 0 !important;
  }

  /* 4) Si tu slider es el primer bloque después del header, dale separación */
  .carousel_home,
  .hero_single,
  .slider{
    padding-top: 8px !important;
  }
}
/* ===== FIX MÓVIL: quitar sticky en header ===== */
@media (max-width:575px){
  header .main_header.Sticky{
    position: relative !important;
    top: auto !important;
  }
}