/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 30 2026 | 03:58:53 */
/* =============================================================================
   LUBTRAC — WooCommerce + Divi Custom Styles
   Plugins cubiertos: WooCommerce · Divi · CartPops · NP Quote Request
   Última revisión: 2026-04
   =============================================================================

   ÍNDICE DE SECCIONES
   ──────────────────────────────────────────────────────────────────────────
   01. Variables de Marca (tokens globales de color, radio, sombra)
   02. Grid de Productos — Títulos (line-clamp)
   03. Grid de Productos — Imágenes (efecto hover / rollover)
   04. Grid de Productos — Botón "Agregar al Carrito"
   05. Filtro de Categorías (conteo de productos)
   06. Carrito (Cart Blocks)
   07. CartPops (plugin cart popup)
   08. Checkout (bloques WooCommerce)
   09. Widget Tarjeta de Crédito
   ============================================================================= */


/* =============================================================================
   01. VARIABLES DE MARCA
   Centraliza colores y valores reutilizables. Cambia aquí y se actualiza todo.
   ============================================================================= */

:root {
    /* Paleta principal */
    --color-brand:        #009938;   /* Verde Lubtrac primario */
    --color-brand-hover:  #00b843;   /* Verde hover (+15% luminosidad) */
    --color-brand-dark:   #007a2d;   /* Verde oscuro (accesibilidad AAA sobre blanco) */
    --color-accent:       #45579d;   /* Azul para enlaces secundarios (ej: "Ver carrito") */

    /* Neutros */
    --color-white:        #ffffff;
    --color-border-light: #f2f2f2;

    /* Sombras */
    --shadow-card:        0 5px 15px rgba(0, 0, 0, 0.10);
    --shadow-button:      0 4px 10px rgba(0, 0, 0, 0.20);

    /* Bordes */
    --radius-image:       8px;
    --radius-button:      3px;
    --radius-cart-button: 6px;

    /* Tipografía */
    --font-size-button:   16px;
    --font-size-cart-link: 16px;
    --font-size-cart-title: 14px;

    /* Transiciones */
    --transition-fast:    all 0.2s ease;
    --transition-base:    all 0.3s ease;
}


/* =============================================================================
   02. GRID DE PRODUCTOS — TÍTULOS (LINE-CLAMP)
   Fuerza que todos los títulos ocupen exactamente 2 líneas, truncando con "…"
   los nombres largos. Esto uniforma la altura de todas las tarjetas del grid.
   ============================================================================= */

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Propiedad estándar moderna (soporte creciente): */
    line-clamp: 2;
    text-overflow: ellipsis;
}


/* =============================================================================
   03. GRID DE PRODUCTOS — IMÁGENES (EFECTO HOVER / ROLLOVER)
   Agrega elevación sutil y sombra al pasar el cursor sobre las imágenes.
   "overflow: visible" en el <li> es necesario para que la sombra no se recorte.
   ============================================================================= */

/* Permitir que la sombra desborde el contenedor de la tarjeta */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    overflow: visible !important;
}

/* Contenedor de imagen: posicionamiento relativo para el overlay de Divi */
.woocommerce ul.products li.product .et_shop_image,
.et_pb_shop .et_shop_image {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Overlay nativo de Divi debe quedar sobre la imagen */
.et_pb_shop .et_overlay {
    z-index: 2 !important;
}

/* Eliminar borde del placeholder (imagen vacía de WooCommerce) */
.woocommerce ul.products li.product .woocommerce-placeholder {
    border: 0 !important;
}

/* Estado base de la imagen: sin sombra, bordes redondeados, transición suave */
.woocommerce ul.products li.product .et_shop_image img,
.woocommerce ul.products li.product a img,
.et_pb_shop .et_shop_image img,
.woocommerce-page ul.products li.product img {
    border-radius: var(--radius-image) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: var(--transition-base) !important;
}

/* Estado hover: sombra + elevación */
.woocommerce ul.products li.product .et_shop_image:hover img,
.woocommerce ul.products li.product a:hover img,
.et_pb_shop .et_shop_image:hover img,
.woocommerce-page ul.products li.product a:hover img {
    border-color: var(--color-border-light) !important;
    box-shadow: var(--shadow-card) !important;
    transform: translateY(-3px) !important;
}


/* =============================================================================
   04. GRID DE PRODUCTOS — BOTÓN "AGREGAR AL CARRITO"
   ============================================================================= */

/* ── Botón principal ── */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.et_pb_shop .woocommerce ul.products li.product .button {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0.5em 1em !important;
    text-align: center !important;
    font-size: var(--font-size-button) !important;
    background-color: var(--color-brand) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-button) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: var(--transition-fast) !important;
}

/* ── Hover del botón principal ── */
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.et_pb_shop .woocommerce ul.products li.product .button:hover {
    background-color: var(--color-brand-hover) !important;
    color: var(--color-white) !important;
}

/* ── Estado "cargando" (ajax en proceso) ── */
.woocommerce ul.products li.product .button.loading,
.woocommerce-page ul.products li.product .button.loading {
    opacity: 0.7 !important;
    padding-right: 1em !important;
}

/* ── Ocultar iconos ::after en el botón (Divi los agrega por defecto) ── */
.woocommerce ul.products li.product .button::after,
.woocommerce-page ul.products li.product .button::after,
.et_pb_shop .woocommerce ul.products li.product .button::after,
.woocommerce a.button.loading::after,
.woocommerce-page a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce-page button.button.loading::after {
    display: none !important;
}

/* ── Enlace "Ver carrito" (aparece tras agregar un producto) ── */
.added_to_cart.wc-forward {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    text-align: center !important;
    font-size: var(--font-size-cart-link) !important;
    color: var(--color-accent) !important;
    clear: both !important;
}

.added_to_cart.wc-forward:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

/* ── Botones de "Seguir comprando" (carrito y checkout) ── */
.continue-shopping .button,
.continue-shopping-checkout .button {
    background-color: var(--color-brand) !important;
    color: var(--color-white) !important;
    font-size: var(--font-size-button) !important;
}

.continue-shopping .button:hover,
.continue-shopping-checkout .button:hover {
    background-color: var(--color-brand-hover) !important;
    color: var(--color-white) !important;
}

/* ── Mobile: forzar visibilidad de botones en pantallas pequeñas ── */
@media only screen and (max-width: 768px) {
    .woocommerce ul.products li.product .button,
    .woocommerce-page ul.products li.product .button,
    .et_pb_shop .woocommerce ul.products li.product .button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* =============================================================================
   05. FILTRO DE CATEGORÍAS — CONTEO DE PRODUCTOS
   Resalta en verde el número entre paréntesis junto a cada categoría.
   ============================================================================= */

.wc-block-product-categories-list-item-count {
    font-weight: bold;
    color: var(--color-brand);
}


/* =============================================================================
   06. CARRITO (CART BLOCKS de WooCommerce)
   ============================================================================= */

/* ── Nombre del producto dentro del carrito ── */
.wc-block-cart-item__wrap a.wc-block-components-product-name {
    color: var(--color-brand);
    font-size: var(--font-size-cart-title);
}

/* ── Botón principal "Proceder al pago" ── */
.wc-block-cart__submit-button {
    background-color: var(--color-brand);
    color: var(--color-white);
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-cart-button);
    font-weight: bold;
    transition: var(--transition-base);
}

.wc-block-cart__submit-button:hover {
    background-color: var(--color-brand-hover);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
    cursor: pointer;
}


/* =============================================================================
   07. CARTPOPS (plugin popup de carrito)
   ============================================================================= */

/* Ajuste Alineación Horizontal Carrito */
.cartpops-cart__toggle .cartpops-cart__container {
    padding: 8px 0 0 0;
}

/* Paginación del slider — puntos activos e inactivos */
.cpops-slider__pagination__page {
    background-color: var(--color-brand);
}

/* Nota: .is-active hereda el mismo color; si necesitas diferenciarlo,
   sobreescribe aquí con un tono más oscuro: var(--color-brand-dark) */
.cpops-slider__pagination__page.is-active {
    background-color: var(--color-brand-dark);
}


/* =============================================================================
   08. CHECKOUT (Bloques WooCommerce)
   ============================================================================= */

/*
   NOTA: El bloque #payment-method se oculta completamente.
   Asegúrate de que el método de pago esté configurado de otra forma
   (ej: un único gateway, o pasarela gestionada externamente) antes de mantener esto activo.
*/
#payment-method.wc-block-components-checkout-step {
    display: none !important;
}

/*
   Ocultar el campo "Dirección línea 2" y su toggle.
   Útil cuando la integración de envío no requiere ese campo
   (ej: solo se usa colonia capturada en otro campo personalizado).
*/
.woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
.woocommerce-checkout .wc-block-components-address-form__address_2 {
    display: none !important;
}


/* =============================================================================
   09. WIDGET TARJETA DE CRÉDITO
   Ícono de tarjeta (ETmodules) que antecede al título del widget.
   ============================================================================= */

.av-tarjeta-credito h4::before {
    font-family: ETmodules;
    content: "\e014";
    font-size: 36px;
    color: var(--color-brand);
    margin-right: 7px;
    vertical-align: top;
    padding: 10px 0;
}

/* En móvil: el ícono flota a la izquierda para no romper la línea del título */
@media only screen and (max-width: 600px) {
    .av-tarjeta-credito h4::before {
        display: block;
        float: left;
    }

    .av-tarjeta-credito h4 {
        line-height: 1.2em;
    }
}