/* =========================================================
 * custom.css — El Cielo No Es Azul (tema leo_bookery)
 * Ordenado por secciones. Reemplaza el archivo completo.
 * ========================================================= */


/* =========================================================
 * 1) HEADER · barra superior de iconos (buscar/wishlist/carrito/usuario)
 * ========================================================= */
.top-right-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.top-right-header>div,
.top-right-header>a {
  margin: 0;
  padding: 0;
  float: none;
  height: 26px;
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: 1;
}

#_desktop_cart {
  padding: 0 !important;
}

/* sub-contenedores centrados (misma altura/alineación) */
#_desktop_cart .blockcart,
#_desktop_cart .blockcart .header,
#leo_block_top .dropdown,
.ap-wishlist .icon,
#leo_search_block_top .title_block {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
}

/* iconos al mismo tamaño; la lupa un poco más grande */
.top-right-header i,
.top-right-header .material-icons,
.top-right-header .fa,
.top-right-header .fal,
.top-right-header .fas {
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

#leo_search_block_top .title_block i {
  font-size: 25px;
}

/* separadores verticales entre iconos */
.top-right-header .ap-wishlist:before,
.top-right-header #_desktop_cart:before,
.top-right-header #leo_block_top:before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #0000001a;
}

/* corazón: badge circular (igual que el carrito; el color lo pone la skin) */
.top-right-header .ap-wishlist .ap-total {
  position: absolute;
  top: -8px;
  right: -10px;
  left: auto;
  width: 14px;
  height: 14px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  display: block;
}

/* carrito: limpio (sin precio, sin loader ni dropdown vacío colgando) */
#_desktop_cart .blockcart {
  background: transparent;
  border: 0;
}

#_desktop_cart .totals-cart {
  display: none;
}

#_desktop_cart .cssload-piano {
  display: none !important;
}

#_desktop_cart .leo-dropdown-cart {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 999;
}

#_desktop_cart .leo-dropdown-cart:empty {
  display: none;
}

/* usuario: hover sin azul */
#leo_block_top .dropdown>.expand-more,
#leo_block_top .dropdown>a,
#leo_block_top .dropdown>.expand-more:hover,
#leo_block_top .dropdown>a:hover {
  color: #333 !important;
}

#leo_block_top .dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 999;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}


/* =========================================================
 * 2) HEADER · alinear el menú con los iconos
 * ========================================================= */
.header-top .ApRow {
  align-items: center !important;
}

.leo-megamenu {
  margin-bottom: 0 !important;
}


/* =========================================================
 * 3) BUSCADOR · popup desplegable + resultados (autocompletar)
 * ========================================================= */
#leo_search_block_top {
  width: auto;
  float: none;
}

#leo_search_block_top .title_block {
  cursor: pointer;
}

#leo_search_block_top #leosearchtopbox {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  width: 340px;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
  z-index: 999;
}

#leo_search_block_top.active #leosearchtopbox {
  display: block;
}

#leo_search_block_top .leoproductsearch-result {
  width: 100%;
  margin: 0;
  position: relative;
  border: 0 !important;
}

#leo_search_block_top .search_query {
  width: 100%;
}

/* contenedor de resultados (ignora el width:2px que mete el JS) */
#leo_search_block_top .ac_results.lps_results {
  width: 316px !important;
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 4px) !important;
}

#leo_search_block_top .ac_results.lps_results>div:first-child {
  height: auto !important;
  max-height: 360px;
  overflow-y: auto;
}

#leo_search_block_top .ac_results:empty {
  display: none;
}

/* título y precio visibles (venían en blanco) */
#leo_search_block_top .ac_results li a,
#leo_search_block_top .ac_results .lps-result-title,
#leo_search_block_top .ac_results .lps-result-price {
  color: #333 !important;
}

#leo_search_block_top .ac_results .lps-result-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

#leo_search_block_top .ac_results .lps-result-price {
  font-size: 13px;
  color: #777 !important;
  margin-top: 3px;
}

/* hover legible */
#leo_search_block_top .ac_results li:hover {
  background: #f7f7f7;
}

#leo_search_block_top .ac_results li:hover a,
#leo_search_block_top .ac_results li:hover .lps-result-title,
#leo_search_block_top .ac_results li:hover .lps-result-price {
  color: #333 !important;
}

/* item: texto al lado de la imagen, centrado + aire */
#leo_search_block_top .ac_results li {
  padding: 10px 12px;
}

#leo_search_block_top .ac_results .lps-result-img {
  padding-right: 4px;
}

#leo_search_block_top .ac_results .search-in-product ul li {
  position: relative;
  min-height: 64px;
}

#leo_search_block_top .ac_results .search-in-product ul li .lps-result-content {
  position: absolute !important;
  left: 74px;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 86px);
  padding-left: 0;
}

#leo_search_block_top .ac_results .search-value-title {
  padding: 10px 12px;
}

#leo_search_block_top .ac_results .all-search-product {
  padding: 12px 0;
}


/* =========================================================
 * 4) SLIDER · flechas (chevrons finos, ocultas y visibles al hover)
 * ========================================================= */
.iview .iview-directionNav a {
  background: none !important;
  width: 50px !important;
  height: 50px !important;
  text-indent: 0 !important;
  text-align: center;
  line-height: 50px;
  font-size: 0 !important;
  /* oculta el texto "Anterior/Siguiente" */
  opacity: 0;
  transition: all .3s ease;
}

.iview .iview-directionNav a:before {
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-size: 56px;
  color: #2b2b2b;
  line-height: 50px;
  display: block;
}

.iview .iview-directionNav a.iview-prevNav:before {
  content: "chevron_left";
}

.iview .iview-directionNav a.iview-nextNav:before {
  content: "chevron_right";
}

/* posición por defecto (fuera) y al hacer hover sobre el slider (dentro + visibles) */
.iview .iview-directionNav a.iview-prevNav {
  left: -10px !important;
}

.iview .iview-directionNav a.iview-nextNav {
  right: -10px !important;
}

.iview:hover .iview-directionNav a {
  opacity: 1;
}

.iview:hover .iview-directionNav a.iview-prevNav {
  left: 20px !important;
}

.iview:hover .iview-directionNav a.iview-nextNav {
  right: 20px !important;
}

.iview .iview-directionNav a:hover:before {
  color: #f65d4e !important;
}

.iview .iview-directionNav a:hover {
  background: transparent !important;
}


/* =========================================================
 * 5) FOOTER
 * ========================================================= */

/* quitar el hueco del footer-top vacío (padding 95px del tema) */
.footer-container .footer-top {
  padding: 0 !important;
}

/* 3 columnas iguales (Enlaces · Mi Cuenta · Contacto) */
.footer-center .ApRow {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
}

.footer-center .ApRow>.ApColumn {
  flex: 1 1 33.333% !important;
  max-width: 33.333% !important;
  text-align: center;
  /* centra el bloque (inline-block) dentro de la columna */
}

/* cada BLOQUE como unidad: centrado en su columna, pero con su texto a la izquierda */
.footer-center .ApColumn .block,
.footer-center .ApColumn #block_myaccount_infos {
  display: inline-block;
  width: auto;
  max-width: 100%;
  text-align: left;
}

/* listas sin sangría por defecto */
.footer-center .ApColumn ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* "Mi Cuenta": quitar la col-md-3 estrecha del módulo (ancho auto para centrarlo) */
.footer-center #block_myaccount_infos {
  padding: 0 !important;
  float: none !important;
}

/* "Contacto": quitar el float que dejaba el hueco del centro */
.footer-center .ApGeneral.ApRawHtml,
.footer-center .fround-w {
  float: none !important;
}

/* títulos iguales y alineados */
.footer-center .ApColumn .title_block,
.footer-center .ApColumn .h3 {
  margin: 0 0 24px !important;
  padding: 0 !important;
  line-height: 30px !important;
}

/* bloque de contacto con iconos */
.footer-center .footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-center .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.footer-center .footer-contact li i {
  font-size: 18px;
  line-height: 1.4;
  opacity: .8;
}

.footer-center .footer-contact strong {
  font-weight: 600;
}

.footer-center .footer-contact a {
  color: inherit;
}

.footer-center .footer-contact a:hover {
  color: #f65d4e;
}

/* respetar minúsculas (email, etc.) en el bloque de contacto */
.footer-center .footer-contact,
.footer-center .footer-contact * {
  text-transform: none !important;
}

/* copyright centrado */
.footer-bottom .copyright,
.footer-bottom .copyright>div {
  text-align: center !important;
}

/* =========================================================
 * 6) PRODUCTOS · iconos de acción (carrusel product-list-default)
 *    Columna a la derecha, centrados en vertical, visibles al hover.
 * ========================================================= */
.product-list-default .thumbnail-container {
  position: relative;
}

/* contenedor: columna a la derecha, centrada en altura, oculto hasta el hover */
.product-list-default .functional-buttons {
  position: absolute !important;
  right: 15px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) translateX(20px) !important;
  /* fuera + centrado vertical */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
  opacity: 0;
  transition: all .35s ease;
  z-index: 5;
}

.product-list-default .thumbnail-container:hover .functional-buttons {
  opacity: 1;
  transform: translateY(-50%) translateX(0) !important;
  /* entra deslizando */
}

/* anular la posición absoluta por-botón del tema */
.product-list-default .functional-buttons>* {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
}

.product-list-default .thumbnail-container:hover .functional-buttons>* {
  transform: none !important;
}

.product-list-default .functional-buttons form {
  margin: 0 !important;
}

/* FIX: bug de coma en styles.css fuerza .compare a 54x22px. Lo igualamos a los demás. */
.product-list-default .functional-buttons .compare {
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
}

/* botón circular */
.product-list-default .functional-buttons .btn-product,
.product-list-default .functional-buttons .quick-view {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.product-list-default .functional-buttons .btn-product:hover,
.product-list-default .functional-buttons .quick-view:hover {
  background: #f65d4e;
  color: #fff;
  transform: translateY(-3px);
}

.product-list-default .functional-buttons .btn-product:hover i {
  color: #fff;
}

.product-list-default .functional-buttons i {
  font-size: 18px;
  margin: 0;
}

.product-list-default .functional-buttons .name-btn-product,
.product-list-default .functional-buttons .cssload-speeding-wheel {
  display: none;
}

/* =========================================================
 * 7) NEWSLETTER · titular grande (block_newsletter del home)
 * ========================================================= */
.block_newsletter .title_block {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: capitalize;
  /* "Join The Community" en vez de MAYÚSCULAS */
  color: #fff;
  margin-bottom: 16px;
}

/* =========================================================
 * 8) OPINIONES · tarjeta blanca estilo demo (testimonial)
 * ========================================================= */
.testimonial .block_content {
  background: #fff;
  border-radius: 16px;
  padding: 40px 35px 32px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .10);
  text-align: center;
  position: relative;
}

/* etiqueta superior ("Miradas que cambian...") + raya coral */
.testimonial .sub-title-widget {
  color: #6f6f6f;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 22px;
  padding-bottom: 18px;
  position: relative;
}

.testimonial .sub-title-widget:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #f65d4e;
}

/* comilla grande decorativa */
.testimonial .block-carousel-container {
  position: relative;
}

.testimonial .block-carousel-container:before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 60px;
  line-height: 1;
  color: #ececec;
  margin-bottom: 6px;
}

/* texto de la opinión (oscuro, forzado para ganar al CSS del perfil) */
.testimonial .descript {
  color: #1a1a1a !important;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 500;
  margin: 0 auto 18px;
  max-width: 92%;
}

/* autor (/ Bárbara) */
.testimonial .line .sub-title {
  color: #000 !important;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

/* puntos de paginación (con cuerpo y color) */
.testimonial .owl-controls {
  margin-top: 22px;
}

.testimonial .owl-controls .owl-pagination {
  text-align: center;
}

.testimonial .owl-controls .owl-page {
  display: inline-block;
  vertical-align: middle;
}

.testimonial .owl-controls .owl-page span {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 5px !important;
  border-radius: 50% !important;
  background: #c4c4c4 !important;
  /* inactivo gris visible */
  border: 0 !important;
  opacity: 1 !important;
  transition: all .3s ease;
}

.testimonial .owl-controls .owl-page.active span {
  background: #f65d4e !important;
  /* activo coral */
  transform: scale(1.1);
}

/* =========================================================
 * 9) BLOG · cabecera (título izq · botón coral der) + imágenes redondeadas
 * ========================================================= */
.title-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  /* espacio del título a las imágenes */
}

.title-w .title_block {
  margin: 0;
  text-transform: capitalize;
  font-size: 30px;
  /* fuente más grande, como el demo */
  font-weight: 700;
  flex: 0 0 auto;
}

/* .block_content crece para dejar la línea gris entre el título y el botón */
.title-w .block_content {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.title-w .block_content:before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e5e5e5;
  margin: 0 24px;
}

.title-w .block_content a {
  display: inline-block;
  background: #f65d4e;
  /* coral original del tema */
  color: #fff;
  padding: 13px 34px;
  /* botón más grande */
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: all .3s ease;
}

.title-w .block_content a:hover {
  background: #e5493a;
  color: #fff;
}

/* item: imagen arriba a todo el ancho y redondeada, datos y título debajo */
.latest-blogs .blog-container {
  display: block;
}

.latest-blogs .left-block {
  float: none !important;
  width: 100% !important;
}

.latest-blogs .blog-image-container {
  float: none !important;
  padding-right: 0 !important;
  width: 100% !important;
  margin-bottom: 16px;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.latest-blogs .blog-image-container a,
.latest-blogs .blog_img_link {
  display: block !important;
  width: 100% !important;
}

.latest-blogs .blog-image-container img,
.latest-blogs .blog_img_link img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* ORDEN: Fecha · Autor · Título · Categoría
   (display:contents libera los <span> del meta para poder ordenarlos) */
.latest-blogs .right-block {
  display: flex;
  flex-direction: column;
}

.latest-blogs .right-block .blog-meta {
  display: contents;
}

.latest-blogs .right-block .blog-meta .created {
  order: 0;
}

/* Fecha */
.latest-blogs .right-block .blog-meta .author {
  order: 1;
}

/* Autor */
.latest-blogs .right-block .blog-title {
  order: 2;
}

/* Título */
.latest-blogs .right-block .blog-meta .cat {
  order: 3;
}

/* Categoría */

/* datos en gris pequeño: SOLO autor/cat/fecha en bloque (no los iconos internos) */
.latest-blogs .right-block .author,
.latest-blogs .right-block .cat,
.latest-blogs .right-block .created {
  display: block;
  font-size: 13px;
  color: #9a9a9a;
  margin-bottom: 4px;
}

/* etiquetas e iconos internos en línea, para que no salten de renglón */
.latest-blogs .right-block .author>*,
.latest-blogs .right-block .cat>*,
.latest-blogs .right-block .created>* {
  display: inline !important;
}

.latest-blogs .right-block .blog-meta a {
  color: #9a9a9a;
}

/* título: formato normal (sin MAYÚSCULAS), más grande y oscuro */
.latest-blogs .right-block .blog-title {
  text-transform: none !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  margin: 6px 0;
}

.latest-blogs .right-block .blog-title a {
  color: #1a1a1a;
}

/* =========================================================
 * 10) PRODUCTO · estrellas de valoración en la tarjeta (como el demo)
 *    La tarjeta usa el sprite pequeño (16px, muy juntas). Forzamos
 *    el sprite grande (20px) y un poco más de separación.
 * ========================================================= */
.product-list-reviews .grade-stars.small-stars {
  min-width: 130px !important;
}

.product-list-reviews .grade-stars.small-stars .star-content div.star,
.product-list-reviews .grade-stars.small-stars .star-content div.star-on,
.product-list-reviews .grade-stars.small-stars .star-content div.star-hover {
  background-image: url(/modules/productcomments/views/img/stars.png) !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 4px !important;
}

.product-list-reviews .grade-stars.small-stars .star-content div.star-on,
.product-list-reviews .grade-stars.small-stars .star-content div.star-hover {
  background-position: -24px 0 !important;
}

/* =========================================================
 * 11) PRODUCTO (ficha) · lupa/zoom de la portada
 *    El tema la pinta como un triángulo gris de 80px (tosco).
 *    La convertimos en un botón redondo pequeño y discreto.
 * ========================================================= */
.product-cover .layer {
  border: 0 !important;
  width: 38px !important;
  height: 38px !important;
  bottom: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-cover .layer .zoom-in {
  position: static !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #333 !important;
}

/* =========================================================
 * 12) PRODUCTO · estrellas de la tarjeta (leofeature)
 *    Alineadas a la izquierda, tamaño normal (16px) y con
 *    algo de separación respecto al título del producto.
 * ========================================================= */
.leo-list-product-reviews {
  text-align: left !important;
}

.product-meta .leo-list-product-reviews {
  margin-top: 8px;
}

/* =========================================================
 * 13) PRODUCTO · modal de imagen grande: miniaturas no se salen
 *    Los thumbs del modal son de 302px en una columna de 150px y
 *    se salían/cortaban. Los limitamos al ancho de la columna.
 * ========================================================= */
#product-modal .modal-content .modal-body .product-images img,
#product-modal .js-modal-product-images .thumb {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* =========================================================
 * 14) PRODUCTO · portada: evitar el "salto" al cambiar de imagen
 *    Reservamos el espacio con aspect-ratio para que el contenedor
 *    no colapse al cargar la nueva imagen, y suavizamos el cambio.
 * ========================================================= */
.product-cover {
  display: block;
  width: 100%;
}

.product-cover img {
  aspect-ratio: 600 / 844;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/* =========================================================
 * 15) PRODUCTO (ficha) · lista de deseos junto al botón "Añadir a la cesta"
 *    El tema apila la wishlist debajo (clear:both en .add). La ponemos
 *    en la misma fila: [cantidad] [Añadir a la cesta] [Lista de deseos].
 * ========================================================= */
.product-actions .product-add-to-cart .product-quantity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.product-actions .product-add-to-cart .product-quantity .qty,
.product-actions .product-add-to-cart .product-quantity .add,
.product-actions .product-add-to-cart .product-quantity .wishlist {
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* evitar el texto duplicado "Eliminar de lista / Lista de deseos":
   solo se ve el que toque según el estado */
.product-actions .wishlist .name-btn-product.hide,
.product-actions .wishlist .name-btn-product.hidden {
  display: none !important;
}

/* =========================================================
 * 16) CABECERA · desplegable "Mi cuenta / Idioma" a dos columnas
 *    Antes: lista estrecha apilada. Ahora, como el demo:
 *    IDIOMA + MONEDA a la izquierda y los enlaces de cuenta a la
 *    derecha. El grid solo se aplica cuando el menú está abierto.
 * ========================================================= */
#leo_block_top .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  width: 400px !important;
  max-width: 92vw;
  padding: 22px 24px !important;
}

#leo_block_top .dropdown.show .dropdown-menu,
#leo_block_top .dropdown.open .dropdown-menu,
#leo_block_top .dropdown-menu.show {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 28px;
  grid-row-gap: 6px;
}

#leo_block_top .dropdown-menu .language-selector {
  grid-column: 1;
  grid-row: 1;
}

#leo_block_top .dropdown-menu .currency-selector {
  grid-column: 1;
  grid-row: 2;
  margin-top: 14px;
}

#leo_block_top .dropdown-menu .useinfo-selector {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-left: 1px solid #eee;
  padding-left: 24px;
}

/* etiquetas de sección en mayúscula (IDIOMA / MONEDA) */
#leo_block_top .dropdown-menu .language-selector>span,
#leo_block_top .dropdown-menu .currency-selector>span {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #333;
  margin-bottom: 10px;
}

/* listas sin viñetas y con aire */
#leo_block_top .dropdown-menu ul.link,
#leo_block_top .dropdown-menu ul.user-info {
  list-style: none;
  margin: 0;
  padding: 0;
}

#leo_block_top .dropdown-menu ul.link li {
  margin-bottom: 4px;
}

#leo_block_top .dropdown-menu ul.user-info li {
  margin-bottom: 14px;
}

#leo_block_top .dropdown-menu ul.user-info li:last-child {
  margin-bottom: 0;
}

#leo_block_top .dropdown-menu ul.link li a,
#leo_block_top .dropdown-menu ul.user-info li a {
  display: inline-block;
  padding: 4px 0;
  color: #333;
}

#leo_block_top .dropdown-menu ul.user-info li a {
  white-space: nowrap;
}

#leo_block_top .dropdown-menu ul.link li.current a {
  color: #f65d4e;
}

#leo_block_top .dropdown-menu ul.link li a:hover,
#leo_block_top .dropdown-menu ul.user-info li a:hover {
  color: #f65d4e;
}

/* =========================================================
 * 17) BLOG (página) · botón "Leer más" no debe perder el texto al hover
 *    El skin ponía el texto en coral sobre un botón de fondo coral,
 *    así que el texto se volvía invisible. Lo dejamos blanco y
 *    oscurecemos un poco el fondo como feedback. Ademas el tema le
 *    metia un border-bottom al pasar el raton, lo quitamos en todos
 *    los estados para que no salga esa linea.
 * ========================================================= */
.blog-item .more,
.blog-item .more:hover,
.blog-item .more:focus,
.blog-item .more:active {
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.blog-item .more:hover,
.blog-item .more:hover:focus {
  color: #fff !important;
  background: #e5493a !important;
}

/* =========================================================
 * 18) BLOG (barra lateral) · títulos sin capitalizar cada palabra
 *    El tema aplica text-transform:capitalize y convierte
 *    "Categorías del blog" en "Categorías Del Blog". Lo dejamos
 *    tal cual está escrito (respeta la traducción).
 * ========================================================= */
.sidebar .block .title_block {
  text-transform: none !important;
}

/* =========================================================
 * 19) CABECERA · menú en su caso original (no TODO EN MAYÚSCULA)
 *    El tema fuerza text-transform:uppercase sobre los ítems del
 *    menú. El selector real es .leo-megamenu .navbar-nav > li > a
 *    y el texto va en el span .menu-title (NO existe .mega-group).
 * ========================================================= */
.leo-megamenu .navbar-nav>li>a,
.leo-megamenu .navbar-nav>li>a .menu-title,
.leo-megamenu .navbar-nav>li>a.dropdown-toggle {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* =========================================================
 * 20) BUSCADOR - aspecto pastilla gris (estilo home-03)
 *    La seccion 3 controla que se abra y cierre como popup bajo la
 *    lupa. Aqui solo cambiamos el ASPECTO al de home-03, pastilla
 *    gris redondeada, campo integrado sin borde, sin el boton
 *    turquesa (lupa gris a la derecha) y sin el filtro de categorias.
 *    Selectores confirmados con el HTML real (modulo leoproductsearch),
 *      caja  = #leosearchtopbox   (el form)
 *      fila  = .leoproductsearch-content
 *      campo = #leo_search_query_top
 *      boton = #leo_search_top_button
 *      filtro categorias = .list-cate-wrapper
 * ========================================================= */

/* caja (form): pastilla gris en vez del recuadro blanco de la seccion 3 */
#leo_search_block_top #leosearchtopbox {
  width: 380px;
  max-width: 92vw;
  background: #f1f1f1 !important;
  padding: 0 6px 0 4px !important;
  border-radius: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;
}

/* la etiqueta "Buscar productos" no debe verse */
#leo_search_block_top #leosearchtopbox>label {
  display: none !important;
}

/* fila en una sola linea: [ campo .......... ][ lupa ] */
#leo_search_block_top .leoproductsearch-content {
  display: flex !important;
  align-items: center;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ocultar el filtro "Todas las categorias" (home-03 no lo lleva) */
#leo_search_block_top .list-cate-wrapper {
  display: none !important;
}

/* bloque que crece y contiene el campo + resultados */
#leo_search_block_top .leoproductsearch-result {
  flex: 1 1 auto;
  position: relative;
  margin: 0 !important;
  border: 0 !important;
}

/* el loader no debe empujar el campo (solo aparece al buscar) */
#leo_search_block_top .leoproductsearch-loading {
  position: absolute !important;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* campo: integrado, sin borde ni fondo propio */
#leo_search_block_top #leo_search_query_top,
#leo_search_block_top .search_query {
  width: 100% !important;
  height: 46px !important;
  line-height: 46px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 10px 0 22px !important;
  color: #333 !important;
  font-size: 14px;
}

#leo_search_block_top #leo_search_query_top::placeholder {
  color: #9a9a9a;
}

/* al enfocar, el tema pone fondo blanco y un outline que dibujaba
   un segundo recuadro dentro de la pastilla. Lo anulamos para que
   el campo siga integrado y sin bordes. */
#leo_search_block_top #leo_search_query_top:focus,
#leo_search_block_top .search_query:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* boton lupa: fuera el turquesa; icono gris, sin fondo, a la derecha */
#leo_search_block_top #leo_search_top_button {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#leo_search_block_top #leo_search_top_button:hover {
  background: transparent !important;
}

#leo_search_block_top #leo_search_top_button span {
  line-height: 0;
}

#leo_search_block_top #leo_search_top_button i {
  font-size: 18px !important;
  color: #555 !important;
  margin: 0 !important;
}

#leo_search_block_top #leo_search_top_button:hover i {
  color: #f65d4e !important;
}

/* resultados: desplegable blanco al ancho del campo */
#leo_search_block_top .leoproductsearch-result .ac_results.lps_results {
  width: 100% !important;
  left: 0 !important;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* =========================================================
 * 21) CABECERA - color de fondo azul de marca (#91C6EB)
 *    El Cielo No Es Azul usa el azul cielo como color de marca.
 *    Se aplica a la barra principal (.header-top) en TODAS las
 *    paginas MENOS el inicio. La home lleva body.page-index, asi que
 *    la excluimos y en el inicio la cabecera se queda transparente
 *    sobre el slider como el demo.
 * ========================================================= */
body:not(.page-index) .header-top {
  background: #91C6EB !important;
}

/* =========================================================
 * 22) MÓVIL · ajustes responsive (max-width: 767px)
 * ========================================================= */
@media (max-width: 767px) {

  /* CABECERA · en el inicio, azul de marca también en móvil */
  body.page-index .header-top {
    background: #91C6EB !important;
  }

  /* FOOTER · las 3 columnas se apilan a ancho completo */
  .footer-center .ApRow>.ApColumn {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px;
  }

  .footer-center .ApRow>.ApColumn:last-child {
    margin-bottom: 0;
  }

  /* FOOTER · "Su cuenta" como los demás títulos (blanco, sin flecha) */
  #block_myaccount_infos .title {
    margin: 0 0 24px !important;
    padding: 0 !important;
  }

  #block_myaccount_infos .title .h3 {
    color: #fff;
  }

  #block_myaccount_infos .title .collapse-icons,
  #block_myaccount_infos .title .float-xs-right {
    display: none !important;
  }

  #block_myaccount_infos .account-list.collapse {
    display: block !important;
  }

  /* TÍTULOS de sección · título y botón apilados, sin la línea gris */
  .title-w {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
  }

  .title-w .title_block {
    font-size: 22px;
  }

  .title-w .block_content {
    width: 100%;
  }

  .title-w .block_content:before {
    display: none;
  }

  /* NEWSLETTER · titular más contenido y botón con aire */
  .block_newsletter .title_block {
    font-size: 26px;
  }

  .block_newsletter .btn-custom {
    margin-top: 12px;
  }

  /* OPINIONES · menos padding y texto a ancho completo */
  .testimonial .block_content {
    padding: 30px 22px 26px;
  }

  .testimonial .descript {
    font-size: 16px;
    max-width: 100%;
  }

  /* "Dónde viven nuestros cuentos" · imagen de logos sin desbordar */
  .inspiration-w .block_content img {
    max-width: 100%;
    height: auto;
  }

  /* CABECERA MÓVIL · logo centrado arriba, barra hamburguesa + iconos en fila */
  .header-top .ApRow {
    flex-wrap: wrap;
  }

  /* logo: fila completa, centrado */
  .header-top .ApColumn:first-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    text-align: center;
  }

  .header-top .header_logo {
    display: inline-block;
  }

  .header-top .header_logo img {
    max-height: 60px;
    width: auto;
  }

  /* menú (hamburguesa) a la izquierda */
  .header-top .ApColumn:nth-child(2) {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  /* iconos: pegados a la derecha, en la misma línea */
  .header-top .top-right-header {
    flex: 1 1 auto !important;
    max-width: none !important;
    justify-content: flex-end;
    gap: 20px;
  }

  /* BUSCADOR MÓVIL · cerrado por defecto, popup al pulsar la lupa
     (anula el right:-110% que mete headerposition*.css y lo recoloca) */
  #leo_search_block_top #leosearchtopbox {
    display: none;
    left: auto !important;
    right: -130% !important;
    width: 92vw !important;
    max-width: 340px;
  }

  #leo_search_block_top.active #leosearchtopbox {
    display: block;
  }

  /* CABECERA MÓVIL · botón hamburguesa en coral de marca */
  .navbar-toggler {
    background: #f65d4e !important;
    color: #fff !important;
    border-radius: 6px;
  }

  /* MENÚ MÓVIL · usar el .leo-top-menu de la cabecera como panel lateral
     izquierdo. Ocultamos el cajón nativo salvo su botón (sirve de cerrar). */
  .off-canvas-nav-megamenu,
  .offcanvas-mainnav {
    display: none !important;
  }

  .off-canvas-active .leo-top-menu.megamenu-off-canvas {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 72% !important;
    max-width: 300px;
    height: 100% !important;
    overflow-y: auto;
    background: #fff;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
    z-index: 9999;
    padding: 24px 0;
  }

  /* contenido pegado al borde izquierdo, sin huecos heredados del builder */
  .off-canvas-active .leo-top-menu.megamenu-off-canvas > * {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .off-canvas-active .leo-top-menu .navbar-nav {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .off-canvas-active .leo-top-menu .navbar-nav > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
  }

  .off-canvas-active .leo-top-menu .navbar-nav > li > a {
    padding: 12px 24px !important;
    text-align: left !important;
  }

  .off-canvas-active main#page,
  .off-canvas-active #page,
  .off-canvas-active main {
    transform: none !important;
    position: static !important;
    transition: none !important;
    margin: 0 !important;
  }

  .off-canvas-active .leo-top-menu.megamenu-off-canvas {
    transition: none !important;
  }

  /* CABECERA MÓVIL · mostrar wishlist y usuario (el tema los oculta
     con .hidden-sm-down). Los forzamos visibles junto a lupa y carrito. */
  .top-right-header .ap-wishlist.hidden-sm-down,
  .top-right-header #leo_block_top .expand-more.hidden-sm-down,
  .top-right-header #leo_block_top .dropdown > a.hidden-sm-down {
    display: inline-flex !important;
  }
}