/* Reglas CSS puntuales del sitio. */

/* Buscador del header: contenedor relativo para posicionar el panel del live-search. */
.ph-search { position: relative; }

/* El header (y su panel de resultados) por encima del contenido de la tienda
   (dropdown "Ordenar por", etc.). El wrapper #header-desktop es quien crea el
   contexto de apilamiento, por eso el z-index alto va ahí. */
#header-desktop { position: relative; z-index: 9999; }
.ph-bar { z-index: 900 !important; }
.oz-ls__panel { z-index: 100000 !important; }

/* Los <select> nativos (ej. "Ordenar por los últimos") se pintan por encima de
   cualquier z-index en el navegador. Mientras el buscador del header esté abierto
   (body.oz-ls-open), se ocultan para que no tapen el panel de resultados. */
body.oz-ls-open .woocommerce-ordering { visibility: hidden; }

/* Además del <select>, la barra de la tienda dejaba una LÍNEA cruzando el panel:
   su borde/sombra (y su :hover con transform, que crea un stacking context propio)
   junto con la banda "Mostrando N resultados" se colaban sobre el dropdown.
   Mientras el buscador está abierto neutralizamos ese chrome (visibility:hidden
   conserva el layout, sin reflow). */
body.oz-ls-open .oz-shop-toolbar {
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
body.oz-ls-open .oz-shop-toolbar .woocommerce-result-count { visibility: hidden; }

/* Marcas: borde en la COLUMNA (la caja del logo). */
.oz-pb-root .marcas-img {
	border: 1px solid #000000 !important;
	border-radius: 12px !important;
}

/* Marcas: tamaño fijo 150x80 del logo (contain = sin deformar). */
.oz-pb-root .marcas-img img {
	width: 150px !important;
	max-width: 100% !important; /* no desbordar la columna en movil/tablet */
	height: 80px !important;
	object-fit: contain !important;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
	box-sizing: content-box !important;
}

/* Página de Marcas: tarjeta de logo con HOVER rojo Proinval (.marcas-img). */
.oz-pb-root .marcas-img {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 24px 20px;
	position: relative; /* necesario para el z-index del hover */
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Al pasar el mouse, la tarjeta sube por encima de las vecinas (la grid tiene
   gap:0 y si no, el borde/sombra se ven cortados por la tarjeta de al lado). */
.oz-pb-root .marcas-img:hover {
	border-color: #db0209 !important;
	box-shadow: 0 10px 26px rgba(219, 2, 9, .14);
	transform: translateY(-3px);
	z-index: 5;
}

/* Marcas (pág 982): el hover se recortaba porque la SECCIÓN tiene overflow:hidden
   y la grilla gap:0 (tarjetas pegadas). Quitamos el clip y separamos las cards. */
body.page-id-982 .oz-pb-root .oz-pb-section { overflow: visible !important; }
body.page-id-982 .oz-pb-grid { gap: 16px !important; }

/* Marcas (pág 982): control determinista del grid en tablet/móvil.
   Definimos el template explícito (2 tracks tablet / 1 track móvil) Y reseteamos
   el grid-column de cada logo a `auto` (1 track). Esto es clave: si solo se toca
   el template, los spans 15/30/60 del maquetador se recortan; si solo se toca el
   span (60), el grid crea tracks implícitos que inflan la columna a ~944px y el
   logo (centrado) se sale de pantalla. Con template + span:auto la columna mide
   exactamente el ancho de pantalla y el logo queda visible.
   minmax(0,1fr) permite que los tracks encojan sin desbordar. */
@media (max-width: 1024px) {
	body.page-id-982 .oz-pb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		--oz-cols: repeat(2, minmax(0, 1fr)) !important;
	}
	body.page-id-982 .oz-pb-grid > .marcas-img { grid-column: auto !important; }
}
@media (max-width: 600px) {
	body.page-id-982 .oz-pb-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		--oz-cols: minmax(0, 1fr) !important;
	}
	body.page-id-982 .oz-pb-grid > .marcas-img { grid-column: auto !important; }
}

/* ═══════════ Entrada de blog: 2 columnas (Recientes | Artículo) ═══════════ */
.single-wrap{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; max-width:1240px; margin:0 auto; padding:40px 20px 60px; align-items:start; }
/* Izquierda: Entradas Recientes */
.single-side{ background:#f7f7f8; border:1px solid #ececec; border-radius:12px; padding:22px 20px; }
.single-side__title{ margin:0 0 14px; font-size:1.25rem; font-weight:800; color:#111; padding-bottom:10px; border-bottom:3px solid #db0209; }
.single-side__list{ list-style:none; margin:0; padding:0; }
.single-side__item + .single-side__item{ border-top:1px solid #e7e7e9; }
.single-side__item a{ display:flex; gap:8px; padding:12px 0; color:#1a1a1a; text-decoration:none; font-size:.95rem; line-height:1.35; transition:color .15s ease; }
.single-side__item a:hover{ color:#db0209; }
.single-side__arrow{ color:#db0209; font-weight:900; }
/* Derecha: artículo */
.single-main{ min-width:0; }
.single-main__top{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:30px; align-items:start; margin-bottom:28px; }
.single-main__figure{ margin:0; }
.single-main__img{ width:100%; height:auto; border-radius:12px; display:block; }
.single-main__info{ min-width:0; }
.single-main__title{ margin:0 0 16px; font-size:1.7rem; font-weight:800; line-height:1.2; color:#111; }
.single-main__meta{ color:#6b7280; font-size:.9rem; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #ececec; }
.single-main__share{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #ececec; }
.single-main__share-label{ display:block; color:#6b7280; font-size:.9rem; margin-bottom:8px; }
.single-share{ display:flex; gap:10px; }
.single-share__btn{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:transform .15s ease, opacity .15s ease; }
.single-share__btn:hover{ transform:translateY(-2px); opacity:.92; }
.single-share__btn svg{ width:20px; height:20px; fill:currentColor; }
.single-share__btn--fb{ background:#1877f2; }
.single-share__btn--wa{ background:#25d366; }
.single-share__btn--tw{ background:#1da1f2; }
.single-share__btn--in{ background:#0a66c2; }
.single-main__cats{ color:#6b7280; font-size:.9rem; }
.single-main__cats-label{ color:#111; font-weight:700; }
.single-main__cats a{ color:#db0209; text-decoration:none; }
.single-main__cats a:hover{ text-decoration:underline; }
/* Contenido (una sola columna, ancho completo) */
.single-main__content{ font-size:1.02rem; line-height:1.7; color:#2a2a2a; }
.single-main__content h2,.single-main__content h3{ color:#111; margin-top:1.6em; }
.single-main__content a{ color:#db0209; }
.single-main__tags{ margin-top:26px; padding-top:16px; border-top:1px solid #ececec; }
.single-main__tags-label{ font-weight:700; color:#111; margin-right:8px; }
@media (max-width:991px){ .single-wrap{ grid-template-columns:1fr; gap:28px; } .single-main__top{ grid-template-columns:1fr; } }

/* Iconos de contacto (inicio/whatsapp/tienda/ubicacion) venían a 1408x1408 y
   dejaban huecos enormes. Se achican a 50px (también fijado en el componente).
   Como son BLANCOS, se les pone un círculo rojo de marca para que resalten. */
.oz-pb-image img[src*="-icono"] {
	width: 46px !important;
	height: 46px !important;
	object-fit: contain;
	background: #db0209;
	padding: 14px;
	border-radius: 50%;
	box-sizing: content-box;
	box-shadow: 0 4px 14px rgba(219, 2, 9, .25);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Mapa de Perú (1408x1408) → máx 300px y centrado. */
.oz-pb-image img[src*="Mapa-peru"] { max-width: 300px !important; height: auto !important; display: block; margin-left: auto; margin-right: auto; }

/* ═══ Categoría: "Descripción corta principal" (ACF) arriba del listado ═══ */
.oz-shop-cat-intro { margin: 0 0 22px; }
.oz-shop-cat-intro__title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 800; color: #111; }
.oz-shop-cat-intro__body { font-size: .95rem; line-height: 1.65; color: #374151; overflow: hidden; }
.oz-shop-cat-intro__body img { max-width: 170px !important; height: auto !important; border-radius: 8px; }
.oz-shop-cat-intro__body img.alignleft { float: left; margin: 0 20px 10px 0; }
.oz-shop-cat-intro__body img.alignright { float: right; margin: 0 0 10px 20px; }
.oz-shop-cat-intro__body strong { color: #111; }
.oz-shop-cat-intro__body::after { content: ''; display: block; clear: both; }
/* ═══ Categoría: descripción de la categoría en el sidebar ═══ */
.oz-shop-cat-desc { margin-top: 16px; }
.oz-shop-cat-desc__body { font-size: .9rem; line-height: 1.55; color: #4b5563; }
.oz-shop-cat-desc__title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #111; }
.oz-shop-cat-desc__body p:first-child { margin-top: 0; }