/*
Theme Name: Tu Movil Store Child
Template: hello-elementor
Version: 1.0.0
*/

/* WooCommerce: estados de stock.
   WC usa .woocommerce:where(...) div.product .stock / .out-of-stock / .in-stock
   con efectivo (0,3,1). Igualamos + cargamos después → ganamos por orden. */
.woocommerce div.product .out-of-stock {
    color: #5A6069; /* Gris secundario — nunca rojo de marca */
}
.woocommerce div.product .in-stock {
    color: #1B7F4B; /* Verde éxito — coherente con el global Success */
}

/* Precios y tablas con cifras alineadas */
.woocommerce .price,
.woocommerce table.shop_table {
    font-variant-numeric: tabular-nums;
}

/* Logo SVG en header/footer.
   Safe SVG devuelve siempre las dimensiones del viewBox (1064×444) como atributos HTML.
   Elementor emite height:75px pero no width; el <a> envolvente es display:inline-block
   y el max-width:100% crea una dependencia circular que Chrome resuelve a ~48px.
   La <a> está directamente en el widget div (sin .elementor-widget-container).
   Selector (0,3,1) igual que Elementor; gana por orden de cascada (child carga después). */
.elementor-23 .elementor-element.elementor-element-722d7606 img,
.elementor-26 .elementor-element.elementor-element-488568ee img {
    width: 180px;
    height: auto;
}
@media (max-width: 1024px) {
    .elementor-23 .elementor-element.elementor-element-722d7606 img,
    .elementor-26 .elementor-element.elementor-element-488568ee img {
        width: 150px;
    }
}
@media (max-width: 767px) {
    .elementor-23 .elementor-element.elementor-element-722d7606 img,
    .elementor-26 .elementor-element.elementor-element-488568ee img {
        width: 130px;
    }
}

/* Sticky header — sombra al hacer scroll.
   Elementor Pro añade .elementor-sticky--effects al container cuando está pegado
   y el scroll supera sticky_effects_offset (0 = inmediato).
   Especificidad (0,2,0) igual que Elementor; child carga después → gana. */
.elementor-element-3a03e7d1.elementor-sticky--effects {
    box-shadow: 0 2px 8px #00000014;
}

/* Reducción de padding-top en sticky (desktop: 1em → 0.5em) */
@media (min-width: 1025px) {
    .elementor-element-3a03e7d1.elementor-sticky--effects {
        padding-top: 0.5em;
    }
}

/* Flechas del carrusel — contraste sobre fondo blanco.
   El Kit genera rgba(238,238,238,0.9) para .elementor-swiper-button, invisible
   sobre cards blancas. Elevamos a secondary (#16181D). (0,1,1) < Elementor (0,3,0)
   pero child carga después → gana por cascade. */
.elementor-swiper-button {
    color: #16181D;
}
.elementor-swiper-button:hover {
    color: #E20817;
}

/* Badge "¡Oferta!" en tarjetas de producto.
   Fallback por si el global accent (13px) no se aplica vía __globals__ en loop items. */
.elementor-element-4dc844e5 .elementor-heading-title {
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
}

/* "Cómo trabajamos" — inner flex row necesita justify-content:space-between.
   El setting JSON no genera el CSS variable en contenedores anidados de Elementor;
   lo sobrescribimos via CSS variable directamente (sin !important). */
.elementor-element-b3ct_inner01 {
    --justify-content: space-between;
}
/* "Visítanos" — layout 2 columnas (texto izq. + mapa der.).
   Para CONTENEDORES dentro de un flex parent, Elementor usa --width / --max-width,
   no --container-widget-width (que es solo para widgets). Usamos CSS variables directas. */
.elementor-9 .elementor-element.elementor-element-b3tf0002.e-con {
    --width: 45%;
    --max-width: 45%;
}
.elementor-9 .elementor-element.elementor-element-b3tf0006.e-con {
    --width: 52%;
    --max-width: 52%;
}
@media (max-width: 1024px) {
    .elementor-9 .elementor-element.elementor-element-b3tf0002.e-con,
    .elementor-9 .elementor-element.elementor-element-b3tf0006.e-con {
        --width: 100%;
        --max-width: 100%;
    }
}

/* WooCommerce: precio rebajado (<ins>) → rojo de marca, sin subrayado.
   WC y el kit GizmoStore colorean <ins> de verde; usamos la variable CSS del
   global Elementor para coherencia con el sistema de colores del kit.
   <del> (precio original tachado) → gris secundario; la opacidad 0.5 que aplica
   WC por defecto se anula para que el gris sea el único indicador de "tachado". */
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce .price ins .woocommerce-Price-amount {
    color: var(--e-global-color-d49ac81, #E20817);
    text-decoration: none;
}
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce .price del .woocommerce-Price-amount {
    color: var(--e-global-color-primary, #5A6069);
    opacity: 1;
}