/* Óptica Paz y Paz – Brand — CSS institucional mínimo (v1.1) */

:root {
	--opp-color-red: #de1a08;
	--opp-color-red-dark: #d0070b;
	--opp-color-black: #000000;
	--opp-color-gray: #323232;
	--opp-color-white: #ffffff;
	--opp-font-sans: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	--wp--preset--font-family--manrope: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	--opp-control-height: 36px;
	--opp-control-height-touch: 40px;
	--opp-control-radius: 8px;
	--opp-cta-bg: #323232;
	--opp-cta-hover: #b24c46;
}

/*
 * OPP2026100915 — Tipografía institucional D18.
 * Brand OPP > tema. Manrope puede seguir en TT5; no gobierna la UI OPP.
 * No se alteran tamaños, paleta, layout ni altura de controles.
 */
html,
body,
button,
input,
select,
textarea,
label,
optgroup,
legend,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
a,
th,
td,
.wp-block-site-title,
.wp-block-navigation,
.wp-block-navigation-item,
.wp-block-navigation-item__label,
.wp-block-post-title,
.wp-block-heading,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.wc-block-components-product-name,
.wc-block-components-product-price,
.wc-block-components-product-badge,
.wc-block-components-notice-banner,
.wc-block-components-filter-wrapper,
.wc-block-components-pagination,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-mini-cart,
.wc-block-mini-cart,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-product,
.opp-wa-cart,
.opp-shop-results {
	font-family: var(--opp-font-sans);
}

.has-manrope-font-family,
.has-system-sans-serif-font-family {
	font-family: var(--opp-font-sans) !important;
}

/*
 * OPP2026100917 — Controles compactos D18 para todo el sitio y secciones futuras.
 * Brand gobierna tipografía, color y densidad. No se altera el layout de página.
 */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.woocommerce-button,
button.button,
input[type="submit"],
input[type="button"] {
	font-family: var(--opp-font-sans);
	border-radius: var(--opp-control-radius);
}

.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.contained-small) {
	min-height: var(--opp-control-height);
	padding-block: 0.32rem;
	padding-inline: 0.85rem;
	line-height: 1.2;
}

.woocommerce-result-count,
.wc-block-product-results-count .woocommerce-result-count,
.opp-shop-toolbar .woocommerce-result-count {
	font-family: var(--opp-font-sans);
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--opp-color-gray);
	letter-spacing: 0;
}

.woocommerce-ordering label,
.wc-block-catalog-sorting label,
.opp-shop-toolbar .wc-block-catalog-sorting {
	font-family: var(--opp-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--opp-color-gray);
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	font-family: var(--opp-font-sans);
	font-size: 0.86rem;
	color: var(--opp-color-gray);
}

.woocommerce-account button,
.woocommerce-account .button,
.woocommerce-checkout .wc-block-components-button {
	min-height: var(--opp-control-height);
	padding-block: 0.32rem;
}

/* Login institucional (scoped a body.login) */

body.login {
	background-color: var(--opp-color-white);
}

body.login #login h1 a {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	width: 236px;
	height: 81px;
	margin: 0 auto;
}

body.login #wp-submit {
	background-color: var(--opp-color-red);
	border-color: var(--opp-color-red-dark);
	color: var(--opp-color-white);
}

body.login #wp-submit:hover,
body.login #wp-submit:focus {
	background-color: var(--opp-color-red-dark);
	border-color: var(--opp-color-red-dark);
}

/* Responsive mínimo de marca para el login */

@media screen and (max-width: 320px) {
	body.login #login h1 a {
		width: 180px;
		height: 62px;
	}
}

/* ==========================================================================
   Página Nosotros (OPP2026100201) — CSS mínimo y específico de Nosotros.
   Todas las reglas están limitadas al namespace .opp-nosotros-* y solo
   aplican a objetos de la página Nosotros. No hay reglas globales, no se
   toca WooCommerce, header/footer ni otras páginas. No se copia CSS legacy.
   ========================================================================== */

/* S1 — Hero: imagen a ancho completo, sin espacio fantasma. */
.opp-nosotros-hero {
	padding: 0;
}

.opp-nosotros-hero-picture {
	display: block;
	line-height: 0;
}

.opp-nosotros-hero-picture img {
	display: block;
	width: 100%;
	height: auto;
}

/* Paddings verticales por sección (paridad con el legacy). */
.opp-nosotros-historia,
.opp-nosotros-sucursales {
	padding-block: 44px;
}

.opp-nosotros-valores {
	padding-block: 24px 44px;
}

.opp-nosotros-contacto {
	background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
	padding-block: 46px 54px;
}

/* Divisor decorativo de la columna de historia. */
.opp-nosotros-divider-bar {
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--opp-color-red, #de1a08);
	margin-bottom: 16px;
}

/* Tarjetas (Valores y Sucursales). */
.opp-nosotros-card {
	background-color: var(--opp-color-background, #f7f7f7);
	border: 1px solid rgba(50, 50, 50, 0.10);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
	height: 100%;
}

.opp-nosotros-sucursal-card {
	border-radius: 18px;
}

/* Botones pill institucionales (hover no es nativo en Gutenberg). */
.opp-nosotros-btn .wp-block-button__link {
	border-radius: 999px;
	background-color: var(--opp-color-gray, #323232);
	color: var(--opp-color-white, #ffffff);
}

.opp-nosotros-btn .wp-block-button__link:hover,
.opp-nosotros-btn .wp-block-button__link:focus {
	background-color: var(--opp-color-red, #de1a08);
	color: var(--opp-color-white, #ffffff);
}

/* Galería de historia. */
.opp-nosotros-historia-gallery img {
	border-radius: 18px;
}

/* Mapas S5. */
.opp-nosotros-mapa iframe {
	width: 100%;
	min-height: 470px;
	border: 0;
	border-radius: 16px;
	display: block;
}

/* Contrato de ancla Asistencia (reemplaza el JS legacy de anclaje). */
.opp-nosotros-contacto-row {
	scroll-margin-top: 104px;
}

/* Tarjeta reservada del formulario (diferido). */
.opp-nosotros-form-card {
	background-color: var(--opp-color-white, #ffffff);
	border: 1px solid rgba(50, 50, 50, 0.10);
	border-radius: 22px;
	padding: 28px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}

.opp-nosotros-contacto img {
	border-radius: 18px;
}

/* Responsive (paridad con §14 del blueprint 0107). */
@media screen and (max-width: 980px) {
	.opp-nosotros-historia,
	.opp-nosotros-sucursales {
		padding-block: 34px 38px;
	}

	.opp-nosotros-contacto {
		padding-block: 34px 38px;
	}

	.opp-nosotros-form-card {
		padding: 24px;
	}

	.opp-nosotros-mapa iframe {
		min-height: 430px;
	}
}

@media screen and (max-width: 767px) {
	.opp-nosotros-historia,
	.opp-nosotros-sucursales {
		padding-block: 28px 32px;
	}

	.opp-nosotros-contacto {
		padding-block: 28px 32px;
	}

	.opp-nosotros-card,
	.opp-nosotros-contacto img {
		border-radius: 16px;
	}

	.opp-nosotros-form-card {
		padding: 20px;
	}

	.opp-nosotros-mapa iframe {
		min-height: 430px;
		border-radius: 14px;
	}

	.opp-nosotros-contacto-row {
		scroll-margin-top: 150px;
	}
}

/* ==========================================================================
   OPP2026100403 — Paridad Nosotros (S2 carrusel, S3 iconos, S4 datos, S5 modal)
   Todo scoped a .opp-nosotros-*. Sin reglas globales. Sin copiar CSS legacy.
   ========================================================================== */

/* S3 — Icono de Valor (SVG propio, sin Font Awesome). */
.opp-nosotros-valor-icon {
	display: block;
	line-height: 0;
	margin-bottom: 12px;
	color: var(--opp-color-red, #de1a08);
}

.opp-nosotros-valor-icon svg {
	width: 56px;
	height: 56px;
	display: block;
}

/* S4 — Datos de Sucursal (dirección / horario / teléfono). */
.opp-nosotros-sucursal-dato {
	color: #4a4a4a;
	line-height: 1.58;
	margin: 0 0 6px;
}

.opp-nosotros-sucursal-dato strong {
	color: var(--opp-color-gray, #323232);
}

/* S2 — Carrusel manual de Historia (mejora progresiva sobre core/gallery). */
.opp-nosotros-historia-carousel {
	position: relative;
}

/* OPP2026100410 — Especificidad elevada (0,4,1) para vencer la regla Core
   .wp-block-gallery.has-nested-images figure.wp-block-image{display:flex} (0,3,1)
   que impedía ocultar las imágenes no activas (todas se veían apiladas). */
.opp-nosotros-historia-carousel.opp-nosotros-historia-gallery.opp-carousel-ready figure.wp-block-image {
	display: none;
	margin: 0;
}

.opp-nosotros-historia-carousel.opp-nosotros-historia-gallery.opp-carousel-ready figure.wp-block-image.opp-nosotros-carousel-active {
	display: block;
}

.opp-nosotros-historia-carousel figure.wp-block-image img {
	border-radius: 18px;
	display: block;
	width: 100% !important;
	height: auto;
}

.opp-nosotros-historia-carousel.opp-carousel-ready figure.wp-block-image:not(.opp-nosotros-carousel-active) {
	visibility: hidden;
}

.opp-nosotros-carousel-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	padding: 0 8px;
}

.opp-nosotros-carousel-btn {
	pointer-events: auto;
	appearance: none;
	border: 0;
	background: var(--opp-color-gray, #323232);
	color: #ffffff;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: background-color 180ms ease, transform 180ms ease;
}

.opp-nosotros-carousel-btn:hover,
.opp-nosotros-carousel-btn:focus {
	background: var(--opp-color-red, #de1a08);
	transform: scale(1.05);
	outline: none;
}

.opp-nosotros-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.opp-nosotros-carousel-dot {
	appearance: none;
	border: 0;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(50, 50, 50, 0.28);
	cursor: pointer;
	padding: 0;
	transition: background-color 180ms ease, transform 180ms ease;
}

.opp-nosotros-carousel-dot.is-active {
	background: var(--opp-color-red, #de1a08);
	transform: scale(1.25);
}

.opp-nosotros-carousel-dot:focus {
	outline: 2px solid var(--opp-color-red, #de1a08);
	outline-offset: 2px;
}

/* S5 — Modal de mapas (<dialog> nativo, sin librería). */
.opp-nosotros-mapa-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	width: min(920px, 94vw);
	max-width: 94vw;
	max-height: 88vh;
	overflow: visible;
}

.opp-nosotros-mapa-dialog::backdrop {
	background: rgba(0, 0, 0, 0.62);
}

.opp-nosotros-mapa-dialog-inner {
	background: #ffffff;
	border-radius: 22px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
	padding: 18px;
}

.opp-nosotros-mapa-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 4px 14px;
}

.opp-nosotros-mapa-dialog-title {
	margin: 0;
	color: var(--opp-color-gray, #323232);
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
}

.opp-nosotros-mapa-dialog-close {
	appearance: none;
	border: 0;
	background: var(--opp-color-gray, #323232);
	color: #ffffff;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 180ms ease, transform 180ms ease;
}

.opp-nosotros-mapa-dialog-close:hover,
.opp-nosotros-mapa-dialog-close:focus {
	background: var(--opp-color-red, #de1a08);
	transform: translateY(-1px);
	outline: none;
}

.opp-nosotros-mapa-dialog-body {
	width: 100%;
	line-height: 0;
}

.opp-nosotros-mapa-dialog-body iframe {
	display: block;
	width: 100%;
	min-height: 470px;
	border: 0;
	border-radius: 16px;
}

@media screen and (max-width: 767px) {
	.opp-nosotros-mapa-dialog {
		width: 94vw;
		max-height: 84vh;
	}

	.opp-nosotros-mapa-dialog-inner {
		border-radius: 18px;
		padding: 14px;
	}

	.opp-nosotros-mapa-dialog-title {
		font-size: 17px;
	}

	.opp-nosotros-mapa-dialog-close {
		width: 32px;
		height: 32px;
		font-size: 22px;
	}

	.opp-nosotros-mapa-dialog-body iframe {
		min-height: 430px;
		border-radius: 14px;
	}

	.opp-nosotros-valor-icon svg {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   OPP2026100405 — Ajuste visual Nosotros + cabecera institucional.
   Cabecera a ancho de pantalla, contenido de Nosotros más ancho y hero a
   sangre completa. Sin reglas globales fuera de .opp-* y page-id-1610.
   ========================================================================== */

/* Cabecera institucional (template part «header»). */
.opp-header {
	background-color: var(--opp-color-white, #ffffff);
	border-bottom: 1px solid rgba(50, 50, 50, 0.10);
}

.opp-header-bar {
	max-width: none;
	width: 100%;
	padding: 14px clamp(16px, 4vw, 48px);
	gap: 24px;
}

.opp-header .wp-block-site-logo {
	line-height: 0;
	flex: 0 0 auto;
}

.opp-header-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.opp-header-nav {
	flex: 1 1 auto;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.opp-header-nav .wp-block-navigation {
	flex: 0 1 auto;
}

.opp-header .wp-block-navigation-item__content {
	font-weight: 600;
	letter-spacing: 0.01em;
}

.opp-header .wp-block-navigation-item__content:hover,
.opp-header .wp-block-navigation-item__content:focus {
	color: var(--opp-color-red, #de1a08);
}

@media screen and (max-width: 767px) {
	.opp-header-bar {
		padding: 12px 16px;
		gap: 12px;
	}

	.opp-header-logo img {
		max-width: 150px;
	}
}

/* Nosotros (1610): ensanchar el contenido (por defecto 645px). */
body.page-id-1610 .wp-block-post-content {
	--wp--style--global--content-size: 1280px;
}

/* Hero a sangre completa: anula el límite del layout constrained. */
body.page-id-1610 .opp-nosotros-hero {
	padding-left: 0;
	padding-right: 0;
}

body.page-id-1610 .opp-nosotros-hero-picture {
	width: 100%;
	max-width: none;
	margin: 0;
}

body.page-id-1610 .opp-nosotros-hero-picture img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   OPP2026100412 — Bloque social page-specific de Nosotros (1610).
   Reemplaza el footer global: este bloque vive SOLO en el contenido de 1610.
   Estilos scoped a .opp-nosotros-social-* y .opp-nosotros-copyright*. Sin reglas globales.
   ========================================================================== */

.opp-nosotros-social-list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
}

.opp-nosotros-social-item {
	margin: 0;
}

.opp-nosotros-social-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background-color: #ffffff;
	border: 1px solid rgba(50, 50, 50, 0.12);
	color: var(--opp-color-gray, #323232);
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.opp-nosotros-social-icon {
	display: inline-flex;
	line-height: 0;
}

.opp-nosotros-social-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Hover visual (rojo institucional). */
.opp-nosotros-social-link:hover,
.opp-nosotros-social-link:focus-visible {
	background-color: var(--opp-color-red, #de1a08);
	border-color: var(--opp-color-red, #de1a08);
	color: var(--opp-color-white, #ffffff);
	transform: translateY(-2px);
	outline: none;
}

/* Tooltip oscuro legible. */
.opp-nosotros-social-link[data-opp-tooltip]::after {
	content: attr(data-opp-tooltip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 11px);
	transform: translateX(-50%) translateY(4px);
	background-color: #1a1a1a;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	padding: 7px 11px;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	z-index: 5;
}

.opp-nosotros-social-link[data-opp-tooltip]::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 3px);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a1a1a;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms ease;
	z-index: 5;
}

.opp-nosotros-social-link[data-opp-tooltip]:hover::after,
.opp-nosotros-social-link[data-opp-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.opp-nosotros-social-link[data-opp-tooltip]:hover::before,
.opp-nosotros-social-link[data-opp-tooltip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* Franja negra page-specific, texto blanco alineado a la izquierda. */
.opp-nosotros-copyright-bar {
	background-color: #000000;
	color: #ffffff;
	padding: 14px clamp(16px, 4vw, 48px);
}

.opp-nosotros-copyright-bar .opp-nosotros-copyright {
	margin: 0;
	text-align: left;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
}

@media screen and (max-width: 767px) {
	.opp-nosotros-social-list {
		gap: 10px;
	}

	.opp-nosotros-social-link {
		padding: 9px 14px;
		font-size: 14px;
	}

	/* Degradación móvil: sin tooltip flotante (no hay hover táctil y evita overflow). */
	.opp-nosotros-social-link[data-opp-tooltip]::after,
	.opp-nosotros-social-link[data-opp-tooltip]::before {
		content: none;
		display: none;
	}
}

/* ==========================================================================
   OPP2026100416 — Formulario «Asistencia Web» (CF7) embebido en Nosotros (1610).
   Estilos scoped a .opp-nosotros-form-card y .opp-asistencia-form. Sin reglas globales.
   ========================================================================== */

.opp-nosotros-form-card .wpcf7 {
	margin: 0;
}

.opp-asistencia-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
	margin: 4px 0 0;
}

.opp-asistencia-form .opp-af-field {
	margin: 0;
}

.opp-asistencia-form .opp-af-field--full,
.opp-asistencia-form .opp-af-field--submit {
	grid-column: 1 / -1;
}

.opp-asistencia-form .opp-af-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--opp-color-gray, #323232);
	line-height: 1.3;
}

.opp-asistencia-form .wpcf7-form-control-wrap {
	display: block;
}

.opp-asistencia-form input[type="text"],
.opp-asistencia-form input[type="email"],
.opp-asistencia-form input[type="tel"],
.opp-asistencia-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--opp-color-gray, #323232);
	background-color: #ffffff;
	border: 1px solid rgba(50, 50, 50, 0.18);
	border-radius: 10px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.opp-asistencia-form textarea {
	min-height: 140px;
	resize: vertical;
}

.opp-asistencia-form input[type="text"]:focus,
.opp-asistencia-form input[type="email"]:focus,
.opp-asistencia-form input[type="tel"]:focus,
.opp-asistencia-form textarea:focus {
	outline: none;
	border-color: var(--opp-color-red, #de1a08);
	box-shadow: 0 0 0 3px rgba(222, 26, 8, 0.12);
}

.opp-asistencia-form .opp-af-field--submit {
	display: flex;
	justify-content: flex-end;
}

.opp-asistencia-form input[type="submit"] {
	appearance: none;
	border: 0;
	background-color: var(--opp-color-gray, #323232);
	color: var(--opp-color-white, #ffffff);
	padding: 13px 32px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
}

.opp-asistencia-form input[type="submit"]:hover,
.opp-asistencia-form input[type="submit"]:focus {
	background-color: var(--opp-color-red, #de1a08);
	transform: translateY(-1px);
	outline: none;
}

/* Mensajes de validación y respuesta (CF7). */
.opp-nosotros-form-card .wpcf7-not-valid-tip {
	color: var(--opp-color-red, #de1a08);
	font-size: 13px;
	margin-top: 4px;
}

.opp-nosotros-form-card .wpcf7-not-valid {
	border-color: var(--opp-color-red, #de1a08) !important;
}

.opp-nosotros-form-card .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	.opp-asistencia-form {
		grid-template-columns: 1fr;
	}

	.opp-asistencia-form .opp-af-field--full,
	.opp-asistencia-form .opp-af-field--submit {
		grid-column: auto;
	}

	.opp-asistencia-form .opp-af-field--submit {
		justify-content: stretch;
	}

	.opp-asistencia-form input[type="submit"] {
		width: 100%;
	}
}

/* =====================================================================
   OPP #204 — Ficha de producto nativa · BRANDING VISUAL OPP (scoped)
   Presentación únicamente. La función la resuelve WooCommerce nativo.
   Scope: .opp-product-page / .opp-product-related. Tokens --opp-color-*.
   ===================================================================== */

/* 4.1 — Contenedor general */
.opp-product-page {
	max-width: 1240px;
	margin-inline: auto;
	padding: 1.25rem 1rem 0;
	color: var(--opp-color-gray);
}

/* 4.2 — Breadcrumb */
.opp-product-page .woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: #6b7280;
	margin-bottom: 1.25rem;
}

.opp-product-page .woocommerce-breadcrumb a {
	color: #6b7280;
	text-decoration: none;
	transition: color 0.15s ease;
}

.opp-product-page .woocommerce-breadcrumb a:hover,
.opp-product-page .woocommerce-breadcrumb a:focus-visible {
	color: var(--opp-color-red);
	text-decoration: underline;
}

/* 4.4 — Resumen comercial */
.opp-product-summary {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.opp-product-summary > * {
	margin-block: 0;
}

/* Precio. OPP2026101305: 600 (antes 800, que Open Sans 400/600/700 pintaba como 700):
   el rojo ya da el énfasis; el precio acompaña al título sin competir con él. */
.opp-product-summary .wc-block-components-product-price {
	font-weight: 600;
	color: var(--opp-color-red);
}

.opp-product-summary .wc-block-components-product-price .woocommerce-Price-amount {
	font-size: 1.6rem;
	line-height: 1.1;
}

/* Descripción corta */
.opp-product-summary .wp-block-woocommerce-product-summary,
.opp-product-summary .wc-block-components-product-summary {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--opp-color-gray);
}

.opp-product-summary .wc-block-components-product-summary p {
	margin: 0 0 0.65rem;
}

.opp-product-summary .wc-block-components-product-summary p:last-child {
	margin-bottom: 0;
}

/* Stock → una sola visualización (badge) en la ficha.
   WooCommerce imprime el estado dos veces: en el bloque
   woocommerce/product-stock-indicator (badge conservado) y dentro de
   woocommerce/add-to-cart-form como <p class="stock in-stock">.
   Se oculta únicamente la copia redundante del add-to-cart-form. */
.opp-product-summary .wc-block-components-product-stock-indicator {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: rgba(26, 127, 55, 0.1);
	color: #1a7f37;
}

.opp-product-summary .wp-block-woocommerce-add-to-cart-form > p.stock {
	display: none;
}

.opp-product-summary .wc-block-components-product-stock-indicator--out-of-stock,
.opp-product-summary .wc-block-components-product-stock-indicator--available-on-backorder {
	background: rgba(222, 26, 8, 0.1);
	color: var(--opp-color-red-dark);
}

/* Add-to-cart (cantidad + botón como conjunto) */
.opp-product-summary .wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.6rem;
	margin-top: 0.25rem;
}

.opp-product-summary form.cart .quantity {
	display: flex;
	align-items: stretch;
}

.opp-product-summary form.cart .quantity input.qty {
	width: 4.5rem;
	min-height: var(--opp-control-height-touch);
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	background: var(--opp-color-white);
	color: var(--opp-color-gray);
}

.opp-product-summary .wp-block-woocommerce-add-to-cart-form .button,
.opp-product-summary .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: var(--opp-control-height-touch);
	padding: 0.4rem 1rem;
	width: auto;
	text-align: center;
	background-color: var(--opp-color-gray);
	border: 1px solid var(--opp-color-gray);
	border-radius: 8px;
	color: var(--opp-color-white);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.opp-product-summary .wp-block-woocommerce-add-to-cart-form .button:hover,
.opp-product-summary .single_add_to_cart_button:hover {
	background-color: var(--opp-color-red);
	border-color: var(--opp-color-red);
}

.opp-product-summary .wp-block-woocommerce-add-to-cart-form .button:active,
.opp-product-summary .single_add_to_cart_button:active {
	background-color: var(--opp-color-red-dark);
	border-color: var(--opp-color-red-dark);
}

.opp-product-summary .wp-block-woocommerce-add-to-cart-form .button:focus-visible,
.opp-product-summary .single_add_to_cart_button:focus-visible {
	background-color: var(--opp-color-red-dark);
	border-color: var(--opp-color-red-dark);
	outline: 3px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
}

/* Código / SKU */
.opp-product-summary .wp-block-woocommerce-product-sku,
.opp-product-summary .woocommerce-product-sku {
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: #6b7280;
	margin-top: 0.15rem;
}

.opp-product-summary .wp-block-woocommerce-product-sku .sku,
.opp-product-summary .woocommerce-product-sku .sku {
	color: var(--opp-color-gray);
	font-weight: 600;
}

/* 5 — Productos relacionados */
.opp-product-related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.opp-product-related .wp-block-woocommerce-product-collection .wp-block-heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--opp-color-black);
}

/* 7 — Responsive */
@media screen and (max-width: 1023px) {
	.opp-product-main {
		gap: 1.5rem;
	}
}

@media screen and (max-width: 781px) {
	.opp-product-main {
		display: block;
	}

	.opp-product-gallery {
		margin-bottom: 1.5rem;
	}

	/* OPP2026101305: 1.45rem → 1.375rem; el h1 móvil mide 1.3rem. */
	.opp-product-summary .wc-block-components-product-price .woocommerce-Price-amount {
		font-size: 1.375rem;
	}
}

/* =====================================================================
   OPP2026100513 — reCAPTCHA: aviso legal y ocultamiento del badge
   reCAPTCHA v3 permanece totalmente activo (claves, script y validación).
   Solo se oculta visualmente el badge flotante de Google; el nodo permanece
   en el DOM y no se bloquean iframes/scripts/peticiones.
   ===================================================================== */
.grecaptcha-badge {
	visibility: hidden;
}

.opp-recaptcha-notice {
	margin-top: 1rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b7280;
}

.opp-recaptcha-notice a {
	color: var(--opp-color-gray);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.opp-recaptcha-notice a:hover,
.opp-recaptcha-notice a:focus-visible {
	color: var(--opp-color-red);
}

.opp-recaptcha-notice a:focus-visible {
	outline: 2px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =====================================================================
   OPP2026100703 — #205 Storefront · Búsqueda y filtros nativos (scoped)
   Presentación únicamente. Filtrado, búsqueda, orden y paginación los
   resuelve WooCommerce nativo. Scope: .opp-shop-*. Tokens --opp-color-*.
   ===================================================================== */

/* Búsqueda */
.opp-shop-search {
	margin-block: 0.5rem 1.5rem;
}

.opp-shop-search .wp-block-search__input {
	min-height: 44px;
	border-radius: 8px;
	border-color: #d1d5db;
}

.opp-shop-search .wp-block-search__button {
	min-height: var(--opp-control-height);
	border-radius: var(--opp-control-radius);
	background-color: var(--opp-cta-bg);
	border-color: var(--opp-cta-bg);
	color: var(--opp-color-white);
}

.opp-shop-search .wp-block-search__button:hover,
.opp-shop-search .wp-block-search__button:focus-visible {
	background-color: var(--opp-color-red-dark);
	border-color: var(--opp-color-red-dark);
}

.opp-shop-search .wp-block-search__input:focus-visible,
.opp-shop-search .wp-block-search__button:focus-visible {
	outline: 2px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
}

/* Layout catálogo: filtros + resultados */
.opp-shop-layout {
	gap: 2rem;
}

.opp-shop-results {
	min-width: 0;
}

/* Barra conteo + orden (corrige el wrap del conteo observado en 0702) */
.opp-shop-toolbar {
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

.opp-shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 0.9rem;
	color: #6b7280;
}

/* Filtros */
.opp-shop-filters {
	--wc-product-filter-chips-selected-background: var(--opp-color-red);
	--wc-product-filter-chips-selected-border: var(--opp-color-red);
	--wc-product-filter-chips-selected-text: var(--opp-color-white);
	--wc-product-filter-checkbox-list-option-element-selected: var(--opp-color-red);
	--wc-product-filter-price-slider: var(--opp-color-red);
	--wc-product-filter-price-slider-handle: var(--opp-color-red);
	--wc-product-filter-price-slider-handle-border: var(--opp-color-red);
	color: var(--opp-color-gray);
	font-size: 0.92rem;
}

.opp-shop-filters .opp-shop-filters__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--opp-color-black);
}

.opp-shop-filters .opp-shop-filter__heading {
	margin: 0 0 0.625rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--opp-color-black);
}

.opp-shop-filters .wp-block-woocommerce-product-filter-attribute,
.opp-shop-filters .wp-block-woocommerce-product-filter-price {
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.opp-shop-filters .wc-block-product-filter-chips__item {
	border-radius: 999px;
}

.opp-shop-filters .wc-block-product-filter-checkbox-list__show-more-button,
.opp-shop-filters .wc-block-product-filter-chips__show-more {
	color: var(--opp-color-red);
}

.opp-shop-filters button:focus-visible,
.opp-shop-filters input:focus-visible {
	outline: var(--opp-focus-ring, 2px solid #de1a08);
	outline-offset: 2px;
}

/* =====================================================================
   OPP2026100705 — #205 Storefront · Refinamiento visual, grilla 3/2/2
   y drawer nativo de filtros hasta tablet. Presentación únicamente.
   Breakpoints: escritorio >= 981px (sidebar) · <= 980px (drawer nativo).
   ===================================================================== */

/* Cabecera del catálogo compacta */
.opp-shop-page .wp-block-query-title {
	margin-block: 0.5rem 0.75rem;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}

.opp-shop-search {
	margin-block: 0 1rem;
}

.opp-shop-search .wp-block-search__input {
	min-height: var(--opp-control-height);
	padding-inline: 0.75rem;
	font-size: 0.9rem;
}

.opp-shop-search .wp-block-search__button {
	min-height: var(--opp-control-height);
	padding: 0.32rem 0.9rem;
	font-size: 0.84rem;
	font-weight: 600;
}

/* Layout: core/columns se presenta como grid (escritorio) o bloque (drawer). */
@media screen and (min-width: 981px) {
	.opp-shop-layout.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(210px, 23%) minmax(0, 1fr);
		gap: 2rem;
	}
}

/* ≤980: orden y barra única en la sección OPP2026101221 (al final). */

/* Barra conteo + orden */
.opp-shop-toolbar {
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #eef0f2;
}

.opp-shop-toolbar .woocommerce-result-count {
	font-size: 0.85rem;
}

.opp-shop-toolbar .wc-block-catalog-sorting {
	--wp--preset--font-size--small: 0.875rem;
}

.opp-shop-toolbar .woocommerce-ordering select.orderby {
	min-height: var(--opp-control-height);
	max-width: 100%;
	padding: 0.28rem 2rem 0.28rem 0.7rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background-color: var(--opp-color-white);
	color: var(--opp-color-gray);
}

.opp-shop-toolbar .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
}

/*
 * Paginación — OPP2026101221: círculos de 32 px en un área de 36 px (40 px en
 * móvil). Chevrons nativos de Core (paginationArrow:"chevron", showLabel:false,
 * aria-label «Página anterior/siguiente») y midSize 1: ‹ 1 … 4 5 6 … 16 ›.
 */
.opp-shop-results .wp-block-query-pagination {
	align-items: center;
	gap: 4px;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.opp-shop-results .wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.opp-shop-results .wp-block-query-pagination .page-numbers,
.opp-shop-results .wp-block-query-pagination-previous,
.opp-shop-results .wp-block-query-pagination-next {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--opp-color-gray);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.opp-shop-results .wp-block-query-pagination .page-numbers::before,
.opp-shop-results .wp-block-query-pagination-previous::before,
.opp-shop-results .wp-block-query-pagination-next::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	background: var(--opp-color-white);
	transform: translate(-50%, -50%);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opp-shop-results .wp-block-query-pagination .page-numbers.current {
	color: var(--opp-color-white);
	font-weight: 600;
}

.opp-shop-results .wp-block-query-pagination .page-numbers.current::before {
	border-color: var(--opp-color-red);
	background: var(--opp-color-red);
}

.opp-shop-results .wp-block-query-pagination .page-numbers.dots {
	width: 20px;
	color: #6b6b6b;
}

.opp-shop-results .wp-block-query-pagination .page-numbers.dots::before {
	content: none;
}

.opp-shop-results .wp-block-query-pagination a:hover {
	color: var(--opp-color-red);
}

.opp-shop-results .wp-block-query-pagination a:hover::before {
	border-color: var(--opp-color-red);
}

.opp-shop-results .wp-block-query-pagination a:focus-visible {
	outline: none;
}

.opp-shop-results .wp-block-query-pagination a:focus-visible::before {
	border-color: var(--opp-color-red);
	box-shadow: 0 0 0 2px var(--opp-color-white), 0 0 0 4px var(--opp-color-red);
}

/* Chevron simple dibujado con borde: el glifo doble de Core (« y ») queda oculto; ya es aria-hidden. */
.opp-shop-results .wp-block-query-pagination-previous-arrow,
.opp-shop-results .wp-block-query-pagination-next-arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0;
	border: solid currentColor;
	font-size: 0;
	line-height: 0;
}

.opp-shop-results .wp-block-query-pagination-previous-arrow {
	border-width: 0 0 2px 2px;
	transform: translateX(1px) rotate(45deg);
}

.opp-shop-results .wp-block-query-pagination-next-arrow {
	border-width: 2px 2px 0 0;
	transform: translateX(-1px) rotate(45deg);
}

@media screen and (max-width: 600px) {
	.opp-shop-results .wp-block-query-pagination,
	.opp-shop-results .wp-block-query-pagination-numbers {
		gap: 0;
	}

	.opp-shop-results .wp-block-query-pagination .page-numbers,
	.opp-shop-results .wp-block-query-pagination-previous,
	.opp-shop-results .wp-block-query-pagination-next {
		width: 40px;
		height: 40px;
	}

	.opp-shop-results .wp-block-query-pagination .page-numbers.dots {
		width: 20px;
	}
}

/* Filtros: compactación */
.opp-shop-filters {
	--wc-product-filter-block-spacing: 0.875rem;
}

.opp-shop-filters .opp-shop-filter__heading {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.opp-shop-filters .wp-block-woocommerce-product-filter-attribute,
.opp-shop-filters .wp-block-woocommerce-product-filter-price {
	padding-top: 0.875rem;
}

.opp-shop-filters .wc-block-product-filter-chips__items {
	gap: 6px;
}

.opp-shop-filters .wc-block-product-filter-chips__item {
	padding: 0.3em 0.7em;
	font-size: 0.78rem;
	line-height: 1.3;
}

.opp-shop-filters .wc-block-product-filter-chips__item:hover {
	border-color: var(--opp-color-red);
}

.opp-shop-filters .wc-block-product-filter-checkbox-list__show-more-button,
.opp-shop-filters .wc-block-product-filter-chips__show-more {
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.opp-shop-filters .wc-block-product-filter-checkbox-list__show-more-button:hover,
.opp-shop-filters .wc-block-product-filter-chips__show-more:hover {
	text-decoration: underline;
}

.opp-shop-filters .wc-block-product-filter-price-slider .text input[type="text"] {
	max-width: 5.5rem;
	padding: 0.35rem 0.5rem;
	border-color: #d1d5db;
	border-radius: 6px;
	font-size: 0.82rem;
}

/*
 * Drawer de filtros — OPP2026101221. Un solo patrón para ≤980 px (antes:
 * restauración Brand en 601–980 y overlay nativo de Woo en ≤600). Panel lateral
 * de hasta 400 px desde la izquierda, fondo oscurecido, cabecera «Filtros» + X,
 * contenido con scroll propio y pie «Ver productos». Woo sigue gobernando la
 * apertura (is-overlay-opened); visibility evita tabular dentro del panel cerrado.
 * Selectores con .opp-shop-filters: vencen a los :where() nativos sin !important.
 */
@media screen and (max-width: 980px) {
	.opp-shop-filters .wc-block-product-filters {
		display: flex;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__open-overlay {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: var(--opp-control-height-touch);
		padding: 0 14px 0 10px;
		border: 1px solid #d1d5db;
		border-radius: var(--opp-control-radius);
		background: var(--opp-color-white);
		color: var(--opp-color-gray);
		font-family: var(--opp-font-sans);
		font-size: 0.9rem;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		cursor: pointer;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__open-overlay span {
		padding: 0;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__open-overlay svg {
		width: 20px;
		height: 20px;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__open-overlay .opp-filters-trigger__count {
		color: var(--opp-color-red);
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__open-overlay:hover {
		border-color: var(--opp-cta-hover);
		color: var(--opp-cta-hover);
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay {
		position: fixed;
		inset: 0;
		top: var(--top-padding, 0px);
		z-index: 9999;
		flex-grow: 0;
		background: transparent;
		color: var(--opp-color-gray);
		pointer-events: none;
		visibility: hidden;
		transition: background-color 0.25s ease, visibility 0s linear 0.25s;
	}

	.opp-shop-filters .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(0, 0, 0, 0.4);
		pointer-events: auto;
		visibility: visible;
		transition: background-color 0.25s ease, visibility 0s;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		background: none;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-dialog {
		position: absolute;
		inset: 0 auto 0 0;
		width: min(400px, 100%);
		max-height: 100%;
		background: var(--opp-color-white);
		color: var(--opp-color-gray);
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}

	.opp-shop-filters .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: none;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 8px 8px 16px;
		border-bottom: 1px solid #eef0f2;
	}

	.opp-shop-filters .opp-filters-drawer__title {
		margin: 0;
		color: var(--opp-color-black);
		font-size: 1.05rem;
		font-weight: 600;
		line-height: 1.3;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__close-overlay {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--opp-color-gray);
		cursor: pointer;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__close-overlay:hover {
		background: #f4f4f5;
		color: var(--opp-cta-hover);
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-content {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px 16px 20px;
		background: var(--opp-color-white);
		color: var(--opp-color-gray);
	}

	/* El título vive en la cabecera del panel. */
	.opp-shop-filters .wc-block-product-filters__overlay-content > .opp-shop-filters__title {
		display: none;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-footer {
		display: block;
		padding: 12px 16px;
		box-shadow: 0 -1px 0 #eef0f2;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__apply {
		width: 100%;
		min-height: var(--opp-control-height-touch);
		border: 0;
		border-radius: var(--opp-control-radius);
		background-color: var(--opp-cta-bg);
		color: var(--opp-color-white);
		font-size: 0.9rem;
		font-weight: 600;
	}

	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__apply:hover {
		background-color: var(--opp-cta-hover);
	}
}

@media screen and (max-width: 980px) and (prefers-reduced-motion: reduce) {
	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay,
	.opp-shop-filters .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay,
	.opp-shop-filters .wc-block-product-filters .wc-block-product-filters__overlay-dialog {
		transition: none;
	}
}

/* ==========================================================================
   OPP2026100707 — Footer global OPP (wp_template_part «footer», ID 1630).
   Presentacional, scoped a .opp-footer*. Coherente con .opp-header y con la
   franja de copyright de Nosotros. Sin JS.
   ========================================================================== */

.opp-footer {
	background-color: var(--opp-color-white, #ffffff);
	border-top: 1px solid rgba(50, 50, 50, 0.10);
}

.opp-footer-bar {
	max-width: none;
	width: 100%;
	padding: 20px clamp(16px, 4vw, 48px);
	gap: 16px 24px;
}

.opp-footer-brand {
	gap: 12px;
}

.opp-footer .wp-block-site-logo {
	line-height: 0;
	flex: 0 0 auto;
}

.opp-footer-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.opp-footer .opp-footer-name {
	margin: 0;
	color: var(--opp-color-gray, #323232);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.opp-footer .opp-footer-nav .wp-block-navigation-item__content {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.opp-footer .opp-footer-nav .wp-block-navigation-item__content:hover,
.opp-footer .opp-footer-nav .wp-block-navigation-item__content:focus {
	color: var(--opp-color-red, #de1a08);
}

.opp-footer-copyright-bar {
	background-color: #000000;
	color: #ffffff;
	padding: 14px clamp(16px, 4vw, 48px);
}

.opp-footer-copyright-bar .opp-footer-copyright {
	margin: 0;
	text-align: left;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
}

@media screen and (max-width: 767px) {
	.opp-footer-bar {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		gap: 12px;
	}

	.opp-footer-logo img {
		max-width: 120px;
	}

	.opp-footer .opp-footer-bar .opp-footer-nav,
	.opp-footer .opp-footer-bar .opp-footer-nav .wp-block-navigation__container {
		justify-content: flex-start;
		gap: 8px 20px;
	}

	.opp-footer-copyright-bar {
		padding: 12px 16px;
	}
}

/* =====================================================================
   OPP2026100711 — Tienda mínima. Presentación de marcas destacadas,
   selector de orden y retiro visual del H1 «Tienda» en la portada.
   Scope: .opp-shop-*.
   ===================================================================== */

body.woocommerce-shop:not(.search) .opp-shop-page > .wp-block-query-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.opp-shop-brands {
	margin: 0 0 1.25rem;
}

.opp-shop-brands__title {
	margin: 0 0 0.625rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--opp-color-black);
}

.opp-shop-brands__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opp-shop-brands__list > li {
	flex: 0 0 auto;
	max-width: none;
}

.opp-shop-brands__chip {
	display: inline-block;
	white-space: nowrap;
	padding: 0.35rem 0.7rem;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: var(--opp-color-white);
	color: var(--opp-color-gray);
	font-size: 0.82rem;
	line-height: 1.2;
	text-decoration: none;
}

.opp-shop-brands__chip:hover,
.opp-shop-brands__chip:focus-visible,
.opp-shop-brands__chip.is-current {
	border-color: var(--opp-color-red);
	background: var(--opp-color-red);
	color: var(--opp-color-white);
}

.opp-shop-brands__chip:focus-visible {
	outline: 2px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
}

.opp-shop-toolbar .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.85rem;
	color: #6b7280;
}

.opp-shop-toolbar .woocommerce-ordering label {
	margin: 0;
	white-space: nowrap;
}

@media screen and (max-width: 600px) {
	.opp-shop-brands__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
	}

	.opp-shop-toolbar {
		align-items: stretch;
	}

	.opp-shop-toolbar .woocommerce-ordering {
		width: 100%;
	}

	.opp-shop-toolbar .woocommerce-ordering select.orderby {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* =====================================================================
   OPP2026100713 — Dos áreas en escritorio y búsqueda al final del sidebar.
   Presentación únicamente. Scope: .opp-shop-*.
   ===================================================================== */

.opp-shop-filters .opp-shop-search {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
	max-width: none;
}

.opp-shop-filters .opp-shop-search .wp-block-heading {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	text-align: left;
}

.opp-shop-filters .opp-shop-search .wp-block-search,
.opp-shop-filters .opp-shop-search .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.opp-shop-filters .opp-shop-search .wp-block-search__input,
.opp-shop-filters .opp-shop-search .wp-block-search__button {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 981px) {
	.opp-shop-layout.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(248px, 280px) minmax(0, 1fr);
		column-gap: 3.25rem;
		align-items: start;
	}

	.opp-shop-layout > .opp-shop-filters {
		padding-right: 1.5rem;
		border-right: 1px solid #e5e7eb;
	}

	.opp-shop-layout > .opp-shop-results {
		min-width: 0;
		padding-left: 0.25rem;
	}
}

/* =====================================================================
   OPP2026100715 — Sidebar compacto y cards OPP. Presentación.
   Scope: .opp-shop-* y el título de búsqueda.
   ===================================================================== */

.opp-shop-filters {
	--wc-product-filter-price-slider: #b24c46;
	--wc-product-filter-price-slider-handle: #b24c46;
	--wc-product-filter-price-slider-handle-border: #b24c46;
}

.opp-shop-select {
	margin: 0.9rem 0 0;
}

.opp-shop-select label {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--opp-color-black);
	font-size: 0.95rem;
	font-weight: 600;
}

.opp-shop-select__control {
	width: 100%;
	max-width: 100%;
	min-height: 42px;
	padding: 0.4rem 2rem 0.4rem 0.7rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background-color: var(--opp-color-white);
	color: #323232;
	font-size: 0.9rem;
}

.opp-shop-select__control:focus-visible {
	outline: 2px solid rgba(178, 76, 70, 0.55);
	outline-offset: 2px;
}

.opp-shop-filters .wc-block-product-filter-price-slider {
	margin-top: 0.15rem;
}

.opp-shop-filters .opp-shop-search .wp-block-search__button {
	border: 1px solid #323232;
	background-color: #323232;
	color: #ffffff;
}

.opp-shop-filters .opp-shop-search .wp-block-search__button:hover,
.opp-shop-filters .opp-shop-search .wp-block-search__button:focus-visible {
	border-color: #b24c46;
	background-color: #b24c46;
	color: #ffffff;
}

body.search .opp-shop-page > .wp-block-query-title {
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.3;
}

/* =====================================================================
   OPP2026100817 — #205 Storefront · Ancho útil y densidad responsive.
   Presentación únicamente. Scope: main.opp-shop-page / .opp-shop-*.
   No toca header, footer, Nosotros, ficha, carrito ni checkout.
   Breakpoints: >=1280 4 col + sidebar · 981–1279 3 col + sidebar ·
   601–980 drawer + 3 col · <=600 drawer + 2 col.
   ===================================================================== */

main.opp-shop-page {
	--wp--style--global--wide-size: 1680px;
	--wp--style--global--content-size: 1680px;
	box-sizing: border-box;
	padding-left: clamp(24px, 3vw, 48px);
	padding-right: clamp(24px, 3vw, 48px);
}

main.opp-shop-page > .alignwide {
	max-width: min(100%, 1680px);
	width: min(100%, 1680px);
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 981px) {
	.opp-shop-layout.wp-block-columns {
		grid-template-columns: minmax(248px, 270px) minmax(0, 1fr);
		column-gap: 2.5rem;
	}
}

/*
 * OPP2026101215 — Ticket #203 Fase 1.
 * Escala de encabezados OPP: sustituye la de TT5 (h1–h4 con peso 400,
 * letter-spacing -0.1px y tamaños x-large/xx-large). Mismo selector de elemento
 * que TT5 y cargado después; las reglas con clase (catálogo, PDP, Woo) siguen ganando.
 */
h1,
h2,
h3,
h4 {
	letter-spacing: 0;
	line-height: 1.3;
}

h1 {
	font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
	font-weight: 600;
}

h2 {
	font-size: clamp(1.3rem, 1.18rem + 0.5vw, 1.55rem);
	font-weight: 600;
}

h3 {
	font-size: clamp(1.08rem, 1.03rem + 0.25vw, 1.2rem);
	font-weight: 600;
}

h4 {
	font-size: 1rem;
	font-weight: 500;
}

/*
 * OPP2026101215 — Focus institucional único.
 * TT5 aplica :where(.wp-site-blocks *:focus){outline:2px solid} sin color
 * (marco negro, también con ratón). Teclado: anillo rojo OPP. Ratón: sin marco.
 */
:root {
	--opp-focus-ring: 2px solid var(--opp-color-red);
	--opp-focus-offset: 2px;
}

.wp-site-blocks :focus:not(:focus-visible),
.wc-block-mini-cart__drawer :focus:not(:focus-visible) {
	outline: none;
}

.wp-site-blocks :focus-visible,
.wc-block-mini-cart__drawer :focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: var(--opp-focus-offset);
}

/* Componentes de Nosotros que anulaban el outline en :focus: anillo visible con teclado. */
.opp-nosotros-carousel-btn:focus-visible,
.opp-nosotros-carousel-dot:focus-visible,
.opp-nosotros-mapa-dialog-close:focus-visible,
.opp-nosotros-social-link:focus-visible,
.opp-asistencia-form input[type="submit"]:focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: var(--opp-focus-offset);
}

/* Campos del formulario de Asistencia: borde y anillo rojo con contraste suficiente. */
.opp-asistencia-form input[type="text"]:focus-visible,
.opp-asistencia-form input[type="email"]:focus-visible,
.opp-asistencia-form input[type="tel"]:focus-visible,
.opp-asistencia-form textarea:focus-visible {
	border-color: var(--opp-color-red);
	box-shadow: 0 0 0 1px var(--opp-color-red);
}

/*
 * OPP2026101217 — Franja institucional compacta (pie de Nosotros y footer global).
 * OPP2026101221: la franja solo lleva el copyright (privacidad contextual, #203);
 * una línea centrada de unos 44 px (36 px en móvil).
 */
.opp-nosotros-copyright-bar,
.opp-footer-copyright-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	padding-block: 12px;
}

.opp-nosotros-copyright-bar > .opp-nosotros-copyright,
.opp-footer-copyright-bar > .opp-footer-copyright {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

@media screen and (max-width: 600px) {
	.opp-nosotros-copyright-bar,
	.opp-footer-copyright-bar {
		padding-block: 8px;
	}
}

/*
 * OPP2026101219 — Contenido de la política dentro del Privacy Modal.
 * La escala global de encabezados (1215) es para páginas; dentro del modal las secciones
 * no deben superar al título del modal (1.125rem).
 */
.opp-privacy-modal-body h2 {
	margin: 1.25rem 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--opp-color-gray);
}

.opp-privacy-modal-body h3 {
	margin: 1rem 0 0.4rem;
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--opp-color-gray);
}

.opp-privacy-modal-body > :first-child {
	margin-top: 0;
}

.opp-privacy-modal-body ul {
	margin: 0.25rem 0 0.75rem;
	padding-left: 1.25rem;
}

/*
 * OPP2026101221 — UX comercial global (Brand 1.4.0).
 * Catálogo: filtros activos, contador, barra única ≤980, controles; menú móvil
 * con icono de lentes; mini-cart; 404 OPP. Solo presentación: el markup lo
 * generan Woo/Core o Storefront 1.7.0.
 */
:root {
	--opp-color-muted: #6b6b6b;
}

.opp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Filtros activos: chips de Woo + chip de marca + un «Limpiar filtros» --- */
.opp-shop-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0.25rem 0 0;
}

/* Los envoltorios de Woo no generan caja: los chips fluyen en una sola fila. */
.opp-shop-active > .wp-block-woocommerce-product-filter-active:not([hidden]),
.opp-shop-active .wc-block-product-filter-removable-chips {
	display: contents;
}

.opp-shop-active .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
	gap: 2px;
	min-height: 30px;
	max-width: 100%;
	padding: 0 2px 0 10px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #f7f7f7;
	color: var(--opp-color-gray);
	font-size: 0.8rem;
	line-height: 1.3;
}

.opp-shop-filters .wc-block-product-filter-removable-chips__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--opp-color-gray);
	text-decoration: none;
}

.opp-shop-filters .wc-block-product-filter-removable-chips__remove-icon {
	width: 18px;
	height: 18px;
}

.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove:hover {
	background: var(--opp-color-white);
	color: var(--opp-color-red);
}

.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove:focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: 0;
}

.opp-shop-active__clear {
	margin: 0 0 0 4px;
}

.opp-shop-clear {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	color: var(--opp-color-gray);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.opp-shop-clear:hover {
	color: var(--opp-cta-hover);
}

/* --- Contador y orden: barra ligera --- */
.opp-shop-toolbar .woocommerce-result-count,
.opp-shop-page .wc-block-product-results-count .woocommerce-result-count {
	margin: 0;
	color: var(--opp-color-muted);
	font-size: 0.84rem;
	font-weight: 400;
	line-height: 1.4;
}

/* --- Controles del catálogo: misma altura, radio y tipografía --- */
.opp-shop-select__control,
.opp-shop-toolbar .woocommerce-ordering select.orderby,
.opp-shop-search .wp-block-search__input,
.opp-shop-search .wp-block-search__button {
	min-height: var(--opp-control-height);
	border-radius: var(--opp-control-radius);
	font-family: var(--opp-font-sans);
	font-size: 0.875rem;
}

.opp-shop-filters .wc-block-product-filter-price-slider .text input[type="text"] {
	min-height: 32px;
	border-radius: var(--opp-control-radius);
}

.opp-shop-select__control:focus-visible,
.opp-shop-toolbar .woocommerce-ordering select.orderby:focus-visible,
.opp-shop-search .wp-block-search__input:focus-visible {
	border-color: var(--opp-color-red);
	outline: var(--opp-focus-ring);
	outline-offset: 0;
}

/* --- ≤980: una barra «Filtros (n) · Ordenar» + contador; drawer en Storefront/Brand --- */
@media screen and (max-width: 980px) {
	/* Core fija flex-wrap:nowrap !important en columnas desde 782 px. */
	.opp-shop-layout.wp-block-columns {
		display: flex;
		flex-wrap: wrap !important;
		gap: 10px 8px;
	}

	.opp-shop-layout > .opp-shop-filters,
	.opp-shop-layout > .opp-shop-results,
	.opp-shop-results > .opp-shop-toolbar {
		display: contents;
	}

	.opp-shop-filters > .wc-block-product-filters {
		order: 1;
		flex: 0 0 auto;
		align-self: center;
		margin: 0;
	}

	.opp-shop-toolbar > .wc-block-catalog-sorting {
		order: 2;
		flex: 0 1 auto;
		align-self: center;
		min-width: 0;
		margin: 0 0 0 auto;
	}

	.opp-shop-toolbar > .wc-block-product-results-count {
		order: 3;
		flex: 1 0 100%;
		margin: 0;
		padding-bottom: 10px;
		border-bottom: 1px solid #eef0f2;
	}

	.opp-shop-results > .wp-block-woocommerce-product-collection {
		order: 4;
		flex: 1 0 100%;
		min-width: 0;
		margin-top: 2px;
	}

	.opp-shop-filters > .opp-shop-commercial--flow {
		order: 5;
		flex: 1 0 100%;
		min-width: 0;
	}

	.opp-shop-toolbar .woocommerce-ordering {
		width: auto;
		max-width: 100%;
	}

	.opp-shop-toolbar .woocommerce-ordering select.orderby,
	.opp-shop-select__control,
	.opp-shop-search .wp-block-search__input,
	.opp-shop-search .wp-block-search__button {
		min-height: var(--opp-control-height-touch);
	}

	.opp-shop-toolbar .woocommerce-ordering select.orderby {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
	}

	.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
		min-height: 36px;
	}

	.opp-shop-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
		width: 32px;
		height: 32px;
	}

	.opp-shop-clear {
		min-height: 36px;
	}
}

@media screen and (max-width: 600px) {
	/* «Ordenar:» sigue siendo el label accesible del select. */
	.opp-shop-toolbar .woocommerce-ordering label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* --- Menú móvil (Core Navigation, <600 px): icono de lentes + «Menú» --- */
.opp-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: 6px;
	min-width: 40px;
	min-height: 40px;
	padding: 0 6px;
	border-radius: var(--opp-control-radius);
	color: var(--opp-color-gray);
}

.opp-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.opp-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='13' r='3.75'/%3E%3Ccircle cx='17.5' cy='13' r='3.75'/%3E%3Cpath d='M10.25 12.3c1.1-.9 2.4-.9 3.5 0M2.9 11.6 1.6 9.2M21.1 11.6l1.3-2.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='13' r='3.75'/%3E%3Ccircle cx='17.5' cy='13' r='3.75'/%3E%3Cpath d='M10.25 12.3c1.1-.9 2.4-.9 3.5 0M2.9 11.6 1.6 9.2M21.1 11.6l1.3-2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.opp-header .opp-nav-toggle__label {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
}

.opp-header .wp-block-navigation__responsive-container-open:hover {
	color: var(--opp-color-red);
}

/* Overlay abierto: enlaces OPP; el cierre sigue siendo la X de Core. */
.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	color: var(--opp-color-gray);
	font-size: 1.25rem;
	font-weight: 600;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--opp-color-red);
}

.opp-header .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--opp-control-radius);
	color: var(--opp-color-gray);
}

.opp-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--opp-color-red);
}

/* --- Mini-cart del header: área táctil y hover OPP (el badge lo colorea Woo) --- */
.opp-header .wc-block-mini-cart__button {
	min-width: 40px;
	min-height: 40px;
	padding: 0 4px;
	border-radius: var(--opp-control-radius);
	color: var(--opp-color-gray);
}

.opp-header .wc-block-mini-cart__button:hover {
	color: var(--opp-color-red);
}

/* --- 404 OPP (plantilla wp_template 404) --- */
.opp-404 {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}

.opp-404 .wp-block-search {
	max-width: 420px;
	margin-inline: auto;
}

.opp-404 .wp-block-search__input {
	min-height: var(--opp-control-height-touch);
	border: 1px solid #d1d5db;
	border-radius: var(--opp-control-radius);
}

.opp-404 .wp-block-search__button,
.opp-404 .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid var(--opp-cta-bg);
	background-color: var(--opp-cta-bg);
	color: var(--opp-color-white);
}

.opp-404 .wp-block-search__button:hover,
.opp-404 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	border-color: var(--opp-cta-hover);
	background-color: var(--opp-cta-hover);
}

.opp-404 .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--opp-cta-bg);
	background: transparent;
	color: var(--opp-cta-bg);
}

.opp-404 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--opp-cta-hover);
	color: var(--opp-cta-hover);
}

/*
 * OPP2026101225 — UX unificada (Brand 1.5.0).
 * Tarjeta de producto única, columnas por espacio real, ficha de producto con la
 * galería nativa de Woo, notice de éxito, miniaturas de carrito y menú móvil.
 * Solo presentación: el marcado lo generan Woo/Core y las plantillas OPP.
 */

/* --- Tarjeta única: Tienda, búsqueda, marca, relacionados, carrito vacío, cross-sells ---
 * Las colecciones llevan .opp-card-grid (+ --catalog o --compact). La imagen 2:1
 * sin recorte la fijan los atributos nativos de product-image (scale contain,
 * aspectRatio 2/1); aquí no hace falta !important. */
.opp-card-grid {
	container-type: inline-size;
	container-name: opp-cards;
}

/* OPP2026101303 (Brand 1.7.0) — Tarjeta compacta: misma tarjeta con menos aire
 * vertical (padding, separaciones, interlineado y CTA). Con 24 por página la
 * grilla móvil tiene 12 filas; el espacio entre filas baja de forma moderada. */
.opp-card-grid .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem 1rem;
	margin: 0;
	padding: 0;
}

.opp-card-grid .wc-block-product {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0.6rem 0.6rem 0.65rem;
	background: var(--opp-color-white);
	border: 1px solid rgba(178, 76, 70, 0.28);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(50, 50, 50, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.opp-card-grid .wc-block-product:hover {
	border-color: rgba(178, 76, 70, 0.45);
	box-shadow: 0 3px 10px rgba(50, 50, 50, 0.08);
}

.opp-card-grid .wc-block-product > :not(:last-child) {
	margin-bottom: 0.4rem;
}

/* Saltos de línea vacíos que FMA inyecta junto a sus inputs ocultos. */
.opp-card-grid .wc-block-product > br {
	display: none;
}

.opp-card-grid .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--opp-color-white);
	border-radius: 8px;
}

/* Mismo título en h2 (grilla) y h3 (relacionados): el preset de tamaño es !important en Core.
 * Se reservan 2 líneas: precio y CTA quedan alineados en la fila (casi todos los
 * nombres ocupan 2). El interlineado lo fija la plantilla en línea (1.4). */
.opp-card-grid .wc-block-product .wp-block-post-title {
	--wp--preset--font-size--medium: 0.95rem;
	min-height: 2.6em;
	margin-top: 0;
	margin-bottom: 0.25rem;
	font-weight: 500;
	line-height: 1.3 !important;
	letter-spacing: 0;
	text-align: center;
}

.opp-card-grid .wc-block-product .wp-block-post-title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--opp-color-black);
	text-decoration: none;
}

.opp-card-grid .wc-block-product .wp-block-post-title a:hover,
.opp-card-grid .wc-block-product .wp-block-post-title a:focus-visible {
	color: var(--opp-color-red);
}

/* La plantilla fija margin-bottom:1rem en línea bajo el precio. */
.opp-card-grid .wc-block-product .wp-block-woocommerce-product-price {
	--wp--preset--font-size--small: 1rem;
	margin-bottom: 0.45rem !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--opp-color-black);
}

/* flex: la fila mide lo que el botón, sin la línea tipográfica del contenedor. */
.opp-card-grid .opp-view-product {
	display: flex;
	justify-content: center;
	margin-top: auto;
	text-align: center;
}

/* border-box: antes min-height se sumaba al padding y al borde (~43 px reales). */
.opp-card-grid .opp-view-product__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 28px;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--opp-cta-bg);
	border-radius: var(--opp-control-radius);
	background-color: var(--opp-cta-bg);
	color: var(--opp-color-white);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.opp-card-grid .opp-view-product__link:hover,
.opp-card-grid .opp-view-product__link:focus-visible {
	border-color: var(--opp-cta-hover);
	background-color: var(--opp-cta-hover);
	color: var(--opp-color-white);
}

/* Las colecciones OPP enlazan a la ficha; no agregan al carrito desde la tarjeta. */
.opp-card-grid .wc-block-components-product-button {
	display: none;
}

@media screen and (max-width: 600px) {
	.opp-card-grid .wc-block-product-template.wc-block-product-template {
		gap: 0.5rem 0.625rem;
	}

	.opp-card-grid .wc-block-product {
		padding: 0.45rem 0.45rem 0.5rem;
		border-radius: 10px;
	}

	.opp-card-grid .wc-block-product > :not(:last-child) {
		margin-bottom: 0.35rem;
	}

	.opp-card-grid .wc-block-product .wp-block-post-title {
		--wp--preset--font-size--medium: 0.85rem;
		margin-bottom: 0.25rem;
	}

	.opp-card-grid .wc-block-product .wp-block-woocommerce-product-price {
		--wp--preset--font-size--small: 0.92rem;
		margin-bottom: 0.4rem !important;
	}

	.opp-card-grid .opp-view-product__link {
		min-height: 30px;
		padding: 0.2rem 0.6rem;
		font-size: 0.78rem;
	}
}

/* Táctil: la caja visual del CTA es compacta, pero el área de toque se amplía
 * 7 px arriba y abajo (≈44 px) sin moverlo: cabe en el margen del precio y en
 * el padding inferior de la tarjeta. */
@media (pointer: coarse) {
	.opp-card-grid .opp-view-product__link {
		position: relative;
	}

	.opp-card-grid .opp-view-product__link::after {
		content: "";
		position: absolute;
		inset: -7px -4px;
	}
}

/* --- Columnas por espacio real (container queries) ---
 * Respaldo sin container queries: catálogo 2 → 3 desde 601 px; compacto 2 → 4
 * desde 981 px. Con soporte: contenedor ≥800 → 4 (solo con viewport ≥981),
 * ≥540 → 3 (catálogo), <540 → 2. El compacto (relacionados, carrito) usa 4 o 2. */
@media screen and (min-width: 601px) {
	.opp-card-grid--catalog .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (min-width: 981px) {
	.opp-card-grid--compact .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@container opp-cards (max-width: 539.98px) {
	.opp-card-grid--catalog .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container opp-cards (min-width: 540px) {
	.opp-card-grid--catalog .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container opp-cards (max-width: 799.98px) {
	.opp-card-grid--compact .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container opp-cards (min-width: 800px) {
	@media screen and (min-width: 981px) {
		.opp-card-grid .wc-block-product-template.wc-block-product-template {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}

/* --- Ficha de producto: la galería domina (~68/32 en ≥1200, ~60/40 en 782–1199) --- */
.opp-product-page {
	max-width: 1360px;
}

@media screen and (min-width: 782px) {
	.opp-product-main.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
		gap: 2rem;
		align-items: start;
	}
}

@media screen and (min-width: 1200px) {
	.opp-product-main.wp-block-columns {
		grid-template-columns: minmax(0, 68fr) minmax(340px, 32fr);
		gap: 2.5rem;
	}
}

/* Título: h1 por semántica, sin peso de cartel. */
.opp-product-summary .wp-block-post-title {
	margin-bottom: 0.15rem;
	color: var(--opp-color-gray);
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}

/* Galería nativa (woocommerce/product-gallery): imagen principal y miniaturas 2:1 sin recorte. */
.opp-product-gallery .wc-block-product-gallery {
	gap: 0.75rem;
}

.opp-product-gallery .wc-block-product-gallery-large-image {
	border-radius: 12px;
	background: var(--opp-color-white);
}

.opp-product-gallery .wc-block-product-gallery-large-image img {
	background: var(--opp-color-white);
}

/* OPP2026101301 — Franja de miniaturas compacta (Brand 1.6.0).
   Woo dimensiona la franja por proporción (12 % del ancho en escritorio, 5:1
   !important en ≤600) y cada miniatura con height:100%/width:auto. Si el motor
   no resuelve esa altura en %, la imagen cae a su tamaño intrínseco (600×300) y
   la franja crece hasta parecer una segunda imagen principal. Aquí manda el ancho
   de la miniatura y la franja se ajusta a él: una fila, scroll horizontal.
   El JS de Woo (selección, flechas, scroll a la activa, máscaras) no cambia. */
.opp-product-gallery {
	--opp-thumb-width: 112px;
}

.opp-product-gallery .wc-block-product-gallery .wc-block-product-gallery-thumbnails {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	aspect-ratio: auto !important;
}

.opp-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
	height: auto;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.opp-product-gallery .wc-block-product-gallery-thumbnails__thumbnail {
	flex: 0 0 var(--opp-thumb-width);
	width: var(--opp-thumb-width);
	height: auto;
	scroll-snap-align: start;
}

.opp-product-gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 2 / 1;
	object-fit: contain;
	background: var(--opp-color-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	cursor: pointer;
}

.opp-product-gallery .wc-block-product-gallery-thumbnails__thumbnail__image:hover {
	border-color: rgba(0, 0, 0, 0.28);
}

/* Activa: solo el borde OPP (sin el oscurecido de Woo). */
.opp-product-gallery .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-color: var(--opp-color-red);
	filter: none;
}

/* Dentro del área de scroll: un anillo exterior quedaría recortado. */
.opp-product-gallery .wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: -2px;
}

@media screen and (max-width: 600px) {
	.opp-product-gallery {
		--opp-thumb-width: 88px;
	}

	.opp-product-gallery .wc-block-product-gallery {
		gap: 0.5rem;
	}
}

/* Táctil: se desliza; la barra no compite con las miniaturas. */
@media (pointer: coarse) {
	.opp-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
		scrollbar-width: none;
	}

	.opp-product-gallery .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar {
		display: none;
	}
}

/* --- Notice de éxito (añadido al carrito): OPP neutro; role y marcado de Woo intactos --- */
:root .wc-block-components-notice-banner.is-success {
	align-items: center;
	background-color: var(--opp-color-white);
	border: 1px solid #e5e7eb;
	border-left: 4px solid var(--opp-color-gray);
	border-radius: 10px;
	color: var(--opp-color-gray);
}

:root .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--opp-color-gray);
	fill: var(--opp-color-white);
}

:root .wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

/* Woo fija el CTA con !important (transparente, gris, flotante): solo así se puede sustituir. */
:root .wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content .wc-forward {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	min-height: 36px;
	margin: 0;
	padding: 0.32rem 0.9rem !important;
	border: 1px solid var(--opp-cta-bg);
	border-radius: var(--opp-control-radius);
	background: var(--opp-cta-bg) !important;
	color: var(--opp-color-white) !important;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 1;
	text-decoration: none;
	white-space: nowrap;
}

:root .wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content .wc-forward:hover {
	border-color: var(--opp-cta-hover);
	background: var(--opp-cta-hover) !important;
}

:root .wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content .wc-forward:focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: var(--opp-focus-offset);
}

@media screen and (max-width: 600px) {
	:root .wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content {
		justify-content: flex-start;
	}
}

/* --- Miniaturas de carrito, mini-cart y checkout: 2:1 sin recorte (fuente `medium`, ver brand.php) --- */
/* OPP2026102211 (D-05): en móvil Woo hace de la fila un grid de 2 pistas y coloca el producto en 2 / 4, lo que crea
   una pista implícita (104 + 0 + 143 + total + 3 huecos ≈ 361px en 315). Tres pistas reales: imagen | producto | total.
   La imagen ya se veía a 88px (pista 104 − padding 16 de Woo); el padding pasa al hueco del grid. */
:root :is(.wc-block-cart, .is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 88px 1fr auto;
}

:root :is(.wc-block-cart, .is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
}

:root :is(.wc-block-cart, .is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
}

/* Selector (107px) + quitar (24px) + hueco: 143px sin salto; en pantallas estrechas «quitar» baja de línea. */
:root :is(.wc-block-cart, .is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	flex-wrap: wrap;
}

/* Mismos contextos en los que Woo convierte la fila en grid (cart.css): el escritorio conserva su padding. */
@container (max-width: 699px) {
	:root .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0;
	}
}

:root :is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-right: 0;
}

:root table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 104px;
}

:root table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img,
:root .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	aspect-ratio: 2 / 1;
	height: auto;
	object-fit: contain;
	background: var(--opp-color-white);
	border-radius: 6px;
}

/* --- Menú móvil abierto: filas de ancho completo (Core alinea a la derecha con items-justified-right) --- */
.opp-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	padding: 16px 16px 24px;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 56px;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #eef0f2;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	box-shadow: inset 3px 0 0 var(--opp-color-red);
	color: var(--opp-color-red);
}

.opp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
}

/*
 * OPP2026101507 — Avisos WooCommerce con marca OPP (Brand 1.9.0).
 * Solo presentación: el marcado, role="alert" / live region, textos, acciones («Ver carrito», cerrar)
 * y tiempos los pone WooCommerce. Misma familia para añadido, eliminado e informativos; error con acento rojo.
 */
:root .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default, .is-warning, .is-error) {
	align-items: center;
	background-color: var(--opp-color-white);
	border: 1px solid #e5e7eb;
	border-left: 4px solid var(--opp-color-gray);
	border-radius: 10px;
	color: var(--opp-color-gray);
	font-family: var(--opp-font-sans);
	font-size: 0.86rem;
	line-height: 1.45;
	padding: 12px 16px !important; /* Woo fija 16px con !important */
}

:root .wc-block-components-notice-banner.is-error {
	border-left-color: var(--opp-color-red);
}

:root .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default, .is-warning, .is-error) > svg {
	align-self: center;
	width: 24px;
	height: 24px;
	background-color: var(--opp-color-gray);
	fill: var(--opp-color-white);
}

:root .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--opp-color-red);
}

:root .wc-block-components-notice-banner > .wc-block-components-notice-banner__content a:not(.wc-forward) {
	color: var(--opp-color-gray);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* En la página: centrado y de ancho contenido, no banner de lado a lado. */
:root :is(.wc-block-store-notices, .woocommerce-notices-wrapper, .wc-block-components-notices) > .wc-block-components-notice-banner,
:root .wc-block-store-notices .woocommerce-notices-wrapper > .wc-block-components-notice-banner {
	max-width: 720px;
	margin-inline: auto;
}

/* Avisos flotantes del carrito/checkout de bloques (p. ej. «… se ha eliminado de tu carrito»):
   abajo y centrados, con márgenes y zona segura; no bloquean clics fuera de la tarjeta. */
:root .wc-block-components-notice-snackbar-list,
:root .wc-block-components-notices__snackbar.wc-block-components-notice-snackbar-list {
	top: auto;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	left: 16px;
	right: 16px;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	z-index: 100001;
}

:root .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default, .is-warning, .is-error) {
	width: auto;
	max-width: min(560px, 100%);
	margin: 0;
	border-color: #e5e7eb;
	border-left-color: var(--opp-color-gray);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	pointer-events: auto;
}

:root .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-error {
	border-left-color: var(--opp-color-red);
}

@media (max-width: 782px) {
	:root .wc-block-components-notices__snackbar.wc-block-components-notice-snackbar-list {
		top: auto;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		left: 12px;
		right: 12px;
	}

	:root .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default, .is-warning, .is-error) {
		width: 100%;
		max-width: none;
	}
}

/*
 * OPP2026102203 — #209. Solo presentación; marcado, roles, textos y tiempos siguen siendo de WooCommerce.
 * D-02: acento institucional #de1a08 (D18, --opp-color-red) en avisos de éxito, información y genéricos, en página
 * y en snackbar: borde izquierdo e icono. Fondo blanco y texto gris se mantienen. Éxito tiene icono propio; Woo usa
 * el mismo icono para información y error, así que error se distingue por fondo rosado tenue y borde rojo completo
 * (y su texto); advertencia sigue en gris.
 */
:root .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default),
:root .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default) {
	border-left-color: var(--opp-color-red);
}

:root .wc-block-components-notice-banner:is(.is-success, .is-info, .is-default) > svg {
	background-color: var(--opp-color-red);
	fill: var(--opp-color-white);
}

:root .wc-block-components-notice-banner.is-error,
:root .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-error {
	border-color: rgba(222, 26, 8, 0.35);
	border-left-color: var(--opp-color-red);
	background-color: #fdf2f1;
}

/*
 * D-04: Woo coloca el cierre del drawer del mini-cart con inset 12px y margen −1em, así que la caja sobresale ~4 px
 * del panel (394 px a 390). Mismo sitio del icono (12 px del borde), caja de 48×48 dentro del panel.
 */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
	inset-inline-end: 0;
	top: 0;
	margin: 0;
	padding: 12px !important; /* Woo fija 1em con !important */
}

/* =====================================================================
   OPP2026102605 — Cabecera compacta. El logo (copia saneada del SVG
   maestro, recortada al contenido) se dimensiona por altura: el ancho
   sale de la proporción real y el eslogan sigue legible.
   ===================================================================== */
.opp-header .opp-header-bar {
	padding-block: 10px;
}

.opp-header .opp-header-logo__picture {
	display: block;
	line-height: 0;
}

.opp-header .opp-header-logo img {
	width: auto;
	max-width: none;
	height: 60px;
}

@media screen and (max-width: 767px) {
	.opp-header .opp-header-logo img {
		height: 46px;
	}
}

/* =====================================================================
   OPP2026102605 — Barra de filtros: Marcas · Tipo de Aro · Precio · Buscar
   · «Más filtros» (Forma y Complementos, <details> contraído al cargar).
   Compactación moderada: los controles conservan altura, foco y separadores.
   Mismo orden dentro del drawer (≤980 px), que es el mismo bloque.
   ===================================================================== */
.opp-shop-filters .opp-shop-select {
	margin-top: 0.7rem;
}

.opp-shop-filters .opp-shop-select label {
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
}

.opp-shop-filters .opp-shop-search {
	margin-block: 0.7rem 0.25rem;
}

.opp-more-filters {
	margin-top: 0.6rem;
	border-top: 1px solid #e5e7eb;
}

.opp-more-filters__summary {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 40px;
	padding: 0.45rem 0;
	color: var(--opp-color-black);
	font-size: 0.9rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.opp-more-filters__summary::-webkit-details-marker {
	display: none;
}

.opp-more-filters__summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: 0 4px 3px auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.opp-more-filters[open] > .opp-more-filters__summary::after {
	margin-bottom: -3px;
	transform: rotate(-135deg);
}

.opp-more-filters__summary:hover {
	color: var(--opp-color-red);
}

.opp-more-filters__summary:focus-visible {
	outline: var(--opp-focus-ring);
	outline-offset: 2px;
}

.opp-more-filters__count {
	color: var(--opp-color-red);
}

.opp-more-filters__body {
	padding-bottom: 0.35rem;
}

.opp-more-filters__body > .opp-shop-select:first-child {
	margin-top: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.opp-more-filters__summary::after {
		transition: none;
	}
}

/*
 * OPP2026102705 (#212 H-05) — Política de privacidad propia: enlace en las
 * franjas de copyright (footer global y Nosotros) y nota bajo el formulario de
 * Asistencia. Blanco sobre negro (21:1); la nota usa el tono del aviso reCAPTCHA.
 */
.opp-nosotros-copyright-bar > .opp-copyright-privacy,
.opp-footer-copyright-bar > .opp-copyright-privacy {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.opp-nosotros-copyright-bar > .opp-copyright-privacy:hover,
.opp-footer-copyright-bar > .opp-copyright-privacy:hover {
	text-decoration-thickness: 2px;
}

.opp-nosotros-copyright-bar > .opp-copyright-privacy:focus-visible,
.opp-footer-copyright-bar > .opp-copyright-privacy:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 2px;
}

.opp-privacy-notice {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b7280;
}

.opp-privacy-notice a {
	color: var(--opp-color-gray);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.opp-privacy-notice a:hover,
.opp-privacy-notice a:focus-visible {
	color: var(--opp-color-red);
}

.opp-privacy-notice a:focus-visible {
	outline: 2px solid rgba(222, 26, 8, 0.45);
	outline-offset: 2px;
	border-radius: 2px;
}