/*
Theme Name: Hello Elementor Child
Theme URI: https://vivagopstore.com
Description: Tema hijo para personalizaciones de VivaGop
Author: VivaGop
Template: hello-elementor
Version: 1.0.0
*/
/************ HEADER VIVAGOP – CSS LIMPIO ************/

/* Quita márgenes/padding que Elementor/Hello añaden al header */
html, body { margin:0; padding:0; }
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-row,
.elementor-location-header .elementor-column,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.site-header, header.site-header, .header, #masthead {
  margin:0; padding:0; border:0; max-width:100%;
}

/* ====== Cabecera base ====== */
.vg-hdr{
  width:100%;
  background:#0E1116;
  color:#fff;
  border-bottom:2px solid #0EA5FF;
}
.vg-hdr .vg-row{
  max-width:1400px;
  margin:0 auto;
  padding:10px 16px;
  display:grid;
  grid-template-columns:auto minmax(320px,1fr) max-content; /* logo | search | acciones */
  gap:16px;
  align-items:center;
}

/* Logo */
.vg-logo{ display:inline-flex; align-items:center; line-height:0; }
.vg-logo img{ height:48px; width:auto; display:block; }

/* ====== Buscador (FiboSearch) ====== */
.vg-search{ min-width:320px; max-width:100%; overflow:hidden; z-index:2; }
.vg-search .dgwt-wcas-sf-wrapp,
.vg-search .dgwt-wcas-search-form{ width:100%; }
.vg-search .dgwt-wcas-sf-wrapp{
  margin:0; padding:0; background:transparent; border:0; box-shadow:none; border-radius:0;
}
.vg-search .dgwt-wcas-search-form{
  background:#121720; border:1px solid #1F2937; border-radius:12px; height:44px; box-shadow:none;
}
.vg-search .dgwt-wcas-search-input{
  background:transparent; color:#E5E7EB; height:42px; line-height:42px;
  padding:0 14px; border:none; box-shadow:none;
}
.vg-search .dgwt-wcas-search-input::placeholder{ color:#9CA3AF; }
.vg-search .dgwt-wcas-ico-magnifier{ color:#9CA3AF; }

/* ====== Acciones (iconos) ====== */
.vg-actions{
  display:flex; align-items:center; gap:16px;
  white-space:nowrap; position:relative; z-index:3; min-width:320px;
}
.vg-actions .vg-btn{
  display:inline-flex; align-items:center; gap:8px;
  color:#F3F4F6; text-decoration:none; cursor:pointer;
  background:transparent; border:0; padding:8px 10px; border-radius:10px;
  font-size:14px; line-height:1;
}
.vg-actions .vg-btn i{ font-size:18px; }
.vg-actions .vg-btn:hover,.vg-actions .vg-btn:focus{ background:#111827; outline:0; }
.vg-actions .vg-btn span{ white-space:nowrap; }

/* Badge carrito */
.vg-badge.vg-cart-count{
  position:absolute; top:-8px; right:-10px;
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  padding:0 6px; border-radius:999px;
  background:#EF4444; color:#fff; font-size:12px; text-align:center; font-weight:700;
}
.vg-btn.vg-cart{ position:relative; }

/* ====== Panel de categorías ====== */
.vg-cat-panel[hidden]{ display:none; }
.vg-cat-panel{ background:#0B0F14; border-top:1px solid #1F2937; }
.vg-cat-panel ul{
  margin:0; padding:8px 16px; list-style:none;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px 16px;
}
.vg-cat-panel a{
  display:block; padding:10px 12px; border-radius:10px;
  color:#E5E7EB; text-decoration:none; background:#10151E; border:1px solid #1F2937;
}
.vg-cat-panel a:hover{ background:#111827; color:#fff; }

/* ====== Anti-colisiones WooCommerce (carrito/checkout) ====== */
body.woocommerce-cart .vg-hdr,
body.woocommerce-checkout .vg-hdr{ position:relative; z-index:1000; }

body.woocommerce-cart .vg-hdr .vg-row,
body.woocommerce-checkout .vg-hdr .vg-row{
  display:grid; grid-template-columns:auto minmax(320px,1fr) max-content; align-items:center; gap:16px;
}

/* Enlace/botón del header: mantener inline-flex y sin pseudo-iconos del tema */
body.woocommerce-cart .vg-actions a,
body.woocommerce-checkout .vg-actions a,
body.woocommerce-cart .vg-actions button,
body.woocommerce-checkout .vg-actions button,
body.woocommerce-cart .vg-actions .vg-btn,
body.woocommerce-checkout .vg-actions .vg-btn{
  display:inline-flex; align-items:center; gap:8px;
  line-height:1; margin:0; padding:8px 10px; font-size:14px; white-space:nowrap;
  background:transparent; border:0; box-shadow:none; text-transform:none; letter-spacing:normal;
}
body.woocommerce-cart .vg-actions a::before,
body.woocommerce-cart .vg-actions a::after,
body.woocommerce-checkout .vg-actions a::before,
body.woocommerce-checkout .vg-actions a::after{ content:none; }

/* Iconos dentro de los botones */
body.woocommerce-cart .vg-actions i,
body.woocommerce-checkout .vg-actions i,
body.woocommerce-cart .vg-actions svg,
body.woocommerce-checkout .vg-actions svg,
body.woocommerce-cart .vg-actions img,
body.woocommerce-checkout .vg-actions img{
  display:inline-block; position:static; width:1.1em; height:1.1em; flex:0 0 auto;
}

/* ====== Responsivo ====== */
@media (max-width:1024px){
  .vg-cat-panel ul{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .vg-hdr .vg-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "logo search"
      "actions actions";
    align-items:center; gap:8px; padding:8px 10px;
  }
  .vg-logo{ grid-area:logo; }
  .vg-search{ grid-area:search; min-width:0; }
  .vg-actions{ grid-area:actions; justify-content:space-between; min-width:0; }
  .vg-actions .vg-btn span{ display:none; } /* solo iconos en móvil */
  .vg-search .dgwt-wcas-search-form{ height:40px; }
  .vg-search .dgwt-wcas-search-input{ height:38px; line-height:38px; }
}
@media (max-width:420px){
  .vg-logo img{ height:38px; }
  .vg-search{ min-width:0; }
}

/************ FIN ************/
/* ==== FIBOSEARCH: forzar mismo estilo en todo el sitio ==== */
.vg-search .dgwt-wcas-search-wrapp,
.vg-search .dgwt-wcas-sf-wrapp{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;     /* quita el “pill” blanco */
}

.vg-search .dgwt-wcas-search-form{
  background:#121720 !important;  /* fondo oscuro consistente */
  border:1px solid #1F2937 !important;
  border-radius:12px !important;
  height:44px !important;
  box-shadow:none !important;
}

/* Input siempre oscuro (Woo intenta ponerlo blanco en carrito/checkout) */
.vg-search .dgwt-wcas-search-input,
.woocommerce .vg-search .dgwt-wcas-search-input,
.woocommerce-page .vg-search .dgwt-wcas-search-input{
  background:transparent !important;
  color:#E5E7EB !important;
  height:42px !important;
  line-height:42px !important;
  padding:0 14px !important;
  border:none !important;
  box-shadow:none !important;
}

/* Placeholder e icono */
.vg-search .dgwt-wcas-search-input::placeholder{ color:#9CA3AF !important; }
.vg-search .dgwt-wcas-ico-magnifier{ color:#9CA3AF !important; }

/* Igualar específicamente en carrito y checkout (por si otro CSS se cuela) */
body.woocommerce-cart .vg-search .dgwt-wcas-sf-wrapp,
body.woocommerce-checkout .vg-search .dgwt-wcas-sf-wrapp,
body.woocommerce-cart .vg-search .dgwt-wcas-search-form,
body.woocommerce-checkout .vg-search .dgwt-wcas-search-form{
  background:#121720 !important;
  border:1px solid #1F2937 !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
/* === FIBOSEARCH: neutraliza el "pill" blanco en todas las páginas === */
.vg-search .dgwt-wcas-search-wrapp,
.vg-search .dgwt-wcas-sf-wrapp,
.vg-search .dgwt-wcas-search-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* El form sí debe verse oscuro y con borde sutil (tu estilo) */
.vg-search .dgwt-wcas-search-form {
  background: #121720 !important;
  border: 1px solid #1F2937 !important;
  border-radius: 12px !important;
  height: 44px !important;
}

/* Estos pseudo-elementos son los que están pintando el "pill" blanco */
.vg-search .dgwt-wcas-sf-wrapp::before,
.vg-search .dgwt-wcas-sf-wrapp::after,
.vg-search .dgwt-wcas-search-wrapp::before,
.vg-search .dgwt-wcas-search-wrapp::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Input siempre oscuro (Woo intenta volverlo claro en carrito) */
.vg-search .dgwt-wcas-search-input,
.woocommerce .vg-search .dgwt-wcas-search-input,
.woocommerce-page .vg-search .dgwt-wcas-search-input {
  background: transparent !important;
  color: #E5E7EB !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
  border: 0 !important;
  box-shadow: none !important;
}
.vg-search .dgwt-wcas-search-input::placeholder { color: #9CA3AF !important; }
.vg-search .dgwt-wcas-ico-magnifier { color: #9CA3AF !important; }

/* Refuerzo específico en carrito/checkout por si el tema reinyecta estilos */
body.woocommerce-cart .vg-search .dgwt-wcas-search-form,
body.woocommerce-checkout .vg-search .dgwt-wcas-search-form {
  background: #121720 !important;
  border: 1px solid #1F2937 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Seguridad: el buscador no invade los iconos ni se monta */
.vg-hdr .vg-row {
  display: grid !important;
  grid-template-columns: auto minmax(320px, 1fr) max-content !important;
  gap: 16px !important;
  align-items: center !important;
}
.vg-actions { white-space: nowrap !important; }
https://vivagopstore.com/wp-admin/theme-editor.php?file=functions.php&theme=hello-elementor-child