/* =========================================================================
   POLIZUNCHO — Tienda (archivo de productos)

   Ancho completo, sin barra lateral. Bajo el título va la barra turquesa con
   el botón «Categorías» (abre el mismo panel que el del header), los filtros
   de atributos y el botón azul de ordenación. La barra se queda pegada arriba
   al hacer scroll.

   Marca:
     --OZ-Color-1  #00a7a9  turquesa
     --OZ-Color-3  #01356a  azul
   ========================================================================= */

:root {
	--ozs-teal: var(--OZ-Color-1, #00a7a9);
	--ozs-teal-dark: #018e90;
	--ozs-navy: var(--OZ-Color-3, #01356a);
	--ozs-navy-dark: #01254a;
	--ozs-ink: #0f172a;
	--ozs-muted: #6b7280;
	--ozs-line: #e2e8f0;
	--ozs-gutter: clamp(16px, 3.2vw, 60px);
	--ozs-radius: 14px;
	--ozs-ease: cubic-bezier(.4, 0, .2, 1);

	/* Alto de la barra de administración de WordPress (0 si no la hay). */
	--ozs-adminbar: 0px;
}

body.admin-bar {
	--ozs-adminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--ozs-adminbar: 46px;
	}
}

/* =========================================================================
   1. Lienzo a todo el ancho
   ========================================================================= */

/* Fondo del sitio —blanco con la trama de puntos—, igual que el resto de
   páginas. Hay que repetirlo entero y no solo el color: `body.woocommerce`
   (style.css) usa la forma abreviada `background`, que de paso borra la trama
   que `body` define en assets/css/odenip.css. Misma especificidad que esa
   regla, y esta hoja se encola después, así que gana. */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
	background-color: var(--odp-white, #fff);
	background-image: radial-gradient(rgba(20, 22, 28, .10) 1px, transparent 1px);
	background-size: 30px 30px;
	background-position: 0 0;
}

/* `background: none` para dejar ver el del <body>: style.css pinta de gris
   `body.woocommerce .site` y `body.woocommerce-page .site-main`, y esas dos
   capas tapaban la trama de puntos. Los selectores llevan la clase del <body>
   para igualar esa especificidad. */
body.post-type-archive-product .site,
body.tax-product_cat .site,
body.tax-product_tag .site {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	background: none;
}

body.post-type-archive-product .site-main--woo-archive,
body.tax-product_cat .site-main--woo-archive,
body.tax-product_tag .site-main--woo-archive {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	box-sizing: border-box;
	/* `clip` y no `hidden`: recorta igual el desbordamiento lateral del banner,
	   pero sin convertir el bloque en contenedor de scroll. */
	overflow-x: clip;
}

/* =========================================================================
   2. Banner azul de apertura (título y foto)

   Lo pinta woocommerce/archive/banner-bar.php: azul a la izquierda con el
   título, foto a la derecha a canto recto, y la esquina inferior izquierda
   del conjunto cortada en diagonal (el chaflán de la marca).

   El alto no depende de la imagen: sin foto la franja sigue midiendo lo mismo
   y solo se ve el azul, así que la maqueta no se mueve.
   ========================================================================= */

.odp-shopbanner {
	--odp-shopbanner-notch: clamp(28px, 3.4vw, 50px);

	position: relative;
	/* Contexto de apilamiento propio: así los adornos con z-index negativo
	   quedan sobre el fondo azul pero por debajo del título. */
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: clamp(215px, 21.5vw, 316px);
	/* Arriba se reserva el alto de la cabecera fija (--odp-hspace), que flota
	   sobre el banner; abajo, el aire que baja el título del centro exacto. */
	padding: calc(var(--odp-hspace, 122px) + 12px) var(--ozs-gutter) clamp(40px, 7vw, 100px);
	background: var(--odp-navy, #17216e);
	color: #fff;
	/* Chaflán inferior izquierdo. Recorta la franja entera —azul y foto—,
	   aunque solo se note en el lado azul. */
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--odp-shopbanner-notch) 100%,
		0 calc(100% - var(--odp-shopbanner-notch))
	);
}

/* Panel de la foto: mitad derecha, sin recorte propio (el canto es recto). */
.odp-shopbanner__media {
	position: absolute;
	z-index: -1;
	inset: 0 0 0 auto;
	width: min(57%, 1100px);
	background-image: var(--odp-shopbanner-img);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Líneas diagonales decorativas, las mismas que la banda del pie (.odp-cta). */
.odp-shopbanner__lines {
	position: absolute;
	z-index: -1;
	left: -50px;
	top: 0;
	width: 340px;
	height: 100%;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 49.6%, rgba(255, 255, 255, .10) 49.6%, rgba(255, 255, 255, .10) 50%, transparent 50%),
		linear-gradient(115deg, transparent 63.6%, rgba(255, 255, 255, .10) 63.6%, rgba(255, 255, 255, .10) 64%, transparent 64%),
		linear-gradient(115deg, transparent 77.6%, rgba(255, 255, 255, .10) 77.6%, rgba(255, 255, 255, .10) 78%, transparent 78%);
}

.odp-shopbanner__inner {
	position: relative;
	z-index: 1;
	/* El título va más adentro que el canalón del resto de la página: es la
	   sangría del diseño, no el canalón. */
	padding-inline-start: clamp(4px, 5.5vw, 82px);
	max-width: min(100%, 620px);
}

.odp-shopbanner__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--odp-font-title, inherit);
	font-size: clamp(24px, 2.7vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* =========================================================================
   3. Barra de filtros

   Sin banda de color y sin quedarse pegada arriba: se desplaza con el resto
   de la página, encima de la rejilla. `position: relative` no es decorativo:
   sostiene el `z-index` con el que los desplegables se abren por encima de
   las tarjetas.

   Ese `z-index` se queda bajo el de la cabecera (900): las tarjetas no llevan
   z-index propio, así que con un valor pequeño basta para taparlas, y así la
   barra pasa por debajo del cristal de la cabecera al subir la página.
   ========================================================================= */

.oz-shopbar {
	position: relative;
	z-index: 5;
	padding: 10px var(--ozs-gutter);
	box-sizing: border-box;
}

.oz-shopbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	background: none;
	box-sizing: border-box;
}

.oz-shopbar__filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

/* Icono que abre la fila de filtros. Decorativo: no es un botón, solo marca
   dónde empieza la fila. En móvil sobra, porque ahí el primer elemento ya es
   el botón «Filtros», que lleva su propio icono. */
.oz-shopbar__lead {
	display: inline-flex;
	align-items: center;
	margin-right: 2px;
	color: var(--odp-navy, #17216e);
}

/* —— Píldoras (Categorías y filtros) */

.oz-shopbar__dd {
	position: relative;
}

.oz-shopbar__pill {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 10px 16px;
	/* Sin banda de color detrás, los botones se dibujan en oscuro sobre el
	   lienzo claro: caja recta, relleno blanco y filete azul de marca. */
	border: 1px solid rgba(23, 33, 110, .35);
	border-radius: 0;
	background: #fff;
	color: var(--odp-navy, #17216e);
	font-family: var(--odp-font-cond, inherit);
	font-size: clamp(12px, .88vw, 14px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color .2s var(--ozs-ease), border-color .2s var(--ozs-ease), color .2s var(--ozs-ease);
}

.oz-shopbar__pill::-webkit-details-marker {
	display: none;
}

.oz-shopbar__pill:hover,
.oz-shopbar__pill:focus-visible {
	border-color: rgba(23, 33, 110, .6);
	outline: none;
}

.oz-shopbar__pill:focus-visible {
	box-shadow: 0 0 0 3px rgba(23, 33, 110, .25);
}

.oz-shopbar__dd[open] > .oz-shopbar__pill,
.oz-shopbar__pill.is-active,
.oz-shopbar__pill[aria-expanded="true"] {
	background: var(--odp-navy, #17216e);
	border-color: var(--odp-navy, #17216e);
	color: #fff;
}

.oz-shopbar__pill .pz-i {
	flex: 0 0 auto;
}

.oz-shopbar__pill > svg:last-child {
	transition: transform .2s var(--ozs-ease);
}

.oz-shopbar__dd[open] > .oz-shopbar__pill > svg:last-child,
.oz-shopbar__pill[aria-expanded="true"] > svg:last-child {
	transform: rotate(180deg);
}

.oz-shopbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ozs-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* —— Botón de ordenación

   Mismo aspecto que el resto: en el diseño la barra es una fila de cajas
   iguales y el orden no destaca sobre los filtros. */

.oz-shopbar__dd--sort {
	flex: 0 0 auto;
	margin-left: auto;
}

.oz-shopbar__pill--sort {
	min-width: clamp(180px, 14vw, 220px);
}

/* —— Enlace «Limpiar filtros» */

.oz-shopbar__clear {
	color: var(--odp-navy, #17216e);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.oz-shopbar__clear:hover {
	color: var(--ozs-navy);
}

/* —— Panel desplegable */

.oz-shopbar__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 10;
	min-width: 220px;
	max-width: min(320px, calc(100vw - 2 * var(--ozs-gutter)));
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	border: 1px solid var(--ozs-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.oz-shopbar__menu--end {
	left: auto;
	right: 0;
}

.oz-shopbar__menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oz-shopbar__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: #374151;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .16s var(--ozs-ease), color .16s var(--ozs-ease);
}

.oz-shopbar__opt:hover,
.oz-shopbar__opt:focus-visible {
	background: #f1f5f9;
	color: var(--ozs-navy);
	outline: none;
}

.oz-shopbar__opt.is-on {
	color: var(--ozs-navy);
	font-weight: 700;
}

.oz-shopbar__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid #9aa8b6;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	transition: background-color .16s var(--ozs-ease), border-color .16s var(--ozs-ease);
}

.oz-shopbar__opt.is-on .oz-shopbar__box {
	border-color: var(--ozs-teal);
	background: var(--ozs-teal);
	box-shadow: inset 0 0 0 2px #fff;
}

.oz-shopbar__opt-text {
	min-width: 0;
}

/* —— Árbol de categorías dentro del desplegable «Categorías»

   El marcado lo genera pz_cats_tree() (inc/site-chrome.php), compartido con el
   panel del cabecero. Su hoja original —assets/css/pz-header.css— ya no se
   encola (la saca de la cola inc/odenip-brand.php), así que el aspecto se
   define aquí. Vale para el desplegable de escritorio y para el mismo árbol
   dentro del panel de filtros de móvil. */

.oz-shopbar__menu--cats {
	min-width: 280px;
	padding: 6px;
}

.oz-shopbar__menu--cats .pz-cats__list,
.oz-shopbar__group-panel .pz-cats__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oz-shopbar__menu--cats .pz-cats__item,
.oz-shopbar__group-panel .pz-cats__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.oz-shopbar__menu--cats .pz-cats__link,
.oz-shopbar__group-panel .pz-cats__link {
	grid-column: 1;
	display: block;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--odp-navy, #17216e);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.oz-shopbar__menu--cats .pz-cats__link:hover,
.oz-shopbar__menu--cats .pz-cats__link:focus-visible,
.oz-shopbar__group-panel .pz-cats__link:hover,
.oz-shopbar__group-panel .pz-cats__link:focus-visible {
	background: rgba(23, 33, 110, .07);
	outline: none;
}

/* Galón que abre las subcategorías (lo mueve assets/js/pz-chrome.js). */
.oz-shopbar__menu--cats .pz-cats__more,
.oz-shopbar__group-panel .pz-cats__more {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--odp-navy, #17216e);
	cursor: pointer;
	transition: background-color .18s var(--ozs-ease), transform .22s var(--ozs-ease);
}

.oz-shopbar__menu--cats .pz-cats__more:hover,
.oz-shopbar__group-panel .pz-cats__more:hover {
	background: rgba(23, 33, 110, .08);
}

.oz-shopbar__menu--cats .pz-cats__more[aria-expanded="true"],
.oz-shopbar__group-panel .pz-cats__more[aria-expanded="true"] {
	transform: rotate(180deg);
}

.oz-shopbar__menu--cats .pz-cats__sub,
.oz-shopbar__group-panel .pz-cats__sub {
	grid-column: 1 / -1;
	margin: 2px 0 6px;
	padding: 0 0 0 12px;
	list-style: none;
	border-left: 2px solid rgba(23, 33, 110, .18);
}

.oz-shopbar__menu--cats .pz-cats__sub[hidden],
.oz-shopbar__group-panel .pz-cats__sub[hidden] {
	display: none;
}

.oz-shopbar__menu--cats .pz-cats__sub a,
.oz-shopbar__group-panel .pz-cats__sub a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: #374151;
	font-size: .86rem;
	line-height: 1.35;
	text-decoration: none;
}

.oz-shopbar__menu--cats .pz-cats__sub a:hover,
.oz-shopbar__group-panel .pz-cats__sub a:hover {
	background: rgba(23, 33, 110, .07);
	color: var(--odp-navy, #17216e);
}

.oz-shopbar__menu--cats .pz-cats__empty,
.oz-shopbar__group-panel .pz-cats__empty {
	margin: 0;
	padding: 10px;
	color: var(--ozs-muted);
	font-size: .88rem;
}

/* —— Botón «Filtros» y panel inferior: solo móvil

   En escritorio no existen; su aspecto está en el bloque de ≤767px del
   apartado 5. El panel se pinta fuera de `.oz-shopbar` (es `position: fixed`).
   ========================================================================= */

.oz-shopbar__mfilters,
.oz-shopbar__scrim,
.oz-shopbar__sheet {
	display: none;
}

@media (max-width: 767px) {
	.oz-shopbar__lead {
		display: none;
	}
}

/* Bloqueo del scroll con el panel de filtros abierto. Va en <html> y no en
   <body>: ahí `overflow: hidden` lo convertiría en contenedor de scroll y se
   llevaría por delante el posicionamiento del resto de la página. */
html.oz-filters-locked {
	overflow: hidden;
}

/* =========================================================================
   4. Contenido: descripción, rejilla y paginación
   ========================================================================= */

.oz-shop {
	width: 100%;
	box-sizing: border-box;
}

.oz-shop__inner {
	width: 100%;
	max-width: 100%;
	padding: clamp(14px, 1.6vw, 22px) var(--ozs-gutter) clamp(40px, 5vw, 72px);
	margin: 0;
	box-sizing: border-box;
}

.oz-shop-archive__intro:empty {
	display: none;
}

.oz-shop-archive__intro .term-description,
.oz-shop-archive__intro .woocommerce-products-header__description {
	margin: 0 0 1.25rem;
	color: var(--ozs-muted);
	font-size: .95rem;
	line-height: 1.6;
	max-width: 80ch;
}

.oz-shop__results .woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce oculta el contador y el selector de orden: viven en la barra. */
.site-main--woo-archive .woocommerce-result-count,
.site-main--woo-archive .woocommerce-ordering {
	display: none;
}

/* —— Rejilla */

/* El selector va sobrecargado a propósito (`body` + `.oz-shop` de más). El
   Cotizador reparte su propia rejilla con `.ozc-loops--replace ul.products`
   —y `.ozc-loops--replace` es una clase del <body>, así que alcanza a esta
   lista—, y con dos clases se le perdía el reparto de columnas. */
body .oz-shop .oz-shop__products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 17vw, 250px), 1fr));
	gap: clamp(14px, 1.4vw, 22px);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	max-width: 100%;
}

/* En escritorio ancho manda el número de columnas del Personalizador
   (WooCommerce → Catálogo de productos → «Columnas de productos en tienda»). */
@media (min-width: 1280px) {
	body .oz-shop .oz-shop__products ul.products {
		grid-template-columns: repeat(var(--oz-shop-grid-columns, 4), minmax(0, 1fr));
	}
}

/* Móvil: dos columnas fijas. Con el reparto automático una pantalla de 575px
   todavía daba tres tarjetas de 170px, demasiado apretadas para el dedo. */
@media (max-width: 575px) {
	body .oz-shop .oz-shop__products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

.oz-shop__products ul.products::before,
.oz-shop__products ul.products::after {
	content: none !important;
	display: none !important;
}

.oz-shop__products ul.products li.product,
.oz-shop__products ul.products li.product.first,
.oz-shop__products ul.products li.product.last {
	float: none !important;
	clear: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* —— Paginación */

.site-main--woo-archive .woocommerce-pagination {
	margin: clamp(24px, 3vw, 40px) 0 0;
	text-align: center;
}

.site-main--woo-archive .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.site-main--woo-archive .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.site-main--woo-archive .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ozs-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ozs-navy);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s var(--ozs-ease), color .18s var(--ozs-ease), border-color .18s var(--ozs-ease);
}

.site-main--woo-archive .woocommerce-pagination a.page-numbers:hover {
	background: var(--ozs-teal);
	border-color: var(--ozs-teal);
	color: #fff;
}

.site-main--woo-archive .woocommerce-pagination .page-numbers.current {
	background: var(--ozs-navy);
	border-color: var(--ozs-navy);
	color: #fff;
}

/* —— Sin resultados */

.oz-shop__empty {
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid var(--ozs-line);
	border-radius: var(--ozs-radius);
	background: #fff;
	text-align: center;
	color: var(--ozs-muted);
}

.oz-shop__empty .woocommerce-info {
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

/* =========================================================================
   5. Adaptación a pantallas pequeñas
   ========================================================================= */

/* Tablet: la barra se mantiene en una sola fila, con el orden a la derecha. */
@media (max-width: 991px) {
	.oz-shopbar__inner {
		flex-wrap: nowrap;
		align-items: center;
	}

	.oz-shopbar__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.oz-shopbar__filters::-webkit-scrollbar {
		display: none;
	}

	.oz-shopbar__pill--sort {
		padding-inline: 16px;
	}
}

/* Móvil: una sola fila — «Filtros» a la izquierda y el orden a la derecha, cada
   uno con su ancho justo. Las píldoras de categorías y de atributos se
   sustituyen por el panel inferior. */
@media (max-width: 767px) {
	.oz-shopbar {
		padding-inline: 12px;
	}

	.oz-shopbar__inner {
		flex-wrap: nowrap;
		align-items: center;
		padding: 10px 12px;
		gap: 8px;
	}

	.oz-shopbar__filters {
		flex: 0 1 auto;
		flex-wrap: nowrap;
		overflow: visible;
		gap: 8px;
		width: auto;
	}

	/* Fuera de la barra: viven dentro del panel. */
	.oz-shopbar__filters .oz-shopbar__dd,
	.oz-shopbar__clear {
		display: none;
	}

	.oz-shopbar__mfilters {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.oz-shopbar__dd--sort {
		display: block;
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;
		width: auto;
	}

	.oz-shopbar__pill--sort {
		width: auto;
		max-width: 100%;
		padding-inline: 14px;
		letter-spacing: 0;
	}

	/* La etiqueta de orden puede ser larga («Precio: menor a mayor»). */
	.oz-shopbar__pill--sort .oz-shopbar__pill-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.oz-shopbar__pill {
		padding: 8px 13px;
		font-size: 13px;
	}

	.oz-shopbar__menu {
		max-width: calc(100vw - 32px);
	}

	.oz-shopbar__menu--end {
		left: auto;
		right: 0;
		width: max-content;
		min-width: 190px;
	}

	/* —— Panel de filtros (hoja inferior) */

	/* Mismos niveles que el velo y los cajones del header: por encima de los
	   flotantes del sitio y por debajo del carrito lateral. */
	.oz-shopbar__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999990;
		background: rgba(1, 27, 53, .55);
		opacity: 0;
		transition: opacity .28s var(--ozs-ease);
	}

	.oz-shopbar__scrim[hidden] {
		display: none;
	}

	.oz-shopbar__scrim.is-open {
		opacity: 1;
	}

	.oz-shopbar__sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999991;
		max-height: min(86vh, 700px);
		border-radius: 18px 18px 0 0;
		background: #fff;
		box-shadow: 0 -14px 40px rgba(1, 53, 106, .28);
		transform: translateY(101%);
		visibility: hidden;
		transition: transform .32s var(--ozs-ease), visibility 0s linear .32s;
	}

	.oz-shopbar__sheet.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform .32s var(--ozs-ease), visibility 0s;
	}

	.oz-shopbar__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--ozs-line);
	}

	.oz-shopbar__sheet-title {
		color: var(--ozs-navy);
		font-size: 16px;
		font-weight: 700;
	}

	.oz-shopbar__sheet-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--ozs-navy);
		cursor: pointer;
	}

	.oz-shopbar__sheet-body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 4px 14px 10px;
	}

	.oz-shopbar__group + .oz-shopbar__group {
		border-top: 1px solid var(--ozs-line);
	}

	.oz-shopbar__group-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 14px 4px;
		border: 0;
		background: transparent;
		color: var(--ozs-navy);
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
	}

	.oz-shopbar__group-btn > svg:last-child {
		flex: 0 0 auto;
		margin-left: auto;
		transition: transform .2s var(--ozs-ease);
	}

	.oz-shopbar__group-btn[aria-expanded="true"] > svg:last-child {
		transform: rotate(180deg);
	}

	.oz-shopbar__group-panel {
		padding-bottom: 10px;
	}

	.oz-shopbar__group-panel[hidden] {
		display: none;
	}

	.oz-shopbar__group-panel .oz-shopbar__opt {
		padding: 11px 8px;
		font-size: .95rem;
	}

	.oz-shopbar__sheet-foot {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--ozs-line);
	}

	.oz-shopbar__sheet-clear {
		flex: 0 0 auto;
		color: var(--ozs-navy);
		font-size: 14px;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.oz-shopbar__sheet-apply {
		flex: 1 1 auto;
		padding: 12px 18px;
		border: 0;
		border-radius: 999px;
		background: var(--ozs-navy);
		color: #fff;
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	/* La rejilla no se toca aquí: entre 576px y 1279px el reparto automático de
	   arriba ya da de 2 a 4 columnas según quepan. El caso del móvil va en su
	   propio bloque, más abajo. */

	/* Banner: a esta anchura el reparto en dos mitades deja la foto en una tira
	   sin contenido reconocible, así que pasa a ocupar todo el fondo con un
	   velo azul encima para que el título siga legible. */
	.odp-shopbanner {
		min-height: 200px;
		padding-inline: 16px;
	}

	.odp-shopbanner__media {
		width: 100%;
	}

	.odp-shopbanner__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			100deg,
			var(--odp-navy, #17216e) 0%,
			rgba(23, 33, 110, .88) 45%,
			rgba(23, 33, 110, .58) 100%
		);
	}

	.odp-shopbanner__inner {
		padding-inline-start: 0;
	}

	.odp-shopbanner__lines {
		display: none;
	}

	.oz-shop__inner {
		padding-inline: 16px;
	}

	/* Árbol de categorías dentro del panel: usa los estilos base de
	   .pz-cats__list (assets/css/pz-header.css), solo se ajusta el sangrado. */
	.pz-cats__list--sheet .pz-cats__link {
		padding-inline: 8px;
		font-size: 14.5px;
	}

	.pz-cats__list--sheet .pz-cats__sub {
		padding-left: 10px;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.oz-shopbar__scrim,
	.oz-shopbar__sheet {
		transition: none;
	}
}