/* ══════════════════════════════════════════════════════════════════════
   Sidebar "Woocommerce Lateral Izquierda" en páginas sueltas del
   maquetador (ver functions.php, filtro the_content prioridad 30).
   Grid 25% sidebar real / 75% contenido — mismo patrón que el
   page-template legacy ozado/page-templates/page-lat-left.php
   (col-md-4/col-md-8 ≈ 25/75), adaptado a CSS grid nativo.
   ══════════════════════════════════════════════════════════════════════ */
.oz-woo-left-layout {
	display: grid;
	grid-template-columns: minmax(220px, 25fr) minmax(0, 75fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
	max-width: 1440px;
	margin: 1.5rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.oz-woo-left-layout__sidebar {
	min-width: 0;
}

/* Sin card blanca ni borde: cada widget flota directo sobre el fondo de
   la página, separados solo por espacio vertical. */
.oz-woo-left-layout__sidebar .widget {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 22px;
	box-sizing: border-box;
}

.oz-woo-left-layout__sidebar .widget-title {
	margin: 0 0 14px;
	padding: 0;
	border-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #111827;
}

/* Categorías con sangría a la derecha (bullet nativo, lista indentada) —
   igual que la referencia, no pegada al borde izquierdo del sidebar. */
.oz-woo-left-layout__sidebar .widget_product_categories ul,
.oz-woo-left-layout__sidebar .product-categories {
	list-style: disc outside;
	margin: 0;
	padding-left: 34px;
}

.oz-woo-left-layout__sidebar .widget_product_categories ul li,
.oz-woo-left-layout__sidebar .product-categories li {
	margin-bottom: 14px;
}

.oz-woo-left-layout__sidebar .widget_product_categories ul li a,
.oz-woo-left-layout__sidebar .product-categories li a {
	color: #374151;
	text-decoration: none;
	font-size: 15px;
}

.oz-woo-left-layout__sidebar .widget_product_categories ul li a:hover,
.oz-woo-left-layout__sidebar .product-categories li a:hover {
	color: #ff0047;
}

/* Banner del catálogo: tamaño real del attachment (243x300), sin marco
   propio — la imagen ya trae su diseño. */
.oz-woo-left-layout__sidebar .widget_media_image img {
	display: block;
	width: 243px;
	height: 300px;
	max-width: 100%;
	object-fit: contain;
	border-radius: 4px;
}

/* Widget de texto final (Academia Virtual / Aquí / WhatsApp / Youtube):
   bullets normales, enlaces en fucsia Singer y negrita. */
.oz-woo-left-layout__sidebar .widget_text ul {
	list-style: disc outside;
	margin: 0;
	padding-left: 20px;
}

.oz-woo-left-layout__sidebar .widget_text ul li {
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 1.45;
	color: #111827;
}

.oz-woo-left-layout__sidebar .widget_text ul li a,
.oz-woo-left-layout__sidebar .widget_text ul li strong {
	color: #ff0047;
	font-weight: 700;
	text-decoration: none;
}

.oz-woo-left-layout__sidebar .widget_text ul li a:hover {
	text-decoration: underline;
}

.oz-woo-left-layout__main {
	min-width: 0;
}

/* CAUSA REAL confirmada por medición de geometría real en navegador
   (CDP getBoundingClientRect(), no suposición): el CSS auto-generado del
   maquetador (wp-content/uploads/oz-page-builder/global/global.css,
   ~línea 223) aplica "full-bleed" a .oz-pb-section--theme/--full:
     width: calc(100vw - ...) !important;
     margin-left: calc(50% - 50vw + ...) !important;
   Ese cálculo asume que .oz-pb-root es hijo directo de una página
   centrada a ancho completo del viewport. Aquí NO lo es: vive dentro de
   la columna del 75% de este grid de sidebar (.oz-woo-left-layout__main),
   así que el "100vw" real la hace escapar ~200px hacia la izquierda,
   metiéndose debajo de la columna del sidebar (título/categorías/texto
   de ambas columnas se ven entrelazados). No se edita global.css (es
   auto-generado, el propio plugin lo re-escribe en cada guardado) — se
   anula aquí, en el contexto específico de esta página, con !important
   para ganarle a la regla también-!important del plugin. */
.oz-woo-left-layout__main .oz-pb-root .oz-pb-section--theme.oz-pb-spacing-scope,
.oz-woo-left-layout__main .oz-pb-root .oz-pb-section--full.oz-pb-spacing-scope {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Antes había una regla separada en 991px (valor arbitrario, no
   correspondía a ningún breakpoint real del maquetador) que colapsaba el
   grid a 1 columna manteniendo el sidebar visible. Se elimina: entre
   1366px y 769px (breakpoints reales "laptop"/"tablet_h") el grid se
   mantiene en 2 columnas — igual que a 1440px. Colapsa recién en
   ≤768px ("tablet_v", único breakpoint real usado aquí), mismo punto
   donde el sidebar ya se oculta del todo — así no hay un tramo intermedio
   de "1 columna con sidebar visible" que no corresponde a ningún estado
   real del sistema. */
@media (max-width: 768px) {
	.oz-woo-left-layout__sidebar {
		display: none;
	}

	.oz-woo-left-layout {
		grid-template-columns: 1fr;
	}
}