/* CJ Web 0.3.0 — estilos propios de cj.com.bo (fuente: apps/cj-web/cj-web/assets/cj-web.css).
   Reemplaza el "Código personalizado" 832 y 834 de Elementor Pro y los snippets 9 y 11.
   Colores del brand book v1.1. Contraste (WCAG AA): el blanco sobre el rojo #F40009 da 4.33:1 y no
   alcanza para texto normal; todo fondo rojo con texto usa el rojo oscuro #C70008 (6.13:1). El rojo
   de marca queda para el logo, bordes, subrayados e íconos. El verde de WhatsApp #25D366 no lleva
   blanco encima (1.99:1): botones con texto #157347 y flotante con fondo #157347. */

:root {
	--cj-rojo: #F40009;
	--cj-rojo-oscuro: #C70008;
	--cj-negro: #000000;
	--cj-blanco: #FFFFFF;
	--cj-gris: #D0D0D0;
	--cj-gris-texto: #333333;
	--cj-gris-claro: #F5F5F5;
	--cj-borde: #E7E7E7;
	--cj-wa: #25D366;
	--cj-wa-texto: #157347;
	--cj-radio: 8px;
	--cj-fuente: 'Montserrat', Arial, sans-serif;
}

/* ---------- Tipografía global (antes solo la forzaba el CSS 832) ---------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cj-fuente);
}

/* ---------- Botones ---------- */
.cj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border-radius: 6px; border: 2px solid var(--cj-rojo-oscuro);
	background: var(--cj-rojo-oscuro); color: var(--cj-blanco); font-family: var(--cj-fuente);
	font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
}
.cj-btn:hover { background: #A30007; border-color: #A30007; color: var(--cj-blanco); }
.cj-btn--wa { background: var(--cj-blanco); border-color: var(--cj-wa); color: var(--cj-wa-texto); }
.cj-btn--wa:hover { background: #F0FBF4; border-color: var(--cj-wa); color: var(--cj-wa-texto); }
.cj-btn svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
/* Foco visible en todo el sitio. Astra trae "a:focus-visible{outline:thin dotted}" con más especificidad:
   un único !important aquí. Sobre fondos de color (botones, flotante, paginación) va un anillo doble. */
:focus-visible { outline: 3px solid var(--cj-rojo-oscuro) !important; outline-offset: 2px !important; }
.cj-btn:focus-visible, .cj-flotante:focus-visible, .woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.dgwt-wcas-search-submit:focus-visible { box-shadow: 0 0 0 2px var(--cj-blanco), 0 0 0 5px var(--cj-negro); }
.cj-header :focus-visible, .cj-footer :focus-visible { outline-color: var(--cj-blanco) !important; }
.dgwt-wcas-search-input:focus-visible { outline: 3px solid var(--cj-rojo-oscuro) !important; outline-offset: 0 !important; }

/* ---------- Header ---------- */
.cj-header { background: var(--cj-negro); position: relative; z-index: 999; }
@media (min-width: 1101px) { .cj-header { position: sticky; top: 0; } .admin-bar .cj-header { top: 32px; } } /* fijo arriba solo en PC */
.cj-header__in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; }
.cj-header__logo { flex: 0 0 auto; display: block; line-height: 0; }
.cj-header .cj-header__logo-img { height: 48px; width: auto; max-width: none; } /* gana a ".woocommerce img" */
.cj-header__nav { flex: 1 1 auto; }
.cj-header__lista { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: nowrap; gap: 2px; }
.cj-header__lista a { display: block; padding: 12px 11px; color: var(--cj-blanco); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.cj-header__lista a:hover, .cj-header__lista .actual > a { border-bottom-color: var(--cj-rojo); color: var(--cj-blanco); }
.cj-header__busqueda { flex: 0 0 230px; min-width: 0; }
.cj-header__busqueda .dgwt-wcas-search-wrapp { max-width: 100%; min-width: 0; margin: 0; }
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { font-size: 16px; } /* 16 px: evita el zoom de iOS al tocar el campo */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit { min-width: 44px; min-height: 44px; }
.cj-header__menu { display: none; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 6px 10px; background: transparent; border: 1px solid #444; border-radius: 6px; color: var(--cj-blanco); font-family: var(--cj-fuente); font-size: 14px; font-weight: 600; cursor: pointer; }
.cj-header__menu svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 1100px) {
	.cj-header__in { flex-wrap: wrap; gap: 10px; padding: 8px 16px; }
	.cj-header .cj-header__logo-img { height: 40px; }
	.cj-header__menu { display: inline-flex; order: 2; }
	.cj-header__busqueda { order: 3; flex: 1 1 100%; }
	.cj-header__nav { order: 4; flex: 1 1 100%; }
	.cj-js .cj-header__nav { display: none; } /* sin JS el menú queda abierto */
	.cj-header.abierto .cj-header__nav { display: block; }
	.cj-header__lista { flex-direction: column; gap: 0; }
	.cj-header__lista a { padding: 13px 4px; border-bottom: 1px solid #222; font-size: 16px; }
	.cj-header__logo { margin-right: auto; }
}

/* ---------- Footer ---------- */
.cj-footer { background: var(--cj-negro); color: var(--cj-gris); font-size: 14px; }
.cj-footer__in { max-width: 1240px; margin: 0 auto; padding: 48px 20px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 32px; }
.cj-footer .cj-footer__logo { height: 48px; width: auto; max-width: none; margin-bottom: 14px; } /* gana a ".woocommerce img" */
.cj-footer__marca p { margin: 0 0 16px; line-height: 1.6; color: var(--cj-gris); }
.cj-footer__titulo { color: var(--cj-blanco); font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.cj-footer__titulo:not(:first-child) { margin-top: 22px; }
.cj-footer__lista { list-style: none; margin: 0; padding: 0; }
.cj-footer__lista li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; line-height: 1.5; }
.cj-footer__lista svg { width: 16px; height: 16px; fill: var(--cj-rojo); flex: 0 0 auto; margin-top: 3px; }
.cj-footer__enlaces li { margin-bottom: 0; align-items: center; }
.cj-footer__enlaces svg { margin-top: 0; }
.cj-footer__enlaces a { display: inline-block; padding: 11px 0; } /* 44 px de alto */
.cj-footer__enlaces .actual > a { color: var(--cj-blanco); font-weight: 600; }
.cj-footer__lista a[href^="tel:"] { display: inline-block; padding: 11px 0; margin: -11px 0; }
.cj-footer a { color: var(--cj-gris); text-decoration: none; }
.cj-footer a:hover, .cj-footer a:focus-visible { color: var(--cj-blanco); }
.cj-footer__redes { display: flex; gap: 10px; }
.cj-footer__redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1A1A1A; }
.cj-footer__redes svg { width: 20px; height: 20px; fill: var(--cj-blanco); }
.cj-footer__redes a:hover { background: var(--cj-rojo-oscuro); }
.cj-footer__franja { background: var(--cj-rojo-oscuro); }
.cj-footer__franja p { max-width: 1240px; margin: 0 auto; padding: 12px 20px; color: var(--cj-blanco); font-size: 13px; }
@media (max-width: 1024px) { .cj-footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cj-footer__in { grid-template-columns: 1fr; padding-top: 36px; } }

/* ---------- Botón flotante ---------- */
.cj-flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9998; width: 56px; height: 56px; border-radius: 50%; background: var(--cj-wa-texto); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.cj-flotante svg { width: 30px; height: 30px; fill: var(--cj-blanco); }
.cj-flotante:hover { transform: scale(1.06); }
#ast-scroll-top { background-color: var(--cj-rojo-oscuro); right: 84px; }
@media (max-width: 767px) { #ast-scroll-top { display: none !important; } } /* un solo flotante en el celular */

/* ---------- Panel lateral de la tienda ---------- */
.cj-panel { display: flex; flex-direction: column; gap: 24px; }
.cj-panel__titulo { font-size: 16px; font-weight: 700; color: var(--cj-negro); margin: 0 0 10px; }
.cj-panel__lista { list-style: none; margin: 0; padding: 0; }
.cj-panel__lista a { display: flex; align-items: center; min-height: 44px; padding: 4px 0 4px 16px; color: var(--cj-gris-texto); text-decoration: none; position: relative; }
.cj-panel__lista a::before { content: '›'; content: '›' / ''; position: absolute; left: 0; color: var(--cj-rojo); font-weight: 700; } /* '' = sin texto para el lector de pantalla */
.cj-panel__lista a:hover, .cj-panel__lista a.activo { color: var(--cj-rojo-oscuro); font-weight: 600; }
/* El panel va después de los productos en el HTML (barra derecha de Astra); en PC se dibuja a la izquierda. */
@media (min-width: 922px) {
	.cj-tienda #content .ast-container { flex-direction: row-reverse; }
	.cj-tienda.ast-right-sidebar #primary { border-right: 0; border-left: 1px solid var(--ast-border-color, #E7E7E7); padding-right: 0; padding-left: 60px; }
	.cj-tienda.ast-right-sidebar #secondary { border-left: 0; border-right: 1px solid var(--ast-border-color, #E7E7E7); padding-left: 0; padding-right: 60px; margin-left: 0; margin-right: -1px; }
}
.cj-panel__boton { width: 100%; }

/* ---------- Listado de productos: cuadrícula que no se desborda ---------- */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid; gap: 20px; margin: 0 0 24px; padding: 0; }
/* Astra fija las columnas con selectores más específicos (".ast-container .woocommerce ul.products:not(.elementor-grid)"): !important solo aquí. */
.woocommerce ul.products:not(.elementor-grid), .woocommerce-page ul.products:not(.elementor-grid) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto; margin: 0; float: none; min-width: 0; position: relative; display: flex; flex-direction: column; background: var(--cj-blanco); border: 1px solid var(--cj-borde); border-radius: var(--cj-radio); padding: 14px 14px 16px; transition: border-color .2s, box-shadow .2s; }
.woocommerce ul.products li.product:hover { border-color: var(--cj-rojo); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.woocommerce ul.products li.product img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto; background: #F7F7F7; border-radius: 6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--cj-negro); font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.woocommerce ul.products li.product .ast-woo-product-category { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B00007; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.cj-tarjeta__boton { margin-top: auto; width: 100%; font-size: 15px; }
.cj-insignia { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
.cj-insignia--hay { background: #EAF3DE; color: #27500A; }
.cj-insignia--agotado { background: var(--cj-rojo-oscuro); color: var(--cj-blanco); text-transform: uppercase; letter-spacing: .06em; }
/* Agotado bien visible (Arnold, 26/10/2026): franja roja sobre la foto y foto en gris. */
.cj-insignia--tarjeta.cj-insignia--agotado { left: 22px; right: 22px; top: 22px; text-align: center; font-size: 16px; padding: 8px 10px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.woocommerce ul.products li.product.outofstock img { filter: grayscale(1); opacity: .5; }
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title { color: #555; }
.cj-ficha__meta .cj-insignia--agotado { font-size: 18px; padding: 8px 16px; border-radius: 6px; }
.single-product div.product.outofstock .woocommerce-product-gallery img { filter: grayscale(1); opacity: .6; }
.cj-insignia--tarjeta { position: absolute; top: 22px; left: 22px; z-index: 5; }
.woocommerce ul.products li.product .ast-shop-product-out-of-stock { display: none; } /* Astra pinta su propio "Agotado"; queda la insignia */
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--cj-negro); border-color: var(--cj-borde); }
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--cj-rojo-oscuro); color: var(--cj-blanco); }

/* ---------- Migas ---------- */
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: #666; } /* 5.74:1 */
.woocommerce .woocommerce-breadcrumb a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- Ficha de producto ---------- */
.cj-ficha__marca { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cj-ficha__marca a { color: #B00007; text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
.cj-ficha__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--cj-gris-texto); }
.cj-ficha__accion { margin: 18px 0; max-width: 360px; }
.cj-ficha__leyenda { margin: 0 0 10px; font-size: 14px; color: var(--cj-gris-texto); }
.cj-ficha__accion .cj-btn { width: 100%; }
.cj-ficha__detalle { clear: both; padding-top: 10px; }
.cj-ficha__seccion { margin: 0 0 28px; }
.cj-ficha__seccion > h2 { font-size: 18px; font-weight: 700; color: var(--cj-negro); border-bottom: 2px solid var(--cj-rojo); padding-bottom: 6px; margin: 0 0 14px; }
.cj-ficha__seccion table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cj-ficha__seccion table td, .cj-ficha__seccion table th { border: 1px solid var(--cj-borde); padding: 8px 10px; text-align: left; }
.cj-ficha__seccion table tr:nth-child(odd) td, .cj-ficha__seccion table tr:nth-child(odd) th { background: var(--cj-gris-claro); }

/* ---------- Carrusel de Inicio (antes media-carousel de Elementor Pro) ---------- */
.elementor-widget-image-carousel .swiper-slide-image { width: 100%; height: 450px; object-fit: cover; object-position: center 35%; border-radius: 12px; }
@media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-image { height: 260px; } }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
	.woocommerce ul.products:not(.elementor-grid), .woocommerce-page ul.products:not(.elementor-grid) { grid-template-columns: 1fr !important; gap: 16px; }
	.cj-btn { font-size: 16px; }
	.single-product .product_title { font-size: 24px; line-height: 1.25; } /* más grande que los h3 de la descripción */
}