/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/*PRODUCTOS DESTACADOS*/
.products li.product img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}

.products li.product {
    display: flex;
    flex-direction: column;
    height: 350px; /* altura uniforme, ajustar según tus imágenes y contenido */
    justify-content: flex-start;
}

/* Contenedor <a> específico de los productos */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px; /* Ajusta la altura fija */
    overflow: hidden;
    background: #fff; /* Opcional: fondo blanco uniforme */
}


/*SELECTOR DE VARIANTES*/
/* Contenedor de variaciones + precio */
.ferreteria-loop-variations-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Contenedor de formulario compacto */
.ferreteria-loop-variations form.cart {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}

.ferreteria-loop-variations table.variations {
    margin: 0;
    border: none;
}

.ferreteria-loop-variations table.variations td.label {
    display: none;
}

.ferreteria-loop-variations select {
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.2;
    max-width: 120px;
}

.ferreteria-loop-variations .single_add_to_cart_button {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
}

/* Carrusel de marcas */
.ferreteria-marcas-slider {
    padding: 0 1rem;
}

/* Contenedor del slide */
.ferreteria-marcas-slider .marca-slide {
    display: flex !important;
    align-items: center;       /* centra verticalmente */
    justify-content: center;   /* opcional: centra horizontalmente si quieres */
    height: 100px;             /* altura uniforme para todos los slides */
    padding: 10px;             /* espacio interno */
}

/* Imagen de la marca */
.ferreteria-marcas-slider .marca-slide img {
    max-height: 80%;           /* evita que se salga de la caja */
    width: auto;               /* mantiene proporción */
    display: block;            /* elimina espacios inferiores de imagen */
}

/* Hover: ligeramente agranda la marca */
.ferreteria-marcas-slider .marca-slide:hover img {
    transform: scale(1.1);
}

/* Opcional: sombra al pasar mouse */
.ferreteria-marcas-slider .marca-slide:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Flechas del slider */
.ferreteria-marcas-slider .slick-prev:before,
.ferreteria-marcas-slider .slick-next:before {
    color: #333;           /* cambia el color de las flechas */
    font-size: 24px;       /* tamaño de las flechas */
    opacity: 1;            /* visibilidad completa */
}

/* Posición opcional de las flechas */
.ferreteria-marcas-slider .slick-prev {
    left: -25px;           /* ajusta según tu diseño */
    z-index: 10;
}

.ferreteria-marcas-slider .slick-next {
    right: -25px;          /* ajusta según tu diseño */
    z-index: 10;
}

/* Puntos de navegación (si decides activarlos) */
.ferreteria-marcas-slider .slick-dots li button:before {
    font-size: 10px;
    color: #999;
}

/*CARRUSEL DE PRODUCTOS DESTACADOS*
/* Contenedor de cada slide */
.productos-destacados-carousel .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Contenedor de la imagen */
.producto-img-wrapper {
    display: flex;
    align-items: center;       /* centra vertical */
    justify-content: center;   /* centra horizontal */
    width: 100%;
    height: 200px;             /* altura fija para todas las imágenes */
    margin-bottom: 10px;
    overflow: hidden;
    padding: 1rem;
}

.producto-img-wrapper a{
  display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    overflow: hidden;
    background: #fff;
}
.producto-img-wrapper img,
.productos-destacados-carousel .item a img {
       width: 100%;
    height: 100%;
    display: block;
    margin: 0 0 1em;
    box-shadow: none;
}

/* Título del producto */
.productos-destacados-carousel .item a {
   color: #333;
   font-size: 14px;
    font-weight: 600;
    margin: 5px 0;
    min-height: 40px; 
}
/* Precio */
.productos-destacados-carousel .item .price {
    font-size: 14px;
    color: #444444;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Botón Añadir al carrito o Seleccionar opciones */
.productos-destacados-carousel .item .button {
    font-size: 13px;
    padding: 6px 12px;
    background-color: #007cba;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
    min-height: auto; 
    margin-bottom: 1rem;
}

/* Flechas Slick */
.productos-destacados-carousel .slick-prev,
.productos-destacados-carousel .slick-next {
    z-index: 10;
    color: #333;
}

.productos-destacados-carousel .slick-prev:before,
.productos-destacados-carousel .slick-next:before {
    font-size: 20px;
    color: #333;
}

/* Mantener título, precio y botón separados uniformemente */
.productos-destacados-carousel .item h3,
.productos-destacados-carousel .item .price {
    margin-bottom: 5px;
}

/* Contenedor de info (nombre, precio, botón) */
.producto-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Ocultar botón "Ver carrito" que aparece tras añadir al carrito */
.added_to_cart,
.woocommerce-message .button.wc-forward {
    display: none !important;
}

.elementor-heading-title {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/*FOOTER*/
.ferreteria-footer-modern {
    background: #1a1a1a;
    color: #fff;
    padding: 3rem 5rem 1rem 5rem;
    font-family: sans-serif;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}
.footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-section h4 {
    margin-bottom: 1rem;
    color: #ffffff;
}
.footer-section p {
    margin-bottom: 0.5rem;
}
.footer-section a {
    margin-bottom: 0.5rem;
}
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-section ul li {
    margin-bottom: 0.5rem;
}
.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #ccc;
}
.footer-container-categories {
    display: flex;
    flex-direction: row;
}
.footer-container-categories ul {
   padding: 0rem 1rem;
}
.newsletter-form {
display: flex;
}
.newsletter-form button{
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
}
.newsletter-form input{
margin-right: 1rem;
}
/* Responsivo */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/*ocultar footer generico*/
#colophon {
  display: none !important;
}

/*HEADER*/
/* Header fijo y visible en todo el sitio */
.site-header, .ast-primary-header-bar {
    position: sticky !important;   /* siempre fijo arriba */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff !important; /* fondo blanco */
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Ajuste para que el contenido no quede tapado */
body {
     /* ajustar según altura real del header */
}


/* Colores del menú y enlaces */
header a,
header nav a,
.site-header a {
  color: #222222 !important;  /* gris oscuro */
  text-decoration: none;
}

/* Barra principal del header siempre blanca */
.ast-primary-header-bar {
    background-color: #ffffff !important;
    background-image: none !important;
}

header a:hover,
header nav a:hover,
.site-header a:hover {
  color: #000000 !important; /* negro al pasar el mouse */
}

/* Cambiar color del icono del carrito (SVG) */
#ast-bag-icon-svg path {
  fill: #000000 !important;   /* gris oscuro */
}

/* Al pasar el mouse, que se ponga negro */
#ast-bag-icon-svg:hover path {
  fill: #3333 !important;
}

.buscar-productos-header {
	margin-left: 2rem;
}
.buscar-productos-header .wp-block-search__label {
	display: none;
}
.buscar-productos-header .wp-block-search__button{
	width: 2em;
    height: 2em;
    padding: 0em !important;
    align-self: center;
	margin-left: 1rem;
}
.buscar-productos-header .wp-block-search__button path{
fill: white !important;
}
.buscar-productos-header .wp-block-search__inside-wrapper {
display: flex;
}
.ast-header-account-type-icon .ahfb-svg-iconset:hover path {
	fill: #3333 !important;
}
.ast-header-account-type-icon .ahfb-svg-iconset:hover circle{
	fill: #3333 !important;
}



/* Mobile y tablet (≤991px) */
@media (max-width: 991px) {
    .ast-hide-custom-menu-mobile .site-header-primary-section-left .site-branding .custom-logo-link img{
    max-width: 100px !important;
    width: 100px !important;
}
}

/* Mensaje personalizado en Thank You Page y Email HTML - versión responsive */
.wc-custom-thankyou-message,
.wc-custom-email-message {
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #00c6ff !important;      /* Borde dorado */
    border-radius: 12px;
    font-family: Arial, sans-serif;
    background: #f4f9ff !important;
    color: #0056b3 !important;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* sombra suave */
    display: flex;
    align-items: flex-start;
    gap: 12px; /* espacio entre icono y texto */
}

/* Icono más grande */
.wc-custom-thankyou-message::before,
.wc-custom-email-message::before {
    content: "📦";
    font-size: 32px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Título del mensaje */
.wc-custom-thankyou-message h3,
.wc-custom-email-message h3 {
    margin-bottom: 0px !important;
    color: #0056b3 !important; /* marrón oscuro */
    font-size: 18px;
    align-self: center;
    text-align: center;
}

/* Texto descriptivo */
.wc-custom-thankyou-message p,
.wc-custom-email-message p {
    margin: 0;
    font-size: 15px;
    color: #555;
    align-self: center;
}

/* Estilos responsive para móviles */
@media (max-width: 600px) {
    .wc-custom-thankyou-message,
    .wc-custom-email-message {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .wc-custom-thankyou-message::before,
    .wc-custom-email-message::before {
        font-size: 36px;
        margin: 0 0 8px 0;
    }

    .wc-custom-thankyou-message h3,
    .wc-custom-email-message h3 {
        font-size: 16px;
    }

    .wc-custom-thankyou-message p,
    .wc-custom-email-message p {
        font-size: 14px;
    }
}