/* =========================================================
   COMPAR CBD — Estilos personalizados
   Cargado via mu-plugin, compatible con cualquier tema
   ========================================================= */

:root {
    --cbd-verde:       #2d6a4f;
    --cbd-verde-hover: #52b788;
    --cbd-dorado:      #d4a017;
    --cbd-fondo:       #f8f9f0;
    --cbd-texto:       #1a1a1a;
    --cbd-radio:       8px;
    --cbd-sombra:      0 2px 12px rgba(0,0,0,0.08);
    --cbd-transicion:  all 0.2s ease;
}

/* =========================================================
   BOTONES — CTA principal
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--cbd-verde) !important;
    color: #fff !important;
    border-radius: var(--cbd-radio) !important;
    font-weight: 600 !important;
    transition: var(--cbd-transicion) !important;
    border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--cbd-verde-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3) !important;
}

/* =========================================================
   PRODUCTOS — Cards en listado
   ========================================================= */
.woocommerce ul.products li.product {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cbd-sombra);
    transition: var(--cbd-transicion);
    background: #fff;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.woocommerce ul.products li.product .price {
    color: var(--cbd-verde);
    font-weight: 700;
    font-size: 1.1em;
}

/* =========================================================
   FICHA INDIVIDUAL
   ========================================================= */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--cbd-verde);
    font-size: 1.4em;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--cbd-verde);
    border-top: 3px solid var(--cbd-verde);
}

/* =========================================================
   ESTRELLAS
   ========================================================= */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--cbd-dorado);
}

/* =========================================================
   CARRITO Y CHECKOUT
   ========================================================= */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order {
    background-color: var(--cbd-verde) !important;
    font-size: 1.1em !important;
    padding: 16px 32px !important;
    border-radius: var(--cbd-radio) !important;
    font-weight: 700 !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover {
    background-color: var(--cbd-verde-hover) !important;
}

/* =========================================================
   BADGES SALE
   ========================================================= */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background-color: var(--cbd-dorado);
    color: #1a1a1a;
    border-radius: 4px;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        margin-bottom: 16px;
    }
}

/* =========================================================
   HASH CBD — Productos generados por shortcode (siempre visibles)
   ========================================================= */
.h-item.h-item-visible {
    opacity: 1 !important;
    transform: none !important;
}