/**
 * legacy-7k.css — Header/Footer del tema original 7K (Ozado-V2) portado al tema
 * activo OZ-Thema-4.0. Reglas extraídas de Ozado-V2/style.css, acotadas a los
 * contenedores del header/footer para NO romper las páginas del maquetador OZ.
 *
 * Se encola SOLO en front-end DESPUÉS de los estilos del tema (ver
 * inc/gabic-header.php -> enqueue 'legacy-7k').
 */

/* ------------------------------------------------------------------
   Variables de color del tema original, ACOTADAS a header/footer para
   no pisar las que use el maquetador OZ globalmente.
   ------------------------------------------------------------------ */
.text-header,
#header-desktop,
#header-mobile,
#colophon,
.marcas,
.menu-fixed-lateral,
.categorias-fixed-lateral,
.header-banner-products {
	--theme-color-1: #324451;
	--theme-color-2: #e20613;
	--theme-color-3: #161d21;
	--theme-color-text: #93959D;
	--theme-black: #000;
	--theme-plomo-claro: #eee;
}

@keyframes efecto7k {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.85); }
	100% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

/* ==================================================================
   FRANJA SUPERIOR (marquee)
   ================================================================== */
.text-header {
	background: #161d21;
	height: 36px;          /* alto fijo: el header se pega justo debajo (sin hueco) */
	display: flex;
	align-items: center;
	overflow: hidden;
}
.text-header .container {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
.text-header marquee {
	color: white;
	text-align: center;
	font-size: 18px;
	margin: 0px;
	font-weight: 600;
}
.text-header img {
	height: 20px;
	width: auto;
	vertical-align: middle;
	filter: invert(1);
}

/* ==================================================================
   OVERLAYS (.capa)
   ================================================================== */
.capa {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #00000032;
	z-index: 9000;
}
.capa--active {
	display: none;
}
.capa-cat {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #00000066;
	z-index: 9;
	position: fixed;
	display: none;
}
.capa-cat.active {
	display: block;
}
.capa-menu {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0000004d;
	z-index: 9998; /* por encima del header (99) para que el cajón tape todo */
	position: fixed;
	display: none;
}
.capa-menu.active {
	display: block;
}

/* ==================================================================
   HEADER DESKTOP
   ================================================================== */
#header-desktop {
	position: fixed;
	top: 36px; /* pegado justo debajo del marquee (alto 36px), sin hueco blanco */
	left: 0;
	right: 0;
	z-index: 99;
	display: block !important;
	/* Header FLOTANTE: el fondo es transparente para que a los lados se vea el
	   contenido/banner detrás; la barra teal (logo + .grid) va centrada dentro
	   del .container (ancho máximo) y "flota" sobre el contenido. */
	background: transparent;
	box-shadow: none;
}
/* La barra visible (logo rojo + .grid teal) con sombra para el efecto flotante. */
#header-desktop .header_top {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
/* SOLO páginas de TIENDA (body.woocommerce: tienda/ofertas/categorías/carrito/
   producto/mi-cuenta): la "capa 2" (el fondo que asoma a los lados del header
   flotante) se pinta #161d21, igual que el marquee. El home y las páginas
   estáticas conservan el header transparente (NO se toca su estructura). Se
   deja la barra teal SÓLIDA (#324451) para que no se oscurezca por la
   semitransparencia del .grid al tener detrás un fondo oscuro. */
body.woocommerce #header-desktop {
	background: #161d21;
}
body.woocommerce #header-desktop .grid {
	background: #324451;
}
#header-mobile {
	display: none !important;
}
#header-desktop .header_top {
	display: grid;
	position: relative;
	grid-template-columns: 150px auto;
}
#header-desktop .header_top .logo {
	background: var(--theme-color-2);
	margin-top: -44px;
}
#header-desktop .header_top .logo .site-branding {
	display: grid;
	text-align: center;
	height: 100%;
	place-content: center;
}
#header-desktop .header_top .logo .custom-logo,
#header-desktop .header_top .logo .site-branding img {
	height: auto !important;
	width: 124px;
	margin: 0 auto;
}
#header-desktop .grid {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	padding-left: 3rem;
	gap: 2rem;
	background: #324451e0;
}

/* Buscador nativo dentro del header oscuro */
#header-desktop .search-menu .oz-ls,
#header-mobile .search-menu .oz-ls {
	width: 100%;
}
#header-desktop .search-menu .ozpls-figma__form,
#header-mobile .search-menu .ozpls-figma__form {
	display: flex;
	align-items: center;
	gap: 0;
	/* Píldora blanca única: input + lupa integrados (como producción). */
	background: #fff;
	border: 1px solid #d5d9de;
	border-radius: 8px;
	overflow: hidden;
}
#header-desktop .search-menu .ozpls-figma__inputWrap,
#header-mobile .search-menu .ozpls-figma__inputWrap {
	flex: 1 1 auto;
}
#header-desktop .search-menu .ozpls-figma__input,
#header-mobile .search-menu .ozpls-figma__input {
	width: 100%;
	border: 0;
	background: transparent;
	color: #33383e;
	padding: 9px 4px 9px 14px;
	border-radius: 0;
}
#header-desktop .search-menu .ozpls-figma__input::placeholder,
#header-mobile .search-menu .ozpls-figma__input::placeholder {
	color: #9aa0a6;
}
/* Botón = solo la lupa roja integrada a la derecha (sin bloque rojo). */
#header-desktop .search-menu .ozpls-figma__btn,
#header-mobile .search-menu .ozpls-figma__btn {
	background: transparent;
	color: #e20613;
	border: 0;
	padding: 0 14px;
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
#header-desktop .search-menu .ozpls-figma__btn:hover,
#header-mobile .search-menu .ozpls-figma__btn:hover { color: #b9040f; }
#header-desktop .search-menu .ozpls-figma__btnIcon,
#header-mobile .search-menu .ozpls-figma__btnIcon { display: block; }

/* Menú principal (main-navigation) */
#header-desktop .main-navigation {
	display: block;
	width: 100%;
}
#header-desktop .main-navigation ul {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#header-desktop .main-navigation li {
	position: relative;
}
#header-desktop .main-navigation a {
	display: block;
	text-decoration: none;
	color: #fff;
}
#header-desktop .main-navigation ul ul {
	display: none;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99999;
	background: #324451eb;
	padding: 1rem;
	min-width: 220px;
}
#header-desktop .main-navigation ul li:hover > ul,
#header-desktop .main-navigation ul li.focus > ul {
	display: block;
}

#header-desktop .header-right {
	display: flex;
	align-items: center;
	position: relative;
}
#header-desktop .header-right .marcas-header .widget {
	margin: 0;
}
#header-desktop .header-right .marcas-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 13px;
}
#header-desktop .header-right .menu-lateral {
	border-left: 1px solid #959595;
	border-right: 1px solid #959595;
	cursor: pointer;
	padding: 1.5rem;
}
#header-desktop .header-right img {
	height: 31px;
	object-fit: contain;
}
#header-desktop .header-right button {
	background: none;
	border: 0;
	padding: 0;
}
#header-desktop .header-right button span {
	color: white;
	font-weight: 500;
}

/* Header bottom (categorías / marcas) */
.header_bottom {
	background: #324451e0;
}
.header_bottom ul {
	display: grid;
	padding: 2rem !important;
	list-style: none;
	margin-top: 5px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.header_bottom ul.product-categories li {
	padding-bottom: 0px !important;
}
.header_bottom ul.product-categories li a {
	color: var(--theme-plomo-claro);
}
.header_bottom .widget {
	display: none;
	border-top: 2px solid red;
	margin-top: 5px;
}
.header_bottom #text-8.active {
	display: block;
}
.header_bottom .widget_product_categories.active {
	display: block;
}
.header_bottom #text-8 ul {
	text-align: center;
}
.header_bottom #text-8 ul img {
	filter: invert(1);
}

/* Mini-cart (mobile) */
.item-mini-cart .dropdown-menu {
	display: none;
	position: absolute;
	left: -69px;
	background: white;
	width: 315px;
	padding: 1rem;
	z-index: 99;
	top: 104%;
}
.item-mini-cart .dropdown-menu.active {
	display: block;
}
.item-mini-cart .dropdown-menu ul {
	padding: 0;
	margin: 0;
}
.item-mini-cart .dropdown-menu .woocommerce-mini-cart {
	max-height: 415px;
	overflow: auto;
}

/* Panel lateral menú fijo — diseño sobrio y profesional. */
.menu-fixed-lateral {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, #1d262e 0%, #141b21 100%);
	width: 320px;
	max-width: 86vw;
	z-index: 9999; /* por encima del header (99) y del overlay (9998) */
	transform: translatex(-100%);
	transition: transform .3s ease;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: 6px 0 30px rgba(0, 0, 0, 0.35);
}
.menu-fixed-lateral.active {
	transform: translatex(0);
}
/* Encabezado del cajón: título + botón cerrar, con acento rojo. */
.menu-fixed-lateral__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.15rem 1.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-fixed-lateral__title {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	position: relative;
	padding-left: 0.85rem;
}
.menu-fixed-lateral__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 1.1em;
	border-radius: 2px;
	background: var(--theme-color-2, #e20613);
}
.menu-fixed-lateral__close {
	appearance: none;
	background: rgba(255, 255, 255, 0.06);
	border: 0;
	color: #cbd2d9;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.menu-fixed-lateral__close:hover {
	background: var(--theme-color-2, #e20613);
	color: #fff;
}
/* Lista de enlaces: alineada arriba, con divisores sutiles y hover con acento. */
.menu-fixed-lateral .widget {
	padding: 0.75rem 0 1.5rem;
}
.menu-fixed-lateral .widget ul {
	padding: 0;
	list-style: none;
	margin: 0;
}
.menu-fixed-lateral .widget ul li {
	margin: 0;
}
.menu-fixed-lateral .widget ul a {
	display: block;
	position: relative;
	color: #dfe4ea;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.35;
	padding: 0.9rem 1.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
}
.menu-fixed-lateral .widget ul a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--theme-color-2, #e20613);
	transform: scaleY(0);
	transition: transform .2s ease;
}
.menu-fixed-lateral .widget ul a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	padding-left: 1.9rem;
}
.menu-fixed-lateral .widget ul a:hover::before {
	transform: scaleY(1);
}
/* El primer ítem (título SEO largo) como cabecera de sección, más pequeño. */
.menu-fixed-lateral .widget ul li:first-child a {
	font-size: 0.82rem;
	font-weight: 700;
	color: #aeb6bf;
	text-transform: none;
}

/* Panel lateral categorías fijo */
.categorias-fixed-lateral {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--theme-color-3);
	width: 270px;
	z-index: 9999; /* por encima del header (99) y del overlay (9998) */
	transform: translatex(-100%);
	transition: all .3s ease;
	overflow-y: auto;
}
.categorias-fixed-lateral.active {
	transform: translatex(0);
}
.categorias-fixed-lateral h2 {
	color: white;
	font-size: 20px;
}
.categorias-fixed-lateral .widget {
	padding: 1rem;
	padding-right: 0;
}
.categorias-fixed-lateral .widget ul {
	padding: 0;
	list-style: none;
	margin: 0;
	max-height: 615px;
	overflow: auto;
}
.categorias-fixed-lateral .widget ul a {
	color: white;
	font-size: 15px;
}

/* ==================================================================
   BANNER DE TIENDA
   ================================================================== */
.header-banner-products {
	margin-bottom: 0;
	background: #eef1f3;
	text-align: center;
	margin-top: 4rem;
}
.header-banner-products .espaciado {
	padding: 3rem 1rem;
}
.header-banner-products .espaciado h1 {
	color: #324451;
	margin: 0;
	font-size: 2rem;
}
/* Ficha de producto individual: título en ROJO + migas de pan debajo. */
body.single-product .header-banner-products .espaciado h1 {
	color: #e20613 !important;
}
.header-banner-products .oz-banner-crumbs {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: #324451;
}
.header-banner-products .oz-banner-crumbs a {
	color: #324451;
	text-decoration: none;
}
.header-banner-products .oz-banner-crumbs a:hover {
	color: #e20613;
}
.header-banner-products .oz-banner-crumbs__sep {
	margin: 0 0.4rem;
	color: #9aa3ab;
}

/* ==================================================================
   BANDA DE MARCAS (footer)
   ================================================================== */
/* Banda a todo el ancho. En PC alto fijo 180px; el slider (alto natural, con
   logos pequeños) se centra vertical y horizontalmente con flex. NO se tocan
   las alturas internas del slider (eso lo desbordaba/cortaba). */
.marcas {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 3rem;
	background: #f9f9f9;
	padding: 1.5rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media (min-width: 1025px) {
	.marcas {
		height: 180px;
		padding-top: 0;
		padding-bottom: 0;
	}
}
/* Fondo a todo el ancho, pero los logos centrados a 1440px */
.marcas .ozs {
	width: 100% !important;
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	height: auto !important;      /* alto natural: NO llenar los 180px */
	overflow: visible !important; /* que nada recorte los logos */
}
/* CLAVE: el plugin pone al .ozs (carrusel sin header) un
   padding-top: calc(nav-size + 24px) ≈ 68px !important para reservar sitio a
   las flechas de arriba. Este slider NO tiene flechas (data-nav=false), así que
   ese padding solo baja los logos y los pega al footer. Lo anulamos con
   especificidad (0,4,0) + !important para ganarle al plugin. */
.marcas .ozs:not(.ozs--banner):not(.ozs--has-header) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.marcas .ozs__viewport,
.marcas .ozs__track {
	height: auto !important;
}
.marcas img {
	filter: grayscale(1);
	transition: filter .25s ease;
}
.marcas .ozs__slide:hover img,
.marcas img:hover {
	filter: grayscale(0);
}
/* Cada slide/imagen: alto natural, centrada. Logos con tope 90px de alto. */
.marcas .ozs__slide,
.marcas .ozs__media {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	aspect-ratio: auto !important;
}
.marcas .ozs img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 90px;
	object-fit: contain;
}

/* ==================================================================
   HERO BANNER (slider principal) — alto responsive
   ------------------------------------------------------------------
   El slider está en modo `ratio` (1920:700) para que en ESCRITORIO las 6
   imágenes (banners de distinto alto) queden con el mismo alto, sin huecos.
   PERO en tablet/móvil (<=1199px) el <picture> cambia a la imagen MÓVIL, que
   tiene otra proporción; forzarla a 1920:700 la aplastaba/cortaba. Aquí, solo
   en <=1199px, liberamos el alto para que la imagen móvil use su proporción
   natural (equivale al modo auto solo para pantallas chicas). Acotado a
   .ozs--banner para no tocar el carrusel de marcas (.ozs--images).
   ================================================================== */
@media (max-width: 1199px) {
	.ozs--banner .ozs__media {
		aspect-ratio: auto !important;
		height: auto !important;
	}
	.ozs--banner .ozs__media img,
	.ozs--banner .ozs__picture img {
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* ==================================================================
   FOOTER
   ================================================================== */
#colophon {
	background: var(--theme-color-1);
}
#colophon .footer-widgets {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}
#colophon .footer-widgets .grid {
	display: grid;
}
#colophon .footer-widgets .grid p,
#colophon .footer-widgets .grid a {
	color: white;
}
/* Enlaces del footer: sin subrayado; hover = color rojo 7K (en vez de underline). */
#colophon .footer-widgets a {
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}
#colophon .footer-widgets a:hover,
#colophon .footer-widgets a:focus-visible {
	text-decoration: none;
	color: var(--theme-color-2, #e20613);
	outline: none;
}
/* Logo del footer enlazado al inicio: cursor y sin subrayado. */
#colophon .footer-widgets .footer-logo-link {
	display: inline-block;
	line-height: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
#colophon .footer-widgets .footer-logo-link:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}
#colophon .footer-widgets .grid .footer-1 {
	max-width: 750px;
	margin: auto;
	text-align: center;
	padding-top: 2rem;
}
#colophon .footer-widgets .grid .footer-1 img {
	height: 100px;
	width: auto;
}
#colophon .footer-widgets .grid .footer-2 {
	display: flex;
	justify-content: space-evenly;
	border: 1px solid #999999b5;
	border-left: 0;
	border-right: 0;
	padding: 1.5rem 0;
	text-align: center;
	flex-wrap: wrap;
	margin: 1rem 0;
}
#colophon .footer-widgets .grid .footer-2 section {
	margin: 0;
}
#colophon .footer-widgets .grid .footer-2 ul {
	padding: 0;
	list-style: none;
}
#colophon .footer-widgets .footer-3 .menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0;
	gap: 1rem;
	list-style: none;
}

/* Botón flotante WhatsApp (visible en desktop cuando aplique) */
.container-boton {
	animation: efecto7k 1.5s infinite;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 991.98px) {
	.header-banner-products {
		margin-top: 0rem;
	}
	#header-desktop {
		display: none !important;
	}
	#header-mobile {
		background: var(--theme-color-1);
		display: block !important;
	}
	#header-mobile .grid {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	#header-mobile .site-branding {
		text-align: left;
	}
	#header-mobile .site-branding .custom-logo,
	#header-mobile .site-branding img {
		max-height: 70px;
		width: auto;
	}
	#header-mobile .grid .header-right {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		margin-left: auto;
		align-items: center;
		gap: 10px;
		text-align: center;
		padding-right: 1rem;
	}
	#header-mobile .search-menu {
		padding: 1rem;
		box-shadow: 0 0 11px 3px #00000059;
		position: relative;
		z-index: 9;
	}
	/* Móvil/tablet: la lupa roja integrada se mantiene visible dentro de la píldora. */
	#header-mobile .search-menu .ozpls-figma__btn {
		display: inline-flex;
	}
	#header-mobile .grid .header-right p {
		color: #ddd;
		margin: 0;
		font-size: 14px;
	}
	#header-mobile .grid .header-right img {
		filter: invert(1);
		height: 28px;
		object-fit: contain;
	}
	#header-mobile .grid .header-right .item-mini-cart p {
		padding-top: 7px;
	}
	#header-mobile .grid .header-right button {
		background: none;
		border: 0;
		padding: 0;
	}
	#header-mobile .item-mini-cart .dropdown-menu {
		left: -98px;
	}
}

/* --- TABLET ECHADA (horizontal): el header desktop se ve apretado y el buscador
   queda diminuto. Reorganizamos en 2 filas: buscador a lo ancho + carrito arriba,
   menú centrado debajo. Y se oculta el botón rojo "Buscar" (queda solo el input). --- */
@media (min-width: 992px) and (max-width: 1200px) {
	#header-desktop .grid {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"search right"
			"nav nav";
		row-gap: 0.6rem;
		column-gap: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#header-desktop .search-menu { grid-area: search; }
	#header-desktop .header-right { grid-area: right; }
	#header-desktop .main-navigation { grid-area: nav; }
	#header-desktop .main-navigation ul {
		justify-content: center;
	}
	/* Tablet echada: la lupa roja integrada se mantiene visible dentro de la píldora. */
	#header-desktop .search-menu .ozpls-figma__btn {
		display: inline-flex;
	}
}

@media (max-width: 575.98px) {
	#colophon .footer-widgets .grid {
		grid-template-columns: 1fr;
	}
	#header-mobile .grid .header-right p {
		display: none;
	}
	#header-mobile .grid .header-right {
		gap: 5px;
	}
	#header-mobile .grid .header-right img {
		width: 28px;
		height: 28px;
	}
	#header-mobile .item-mini-cart .dropdown-menu {
		left: 0;
		top: 134%;
		width: 280px;
		transform: translateX(-58%);
	}
}

/* --- FOOTER en móvil/tablet: que el contenido NO toque ni desborde el borde.
   Más padding lateral, box-sizing, ítems que encogen y palabras que parten. --- */
@media (max-width: 991.98px) {
	#colophon .footer-widgets {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		box-sizing: border-box;
	}
	#colophon .footer-widgets .grid .footer-2 {
		gap: 1rem 1.5rem;
	}
	#colophon .footer-widgets .grid .footer-2 section {
		min-width: 0;
		max-width: 100%;
	}
	#colophon .footer-widgets p,
	#colophon .footer-widgets a,
	#colophon .footer-widgets li {
		overflow-wrap: break-word;
		word-break: break-word;
	}
	#colophon .footer-widgets img {
		max-width: 100%;
		height: auto;
	}
}

/* ==================================================================
   FULL-BLEED — bandas a ancho completo
   El tema nuevo envuelve todo en `.site` con max-width (--OZ-Container-PC).
   Las bandas del original (.text-header, #colophon, .marcas) deben romper
   ese contenedor y ocupar todo el ancho del viewport, con su contenido
   interno centrado por su propio .container/.footer-widgets.
   #header-desktop ya es full-width vía position:fixed.
   ================================================================== */
.text-header,
#colophon {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Evita scroll horizontal por el ancho de la barra de scroll (100vw). */
html,
body {
	overflow-x: hidden;
}

/* ==================================================================
   MEGA-MENÚ del header (EPPS y cualquier ítem con submenú): la lista
   de hijos se muestra como grilla multi-columna oscura, alineada a la
   derecha para no desbordar (el menú va a la derecha del header).
   ================================================================== */
/* El mega-menú se ancla al contenedor del header (.grid), no al <li>, para que
   ocupe el ancho y quede debajo del header (como producción). */
#header-desktop .grid {
	position: relative;
}
#header-desktop .main-navigation ul li.menu-item-has-children {
	position: static;
}
#header-desktop .main-navigation ul li.menu-item-has-children > ul {
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
	margin-top: 0;
	padding: 2rem 3rem;
	background: #2b3a45f2;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	grid-template-columns: repeat(4, 1fr);
	column-gap: 2.5rem;
	row-gap: 0.35rem;
	border-top: 3px solid var(--theme-color-2, #e20613);
}
#header-desktop .main-navigation ul li:hover > ul,
#header-desktop .main-navigation ul li.focus > ul {
	display: grid;
}
/* Interacción del mega-menú: en vez de un "puente" invisible (que tapaba los
   otros ítems del menú y bloqueaba MARCAS), hacemos que cada ítem del menú
   ocupe TODO el alto del header. Así su borde inferior queda pegado al submenú
   (top:100% de .grid) y puedes bajar el mouse sin que se cierre, SIN tapar los
   demás ítems (cada uno ocupa solo su columna horizontal). */
#header-desktop .main-navigation {
	align-self: stretch;
}
#header-desktop .main-navigation > ul {
	height: 100%;
	align-items: stretch;
}
#header-desktop .main-navigation > ul > li {
	display: flex;
	align-items: center;
}
#header-desktop .main-navigation ul ul li {
	position: static;
}
#header-desktop .main-navigation ul ul a {
	display: block;
	padding: 0.45rem 0.1rem;
	color: #dfe6ec;
	font-size: 0.9rem;
	line-height: 1.3;
	white-space: nowrap;
}
#header-desktop .main-navigation ul ul a:hover {
	color: #ffffff;
}

/* ---- Submenú de MARCAS (id 1251): grilla de LOGOS (igual que producción) ---- */
#header-desktop .main-navigation ul li#menu-item-1251 > ul {
	grid-template-columns: repeat(6, 1fr);
	column-gap: 0.9rem;
	row-gap: 0.9rem;
	padding: 1.6rem 3rem;
}
#header-desktop .main-navigation ul li#menu-item-1251 > ul a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62px;
	padding: 0.5rem 0.7rem;
	background: #ffffff;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* Hover de la tarjeta: borde rojo 7K + sombra + leve elevación. */
#header-desktop .main-navigation ul li#menu-item-1251 > ul a:hover {
	border-color: var(--theme-color-2, #e20613);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}
#header-desktop .main-navigation ul li#menu-item-1251 .oz-brand-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.78;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
#header-desktop .main-navigation ul li#menu-item-1251 > ul a:hover .oz-brand-logo {
	opacity: 1;
	transform: scale(1.06);
}

/* ==================================================================
   OZ COTIZADOR — Cajón lateral (sidecart) con los colores de 7K.
   El plugin define sus variables --ozc-sc-* en `.ozc-sidecart` (acento
   azul #004674). Las sobrescribimos aquí (sin tocar el plugin) con
   `body .ozc-sidecart` (mayor especificidad) para pintarlo de rojo 7K.
   ================================================================== */
body .ozc-sidecart {
	--ozc-sc-accent:      #e20613; /* rojo 7K (era azul) */
	--ozc-sc-accent-dark: #b9040f;
	--ozc-sc-border:      rgba(226, 6, 19, 0.14);
	--ozc-sc-border-soft: rgba(226, 6, 19, 0.06);
}
/* "Ver Carrito": botón rojo 7K con texto blanco (en vez de amarillo). */
body .ozc-sidecart .ozc-sidecart__btn--cart {
	background: #e20613;
	border-color: #e20613;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(226, 6, 19, 0.32);
}
body .ozc-sidecart .ozc-sidecart__btn--cart:hover {
	background: #b9040f;
	border-color: #b9040f;
	color: #ffffff;
}

/* ==================================================================
   PRODUCTO INDIVIDUAL — botones y bloque de especialista (como producción)
   ================================================================== */
/* TARJETA que envuelve galería + resumen (como producción). */
.oz-single-product .oz-product-top {
	display: flex; gap: 2rem; align-items: flex-start; position: relative;
	background: #fff; border: 1px solid #e4e7eb; border-radius: 12px;
	padding: 1.6rem; margin-bottom: 2.2rem;
}
.oz-single-product .oz-product-top > .onsale { z-index: 3; }
.oz-single-product .oz-product-top .woocommerce-product-gallery {
	width: 47% !important; margin: 0 !important; float: none !important;
	min-width: 0; box-sizing: border-box;
}
.oz-single-product .oz-product-top .summary.entry-summary {
	width: 53% !important; margin: 0 !important; float: none !important;
	min-width: 0; box-sizing: border-box;
	border: 1px solid #e4e7eb; border-radius: 10px; padding: 1.5rem 1.6rem;
}
.oz-single-product .oz-product-top .summary .product_title {
	color: #e20613; font-size: 1.4rem; margin: 0 0 .5rem;
}
@media (max-width: 991px) {
	.oz-single-product .oz-product-top { flex-direction: column; gap: 1.2rem; padding: 1rem; }
	.oz-single-product .oz-product-top .woocommerce-product-gallery,
	.oz-single-product .oz-product-top .summary.entry-summary { width: 100% !important; }
}

/* Botón "Consultar" (wsp) del single: verde con icono de WhatsApp. */
.oz-single-product .ozc-product-card__wa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	background: #25d366; border: 1px solid #25d366; color: #fff;
	padding: .7rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 15px;
	text-decoration: none; cursor: pointer; transition: background-color .2s ease;
}
.oz-single-product .ozc-product-card__wa-btn:hover { background: #1fae54; border-color: #1fae54; color: #fff; }
.oz-single-product .ozc-product-card__wa-btn::before {
	content: ""; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38c1.45.79%203.08%201.21%204.79%201.21%205.46%200%209.91-4.45%209.91-9.91S17.5%202%2012.04%202zm0%2018.15c-1.53%200-3.03-.41-4.34-1.19l-.31-.18-3.12.82.83-3.04-.2-.31a8.2%208.2%200%200%201-1.26-4.35c0-4.54%203.7-8.23%208.24-8.23%202.2%200%204.27.86%205.82%202.42a8.18%208.18%200%200%201%202.41%205.82c0%204.54-3.7%208.24-8.24%208.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17%200-.43.06-.66.31-.23.25-.87.85-.87%202.07%200%201.22.89%202.4%201.01%202.56.12.17%201.75%202.67%204.23%203.74.59.26%201.05.41%201.41.52.59.19%201.13.16%201.56.1.48-.07%201.47-.6%201.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38c1.45.79%203.08%201.21%204.79%201.21%205.46%200%209.91-4.45%209.91-9.91S17.5%202%2012.04%202zm0%2018.15c-1.53%200-3.03-.41-4.34-1.19l-.31-.18-3.12.82.83-3.04-.2-.31a8.2%208.2%200%200%201-1.26-4.35c0-4.54%203.7-8.23%208.24-8.23%202.2%200%204.27.86%205.82%202.42a8.18%208.18%200%200%201%202.41%205.82c0%204.54-3.7%208.24-8.24%208.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17%200-.43.06-.66.31-.23.25-.87.85-.87%202.07%200%201.22.89%202.4%201.01%202.56.12.17%201.75%202.67%204.23%203.74.59.26%201.05.41%201.41.52.59.19%201.13.16%201.56.1.48-.07%201.47-.6%201.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Botón "Ficha Técnica": profesional — outline con icono de DESCARGA rojo 7K,
   misma altura que "Consultar", hover en rojo con leve tinte. */
.oz-single-product .oz-wc-ficha-tecnica__btn {
	/* !important: gana a `.woocommerce a.button{display:inline-block}` que dejaba
	   el icono+texto a la izquierda sin centrar. */
	display: inline-flex !important; align-items: center !important;
	justify-content: center !important; gap: .55rem !important;
	background: #fff !important; border: 1.5px solid #d9dee4 !important; color: #24303c !important;
	padding: .7rem 1.2rem !important; border-radius: 8px !important;
	font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease !important;
}
.oz-single-product .oz-wc-ficha-tecnica__btn .oz-ficha-ico {
	width: 18px; height: 18px; flex: 0 0 auto; stroke: #e20613;
}
.oz-single-product .oz-wc-ficha-tecnica__btn:hover {
	border-color: #e20613 !important; color: #e20613 !important; background: #fff6f6 !important;
}
/* Fila "Consultar" (verde) + "Ficha Técnica" (outline) lado a lado, como
   producción (.ficha-wsp-botones). Ambos misma altura y mitad de ancho. */
.oz-single-product .ficha-wsp-botones {
	display: flex; gap: .7rem; margin-top: .7rem; flex-wrap: wrap;
}
.oz-single-product .ficha-wsp-botones > a {
	flex: 1 1 0; min-width: 150px; min-height: 48px; box-sizing: border-box;
}

/* Stepper de cantidad (− 1 +) más pulido y cohesivo con el rojo 7K: borde
   limpio redondeado, símbolos rojos con hover, número en negrita. Solo el
   single (no toca los steppers de las cards). */
.oz-single-product form.cart .quantity {
	border: 1.5px solid #d9dee4 !important;
	border-radius: 10px !important;
	overflow: hidden;
	background: #fff;
}
.oz-single-product form.cart .quantity .oz-qty-stepper {
	border-radius: 10px !important;
}
.oz-single-product form.cart .quantity .oz-qty-stepper__btn {
	color: #e20613 !important;
	font-size: 22px !important; font-weight: 600 !important;
	transition: background-color .18s ease, color .18s ease !important;
}
.oz-single-product form.cart .quantity .oz-qty-stepper__btn:hover {
	background: #fdecee !important; color: #b9040f !important;
}
.oz-single-product form.cart .quantity .oz-qty-stepper__input {
	color: #1f2430 !important; font-weight: 700 !important;
	border-left-color: #edeff2 !important; border-right-color: #edeff2 !important;
}

/* Contenido de las PESTAÑAS: padding cómodo para que el texto/viñetas no queden
   pegados al borde (WooCommerce pisaba el padding del tema con `.panel{padding:0}`). */
.oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel,
.oz-single-product .woocommerce-tabs .wc-tab,
.oz-single-product .woocommerce-tabs .panel {
	padding: 1.75rem 2rem !important;
}
@media (max-width: 575px) {
	.oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel,
	.oz-single-product .woocommerce-tabs .wc-tab,
	.oz-single-product .woocommerce-tabs .panel {
		padding: 1.25rem 1.1rem !important;
	}
}

/* Descripción corta: ocultar el reproductor de video (fuente S3 rota → caja
   negra "Media error"; no aporta y afea el resumen). */
.oz-single-product .woocommerce-product-details__short-description .wp-video,
.oz-single-product .woocommerce-product-details__short-description video,
.oz-single-product .woocommerce-product-details__short-description .mejs-container {
	display: none !important;
}
.oz-single-product .woocommerce-product-details__short-description p:empty { display: none; }
.oz-single-product .woocommerce-product-details__short-description {
	color: #4a5460; font-size: .95rem; line-height: 1.6; margin-bottom: 1.2rem;
}

/* Precio del resumen: oferta en ROJO 7K, precio anterior tachado gris, IGV
   pequeño. El monto de oferta heredaba un verde-oliva (default WooCommerce), se
   fuerza rojo hasta el .amount/bdi interno. */
.oz-single-product p.price {
	color: #e20613; font-size: 1.5rem; font-weight: 800; margin: .2rem 0 1rem; line-height: 1.2;
}
.oz-single-product p.price ins,
.oz-single-product p.price ins .woocommerce-Price-amount,
.oz-single-product p.price ins bdi,
.oz-single-product p.price ins .woocommerce-Price-currencySymbol {
	color: #e20613 !important; text-decoration: none;
}
.oz-single-product p.price del,
.oz-single-product p.price del .woocommerce-Price-amount,
.oz-single-product p.price del bdi {
	color: #9aa1ab !important; font-weight: 500; font-size: 1.05rem;
}
.oz-single-product p.price .woocommerce-price-suffix {
	color: #7a828c; font-size: .78rem; font-weight: 600; margin-left: .3rem;
}

/* Botón "Cotizar": el tema (single-product.css) lo pinta navy #1b2a6b y ya lo
   dimensiona (fila cantidad + botón, stepper naranja propio). Aquí SOLO se
   cambia el color a ROJO 7K (no se toca el layout ni el stepper, para no
   romperlos como pasaba antes con el input "cortado"). */
.oz-single-product form.cart .single_add_to_cart_button,
.oz-single-product form.cart .button.alt,
.oz-single-product form.cart button[type='submit'].single_add_to_cart_button {
	background: #e20613 !important; border-color: #e20613 !important; color: #fff !important;
}
.oz-single-product form.cart .single_add_to_cart_button:hover,
.oz-single-product form.cart .button.alt:hover {
	background: #b9040f !important; border-color: #b9040f !important;
}

/* Orden del resumen (es flex column): el tema pone form.cart en order:1 y lo
   mandaba al final. Se reordena como el diseño: … descripción → cantidad+Cotizar
   → Consultar+Ficha → especialista. */
.oz-single-product .entry-summary form.cart { order: 0 !important; }
.oz-single-product .entry-summary .ficha-wsp-botones { order: 1; }
.oz-single-product .entry-summary .oz-single-especialista { order: 2; }

/* Badge "¡Oferta!" (.onsale): sin regla propia usaba el verde-oliva por defecto
   de WooCommerce → se pone en ROJO 7K. */
.oz-single-product .onsale,
.oz-single-product span.onsale {
	background: #e20613 !important; color: #fff !important;
	border-color: #e20613 !important; box-shadow: none !important;
}

/* Bloque "Contacta con un especialista". */
.oz-single-especialista {
	display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding-top: 1.2rem;
	border-top: 1px solid #e6e8ec; color: #1f2430;
}
.oz-single-especialista__icon { flex: 0 0 auto; color: #1f2430; line-height: 0; }
.oz-single-especialista__q { font-size: .95rem; color: #4a5460; line-height: 1.3; }
.oz-single-especialista__tel { font-size: 1.05rem; font-weight: 800; color: #1f2430; margin-top: .1rem; }
.oz-single-especialista__tel a { color: inherit; text-decoration: none; transition: color .18s ease; }
.oz-single-especialista__tel a:hover { color: #25d366; }

/* ==================================================================
   BARRA LATERAL DE LA ENTRADA (blog single) — "Entradas recientes"
   con aspecto profesional: tarjeta blanca, título con acento rojo,
   ítems con divisores, marcador y hover.
   ================================================================== */
.single-sidebar {
	position: sticky;
	top: 9rem;
}
.single-sidebar__widget {
	background: #ffffff;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	padding: 1.25rem 1.35rem 0.9rem;
	box-shadow: 0 6px 18px rgba(20, 25, 35, 0.05);
}
.single-sidebar__widget + .single-sidebar__widget {
	margin-top: 1.25rem;
}
.single-sidebar__title {
	margin: 0 0 1rem;
	padding-bottom: 0.7rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: #1f2430;
	border-bottom: 1px solid #eef0f2;
	position: relative;
}
.single-sidebar__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: #e20613;
}
.single-sidebar__widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-sidebar__widget li {
	margin: 0;
}
.single-sidebar__widget li + li {
	border-top: 1px solid #eef0f2;
}
.single-sidebar__widget li a {
	display: block;
	position: relative;
	padding: 0.7rem 0 0.7rem 1.1rem;
	color: #3a4048;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.single-sidebar__widget li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #e20613;
	opacity: 0.5;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.single-sidebar__widget li a:hover {
	color: #e20613;
	padding-left: 1.35rem;
}
.single-sidebar__widget li a:hover::before {
	opacity: 1;
	transform: scale(1.25);
}
.single-sidebar__widget li a[aria-current="page"] {
	color: #e20613;
	font-weight: 700;
}

/* ==================================================================
   CARDS DEL BLOG (archivo) — badge "Publicado" sobre la imagen,
   contenido centrado y acentos rojos 7K (como la captura objetivo).
   ================================================================== */
.oz-archive-card__media {
	position: relative;
}
.oz-archive-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 0.45rem 0.85rem;
	background: #e20613;
	color: #ffffff;
	border-bottom-right-radius: 10px;
	line-height: 1.1;
	text-align: center;
}
.oz-archive-card__badge-label {
	font-size: 0.72rem;
	font-weight: 600;
}
.oz-archive-card__badge-date {
	font-size: 0.95rem;
	font-weight: 800;
}
/* Contenido centrado (título, extracto, botón). */
.oz-archive-card__body {
	text-align: center;
	align-items: center;
}
.oz-archive-card__title {
	text-align: center;
}
.oz-archive-card__title a:hover {
	color: #e20613;
}
.oz-archive-card__excerpt {
	color: #6b7280;
}
/* Botón "Ver más" en rojo 7K (era naranja). */
.oz-archive-card__btn {
	border-color: #e20613 !important;
	color: #e20613 !important;
}
.oz-archive-card__btn:hover {
	background: #e20613 !important;
	color: #ffffff !important;
}

/* ==================================================================
   CATEGORÍA DE PRODUCTO — descripción corta (arriba) + larga (sidebar).
   ================================================================== */
/* Intro corta arriba (ACF descripcion_corta_principal), imagen a la derecha. */
.oz-shop-cat-intro {
	margin: 0 0 1.25rem;
	color: #4a5460;
	font-size: 0.98rem;
	line-height: 1.6;
	overflow: hidden;
}
.oz-shop-cat-intro p {
	margin: 0 0 0.8rem;
}
.oz-shop-cat-intro img,
.oz-shop-cat-intro .alignright {
	float: right;
	max-width: 120px;
	height: auto;
	margin: 0 0 0.6rem 1.25rem;
}
/* Descripción larga en el sidebar, con el h2 estilo captura 3 (rojo + líneas). */
.oz-shop-cat-desc {
	font-size: 0.9rem;
	color: #4a5460;
	line-height: 1.55;
}
.oz-shop-cat-desc h2 {
	text-align: center;
	color: #e20613;
	font-size: 1.02rem;
	font-weight: 800;
	margin: 0 0 1rem;
	padding: 0.8rem 0;
	border-top: 1px solid #e6e8ec;
	border-bottom: 1px solid #e6e8ec;
	line-height: 1.3;
}
.oz-shop-cat-desc h3 {
	color: #1f2430;
	font-size: 0.98rem;
	font-weight: 700;
	margin: 1rem 0 0.5rem;
}
.oz-shop-cat-desc p {
	margin: 0 0 0.8rem;
}
.oz-shop-cat-desc ol,
.oz-shop-cat-desc ul {
	margin: 0 0 0.8rem;
	padding-left: 1.2rem;
}
.oz-shop-cat-desc li {
	margin-bottom: 0.5rem;
}
.oz-shop-cat-desc strong {
	color: #1f2430;
}

/* Entrada individual: padding lateral para que el contenido no toque los
   bordes (móvil/tablet) + algo de espacio arriba en móvil (header en flujo). */
.site-main--single {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}
@media (max-width: 991px) {
	.site-main--single {
		padding-top: 1.5rem;
	}
}

/* Categoría: en tablet/móvil ocultar la descripción LARGA del sidebar
   (queda en el top la descripción corta; la larga sobra en pantallas chicas). */
@media (max-width: 991px) {
	.oz-shop-cat-desc {
		display: none;
	}
}

/* Sidecart del cotizador: quitar el desenfoque (backdrop-filter) del overlay,
   que al componerse durante la animación de apertura hacía ver el cajón
   "aguado/rosado" un instante antes de asentarse en su color final. */
body .ozc-sidecart .ozc-sidecart__overlay {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* CAUSA REAL del "flash rosado/aguado": mientras el cotizador hace el AJAX de
   apertura/actualización añade la clase .ozc-sidecart--loading, que pinta un
   velo blanco al 55% (::after) sobre TODO el panel → el rojo se ve rosa y el
   resto aguado un instante, hasta que termina la carga. Se anula ese velo. */
body .ozc-sidecart--loading .ozc-sidecart__panel::after {
	display: none !important;
	background: transparent !important;
}

/* ==================================================================
   STEELPRO SAFETY (page-id-4787) — formato de la tabla de productos
   (847 nombres, 1 columna): panel con franjas, bordes, hover y scroll.
   ================================================================== */
.page-id-4787 .entry-content table,
.page-id-4787 .oz-pb-root table {
	display: block;
	width: 100% !important;
	max-width: 760px !important;
	margin: 1.5rem auto !important;
	max-height: 600px;
	overflow-y: auto;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(20, 25, 35, 0.05);
	font-size: 0.92rem;
	box-sizing: border-box;
}
.page-id-4787 .entry-content table td,
.page-id-4787 .oz-pb-root table td {
	padding: 0.6rem 1.1rem;
	border-bottom: 1px solid #eef0f2;
	color: #334155;
	line-height: 1.4;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.page-id-4787 .entry-content table tr:nth-child(even) td,
.page-id-4787 .oz-pb-root table tr:nth-child(even) td {
	background: #f8f9fb;
}
.page-id-4787 .entry-content table tr:hover td,
.page-id-4787 .oz-pb-root table tr:hover td {
	background: rgba(226, 6, 19, 0.07);
	color: #e20613;
	font-weight: 600;
}
.page-id-4787 .entry-content table tr:last-child td,
.page-id-4787 .oz-pb-root table tr:last-child td {
	border-bottom: 0;
}
/* Barra de scroll roja 7K. */
.page-id-4787 .entry-content table::-webkit-scrollbar,
.page-id-4787 .oz-pb-root table::-webkit-scrollbar { width: 10px; }
.page-id-4787 .entry-content table::-webkit-scrollbar-track,
.page-id-4787 .oz-pb-root table::-webkit-scrollbar-track { background: #f1f2f4; border-radius: 10px; }
.page-id-4787 .entry-content table::-webkit-scrollbar-thumb,
.page-id-4787 .oz-pb-root table::-webkit-scrollbar-thumb { background: #e20613; border-radius: 10px; }