/*
Theme Name: Vector Child
Theme URI: https://themeisle.com/themes/neve/
Template: neve
Author: Roman Sevil
Author URI: https://themeisle.com
Description: Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Tags: blog,custom-logo,e-commerce,rtl-language-support,grid-layout,one-column,two-columns,custom-background,custom-colors,custom-header,custom-menu,featured-image-header,featured-images,flexible-header,full-width-template,sticky-post,theme-options,threaded-comments,translation-ready,accessibility-ready,wide-blocks,block-styles,footer-widgets,portfolio,left-sidebar,right-sidebar
Version: 2.11.6.1688736926
Updated: 2023-07-07 10:35:26

*/

/* Estilos generales para categorías y productos */
.product-subcategories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.product-subcategories .modern-grid-element {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.product-subcategories .modern-grid-image {
    max-width: 100%;
    height: auto;
}

.product-subcategories .product-name {
    font-size: 16px;
    margin-top: 10px;
}

.product-subcategories .modern-grid-element:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.product-subcategories .modern-grid-element a {
    display: block;
    text-decoration: none;
    color: #333;
}

.product-subcategories .modern-grid-element img {
    max-width: 100%;
    height: auto;
}

.product-subcategories .modern-grid-element h3 {
    margin: 10px 0;
    font-size: 16px;
}

/* Estilos para las "cards" */
.product-list .al_archive {
    width: calc(25% - 20px); /* Ajusta el ancho de cada producto con margen */
    margin-bottom: 20px; /* Espaciado inferior entre productos */
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    height: 160px; /* Altura de cada card */
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
}

/* Estilos para el efecto de hover en las "cards" */
.product-list .al_archive:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-list .al_archive:hover {
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
}

.product-list .al_archive a {
    display: block;
    text-decoration: none;
    color: #333;
}

.product-list .al_archive img {
    max-width: 100%;
    height: auto;
}

.product-list .al_archive h3 {
    margin: 10px 0;
    font-size: 16px;
}

/* Ajusta el ancho del contenedor principal */
.product-list.default {
    max-width: 1200px;
    /* Ajusta según tus necesidades */
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Clearfix para limpiar el float */
.product-list:after {
    content: "";
    display: table;
    clear: both;
}

/* Estilos para el título de preguntas frecuentes */
#faq-sidebar .widget-title {
    font-size: 20px; /* Ajusta el tamaño del título según tus preferencias */
}

/* Media query para dispositivos móviles */
@media (max-width: 767px) {
    .product-subcategories {
        grid-template-columns: repeat(1, 1fr); /* Cambiar a una columna en dispositivos móviles */
        padding: 10px; /* Ajustar el espaciado interno para dispositivos móviles */
    }
    
    .product-list .al_archive {
        width: 100%; /* Mostrar los productos en una sola columna en dispositivos móviles */
        margin-bottom: 10px; /* Ajustar el espaciado inferior para dispositivos móviles */
    }
}

.black-link{
    color: #000; /* Cambia el color de texto a negro (#000) */
    text-decoration: none; /* Elimina la subrayado predeterminado */
}