/* =======================================================================
   Uxmalia — sistema de diseño del catálogo (tokens + componentes propios
   + retoques ligeros sobre las clases nativas de WooCommerce en
   producto/carrito/checkout/mi-cuenta, sin tocar su estructura).
   ======================================================================= */

:root {
	--uxm-ink: #1E1D16;
	--uxm-ink-soft: #5B5840;
	--uxm-olive: #7E8C4C;
	--uxm-olive-deep: #4B5730;
	--uxm-sand: #F3EEDD;
	--uxm-paper: #FBF9F0;
	--uxm-line: #DCD3B6;
	--uxm-henequen: #B98A2E;
	--uxm-henequen-deep: #8C6820;
	--uxm-shadow: 0 1px 2px rgba(30,29,22,0.06), 0 8px 24px -12px rgba(30,29,22,0.18);

	--uxm-font-display: "Zilla Slab", ui-serif, Georgia, serif;
	--uxm-font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--uxm-ink: #F3EEDD;
		--uxm-ink-soft: #C7C09E;
		--uxm-olive: #A6B76B;
		--uxm-olive-deep: #8A9A5B;
		--uxm-sand: #17160F;
		--uxm-paper: #201F15;
		--uxm-line: #3B3826;
		--uxm-henequen: #DDAE54;
		--uxm-henequen-deep: #B98A2E;
		--uxm-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.6);
	}
}
:root[data-theme="dark"] {
	--uxm-ink: #F3EEDD;
	--uxm-ink-soft: #C7C09E;
	--uxm-olive: #A6B76B;
	--uxm-olive-deep: #8A9A5B;
	--uxm-sand: #17160F;
	--uxm-paper: #201F15;
	--uxm-line: #3B3826;
	--uxm-henequen: #DDAE54;
	--uxm-henequen-deep: #B98A2E;
	--uxm-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.6);
}

/* ---------- base ---------- */
body.woocommerce, body.woocommerce-page, body {
	background: var(--uxm-sand);
	color: var(--uxm-ink);
	font-family: var(--uxm-font-body);
	line-height: 1.55;
	/* Evita que un doble-toque accidental sobre una foto (al hacer
	   scroll en el celular) dispare el zoom nativo del navegador; el
	   scroll normal y el pellizco para zoom siguen funcionando igual. */
	touch-action: manipulation;
}
h1, h2, h3 { font-family: var(--uxm-font-display); }
.uxm-section-pad { padding-left: 20px; padding-right: 20px; }
@media (min-width: 860px) { .uxm-section-pad { padding-left: 40px; padding-right: 40px; } }

.uxm-page-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1em;
}

.uxm-content-area {
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 20px 50px;
}
@media (min-width: 860px) { .uxm-content-area { padding: 40px 40px 70px; } }
/* La tienda arma su propio ancho completo con secciones/hero; el
   wrapper genérico no debe volver a limitarla. */
.uxm-content-area:has(> .uxm-hero) { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; }
.uxm-eyebrow, .uxm-welcome-tag {
	font-family: var(--uxm-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--uxm-olive-deep);
}

/* ---------- chevron rule ---------- */
.uxm-chevron-rule {
	height: 10px;
	margin: 0 auto;
	max-width: 1100px;
	background-image: repeating-linear-gradient(115deg, var(--uxm-olive) 0 2px, transparent 2px 14px),
		repeating-linear-gradient(65deg, var(--uxm-olive) 0 2px, transparent 2px 14px);
	background-size: 24px 10px;
	background-repeat: repeat-x;
	background-position: center;
	opacity: 0.55;
}

/* ---------- arch frame ---------- */
.uxm-arch {
	border-radius: 999px 999px 6px 6px / 90px 90px 6px 6px;
	background: linear-gradient(180deg, var(--uxm-paper), var(--uxm-sand));
	border: 1.5px solid var(--uxm-line);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; position: relative;
	/* Bug conocido de Safari/iOS: una foto real (no un ícono SVG) dentro
	   de un contenedor con border-radius + overflow:hidden puede
	   "salirse" del recorte redondeado al hacer scroll, porque Safari
	   promueve la imagen a su propia capa compuesta a media transición
	   y pierde la máscara del borde. Forzamos el recorte con una
	   máscara -webkit- para que no dependa de esa capa. */
	-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
.uxm-arch::after {
	content: ""; position: absolute; inset: 8px;
	border: 1px solid var(--uxm-olive); opacity: 0.25;
	border-radius: 999px 999px 4px 4px / 82px 82px 4px 4px;
}
.woocommerce div.product div.images {
	max-width: 100%;
}
/* La proporción fija (para que toda foto -- cuadrada, vertical,
   panorámica -- se vea igual de grande) y el recorte van SOLO en
   .flex-viewport, el visor externo que Flexslider crea por JS alrededor
   de .woocommerce-product-gallery__wrapper -- ese wrapper interno es el
   riel que desliza y debe poder medir el ancho de TODAS las fotos en
   fila. Si se le recorta/fuerza proporción a él también (como hacía
   antes esta regla combinada), el riel completo se aplasta al tamaño
   de una sola foto y las demás quedan invisibles sin importar a cuál
   miniatura le des click -- ese fue el bug reportado. */
.woocommerce div.product .flex-viewport {
	max-width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	/* Flexslider mide la imagen más alta y fija esa altura por JS
	   (style="height:...px" inline) antes de que el recorte por
	   object-fit entre en juego -- eso ganaba sobre aspect-ratio y
	   dejaba un hueco vacío debajo de la foto. Forzamos con !important,
	   que sí le gana a un estilo inline sin !important. */
	height: auto !important;
}
/* El visor (.flex-viewport) ya mide siempre lo mismo, pero cada foto
   individual (.woocommerce-product-gallery__image) por defecto solo
   mide lo alto que le toque según SU PROPIA proporción a ese ancho --
   una foto panorámica queda más baja que una cuadrada, dejando un
   hueco vacío debajo dentro del recuadro fijo. Para que todas se vean
   del mismo tamaño (recortando de más o de menos según haga falta, en
   vez de solo achicarse) hay que forzar el 100% de alto en toda la
   cadena: el riel que desliza y cada foto individual -- el <img> de
   adentro ya tenía height:100% + object-fit:cover, pero eso no sirve
   de nada si su contenedor directo no mide también el 100%. */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image > a {
	height: 100% !important;
}
.woocommerce div.product div.images img,
.woocommerce div.product div.woocommerce-product-gallery img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
/* Cada foto grande viene envuelta en un <a> hacia la imagen a tamaño
   completo -- pensado originalmente para que un lightbox lo interceptara.
   Como el lightbox/zoom está apagado a propósito (bug de gestos táctiles
   en iOS), sin esto el clic navegaba de lleno a la imagen sola, sin
   ninguna forma de regresar más que el botón "atrás" del navegador. La
   navegación real ya la dan las miniaturas, así que este link se desactiva. */
.woocommerce div.product .woocommerce-product-gallery__image > a {
	pointer-events: none;
	cursor: default;
}
.uxm-arch img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	display: block;
}
.uxm-arch a {
	display: contents;
}

/* Botón "Continuar comprando" en la página de gracias por tu pedido. */
.uxm-continue-shopping {
	margin-top: 24px;
}

/* Miniaturas de la galería (las agrega Flexslider por JS). */
.woocommerce div.product ol.flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.woocommerce div.product ol.flex-control-thumbs li { width: auto; }
.woocommerce div.product ol.flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	border: 1.5px solid var(--uxm-line);
	cursor: pointer;
	opacity: 0.7;
}
.woocommerce div.product ol.flex-control-thumbs img:hover { opacity: 1; }
.woocommerce div.product ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--uxm-olive-deep);
}
.uxm-plate-icon svg, .uxm-hero-glyph-icon svg { stroke: var(--uxm-olive-deep); }
.uxm-plate-icon svg { width: 30px; height: 30px; }
.uxm-plate-photo {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------- topbar ---------- */
.uxm-topbar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 8px 20px;
	background: color-mix(in srgb, var(--uxm-sand) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--uxm-line);
}
.uxm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--uxm-ink); }
.uxm-brand-mark { width: 44px; height: 44px; display: block; }
.uxm-brand-mark svg, .uxm-brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.uxm-brand-word { font-family: var(--uxm-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.03em; }
.uxm-topbar-right { display: flex; align-items: center; gap: 14px; }
.uxm-cart-icon { position: relative; width: 22px; height: 22px; color: var(--uxm-ink); display: block; }
.uxm-cart-icon svg { width: 100%; height: 100%; }
.uxm-topbar-right .ci18n-lang {
	border-color: var(--uxm-line);
	color: var(--uxm-ink-soft);
	font-family: var(--uxm-font-body);
}
.uxm-topbar-right .ci18n-lang:hover { border-color: var(--uxm-olive); }
.uxm-topbar-right .ci18n-lang-activo {
	background: var(--uxm-ink);
	color: var(--uxm-sand);
	border-color: var(--uxm-ink);
}

.uxm-cart-count {
	position: absolute; top: -8px; right: -10px;
	background: var(--uxm-henequen-deep); color: var(--uxm-paper);
	font-size: 0.62rem; font-weight: 700; line-height: 1;
	border-radius: 999px; padding: 3px 5px; min-width: 15px; text-align: center;
}

/* ---------- hero ---------- */
.uxm-hero {
	padding-top: 40px; padding-bottom: 24px; max-width: 1100px; margin: 0 auto;
	display: grid; gap: 24px; align-items: center;
}
@media (min-width: 860px) { .uxm-hero { grid-template-columns: 1.1fr 0.9fr; padding-top: 56px; padding-bottom: 34px; gap: 44px; } }
.uxm-hero-glyph { width: 150px; height: 150px; justify-self: center; }
@media (min-width: 860px) { .uxm-hero-glyph { width: 210px; height: 210px; order: 2; } }
.uxm-hero-glyph-icon svg, .uxm-hero-glyph-icon img { width: 70px; height: 70px; object-fit: contain; }
.uxm-hero-copy { text-align: center; }
@media (min-width: 860px) { .uxm-hero-copy { text-align: left; order: 1; } }
.uxm-hero-copy h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.08; margin: 10px 0 0; text-wrap: balance; }
.uxm-hero-copy p { color: var(--uxm-ink-soft); max-width: 46ch; margin: 12px auto 0; }
@media (min-width: 860px) { .uxm-hero-copy p { margin-left: 0; } }
.uxm-welcome-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--uxm-henequen-deep); }
.uxm-welcome-tag::before { content: ""; width: 16px; height: 1.5px; background: var(--uxm-henequen); }

/* ---------- category rail ---------- */
.uxm-rail-wrap {
	position: sticky; top: 61px; z-index: 15;
	background: color-mix(in srgb, var(--uxm-sand) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--uxm-line);
	padding: 10px 20px;
}
@media (min-width: 860px) { .uxm-rail-wrap { padding: 12px 40px; } }
.uxm-rail { max-width: 1100px; margin: 0 auto; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.uxm-rail::-webkit-scrollbar { display: none; }
.uxm-chip {
	flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
	padding: 9px 14px; border: 1px solid var(--uxm-line); border-radius: 3px;
	background: var(--uxm-paper); text-decoration: none; color: var(--uxm-ink);
	font-weight: 600; font-size: 0.86rem; white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}
.uxm-chip svg { width: 16px; height: 16px; stroke: var(--uxm-olive-deep); flex-shrink: 0; }
.uxm-chip:hover { border-color: var(--uxm-olive); background: color-mix(in srgb, var(--uxm-olive) 8%, var(--uxm-paper)); }
.uxm-chip.is-current { background: var(--uxm-olive-deep); border-color: var(--uxm-olive-deep); color: var(--uxm-paper); }
.uxm-chip.is-current svg { stroke: var(--uxm-paper); }

/* ---------- category + grid ---------- */
.uxm-category { max-width: 1100px; margin: 0 auto; padding: 36px 20px 8px; scroll-margin-top: 126px; }
@media (min-width: 860px) { .uxm-category { padding: 46px 40px 8px; } }
.uxm-category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--uxm-line); padding-bottom: 10px; }
.uxm-category-head h2 { font-size: 1.5rem; margin: 0; }
.uxm-category-count { color: var(--uxm-ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

ul.uxm-grid, ul.products.uxm-grid {
	display: grid !important;
	/* minmax(0, 1fr) y no solo 1fr: una columna "1fr" a secas tiene un
	   mínimo implícito de min-content, así que si el título del servicio
	   trae una palabra larga sin espacios (o la imagen), Safari expande
	   esa columna más allá de lo que le toca en vez de encogerla -- eso
	   sacaba a la ficha de la derecha fuera de la pantalla en el celular.
	   Chrome es más permisivo con esto y no lo mostraba en las pruebas. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px) { ul.uxm-grid, ul.products.uxm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { ul.uxm-grid, ul.products.uxm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

li.uxm-card {
	background: var(--uxm-paper); border: 1px solid var(--uxm-line);
	box-shadow: var(--uxm-shadow); transition: transform .18s ease;
	margin: 0 !important; padding: 0 !important; list-style: none;
	/* Un ítem de grid tiene min-width:auto implícito -- sin esto, aunque
	   la columna sea minmax(0, 1fr), la ficha en sí podría negarse a
	   encogerse por debajo del ancho de su propio contenido (imagen o
	   título largo), causando el mismo desbordamiento. */
	min-width: 0;
}
li.uxm-card:hover { transform: translateY(-3px); }
.uxm-card-link {
	display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--uxm-ink);
	/* En una foto real (a diferencia de un ícono) es fácil que un toque
	   accidental durante el scroll dispare el zoom nativo de doble-toque
	   del navegador -- lo desactivamos aquí, el scroll normal sigue igual. */
	touch-action: manipulation;
}
.uxm-arch img, .uxm-arch svg { touch-action: manipulation; }
.uxm-card-plate { aspect-ratio: 1 / 0.92; margin: 10px 10px 0; }
.uxm-card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.uxm-card-title { font-family: var(--uxm-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; overflow-wrap: break-word; }
.uxm-card-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; padding-top: 6px; }
.uxm-card-price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.92rem; color: var(--uxm-ink); }
.uxm-card-price .woocommerce-Price-amount { font-weight: 700; }
.uxm-card-arrow { color: var(--uxm-olive-deep); font-size: 1.05rem; }

/* ---------- footer / to-top ---------- */
.uxm-footer {
	border-top: 1px solid var(--uxm-line); padding: 26px 20px 40px;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	color: var(--uxm-ink-soft); font-size: 0.82rem; text-align: center;
}
.uxm-footer-mark { width: 24px; height: 24px; display: block; }
.uxm-footer-mark svg, .uxm-footer-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.uxm-to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 30;
	width: 44px; height: 44px; border-radius: 999px;
	background: var(--uxm-ink); color: var(--uxm-sand); border: none;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--uxm-shadow);
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.uxm-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .uxm-to-top { transition: none; } html { scroll-behavior: auto !important; } }

html { scroll-behavior: smooth; }

/* =======================================================================
   Retoques sobre WooCommerce nativo (producto, carrito, checkout,
   mi cuenta) -- misma paleta y tipografía, sin cambiar su estructura.
   ======================================================================= */

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button, .uxm-btn {
	background: var(--uxm-ink) !important;
	color: var(--uxm-sand) !important;
	border-radius: 3px !important;
	border: none !important;
	font-family: var(--uxm-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	padding: 0.75em 1.4em !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--uxm-olive-deep) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--uxm-ink);
	font-family: var(--uxm-font-display);
	font-weight: 600;
}

.woocommerce div.product .product_title { font-family: var(--uxm-font-display); }

.woocommerce table.shop_table {
	border: 1px solid var(--uxm-line);
	border-radius: 0;
}
.woocommerce table.shop_table th {
	font-family: var(--uxm-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--uxm-ink-soft);
	border-bottom: 1px solid var(--uxm-line);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--uxm-line); }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout select {
	border: 1px solid var(--uxm-line);
	border-radius: 3px;
	background: var(--uxm-paper);
	color: var(--uxm-ink);
	font-family: var(--uxm-font-body);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
	border-color: var(--uxm-olive);
	outline: 2px solid color-mix(in srgb, var(--uxm-olive) 35%, transparent);
	outline-offset: 1px;
}

.woocommerce-checkout #payment, .cart-collaterals .cart_totals, .woocommerce-cart-form {
	background: var(--uxm-paper);
	border: 1px solid var(--uxm-line);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--uxm-olive) !important;
	background: var(--uxm-paper);
	font-family: var(--uxm-font-body);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--uxm-olive-deep) !important; }

a, .uxm-chip:focus-visible, button:focus-visible, .woocommerce a.button:focus-visible {
	outline-color: var(--uxm-henequen);
}

/* Ficha de producto: el visor de la galería toma el marco de arco
   (solo .flex-viewport -- ver el comentario junto a su otra regla de
   arriba sobre por qué no debe tocar también .woocommerce-product-
   gallery__wrapper, el riel interno que desliza las fotos). */
.woocommerce div.product .flex-viewport {
	border-radius: 999px 999px 6px 6px / 90px 90px 6px 6px;
	background: linear-gradient(180deg, var(--uxm-paper), var(--uxm-sand));
	border: 1.5px solid var(--uxm-line);
	padding: 4px;
}
.woocommerce div.product div.images img { border-radius: inherit; }

/* Ficha de producto: descripción simple (sin pestañas) justo debajo de
   la imagen, dentro de la misma columna -- el resto (imagen, resumen de
   compra, valoraciones, relacionados) se queda exactamente como
   WooCommerce lo arma por defecto (float de 2 columnas). */
.uxm-product-description {
	clear: left;
	margin-top: 1em;
	color: var(--uxm-ink-soft);
}
@media (min-width: 860px) {
	.uxm-product-description { float: left; width: 48%; }
}
@media (max-width: 768px) {
	.uxm-product-description { float: none; width: 100%; }
}

/* Motor de reservas (concierge-scheduling-engine): mismos tokens, y el
   campo de detalles con su propio marco (antes no tenía borde propio,
   por eso se veía "pegado") y ocupando el ancho completo sin salirse
   del contenedor (box-sizing: content-box + width:100% + padding
   propio se salía; con border-box ya no). */
.cse-booking-widget, .cse-detalles-widget, .cse-personas-widget, .cse-horas-widget {
	border: 1.5px solid var(--uxm-line) !important;
	background: var(--uxm-paper) !important;
	border-radius: 6px !important;
	padding: 1em !important;
}
.cse-fecha-input-visible, .cse-detalles-input, .cse-personas-input, .cse-horas-input {
	box-sizing: border-box !important;
	border-color: var(--uxm-line) !important;
	background: var(--uxm-sand) !important;
	color: var(--uxm-ink) !important;
	font-family: var(--uxm-font-body) !important;
}
.cse-detalles-input {
	max-width: none !important;
	width: 100% !important;
}
.cse-personas-hint { color: var(--uxm-ink-soft) !important; }
.cse-tarifas-lista { border-color: var(--uxm-line) !important; }
.cse-tarifas-lista li { color: var(--uxm-ink-soft) !important; font-family: var(--uxm-font-body) !important; }
.cse-tarifas-lista li span:last-child { color: var(--uxm-ink) !important; }
.cse-horas-hint { color: var(--uxm-ink-soft) !important; }
.cse-slot-btn { border-radius: 999px !important; font-family: var(--uxm-font-body) !important; }
.cse-slot-selected { background: var(--uxm-ink) !important; border-color: var(--uxm-ink) !important; }