/*
Theme Name: La Herradura Child Theme
Theme URI: https://laherradura.estasahi.com.ar/
Description: Tema hijo personalizado para La Herradura Carnicería.
Author: Tu Nombre
Author URI: https://tuweb.com
Template: astra 
Version: 1.0.0
*/

/* =======================================================
   FONDO PARA PÁGINA DE PRODUCTO INDIVIDUAL (SINGLE)
   ======================================================= */

.woocommerce-product-gallery {
    /* ** Reemplaza 'URL_DE_TU_IMAGEN_DE_FONDO_AQUI' con la URL de tu textura ** */
    background-image: url('https://laherradura.estasahi.com.ar/wp-content/uploads/2025/11/FONDO-CON-HUMO-scaled-e1762631438485.jpeg'); 
    
    /* Cómo se repite la imagen:
       - 'repeat': la imagen se repite en mosaico para cubrir el área.
       - 'no-repeat': la imagen aparece una sola vez.
       - 'repeat-x': se repite horizontalmente.
       - 'repeat-y': se repite verticalmente.
    */
    background-repeat: repeat; /* Generalmente 'repeat' para texturas */
    
    /* Cómo se posiciona la imagen (ej: 'center center' para centrarla) */
    background-position: center center; 
    
    /* Cómo se ajusta la imagen:
       - 'cover': cubre todo el contenedor (puede cortar la imagen).
       - 'contain': ajusta la imagen para que sea visible por completo.
       - 'initial': valor por defecto.
       - Puedes dejarlo sin definir si usas 'repeat' para texturas.
    */
    background-size: cover; /* Prueba con 'cover' o déjalo si usas 'repeat' */
    
    /* Color de respaldo si la imagen no carga o no quieres que se repita mucho */
    background-color: #f7f7f700; 
    
    padding: 30px; 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 
}

/* =======================================================
   FONDO PARA IMÁGENES EN EL LISTADO DE LA TIENDA (SHOP)
   ======================================================= */

/* Aplica el fondo a la imagen destacada en el listado de productos */
.woocommerce ul.products li.product .woocommerce-loop-product__link img, 
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    /* ** Reemplaza 'URL_DE_TU_IMAGEN_DE_FONDO_AQUI' con la URL de tu textura ** */
    background-image: url('https://laherradura.estasahi.com.ar/wp-content/uploads/2025/11/FONDO-CON-HUMO-scaled-e1762631438485.jpeg'); 
    background-repeat: repeat; 
    background-position: center center;
    background-size: cover;
    background-color: #f7f7f700; /* Color de respaldo */
    
    padding: 15px; 
    display: block;
    margin: 0 auto;
}

/* Si quieres que el fondo se aplique al contenedor completo del producto en el listado, y no solo a la imagen */
/* Descomenta y ajusta este bloque si el anterior no te da el resultado deseado */
/* .woocommerce ul.products li.product {
    background-image: url('URL_DE_TU_IMAGEN_DE_FONDO_AQUI'); 
    background-repeat: repeat; 
    background-position: center center;
    background-size: cover;
    background-color: #f7f7f7; 
    border-radius: 8px;
    padding-bottom: 20px; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
} */

/* =======================================================
   FONDO DE MARQUESINA EN EL ENCABEZADO
   ======================================================= */
#la-herradura-marquesina {
    /* ** REEMPLAZA ESTA URL CON LA DE TU IMAGEN DE MARQUESINA ** */
    background-image: url('https://laherradura.estasahi.com.ar/wp-content/uploads/2025/11/marquesina.webp'); 
    
    /* Configuración de la imagen */
    background-size: cover;          /* Asegura que la imagen cubra todo el área */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat;    /* Evita que la imagen se repita */

    /* Altura de la marquesina */
    height: 300px; /* <---- AJUSTA esta altura (ej: 250px o 350px) según tu diseño */
    width: 100%;                     /* Ocupa todo el ancho */
    
    /* Opcional: Esto asegura que el contenido no quede fuera de la imagen */
    overflow: hidden; 
}

/* Opcional: Media Query para dispositivos móviles */
/* En móviles, la altura es menos importante. Podemos reducirla */
@media (max-width: 768px) {
    #la-herradura-marquesina {
        height: 150px; /* Reduce la altura para que no ocupe toda la pantalla del móvil */
    }
}

/* =======================================================
   AJUSTES FINALES DEL ENCABEZADO: FONDO Y ALINEACIÓN
   ======================================================= */

/* 1. Fondo del Contenedor Principal (masthead): Borgoña */
/* Aplicamos el fondo borgoña a todo el bloque principal del header */
#masthead {
    background-color: #A30000 !important; /* Borgoña Principal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    padding-top: 5px; /* Pequeño ajuste para centrar verticalmente */
    padding-bottom: 5px;
}

/* 2. Aumento del Tamaño del Logo */
/* Esto se dirige al contenedor del logo para hacerlo más grande */
/*.site-branding img {
    max-height: 95px !important; /* Aumentamos la altura del logo */
  /*  width: auto;*/
/*}*/

/* 3. Estilo del Menú de Navegación (Enlaces Blancos) */
/* El menú principal de Astra */
.main-header-menu .menu-item a {
    color: #ffffff !important; /* Texto del menú en BLANCO */
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px 15px; 
}

/* Efecto Hover del Menú */
.main-header-menu .menu-item a:hover {
    color: #FFD700 !important; /* Dorado/Amarillo al pasar el ratón */
}

/* 4. Estilo de los Menús Secundarios y Carrito (Alineación y Color) */
/* Esto se dirige a los elementos que están en otras filas o secundarios (como "Ofertas") */
.ast-below-header-wrap,
.ast-primary-header-bar, 
.ast-header-site-identity,
.ast-site-header-cart {
    background-color: #460707 !important; /* Asegura que todos los elementos tengan el fondo borgoña */
    color: #ffffff !important; /* Color blanco para los íconos/texto */
}

/* Asegura que los íconos de carrito y cuenta sean blancos */
.ast-site-header-cart, 
.ast-header-account {
    color: #ffffff !important; 
}

/* =======================================================
   REGLAS ESPECÍFICAS PARA MÓVILES (Max-width 768px)
   Asegura que el fondo de la imagen de producto se muestre.
   ======================================================= */

@media (max-width: 768px) {
    /* 1. Página de Producto Individual (Galería) */
    /* Usamos !important para anular cualquier estilo de Astra que pueda estar interfiriendo */
    .woocommerce-product-gallery {
        /* Vuelve a definir la URL de fondo y las propiedades */
        background-image: url('https://laherradura.estasahi.com.ar/wp-content/uploads/2025/11/FONDO-CON-HUMO-scaled-e1762631438485.jpeg') !important;
        background-color: #f7f7f7 !important; /* Color de respaldo */
        background-repeat: repeat !important;
        background-size: cover !important;
        
        /* Aseguramos que el contenedor tenga altura y padding */
        padding: 20px !important;
    }

    /* 2. Listado de la Tienda (Miniaturas) */
    .woocommerce ul.products li.product .woocommerce-loop-product__link img, 
    .woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
        /* Vuelve a definir la URL de fondo y las propiedades */
        background-image: url('https://laherradura.estasahi.com.ar/wp-content/uploads/2025/11/FONDO-CON-HUMO-scaled-e1762631438485.jpeg') !important;
        background-color: #f7f7f7 !important; 
        background-repeat: repeat !important;
        background-size: cover !important;
        
        /* Aseguramos que se visualice */
        display: block !important;
    }
}

/* =======================================================
   ESTILO PARA TARJETAS DE CATEGORÍA (4 COLUMNAS)
   --- SOLO IMAGEN CLICABLE ---
   ======================================================= */

/* 1. Contenedor de la Tarjeta (Hacer clicable y añadir estilo de tarjeta) */
.tarjeta-categoria-link {
    display: block; 
    position: relative; 
    text-decoration: none; 
    cursor: pointer;
    
    background-color: transparent; /* No necesitamos fondo blanco */
    margin-bottom: 25px; 
    padding: 0; /* Aseguramos que NO haya padding extra */
    border-radius: 10px;
    overflow: hidden; 
    
    /* Efecto de sombra */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease;
}

/* Efecto Hover: la tarjeta se levanta */
.tarjeta-categoria-link:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    transform: translateY(-5px); 
}

/* 2. Estilo de la Imagen (para que ocupe el 100% del ancho de la tarjeta) */
.tarjeta-categoria-link .tarjeta-imagen img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0; /* Quitamos el margen inferior que Gutenberg pone a las figuras */
}

/* 3. ¡ELIMINAR ESTO! */
/* Si tenías un bloque para .tarjeta-categoria-link .tarjeta-titulo, ELIMÍNALO COMPLETAMENTE. */

/* Estilo para los horarios en la columna */
.horarios-columna h4 {
    font-size: 1.8em; /* Tamaño grande para el día */
    font-weight: 700;
    color: #333333;
}

.horarios-columna h5 {
    font-size: 1.5em; /* Tamaño mediano para los rangos de hora */
    font-weight: 500;
    color: #555555;
    margin-bottom: 5px;
}

/* =======================================================
   ESTILO PARA EL ENLACE "NANO LOPEZ" (BARRA DE COPYRIGHT)
   ======================================================= */

/* Estilo para el enlace en la barra de copyright */
.ast-footer-copyright .footer-link-nano {
    color: #A30000 !important; /* Color de Marca: Borgoña */
    text-decoration: none; /* Quitamos el subrayado */
    font-weight: 600; /* Lo hacemos más grueso */
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

/* Efecto Hover: Cambia a blanco al pasar el ratón */
.ast-footer-copyright .footer-link-nano:hover {
    color: #ffffff !important; /* Blanco al pasar el ratón */
}