/* ==========================================================================
   pages-shop.css — Archivo de categoría (categoria.php) y ficha (producto.php)
   --------------------------------------------------------------------------
   Capa de página del sistema de diseño "Modern Atelier".

   ORDEN DE CARGA (importante)
   ---------------------------
   Debe enlazarse DESPUÉS de theme.css y shop.css en includes/header.php:

       <link rel="stylesheet" href="<?= asset('assets/css/pages-shop.css') ?>">

   Varias reglas de acá dependen de ganar por orden de cascada (misma
   especificidad) a shop.css. Si se carga antes, el acordeón y el crossfade
   de la tarjeta se ven mal.

   ALCANCE
   -------
   Solo agrega lo que theme.css y shop.css no cubren: el layout de la barra
   de filtros, la tarjeta editorial del archivo, la galería de la ficha y los
   detalles de acordeón. Las clases del sistema (.product-grid, .marandre-card,
   .marandre-product-image-wrap, .marandre-accordion, .marandre-qty,
   .artisan-chip, .btn-primary, .shop-button…) se reutilizan tal cual.

   COLOR
   -----
   Sin hexadecimales de marca. Todo sale de las custom properties que emite
   brand_css_vars() y de los tokens estructurales de theme.css.
   ========================================================================== */

/* ==========================================================================
   1) ENVOLTORIO DE PÁGINA
   --------------------------------------------------------------------------
   Ambas páginas se envuelven en `.marandre-shop-content`, que theme.css ya
   define con el espacio superior necesario para librar el header fijo
   (padding-top: header-height + space-8). Acá solo se ajusta el fondo.
   ========================================================================== */

.marandre-shop-content {
	background: var(--color-background);
}

/* La ficha ya trae su propio padding inferior desde shop.css. */
.marandre-shop-content > .marandre-single-product-wrapper {
	padding-top: 0;
}

/* ==========================================================================
   2) ARCHIVO: ENCABEZADO
   ========================================================================== */

.shop-archive-header {
	margin-bottom: var(--space-8);
}

.shop-archive-header .shop-archive-title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: 1.15;
	color: var(--color-on-surface);
	margin: var(--space-3) 0 var(--space-2);
}

.shop-archive-count {
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-surface-faint);
}

.shop-archive-description {
	margin: var(--space-3) 0 0;
	max-width: 60ch;
	color: var(--color-on-surface-muted);
	line-height: 1.7;
}

/* ==========================================================================
   3) ARCHIVO: BARRA DE FILTROS HORIZONTAL
   ========================================================================== */

.marandre-filter-bar {
	margin-bottom: var(--space-10);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-surface-high);
	border-bottom: 1px solid var(--color-surface-high);
}

.marandre-filters-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
}

.filter-group {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Empuja el grupo de ordenamiento al extremo opuesto de la barra. */
.filter-group--end {
	margin-left: auto;
}

.filter-label {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-surface-faint);
	white-space: nowrap;
}

.marandre-filter-bar select {
	max-width: 100%;
	background: transparent;
	border: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-on-surface);
}

/* Campos de precio: subrayado en lugar de caja, como el resto del atelier. */
.filter-price-input {
	width: 84px;
	padding: 4px 0;
	background: transparent;
	border: none;
	border-bottom: 1.5px solid var(--color-outline-variant);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-on-surface);
	transition: border-color var(--transition);
	-moz-appearance: textfield;
	appearance: textfield;
}

.filter-price-input::-webkit-outer-spin-button,
.filter-price-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.filter-price-input:focus {
	outline: none;
	border-bottom-color: var(--color-primary);
}

.filter-price-sep {
	color: var(--color-outline);
	user-select: none;
}

.filter-apply {
	padding: 8px 20px;
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--transition);
}

.filter-apply:hover {
	opacity: 0.88;
}

.filter-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-error);
	transition: opacity var(--transition);
}

.filter-clear:hover {
	opacity: 0.75;
}

/* ==========================================================================
   4) ARCHIVO: TARJETA DE PRODUCTO EDITORIAL
   ========================================================================== */

.product-grid > li {
	display: flex;
}

.marandre-product-card-body {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* El <a> ES el contenedor de imagen: así el crossfade de shop.css/theme.css
   sigue viendo la imagen principal como `img:first-child`. */
.product-card-media {
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Guarda para tarjetas de una sola imagen.
   shop.css aplica `.marandre-product-image-wrap:hover img:first-child
   { opacity: 0 }` sin exigir `.has-second-image`, lo que deja la tarjeta en
   blanco al pasar el mouse cuando el producto trae una única foto. */
.marandre-product-image-wrap:not(.has-second-image):hover > img:first-child {
	opacity: 1;
}

.product-card-hover {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color-on-surface-rgb, 28, 28, 25), 0.04);
	opacity: 0;
	transition: opacity 400ms var(--ease-standard, ease-in-out);
}

.product-card-hover .btn-primary {
	background: var(--color-surface-lowest);
	color: var(--color-primary);
	box-shadow: var(--shadow-ambient);
	pointer-events: none;
}

/* Solo con puntero: en táctil el overlay taparía la foto de forma permanente. */
@media (hover: none) {
	.product-card-hover {
		display: none;
	}
}

/* Gana a `.product-grid .artisan-chip` de shop.css, que vuelve neutro el chip. */
.product-grid .artisan-chip.product-card-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 20;
	background: var(--color-tertiary-fixed);
	color: var(--color-on-tertiary-fixed);
}

.marandre-product-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.product-card-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 500;
	line-height: 1.3;
}

.product-card-title a {
	color: var(--color-on-surface);
	transition: color var(--transition);
}

.product-card-title a:hover,
.product-card-title a:focus-visible {
	color: var(--color-primary);
}

.product-card-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
}

.product-card-price {
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-secondary);
}

.product-card-price del,
.product-price-compare {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-on-surface-faint);
	text-decoration: line-through;
}

.product-card-add {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-pill);
	color: var(--color-on-surface);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.product-card-add:hover,
.product-card-add:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

/* ==========================================================================
   5) ARCHIVO: PAGINACIÓN Y ESTADO VACÍO
   ========================================================================== */

.shop-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-12);
}

.shop-pagination__link,
.shop-pagination__current {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	transition: background var(--transition), color var(--transition);
}

.shop-pagination__link {
	border: 1px solid var(--color-outline-variant);
	color: var(--color-on-surface-muted);
}

.shop-pagination__link:hover {
	background: var(--color-surface-high);
	color: var(--color-on-surface);
}

.shop-pagination__current {
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: 700;
}

.shop-empty-state {
	padding: var(--space-20) var(--space-6);
	text-align: center;
	background: var(--color-surface-lowest);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-ambient);
}

.shop-empty-state__icon {
	font-size: var(--text-4xl);
	color: var(--color-outline-variant);
	margin-bottom: var(--space-4);
}

.shop-empty-state h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--color-on-surface);
	margin-bottom: var(--space-2);
}

.shop-empty-state p {
	color: var(--color-on-surface-muted);
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   6) FICHA: LAYOUT DE DOS COLUMNAS
   --------------------------------------------------------------------------
   shop.css ya trae el colapso a una columna bajo 1024px para
   .marandre-single-product / .marandre-product-gallery /
   .marandre-product-info-sticky. Acá solo va la base de escritorio.
   ========================================================================== */

.marandre-single-product {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.marandre-product-gallery {
	flex: 0 0 calc(58.333% - var(--space-6));
}

.marandre-product-info-sticky {
	flex: 0 0 calc(41.666% - var(--space-6));
	position: sticky;
	top: calc(var(--header-height) + var(--space-8));
	height: fit-content;
}

/* ==========================================================================
   7) FICHA: GALERÍA
   ========================================================================== */

.product-gallery__image {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-surface-low);
}

.product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 2;
	background: var(--color-tertiary-fixed);
	color: var(--color-on-tertiary-fixed);
}

.product-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding: 0;
	list-style: none;
}

.product-gallery-thumbs .thumbnail-item {
	aspect-ratio: 1 / 1;
	padding: 0;
	overflow: hidden;
	background: var(--color-surface-low);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition);
}

.product-gallery-thumbs .thumbnail-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.product-gallery-thumbs .thumbnail-item:hover,
.product-gallery-thumbs .thumbnail-item:focus-visible,
.product-gallery-thumbs .thumbnail-item[aria-current="true"] {
	border-color: var(--color-primary);
}

/* ==========================================================================
   8) FICHA: COLUMNA DE INFORMACIÓN
   ========================================================================== */

.marandre-product-header {
	margin-bottom: var(--space-8);
}

.marandre-product-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.product-sku {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-surface-faint);
}

.product_title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: 1.15;
	color: var(--color-on-surface);
	margin: 0 0 var(--space-3);
}

.product-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-secondary);
}

/* Disponibilidad: reutiliza la base .status-badge de theme.css. */
.product-stock {
	margin: 0 0 var(--space-6);
}

.product-stock-badge--in {
	background: var(--color-success-container);
	color: var(--color-success);
}

.product-stock-badge--out {
	background: var(--color-error-container);
	color: var(--color-error);
}

.product-short-description {
	margin-bottom: var(--space-8);
	color: var(--color-on-surface-muted);
	line-height: 1.7;
}

.product-short-description p:last-child {
	margin-bottom: 0;
}

.marandre-product-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-10);
}

.marandre-product-actions .shop-button {
	flex: 1 1 200px;
}

/* ==========================================================================
   9) FICHA: ACORDEONES
   --------------------------------------------------------------------------
   El comportamiento lo maneja assets/js/theme.js (initAccordions): escucha el
   evento `toggle` del <details> y cambia el texto de .acc-icon entre + y −.
   Acá solo va la presentación.
   ========================================================================== */

.marandre-accordions {
	border-top: 1px solid var(--color-surface-high);
}

.marandre-accordion {
	border-bottom: 1px solid var(--color-surface-high);
}

.marandre-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-on-surface);
}

.marandre-accordion > summary:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

/* theme.js ya sustituye el glifo (+ → −); la rotación de 45° que aplica
   shop.css sobre ese mismo icono lo dejaría como una barra inclinada. */
.marandre-accordion[open] .acc-icon {
	transform: none;
}

.marandre-accordion .acc-content {
	padding-bottom: var(--space-4);
	color: var(--color-on-surface-muted);
	line-height: 1.7;
}

.marandre-accordion .acc-content > *:last-child {
	margin-bottom: 0;
}

/* Tabla de atributos dentro del acordeón. */
.product-attributes {
	width: 100%;
	border-collapse: collapse;
}

.product-attributes th {
	width: 38%;
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
	text-align: left;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-surface-faint);
	border-bottom: 1px solid var(--color-surface-high);
	vertical-align: top;
}

.product-attributes td {
	padding: var(--space-3) 0;
	color: var(--color-on-surface);
	border-bottom: 1px solid var(--color-surface-high);
}

.product-attributes tr:last-child th,
.product-attributes tr:last-child td {
	border-bottom: none;
}

/* ==========================================================================
   10) FICHA: RELACIONADOS
   ========================================================================== */

.related-products-section {
	width: 100%;
	margin-top: var(--space-20);
	padding-top: var(--space-12);
	border-top: 1px solid var(--color-surface-high);
}

.related-products-section h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--color-on-surface);
	margin-bottom: var(--space-8);
}

.product-grid--related {
	grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   11) RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.product-grid--related {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.shop-archive-header .shop-archive-title {
		font-size: var(--text-2xl);
	}

	.marandre-filters-form {
		gap: var(--space-4);
	}

	.filter-group--end {
		margin-left: 0;
		width: 100%;
		justify-content: flex-end;
	}

	.marandre-product-info {
		padding: var(--space-3);
	}

	.product-card-title {
		font-size: var(--text-sm);
	}

	.product-grid--related {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-gallery-thumbs {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-2);
	}

	.shop-pagination__link,
	.shop-pagination__current {
		padding: 10px 16px;
	}
}