/*
Theme Name: WikiBook Child
Theme URI: https://demo.theme-sky.com/wikibook/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: wikibook
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: wikibook-child
*/
/*
Theme Name: Wikibook Child
Template: wikibook
*/


/* RESETEAR estilos del tema original */
.shopping-cart-wrapper,
.my-wishlist-wrapper,
.my-account-wrapper {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 10px !important;
}

/* Estilos personalizados para los botones del header DESKTOP */
/* Botón Franquicias */
/* Botón Franquicias */

.my-wishlist-wrapper .ts-tiny-wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
   /* border: 1px solid #ffe8be !important; */   /* blanco normal */
    border-radius: 3px !important;
    background: #1d1a1b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    transition: all 0.3s ease !important;
}

.my-wishlist-wrapper .ts-tiny-wishlist:hover .icon {
    color: #ffffff !important;
}

.my-wishlist-wrapper .ts-tiny-wishlist .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #ffffff !important;
}


.my-wishlist-wrapper .ts-tiny-wishlist span {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Botón Contacto */

.my-account-wrapper .ts-tiny-account {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
   /*  border: 1px solid #ffe8be !important; */  /* blanco normal */
    border-radius: 3px !important;
    background: #1d1a1b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    transition: all 0.3s ease !important;
}

.my-account-wrapper .ts-tiny-account:hover .icon {
    color: #ffffff !important;
}


.my-account-wrapper .ts-tiny-account .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #ffffff !important;
}


.my-account-wrapper .ts-tiny-account span {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Botón Tienda */

.shopping-cart-wrapper .ts-tiny-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
   /* border: 1px solid #ffe8be !important; /* blanco normal */
    border-radius: 3px !important;
    background: #1d1a1b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    transition: all 0.3s ease !important;
}


.my-shopping-cart-wrapper .ts-tiny-cart:hover .icon {
    color: #ffffff !important;
}


.shopping-cart-wrapper .ts-tiny-cart .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #ffffff !important;
}


.shopping-cart-wrapper .ts-tiny-cart span {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}
/* Asegurar alineación horizontal */
.header-middle .header-right {
    display: flex !important;
    align-items: center !important;
}

/* Ocultar posibles elementos duplicados */
.shopping-cart-wrapper .cart-number,
.shopping-cart-wrapper .cart-total,
.my-wishlist-wrapper .wishlist-number {
    display: none !important;
}

/* Ocultar los botones cuando aparece el menú hamburguesa (en móvil) */
@media (max-width: 767px) {
    .my-wishlist-wrapper,
    .my-account-wrapper,
    .shopping-cart-wrapper {
        display: none !important;
    }
}

/* ===== ESTILOS DEL SUBMENÚ - ELIMINAR GAP ===== */

/* Eliminar el GAP del contenedor ul.sub-menu */
.ts-header nav > ul.menu li:not(.ts-megamenu) > ul.sub-menu,
.ts-header nav > ul.menu li ul.sub-menu,
.ts-header .main-menu .sub-menu,
.ts-header .ts-mega-menu-wrapper .sub-menu,
.ts-header .pc-menu .sub-menu,
.ts-header nav .sub-menu,
ul.sub-menu,
.sub-menu {
    background-color: #1d1a1b !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    flex-direction: column !important;
}

/* Eliminar espacios en blanco entre items del submenú */
.main-menu .sub-menu li,
.ts-mega-menu-wrapper .sub-menu li,
.pc-menu .sub-menu li {
    background-color: #1d1a1b !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    gap: 0 !important;
}

/* Color del texto en el submenú - blanco #ffffff sobre fondo negro */
.main-menu .sub-menu li a,
.ts-mega-menu-wrapper .sub-menu li a,
.pc-menu .sub-menu li a {
    color: #ffffff !important;
    background-color: #1d1a1b !important;
    padding: 12px 20px !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hover en items del submenú - mantiene fondo negro pero texto cambia a beige #ffe8be */
.main-menu .sub-menu li a:hover,
.ts-mega-menu-wrapper .sub-menu li a:hover,
.pc-menu .sub-menu li a:hover,
.main-menu .sub-menu li:hover > a,
.ts-mega-menu-wrapper .sub-menu li:hover > a {
    background-color: #1d1a1b !important;
    color: #ffe8be !important;
}

/* Eliminar todos los pseudo-elementos que puedan crear líneas */
.sub-menu li:before,
.sub-menu li:after,
.main-menu .sub-menu li:before,
.main-menu .sub-menu li:after,
.ts-mega-menu-wrapper .sub-menu li:before,
.ts-mega-menu-wrapper .sub-menu li:after,
.pc-menu .sub-menu li:before,
.pc-menu .sub-menu li:after,
.sub-menu li a:before,
.sub-menu li a:after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* Hover en el item del menú principal que tiene submenú */
.main-menu > ul > li.menu-item-has-children > a:hover,
.ts-mega-menu-wrapper > ul > li.menu-item-has-children > a:hover,
.pc-menu > ul > li.menu-item-has-children > a:hover {
    color: #ffe8be !important;
}

/* Cuando el submenú está abierto, el item padre mantiene el estilo */
.main-menu > ul > li.menu-item-has-children:hover > a,
.ts-mega-menu-wrapper > ul > li.menu-item-has-children:hover > a,
.pc-menu > ul > li.menu-item-has-children:hover > a {
    color: #ffe8be !important;
}

/* Hover general del menú principal (items sin submenú) */
.main-menu > ul > li > a:hover,
.ts-mega-menu-wrapper > ul > li > a:hover,
.pc-menu > ul > li > a:hover {
    color: #ffe8be !important;
}

.ts-tiny-wishlist .icon svg,
.ts-tiny-account .icon svg,
.ts-tiny-cart .icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ELIMINAR icono de wishlist del theme */
.ts-tiny-wishlist::before,
.ts-tiny-wishlist::after {
    content: none !important;
    display: none !important;
}

/* Por si el theme usa icon-font directo */
.ts-tiny-wishlist {
    font-family: inherit !important;
}

/* Ocultar cualquier <i> que el theme intente meter */
.ts-tiny-wishlist i {
    display: none !important;
}

/* Asegurar que SOLO se vea tu SVG */
.ts-tiny-wishlist .icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.ts-tiny-wishlist .icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* Crear un área invisible entre el menú principal y el submenú para evitar que se cierre */
.main-menu > ul > li.menu-item-has-children,
.ts-mega-menu-wrapper > ul > li.menu-item-has-children,
.pc-menu > ul > li.menu-item-has-children {
    position: relative !important;
}

.main-menu > ul > li.menu-item-has-children:before,
.ts-mega-menu-wrapper > ul > li.menu-item-has-children:before,
.pc-menu > ul > li.menu-item-has-children:before {
    content: "" !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: transparent !important;
    display: block !important;
    z-index: 999 !important;
}

/* Ajustar el margen del submenú */
.ts-header nav > ul.menu li:not(.ts-megamenu) > ul.sub-menu,
.ts-header nav > ul.menu li ul.sub-menu,
ul.sub-menu,
.sub-menu {
    background-color: #1d1a1b !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0px !important; /* Sin espacio */
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    flex-direction: column !important;
    position: absolute !important;
    z-index: 1000 !important;
}



/* ===== ESTILOS DEL MENÚ MÓVIL ===== */

/* Fondo del menú móvil */
.mobile-menu-wrapper,
.ts-mobile-menu,
.mobile-menu,
nav.mobile-menu {
    background-color: #1d1a1b !important;
}

/* Texto de los items del menú móvil en blanco */
.mobile-menu-wrapper a,
.ts-mobile-menu a,
.mobile-menu a,
nav.mobile-menu a,
.mobile-menu li a {
    color: #ffffff !important;
    background-color: #1d1a1b !important;
}

/* Hover en los items del menú móvil */
.mobile-menu-wrapper a:hover,
.ts-mobile-menu a:hover,
.mobile-menu a:hover,
nav.mobile-menu a:hover,
.mobile-menu li a:hover {
    color: #ffe8be !important;
    background-color: #1d1a1b !important;
}

/* Items del menú móvil */
.mobile-menu li,
.ts-mobile-menu li {
    background-color: #1d1a1b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Encabezado del menú móvil (donde dice "Menu") */
.mobile-menu-wrapper .header,
.ts-mobile-menu .header,
.mobile-menu-header {
    background-color: #1d1a1b !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Botón de cerrar (X) */
.mobile-menu-wrapper .close-button,
.ts-mobile-menu .close-button,
.mobile-menu .close {
    color: #ffffff !important;
}

/* Submenú dentro del menú móvil */
.mobile-menu .sub-menu,
.ts-mobile-menu .sub-menu {
    background-color: #1d1a1b !important;
}

.mobile-menu .sub-menu li a,
.ts-mobile-menu .sub-menu li a {
    color: #ffffff !important;
    padding-left: 30px !important;
}

.mobile-menu .sub-menu li a:hover,
.ts-mobile-menu .sub-menu li a:hover {
    color: #ffe8be !important;
}

/* Items personalizados del menú móvil que agregamos antes */
.custom-mobile-item a {
    color: #ffffff !important;
    background-color: #1d1a1b !important;
}

.custom-mobile-item a:hover {
    color: #ffe8be !important;
}
/* ===== MENÚ MÓVIL (ts-floating-sidebar) ===== */

/* Panel del menú */
#group-icon-header.ts-floating-sidebar,
#group-icon-header.ts-floating-sidebar .ts-sidebar-content {
  background: #1d1a1b !important;
}

/* Overlay (lo que en tu imagen queda blanco/clarito) */
#group-icon-header.ts-floating-sidebar .overlay {
  background: rgba(29, 26, 27, 0.98) !important; /* o #1d1a1b si lo querés sólido */
}

/* Links del menú */
#group-icon-header.ts-floating-sidebar .ts-sidebar-content a {
  color: #ffffff !important;
}

/* Hover */
#group-icon-header.ts-floating-sidebar .ts-sidebar-content a:hover {
  color: #ffe8be !important;
}

/* Botón cerrar (X) */
#group-icon-header.ts-floating-sidebar .close {
  color: #ffffff !important;
}
#group-icon-header.ts-floating-sidebar .close:hover {
  color: #ffe8be !important;
}

/* Cabecera del menú móvil (donde está "Menu") */
#group-icon-header.ts-floating-sidebar .sidebar-content {
  background-color: #1d1a1b !important;
}

#group-icon-header.ts-floating-sidebar .sidebar-content .menu-title,
#group-icon-header.ts-floating-sidebar .sidebar-content .menu-title span {
  color: #ffffff !important;
  background-color: transparent !important;
}


#group-icon-header.ts-floating-sidebar .sidebar-content .menu-title span {
  font-size: 0 !important;
}


#group-icon-header.ts-floating-sidebar .sidebar-content .menu-title span::before {
  content: "";
  display: inline-block;
  width: 220px;   /* más ancho */
  height: 70px;   /* más alto (CLAVE) */
  background-image: url("https://bostani.com.ar/wp-content/uploads/2026/01/Logo_Web.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}



/* ===== Mostrar botones en mobile aunque tengan hidden-xs ===== */
@media only screen and (max-width: 767px){

  header.ts-header .header-middle .header-right .my-wishlist-wrapper.hidden-xs,
  header.ts-header .header-middle .header-right .my-account-wrapper.hidden-xs,
  header.ts-header .header-middle .header-right .shopping-cart-wrapper.hidden-xs,
  header.ts-header .header-middle .header-right .shopping-cart-wrapper{
    display: block !important;
  }

  /* ===== Ponerlos debajo del logo ===== */
  header.ts-header .header-middle > .container{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  header.ts-header .header-middle .logo-wrapper{
    order: 1 !important;
    margin: 0 !important;
  }

  header.ts-header .header-middle .header-right{
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  /* (Opcional) hamburguesa arriba, botones debajo */
  header.ts-header .header-middle .header-right .ts-mobile-icon-toggle{
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }
}

/* ===== MOBILE FIX: hamburguesa arriba derecha SI O SI ===== */
@media only screen and (max-width: 767px){

  /* Ancla para posicionar la hamburguesa */
  header.ts-header .header-middle{
    position: relative !important;
  }

  /* La hamburguesa se “despega” y va arriba a la derecha */
  header.ts-header .header-middle .ts-mobile-icon-toggle{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 9999 !important;
    margin: 0 !important;
  }

  /* Evita que header-right trate de alinearla/centrarla */
  header.ts-header .header-middle .header-right{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Dejá espacio a la derecha para que no choque con la hamburguesa */
  header.ts-header .header-middle .logo-wrapper{
    padding-right: 70px !important;
  }

  /* Botones en fila debajo */
  header.ts-header .header-middle .my-wishlist-wrapper,3
  header.ts-header .header-middle .my-account-wrapper,
  header.ts-header .header-middle .shopping-cart-wrapper{
    display: inline-block !important;
    margin-top: 8px !important;
  }

  /* Mostrar aunque tengan hidden-xs */
  header.ts-header .header-middle .my-wishlist-wrapper.hidden-xs,
  header.ts-header .header-middle .my-account-wrapper.hidden-xs{
    display: inline-block !important;
  }
}

/* ===== MOBILE: logo alineado a la izquierda ===== */
@media only screen and (max-width: 767px){

  /* Quitar cualquier centrado del contenedor */
  header.ts-header .header-middle > .container{
    align-items: flex-start !important;
  }


}

/* Achicar icons sociales Elementor aunque el SVG tenga width/height inline */
.ts-social-icons-elementor-widget .elementor-social-icon svg{
  width: 30px !important;
  height: 30px !important;
}
/* Redes sociales: que no se baje un icono a otra línea */
.ts-social-icons-elementor-widget .list-items{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Cada item sin márgenes raros */
.ts-social-icons-elementor-widget .list-items > span{
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Espaciado elegante en mobile ===== */
@media only screen and (max-width: 767px){

  /* Espacio arriba del logo */
  header.ts-header .header-middle .logo-wrapper{
    margin-top: 20px !important;   /* ajustá 15–30px a gusto */
  }

  /* Espacio arriba y abajo del bloque de botones */
  header.ts-header .header-middle .header-right{
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }

}
/* ===== MOBILE: que Franquicias / Contacto / Tienda queden en la MISMA línea ===== */
@media only screen and (max-width: 767px){

  /* Contenedor de los botones: no permitir salto de línea */
  header.ts-header .header-middle .header-right{
    flex-wrap: nowrap !important;
    justify-content: space-between !important; /* reparte en el ancho */
    gap: 8px !important;
  }

  /* Cada wrapper no debe ocupar 100% */
  header.ts-header .header-middle .my-wishlist-wrapper,
  header.ts-header .header-middle .my-account-wrapper,
  header.ts-header .header-middle .shopping-cart-wrapper{
    display: inline-block !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important; /* evita que parta el texto */
  }

  /* Achicar un poco el "ancho" de cada botón en mobile */
  header.ts-header .header-middle .ts-tiny-wishlist,
  header.ts-header .header-middle .ts-tiny-account,
  header.ts-header .header-middle .ts-tiny-cart{
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }

  /* Iconitos un toque más chicos */
  header.ts-header .header-middle .ts-tiny-wishlist .icon svg,
  header.ts-header .header-middle .ts-tiny-account .icon svg,
  header.ts-header .header-middle .ts-tiny-cart .icon svg{
    width: 16px !important

}

	
/* ===== MOBILE: botones compactos y casi pegados ===== */
@media (max-width: 767px){

  /* El contenedor NO reparte espacio */
  header.ts-header .header-middle .header-right{
    justify-content: center !important;
    gap: 4px !important;
  }

  /* Quitar cualquier margin */
  .my-wishlist-wrapper,
  .my-account-wrapper,
  .shopping-cart-wrapper{
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Botones más compactos */
  header.ts-header .header-middle .ts-tiny-wishlist,
  header.ts-header .header-middle .ts-tiny-account,
  header.ts-header .header-middle .ts-tiny-cart{
    padding: 8px 8px !important;
    min-height: 34px !important;
  }

}
	

/* ===== Menú móvil (sidebar): letra en 16px ===== */
@media only screen and (max-width: 767px){

  #group-icon-header .mobile-menu-wrapper li > a,
  #group-icon-header .mobile-menu-wrapper li > a span,
  #group-icon-header .mobile-menu-wrapper li > a .menu-label{
    font-size: 14px !important;
  }

}