/* =========================================================================
   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-page-bg: #eef1f3;
	--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
   ========================================================================= */

body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
	background: var(--ozs-page-bg);
}

body.post-type-archive-product .site,
body.tax-product_cat .site,
body.tax-product_tag .site {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.site-main.site-main--woo-archive {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: var(--ozs-page-bg);
	box-sizing: border-box;
	/* `clip` (y no `hidden`) para no romper el `position: sticky` de la barra. */
	overflow-x: clip;
}

/* =========================================================================
   2. Franja de título y migas

   El aspecto lo define assets/css/pz-page-title.css, compartido con las
   páginas. Aquí solo queda lo propio del archivo de productos.
   ========================================================================= */

.site-main--woo-archive .pz-page-title__inner {
	padding-inline: var(--ozs-gutter);
}

/* =========================================================================
   3. Barra turquesa (pegajosa)
   ========================================================================= */

.oz-shopbar {
	position: sticky;
	/* Bajo la cabecera fija; cuando esta se oculta al bajar, la barra sube. */
	top: calc(var(--ozs-adminbar) + var(--pz-header-h, 92px));
	z-index: 900;
	padding: 6px var(--ozs-gutter) 10px;
	box-sizing: border-box;
	transition: top .34s var(--ozs-ease);
}

html.oz-header-hidden .oz-shopbar {
	top: var(--ozs-adminbar);
}

@media (prefers-reduced-motion: reduce) {
	.oz-shopbar {
		transition: none;
	}
}

.oz-shopbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--ozs-radius);
	background: var(--ozs-teal);
	box-shadow: 0 6px 18px rgba(1, 53, 106, .12);
	box-sizing: border-box;
}

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

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

.oz-shopbar__dd {
	position: relative;
}

.oz-shopbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 16px;
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: clamp(13px, .95vw, 15px);
	font-weight: 500;
	line-height: 1.1;
	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 {
	background: rgba(255, 255, 255, .16);
	outline: none;
}

.oz-shopbar__pill:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

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

.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 azul de ordenación */

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

.oz-shopbar__pill--sort {
	border-color: var(--ozs-navy);
	background: var(--ozs-navy);
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding-inline: 20px;
}

.oz-shopbar__pill--sort:hover,
.oz-shopbar__pill--sort:focus-visible {
	background: var(--ozs-navy-dark);
	border-color: var(--ozs-navy-dark);
}

.oz-shopbar__dd--sort[open] > .oz-shopbar__pill--sort {
	background: var(--ozs-navy-dark);
	border-color: var(--ozs-navy-dark);
	color: #fff;
}

/* —— Enlace «Limpiar filtros» */

.oz-shopbar__clear {
	color: #fff;
	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;
}

/* —— 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;
}

/* Bloqueo del scroll con el panel abierto. Va en <html> y no en <body>, que al
   recibir `overflow: hidden` pasaría a ser contenedor de scroll y rompería el
   `position: sticky` de la barra. */
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 */

.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) {
	.oz-shop__products ul.products {
		grid-template-columns: repeat(var(--oz-shop-grid-columns, 4), minmax(0, 1fr));
	}
}

.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__pill--cats,
	.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;
	}

	.oz-shop__products ul.products {
		grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
		gap: 12px;
	}

	.site-main--woo-archive .pz-page-title__inner {
		padding-inline: 16px;
	}

	.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;
	}
}