/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Tema hijo de Astra para personalizaciones
 Author: Tu Nombre
 Author URI: https://tusitio.com
 Template: astra
 Version: 1.0.0
*/

/* Estilos para las subcategorías en grid */
.grid-subcategories {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 20px; /* Espaciado entre las tarjetas */
    width: 100%;
    margin: 0 auto; /* Centrar el contenido */
}

/* Estilos para las tarjetas de categoría */
.grid-subcategories .product-category {
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 15px;
    background: #f9f9f9;
    transition: transform 0.3s ease;
    max-width: 250px; /* Tamaño máximo de cada tarjeta */
    margin: 0 auto; /* Centrar tarjetas individuales */
}

/* Efecto hover para las tarjetas */
.grid-subcategories .product-category:hover {
    transform: scale(1.05);
}

/* Estilos para las imágenes dentro de las tarjetas */
.grid-subcategories .product-category img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* Estilo para los títulos dentro de las tarjetas */
.grid-subcategories .product-category h2 {
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
}

/* Contenedor personalizado con un ancho máximo */
.custom-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsividad para pantallas medianas */
@media (max-width: 1024px) {
    .grid-subcategories {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
    }
}

/* Responsividad para tablets */
@media (max-width: 768px) {
    .grid-subcategories {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

/* Responsividad para móviles */
@media (max-width: 480px) {
    .grid-subcategories {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
}

/* Estilos generales para las categorías padre */
.categorias-padre-tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas por defecto (desktop) */
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 30px;
}

/* Estilo para cada tarjeta de categoría */
.categoria-tarjeta {
    border: 1px solid #ddd; /* Bordes suaves */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px;
    text-align: center;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

/* Efecto hover para las tarjetas */
.categoria-tarjeta:hover {
    transform: scale(1.05); /* Efecto hover para hacer que crezca ligeramente */
}

/* Estilo para los títulos de las categorías */
.categoria-tarjeta h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

/* Estilo para las descripciones de las categorías */
.categoria-tarjeta p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* Imágenes de las categorías */
.categoria-tarjeta img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

/* Responsividad para tablet */
@media (max-width: 1024px) {
    .categorias-padre-tarjetas {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas para tablet */
    }
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .categorias-padre-tarjetas {
        grid-template-columns: 1fr; /* 1 columna para móviles */
    }

    .categoria-tarjeta h3 {
        font-size: 16px; /* Reducir tamaño de título */
    }

    .categoria-tarjeta p {
        font-size: 12px; /* Reducir tamaño de la descripción */
    }
}

/* Estilo general del carrito */
.woocommerce-cart-form {
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    border-collapse: collapse;
}

.woocommerce-cart-form .shop_table {
    width: 100%;
    border: 1px solid #e5e5e5;
}

.woocommerce-cart-form .shop_table thead th {
    background-color: #f7f7f7;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.woocommerce-cart-form .shop_table tbody tr {
    border-bottom: 1px solid #e5e5e5;
}

.woocommerce-cart-form .shop_table tbody tr:last-child {
    border-bottom: none;
}

.woocommerce-cart-form .shop_table tbody td {
    padding: 10px;
    vertical-align: middle;
}

.woocommerce-cart-form .product-thumbnail img {
    max-width: 80px;
    height: auto;
}

.woocommerce-cart-form .product-remove a {
    color: #ff3b3b;
    text-decoration: none;
}

.woocommerce-cart-form .product-remove a:hover {
    color: #ff0000;
}

.woocommerce-cart-form .product-quantity input {
    width: 60px;
    text-align: center;
}

.woocommerce-cart-form .product-subtotal {
    font-weight: bold;
}

/* Shortcode de WhatsApp */
.cart-whatsapp {
    margin-top: 20px;
    text-align: center;
}

.cart-whatsapp a {
    display: inline-block;
    background-color: #25d366;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.cart-whatsapp a:hover {
    background-color: #1da955;
}
/* Archivo: custom-styles.css */

.custom-cart-container {
    background-color: #f9f9f9 !important;
    padding: 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
}

.custom-cart-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.custom-cart-table th,
.custom-cart-table td {
    padding: 15px !important;
    text-align: left !important;
    border-bottom: 1px solid #ddd !important;
}

.custom-product-remove {
    text-align: center !important;
}

.custom-product-thumbnail img {
    max-width: 75px !important;
    height: auto !important;
}

.custom-cart-whatsapp {
    margin-top: 20px !important;
    text-align: center !important;
}

.custom-cart-whatsapp a {
    display: inline-block !important;
    background-color: #25d366 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    font-weight: bold !important;
}


.custom-cart-container {
    background-color: #f9f9f9 !important;
    padding: 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
}