/*
Theme Name: Hello Elementor Child (ATCAL)
Theme URI: http://atcalsas.com/
Description: Tema hijo para Hello Elementor con los estilos corporativos y tipografía de la Tienda ATCAL.
Author: Antigravity
Template: hello-elementor
Version: 1.0.0
*/

:root {
    --azul-oscuro: #1C355E;
    --azul-principal: #2D5A9F;
    --azul-medio: #0072B8;
    --azul-cian: #00AEEF;
    --naranja-agil: #F57E20;
    --gris-oscuro: #414042;
    --gris-medio: #939598;
    --gris-claro: #DDDDDD;
}

/* Force standard sans-serif clean font stack on shop elements */
.woocommerce, .woocommerce-page, .products, .product {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* WooCommerce Shop Loop / Grid Cards */
ul.products li.product, 
.woocommerce ul.products li.product {
    background: #ffffff !important;
    border: 1px solid var(--gris-claro) !important;
    border-bottom: 4px solid var(--azul-medio) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    margin-bottom: 30px !important;
}

ul.products li.product:hover, 
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    border-color: var(--azul-principal) !important;
    box-shadow: 0 8px 20px rgba(28, 53, 94, 0.08) !important;
}

/* Loop Title */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--gris-oscuro) !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
}

ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--azul-principal) !important;
}

/* Price block */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
    color: var(--azul-oscuro) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin-top: auto !important;
    margin-bottom: 15px !important;
}

/* Loop Add to Cart Button */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
    background-color: var(--azul-oscuro) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    border: none !important;
    text-align: center !important;
    transition: background-color 0.2s ease, transform 0.1s !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: var(--azul-principal) !important;
}

ul.products li.product .button:active,
.woocommerce ul.products li.product .button:active {
    transform: scale(0.98) !important;
}

/* Single Product Page Styling */
.product-template-default .product {
    margin-top: 20px !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 0.95rem !important;
    color: var(--gris-oscuro) !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce-page div.product p.price,
.woocommerce-page div.product span.price {
    color: var(--naranja-agil) !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    margin-bottom: 20px !important;
}

/* Single Add to Cart Button */
.woocommerce div.product .button.alt,
.woocommerce-page div.product .button.alt,
.woocommerce div.product button.button.alt,
.woocommerce-page div.product button.button.alt {
    background-color: var(--naranja-agil) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(245, 126, 32, 0.2) !important;
    transition: background-color 0.2s ease, transform 0.1s !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.woocommerce div.product .button.alt:hover,
.woocommerce div.product button.button.alt:hover {
    background-color: #e06a12 !important;
    box-shadow: 0 6px 15px rgba(245, 126, 32, 0.3) !important;
}

.woocommerce div.product .button.alt:active,
.woocommerce div.product button.button.alt:active {
    transform: scale(0.98) !important;
}

/* WooCommerce Tabs Customization */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1.5px solid var(--gris-claro) !important;
    padding-left: 0 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    gap: 30px !important;
    background: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
    font-weight: 700 !important;
    color: var(--gris-medio) !important;
    font-size: 0.95rem !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
    text-shadow: none !important;
    background: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--azul-oscuro) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 3px solid var(--azul-medio) !important;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    font-size: 0.9rem !important;
    color: var(--gris-oscuro) !important;
    line-height: 1.6 !important;
}