/*
 * Huellarte Global CSS
 * Version: 2.2.0
 * Divi Handmade Shop + WooCommerce + Huellarte Shop UX
 */

/* =========================================================
   1. VARIABLES DE MARCA
   ========================================================= */

:root {
    --hg-primary: #2f2117;
    --hg-primary-hover: #1f160f;
    --hg-gold: #c89a3d;
    --hg-gold-hover: #b6842e;
    --hg-gold-light: #ddbb74;

    --hg-bg: #faf6ef;
    --hg-bg-soft: #f3e9d8;
    --hg-white: #ffffff;

    --hg-text: #35281e;
    --hg-text-muted: #76685a;
    --hg-border: #eaddc8;

    --hg-success: #5f8f57;
    --hg-info: #6b8ec1;
    --hg-warning: #d89a32;
    --hg-danger: #c95a5a;

    --hg-radius-sm: 10px;
    --hg-radius-md: 16px;
    --hg-radius-lg: 28px;

    --hg-shadow-sm: 0 4px 14px rgba(47, 33, 23, 0.08);
    --hg-shadow-md: 0 10px 30px rgba(47, 33, 23, 0.12);

    --hg-transition: 0.22s ease;
}

/* =========================================================
   2. BASE GLOBAL
   ========================================================= */

body {
    color: var(--hg-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--hg-primary);
}

a {
    transition:
        color var(--hg-transition),
        background-color var(--hg-transition);
}

#main-content a:not(.et_pb_button):not(.button):not(.checkout-button) {
    color: var(--hg-gold);
}

#main-content a:not(.et_pb_button):not(.button):not(.checkout-button):hover {
    color: var(--hg-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(200, 154, 61, 0.35);
    outline-offset: 2px;
}

/* =========================================================
   3. BOTONES DIVI
   ========================================================= */

.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button,
.et_pb_contact_submit,
.et_pb_newsletter_button {
    background-color: var(--hg-gold) !important;
    color: var(--hg-white) !important;
    border-color: var(--hg-gold) !important;
    border-radius: 999px !important;
    box-shadow: var(--hg-shadow-sm);
    transition:
        background-color var(--hg-transition),
        border-color var(--hg-transition),
        transform var(--hg-transition),
        box-shadow var(--hg-transition) !important;
}

.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button:hover,
.et_pb_contact_submit:hover,
.et_pb_newsletter_button:hover {
    background-color: var(--hg-primary) !important;
    border-color: var(--hg-primary) !important;
    color: var(--hg-white) !important;
    box-shadow: var(--hg-shadow-md);
    transform: translateY(-1px);
}

/* =========================================================
   4. BOTONES WOOCOMMERCE
   ========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.single_add_to_cart_button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order {
    background-color: var(--hg-gold) !important;
    color: var(--hg-white) !important;
    border: 1px solid var(--hg-gold) !important;
    border-radius: 999px !important;
    box-shadow: var(--hg-shadow-sm);
    line-height: 1.2 !important;
    transition:
        background-color var(--hg-transition),
        border-color var(--hg-transition),
        transform var(--hg-transition),
        box-shadow var(--hg-transition) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.single_add_to_cart_button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
    background-color: var(--hg-primary) !important;
    border-color: var(--hg-primary) !important;
    color: var(--hg-white) !important;
    box-shadow: var(--hg-shadow-md);
    transform: translateY(-1px);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled {
    background-color: var(--hg-text-muted) !important;
    color: var(--hg-white) !important;
    border-color: var(--hg-text-muted) !important;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* =========================================================
   5. TARJETAS DE PRODUCTOS
   ========================================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    height: auto !important;
    padding: 18px !important;
    padding-bottom: 18px !important;
    overflow: hidden;
    background: var(--hg-white);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
    box-shadow: var(--hg-shadow-sm);
    transition:
        transform var(--hg-transition),
        box-shadow var(--hg-transition),
        border-color var(--hg-transition);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: var(--hg-gold-light);
    box-shadow: var(--hg-shadow-md);
    transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
    color: var(--hg-primary);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--hg-primary) !important;
    font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
    color: var(--hg-text-muted) !important;
    opacity: 0.75;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
    color: var(--hg-gold-hover) !important;
    text-decoration: none;
}

.woocommerce span.onsale,
.woocommerce-page span.onsale {
    min-width: auto;
    min-height: auto;
    padding: 7px 12px !important;
    background: var(--hg-gold) !important;
    color: var(--hg-white) !important;
    border-radius: 999px !important;
    box-shadow: var(--hg-shadow-sm);
    line-height: 1.2 !important;
}

/* =========================================================
   6. BOTÓN DE PRODUCTO
   Corrige el segundo fondo/botón visible por detrás.
   ========================================================= */

.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.et_pb_shop .products li.product a.button {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    max-width: 100%;
    min-height: 44px;

    margin: 14px 0 0 !important;
    padding: 11px 16px !important;
    box-sizing: border-box;

    overflow: hidden !important;
    white-space: normal;
    text-align: center;
    line-height: 1.25 !important;
}

/* Elimina capas, iconos y fondos automáticos de Divi. */
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product a.button::after,
.woocommerce-page ul.products li.product a.button::before,
.woocommerce-page ul.products li.product a.button::after,
.et_pb_shop .products li.product a.button::before,
.et_pb_shop .products li.product a.button::after {
    display: none !important;
    content: none !important;
}

/* Oculta por completo el enlace adicional creado por WooCommerce. */
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product a.added_to_cart,
.et_pb_shop .products li.product a.added_to_cart,
.woocommerce ul.products li.product a.wc-forward,
.woocommerce-page ul.products li.product a.wc-forward,
.et_pb_shop .products li.product a.wc-forward {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}



/* =========================================================
   7. FORMULARIOS
   ========================================================= */

#main-content input[type="text"],
#main-content input[type="email"],
#main-content input[type="tel"],
#main-content input[type="password"],
#main-content input[type="number"],
#main-content input[type="search"],
#main-content input[type="url"],
#main-content input[type="date"],
#main-content textarea,
#main-content select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: var(--hg-white);
    color: var(--hg-text);
    border: 1px solid var(--hg-border) !important;
    border-radius: var(--hg-radius-sm) !important;
    transition:
        border-color var(--hg-transition),
        box-shadow var(--hg-transition);
}

#main-content input:focus,
#main-content textarea:focus,
#main-content select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--hg-gold) !important;
    box-shadow: 0 0 0 3px rgba(200, 154, 61, 0.18) !important;
    outline: none;
}

.woocommerce form .form-row label {
    color: var(--hg-primary);
    font-weight: 600;
}

/* =========================================================
   8. CARRITO, CHECKOUT Y TABLAS
   ========================================================= */

.woocommerce-cart table.shop_table,
.woocommerce table.shop_table {
    overflow: hidden;
    background: var(--hg-white);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
}

.woocommerce-cart table.shop_table th,
.woocommerce table.shop_table th,
.woocommerce-checkout-review-order-table th {
    background: var(--hg-bg-soft);
    color: var(--hg-primary);
}

.woocommerce-cart table.shop_table td,
.woocommerce table.shop_table td {
    border-color: var(--hg-border);
}

.woocommerce-cart .cart_totals,
.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px;
    background: var(--hg-white);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
    box-shadow: var(--hg-shadow-sm);
}

.woocommerce-checkout #payment {
    background: var(--hg-bg-soft) !important;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--hg-white) !important;
    color: var(--hg-text);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
}

/* =========================================================
   9. AVISOS WOOCOMMERCE
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--hg-white);
    color: var(--hg-text);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    box-shadow: var(--hg-shadow-sm);
}

.woocommerce-message {
    border-top: 4px solid var(--hg-success) !important;
}

.woocommerce-info {
    border-top: 4px solid var(--hg-info) !important;
}

.woocommerce-error {
    border-top: 4px solid var(--hg-danger) !important;
}

/* =========================================================
   10. MI CUENTA
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation {
    overflow: hidden;
    background: var(--hg-white);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
    box-shadow: var(--hg-shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--hg-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 13px 16px;
    color: var(--hg-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background: var(--hg-gold);
    color: var(--hg-white) !important;
}

/* =========================================================
   11. BREADCRUMBS
   ========================================================= */

.dpprof_breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    color: var(--hg-text-muted);
    list-style: none;
}

.dpprof_breadcrumbs a {
    color: var(--hg-gold);
}

.dpprof_breadcrumbs a:hover {
    color: var(--hg-primary);
}

.dpprof_breadcrumbs .bread-current {
    color: var(--hg-primary);
}

/* =========================================================
   12. FOOTER
   ========================================================= */

#main-footer a,
.et-l--footer a,
footer.et-l a,
#footer-widgets a,
.et_pb_section.footer a {
    display: inline !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--hg-primary) !important;
    line-height: inherit !important;
    transform: none !important;
}

#main-footer a:hover,
.et-l--footer a:hover,
footer.et-l a:hover,
#footer-widgets a:hover,
.et_pb_section.footer a:hover {
    background: transparent !important;
    color: var(--hg-gold-hover) !important;
    box-shadow: none !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none !important;
}

#main-footer li,
.et-l--footer li,
footer.et-l li,
#footer-widgets li,
.et_pb_section.footer li {
    margin-bottom: 8px;
}

body #page-container footer .px_footer_links,
body #page-container .et-l--footer .px_footer_links,
body #page-container .et_pb_section .px_footer_links.et_pb_button {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--hg-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    transform: none !important;
}

body #page-container footer .px_footer_links::before,
body #page-container footer .px_footer_links::after,
body #page-container .et-l--footer .px_footer_links::before,
body #page-container .et-l--footer .px_footer_links::after {
    display: none !important;
    content: none !important;
}

body #page-container footer .px_footer_links:hover,
body #page-container .et-l--footer .px_footer_links:hover {
    background: transparent !important;
    color: var(--hg-gold) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    transform: none !important;
}

/* =========================================================
   13. HUELLARTE SHOP UX
   ========================================================= */

.woocommerce a.button.hg-cart-loading,
.woocommerce-page a.button.hg-cart-loading,
.et_pb_shop a.button.hg-cart-loading {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
}

.hg-cart-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--hg-white);
    border-radius: 50%;
    animation: hg-cart-spin 0.7s linear infinite;
}

@keyframes hg-cart-spin {
    to {
        transform: rotate(360deg);
    }
}

.woocommerce ul.products li.product a.hg-view-cart-button,
.woocommerce-page ul.products li.product a.hg-view-cart-button,
.et_pb_shop .products li.product a.hg-view-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100% !important;
    min-height: 46px;
    margin: 14px 0 0 !important;
    padding: 12px 18px !important;
    background: var(--hg-primary) !important;
    color: var(--hg-white) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 700;
    line-height: 1.2 !important;
    text-align: center;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.woocommerce ul.products li.product a.hg-view-cart-button:hover,
.woocommerce-page ul.products li.product a.hg-view-cart-button:hover,
.et_pb_shop .products li.product a.hg-view-cart-button:hover {
    background: var(--hg-primary-hover) !important;
    color: var(--hg-white) !important;
    transform: translateY(-1px);
}

.hg-view-cart-button .hg-cart-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

/* =========================================================
   14. NOTIFICACIÓN PREMIUM
   ========================================================= */

.hg-shop-toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.hg-shop-toast {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: start;
    padding: 16px;
    background: var(--hg-white);
    color: var(--hg-text);
    border: 1px solid var(--hg-border);
    border-left: 4px solid var(--hg-success);
    border-radius: var(--hg-radius-md);
    box-shadow: 0 14px 40px rgba(47, 33, 23, 0.18);
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    pointer-events: auto;
}

.hg-shop-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hg-shop-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(95, 143, 87, 0.12);
    color: var(--hg-success);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
}

.hg-shop-toast__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hg-shop-toast__title {
    overflow: hidden;
    color: var(--hg-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hg-shop-toast__text {
    margin-top: 2px;
    color: var(--hg-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.hg-shop-toast__link {
    align-self: flex-start;
    margin-top: 8px;
    color: var(--hg-gold-hover) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.hg-shop-toast__link:hover {
    color: var(--hg-primary) !important;
    text-decoration: underline;
}

.hg-shop-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    background: transparent;
    color: var(--hg-text-muted);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.hg-shop-toast__close:hover {
    background: var(--hg-bg-soft);
    color: var(--hg-primary);
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding: 14px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px;
    }
}

@media (max-width: 767px) {
    .woocommerce-cart .cart_totals,
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 16px;
    }

    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .single_add_to_cart_button,
    .woocommerce-cart .checkout-button,
    .woocommerce-checkout #place_order {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .woocommerce ul.products li.product a.button,
    .woocommerce-page ul.products li.product a.button,
    .et_pb_shop .products li.product a.button {
        min-height: 42px;
        padding: 10px 12px !important;
        font-size: 14px;
    }

    .woocommerce-cart table.cart td.actions .coupon {
        display: grid;
        gap: 10px;
    }

    .woocommerce-cart table.cart td.actions .coupon .input-text,
    .woocommerce-cart table.cart td.actions .coupon .button {
        width: 100% !important;
    }

    .hg-shop-toast-container {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
    }

    .hg-shop-toast {
        grid-template-columns: 38px minmax(0, 1fr) 28px;
        padding: 14px;
    }

    .hg-shop-toast__icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
}

/* =========================================================
   16. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hg-cart-spinner {
        animation-duration: 1.4s;
    }

    .hg-shop-toast,
    .woocommerce a.hg-view-cart-button {
        transition: none;
    }
}

/* =========================================================
   CORRECCIÓN FINAL DEL BOTÓN EN HOVER
   ========================================================= */

/*
 * Mantiene visible el botón principal tanto en estado normal
 * como al pasar el cursor sobre la tarjeta.
 */
.woocommerce ul.products li.product a.button:not(.added_to_cart),
.woocommerce-page ul.products li.product a.button:not(.added_to_cart),
.et_pb_shop .products li.product a.button:not(.added_to_cart) {
    position: relative !important;
    z-index: 20 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;

    margin: 14px 0 0 !important;
    padding: 11px 16px !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box;
    overflow: hidden !important;
    transform: none !important;
}

/* Mantener exactamente la misma posición durante el hover */
.woocommerce ul.products li.product:hover a.button:not(.added_to_cart),
.woocommerce-page ul.products li.product:hover a.button:not(.added_to_cart),
.et_pb_shop .products li.product:hover a.button:not(.added_to_cart) {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 30 !important;

    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

/*
 * Ocultar únicamente el enlace adicional real generado
 * por WooCommerce, sin afectar al botón principal.
 */
.woocommerce ul.products li.product a.added_to_cart.wc-forward,
.woocommerce-page ul.products li.product a.added_to_cart.wc-forward,
.et_pb_shop .products li.product a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Eliminar iconos o capas automáticas de Divi */
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product a.button::after,
.woocommerce-page ul.products li.product a.button::before,
.woocommerce-page ul.products li.product a.button::after,
.et_pb_shop .products li.product a.button::before,
.et_pb_shop .products li.product a.button::after {
    display: none !important;
    content: none !important;
}