/*
Theme Name: La Cueva de Alibaba
Description: Tema hijo de Blocksy para la tienda online de La Cueva de Alibaba (La Habana). Aquí va nuestro diseño; Blocksy pone la base de WooCommerce.
Template: blocksy
Version: 0.6.3
Text Domain: lacueva
*/

/* Las fotos de los productos vienen del sistema de la tienda con tamaños y
   proporciones distintas (400 px de lado mayor), y Blocksy le pone a cada
   <img> de la rejilla su proporción real en línea (style="aspect-ratio: 9/20").
   Aquí se fuerza un cuadrado para todas, con la foto completa y centrada, para
   que las tarjetas queden alineadas. La ficha del producto no se toca. */
.products .product .ct-media-container img.wp-post-image {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* En la página Tienda (el catálogo completo) el título "Tienda" no aporta nada
   y en el teléfono empujaba los productos media pantalla hacia abajo: fuera.
   En las categorías (Belleza, BAR...) el título sí se queda, en una línea. */
.post-type-archive-product .hero-section { display: none; }
.tax-product_cat .hero-section { padding-top: 1rem; padding-bottom: 0.5rem; }

/* Barra de navegación fija abajo, solo en teléfonos (la pinta functions.php).
   Fondo negro con los iconos en el amarillo del logo. El cuerpo lleva un
   relleno abajo para que la barra no tape el pie ni el último producto. */
.cueva-barra { display: none; }
@media (max-width: 999px) {
  body { padding-bottom: 64px; }
  .cueva-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: flex; justify-content: space-around; align-items: stretch;
    height: 60px; padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #e3e5e8; box-shadow: 0 -4px 14px rgba(0,0,0,.06);
  }
  .cueva-barra a, .cueva-barra button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; padding: 0; margin: 0; color: #666; font: inherit; font-size: 11px; line-height: 1; position: relative;
    text-decoration: none; cursor: pointer;
  }
  .cueva-barra a.activo, .cueva-barra a:hover, .cueva-barra button:hover { color: #0a0500; }
  .cueva-barra a.activo::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: #ffcd05; border-radius: 0 0 3px 3px; }
  .cueva-barra svg { display: block; }
}

/* Teléfono: cabecera de una línea con el logo a la izquierda y, debajo, la
   barra de búsqueda a todo lo ancho. El menú, la lupa y el carrito de arriba
   se esconden (siguen en el HTML: la barra de abajo los usa), porque ya están
   en la barra de abajo. Leo, 06/09/2026. */
.cueva-buscar { display: none; }
@media (max-width: 999px) {
  [data-device="mobile"] [data-id="trigger"],
  [data-device="mobile"] [data-id="search"],
  [data-device="mobile"] [data-id="cart"] { display: none !important; }
  [data-device="mobile"] [data-row*="middle"] > div { --container-spacing: 16px; }
  /* La barra va en la MISMA línea que el logo: la fila de la cabecera mide 60 px
     y el logo 40 px a la izquierda; el formulario se pinta justo después de la
     cabecera y se sube con un margen negativo hasta quedar a su derecha. */
  .cueva-buscar {
    display: flex; gap: 0; position: relative; z-index: 800;
    margin: -51px 16px 10px 68px; height: 42px;
    border: 0; border-radius: 21px; overflow: hidden; background: #eef0f3;
  }
  .cueva-buscar input[type="search"] {
    flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 12px; font-size: 16px; background: transparent;
  }
  .cueva-buscar button {
    width: 46px; border: 0; margin: 0; padding: 0; background: transparent; color: #0a0500; cursor: pointer; border-radius: 0;
  }
  /* El bloque de bienvenida de la portada tenía demasiado aire arriba y abajo. */
  .home .wp-block-group.alignfull:first-child { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* Catálogo en el teléfono: los productos empiezan justo debajo de la barra de
   búsqueda. Blocksy metía 50 px de aire y luego el selector "Ordenar por", que
   en Tienda y en las categorías no hace falta (Leo, 06/09/2026); se queda solo
   en los resultados de búsqueda, que es donde se usa. */
@media (max-width: 999px) {
  .post-type-archive-product .ct-container, .tax-product_cat .ct-container, .search-results .ct-container { padding-top: 6px !important; }
  .post-type-archive-product .ct-shop-toolbar, .tax-product_cat .ct-shop-toolbar,
  .post-type-archive-product .woocommerce-ordering, .tax-product_cat .woocommerce-ordering { display: none !important; }
  .tax-product_cat .hero-section { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .ct-shop-toolbar { margin-bottom: 8px !important; }
}

/* El logo, redondo (el archivo es un cuadrado negro con el círculo dentro). */
.site-logo-container img { border-radius: 50%; }

/* Menú lateral (el que abre "Categorías"): fondo blanco, letra oscura de 17 px,
   el punto activo en dorado, la cruz de cerrar visible. Leo, 07/09/2026: "eso
   es muy grande" y "quitar el fondo negro". */
#offcanvas { --theme-text-color: #0a0500; --theme-link-initial-color: #0a0500; --theme-link-hover-color: #b8860b; }
#offcanvas .mobile-menu a, #offcanvas .mobile-menu > li > a, #offcanvas .ct-panel-content a {
  color: #0a0500 !important; font-size: 17px !important; font-weight: 600; line-height: 1.4;
}
#offcanvas .mobile-menu li.current-menu-item > a, #offcanvas .mobile-menu li.current-menu-ancestor > a { color: #b8860b !important; }
#offcanvas .mobile-menu li > a { padding-top: 10px; padding-bottom: 10px; }
#offcanvas .ct-toggle-close { color: #0a0500 !important; background: #f3f4f6 !important; }
#offcanvas .ct-toggle-close svg { fill: #0a0500 !important; }

/* Productos que se venden EN DÓLARES (Leo, 07/09/2026): el precio se lee en
   dólares y en verde, para que se distinga de un vistazo del resto del
   catálogo, que va en pesos. */
.precio-usd { color: #15803d; font-weight: 700; }