/*
Theme Name: Feedback Music Shop
Theme URI: https://feedbackmusic.cl/tienda
Description: Tema personalizado a medida para la tienda de Feedback Music.
Author: UltraMarketera
Author URI: https://ultramarketera.cl
Version: 1.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
Text Domain: feedback-shop
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Montserrat:wght@500;700;900&display=swap');

/* --- FONDO Y TIPOGRAFÍA BASE --- */
body, html, .woocommerce, .site-main, .content-area {
    background-color: #050505 !important;
    background-image: radial-gradient(circle at center top, #1a0a2e 0%, #050505 70%) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .woocommerce-loop-product__title, .woocommerce-result-count {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
}

/* --- ESTILOS WOOCOMMERCE: CAJAS DE TEXTO Y FILTROS --- */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce-ordering select {
    background: rgba(0,0,0,0.8) !important;
    border: 1px solid rgba(119,59,198,0.5) !important;
    color: white !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
}

/* --- ESTILOS WOOCOMMERCE: BOTONES (Estilo Púrpura) --- */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit {
    background-color: #9333ea !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 0 20px rgba(119,59,198,0.4) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 10px 24px !important;
    text-align: center !important;
    margin-top: auto !important;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: #a855f7 !important;
    box-shadow: 0 0 40px rgba(119,59,198,0.8) !important;
    transform: translateY(-2px) !important;
}

/* --- ESTILOS WOOCOMMERCE: TARJETAS DE PRODUCTO --- */
.woocommerce ul.products li.product {
    background: rgba(20, 10, 30, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(119, 59, 198, 0.2) !important;
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
    transition: all 0.5s ease !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.woocommerce ul.products li.product:hover {
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 10px 40px rgba(119, 59, 198, 0.3) !important;
    transform: translateY(-4px) !important;
}

/* --- ESTILOS WOOCOMMERCE: PRECIO --- */
.woocommerce ul.products li.product .price {
    color: #eab308 !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
}

/* --- ESPACIADO Y CUADRÍCULA (GRID) --- */
.content-area {
    padding-top: 160px !important;
    padding-bottom: 80px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* --- OCULTAR LA BARRA LATERAL --- */
#secondary, .widget-area { display: none !important; }
.woocommerce nav.woocommerce-pagination { margin-top: 3rem !important; text-align: center !important; }