/* tienda.css */

/* Contenedor principal de productos */
.contproductos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adaptativo */
    gap: 30px; /* Espacio entre productos */
    margin: 5% auto; /* Centra y da margen */
    max-width: 1200px;
    padding: 0 20px; /* Padding para evitar pegarse a los bordes */
}

/* Tarjeta de producto individual */
.producto {
    padding: 20px; /* Reducido un poco el padding */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
    background-color: white;
    display: flex; /* Añadido flex para organizar contenido */
    flex-direction: column;
    align-items: center; /* Centra contenido */
    text-align: center;
}

.producto:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.imgcasa {
    width: 100%; /* Ocupa todo el ancho del producto */
    height: 180px; /* Altura fija para la imagen */
    margin-bottom: 10px;
}

.imgcasa img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

.prodcasa {
    font-size: 18px; /* Tamaño más legible */
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #333;
    font-family: 'Tamrin', cursive;
}

.preciocasa {
    display: flex;
    border: 2px solid #00bf63;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    margin: 10px auto; /* Centrar precio */
}

.precs {
    background-color: #00bf63;
    color: white;
    font-family: "AbeeZee", sans-serif;
    font-weight: 700;
    padding: 10px 20px; /* Ajustado padding */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-right: 1px solid rgba(255,255,255,0.3);
    user-select: none;
}

.precsn {
    color: #00bf63;
    font-family: "AbeeZee", sans-serif;
    font-weight: 700;
    padding: 10px 20px; /* Ajustado padding */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    user-select: none;
}

.contcaryver {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #00bf63;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    width: 90%; /* Ajustado el ancho */
    max-width: 250px; /* Max width para que no sea muy largo */
    margin-left: auto;
    margin-right: auto;
}

/* Botones dentro de contcaryver */
.contcaryver button, .contcaryver a.ver {
    flex: 1;
    padding: 12px 10px;
    font-family: "AbeeZee", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
    color: #00bf63;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    text-decoration: none;
}

.contcaryver button:hover, .contcaryver a.ver:hover {
    background-color: #01994f;
    color: #fff;
}

.añadircarrito {
    /* border-right: 2px solid #00bf63; */
    border-radius: 8px 0 0 8px !important;
}

.separador-botones {
    width: 2px; 
    height: 70%; 
    background-color: #00bf63; 
    margin: 0 0; 
    box-sizing: border-box; 
}

.ver { 
    border-radius: 0 8px 8px 0 !important; /* Bordes solo a la derecha */
    border: solid #00bf63 2px;
}

.contcaryver button:active,
.contcaryver button:focus,
.contcaryver a.ver:active,
.contcaryver a.ver:focus {
    outline: none;
    background-color: #017a3a;
}

/* Responsive para Tienda */
@media (max-width: 768px) {
    .contproductos {
        grid-template-columns: 1fr; /* Una columna en móvil */
        padding: 10px;
        gap: 20px;
    }
    .producto {
        width: 100%;
        max-width: 350px; /* Limita el ancho del producto individual */
        margin-left: auto;
        margin-right: auto;
    }
    .imgcasa {
        height: 200px; /* Mantiene una altura para las imágenes de producto */
    }
    .contcaryver {
        flex-direction: column; /* Botones apilados */
        width: 100%;
        max-width: unset;
    }
    .contcaryver button, .contcaryver a.ver {
        width: 100%;
        border-radius: 8px !important; /* Bordes redondeados para botones apilados */
        border-right: none !important;
    }
    /* Si tienes más estilos específicos de tienda, añádelos aquí */
}