/* Olimpoxxi Core — widgets y tienda. Tokens (--ox-*) los define el tema; aquí van con respaldo por si se usa otro tema. */

.ox-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .85em 1.8em; border: 1px solid var(--ox-gold, #c9a24a); border-radius: 0; font: 600 .82rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .35s, color .35s, box-shadow .35s; }
.ox-btn--gold, .ox-btn:not(.ox-btn--ghost) { background: linear-gradient(135deg, var(--ox-gold-light, #e8cf8a), var(--ox-gold, #c9a24a) 55%, var(--ox-gold-deep, #9a7526)); color: var(--ox-ink, #0b0a08); }
.ox-btn--gold:hover, .ox-btn:not(.ox-btn--ghost):hover { box-shadow: 0 0 0 1px var(--ox-gold-light, #e8cf8a), 0 10px 30px -10px rgba(201, 162, 74, .6); }
.ox-btn--ghost { background: transparent; color: var(--ox-ivory, #f5efe3); }
.ox-btn--ghost:hover { background: var(--ox-ivory, #f5efe3); color: var(--ox-ink, #0b0a08); border-color: var(--ox-ivory, #f5efe3); }
.ox-btn:focus-visible, .ox-link:focus-visible, .ox-cat:focus-visible { outline: 2px solid var(--ox-gold-light, #e8cf8a); outline-offset: 3px; }

.ox-section-title { margin: 0; text-wrap: balance; color: var(--ox-ivory, #f5efe3); font: 500 clamp(1.6rem, 3.2vw, 2.6rem)/1.15 var(--ox-serif, Georgia, serif); letter-spacing: .04em; }
.ox-link { color: var(--ox-gold, #c9a24a); font: 600 .8rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .3em; }

/* Greca (meandro griego): el filete propio del Olimpo, en lugar del borde dorado genérico. */
.ox-greca { display: block; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 13.5h22.5V.5h-17v9h8V5.5h-3' fill='none' stroke='%23c9a24a' stroke-width='1.2'/%3E%3Cpath d='M22.5 13.5H28' fill='none' stroke='%23c9a24a' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center / 28px 14px; }
.ox-section-title + .ox-greca { width: 140px; margin-top: 1rem; }

/* ---------------------------------------------------------------- Hero */
.ox-hero { position: relative; overflow: hidden; background: var(--ox-ink, #0b0a08); }
.ox-hero__track { display: flex; }
.ox-hero__slide { position: relative; display: grid; flex: 0 0 100%; align-items: end; min-height: var(--ox-hero-h); overflow: hidden; isolation: isolate; }
/* Llena justo la primera pantalla bajo la barra de avisos (30px) y el header: así se ven enteros los controles y la greca. */
.ox-hero { --ox-hero-h: clamp(480px, calc(100svh - var(--ox-header-h, 76px) - 30px), 860px); }
.admin-bar .ox-hero { --ox-hero-h: clamp(480px, calc(100svh - var(--ox-header-h, 76px) - 62px), 860px); }
.ox-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; animation: ox-zoom 18s ease-out both; }
/* ponytail: la foto actual es de catálogo, con fondo de estudio gris; el filtro la pasa a piedra cálida. Quitar cuando el cliente entregue una foto sobre fondo oscuro (PENDIENTES). */
.ox-hero__img { filter: brightness(.72) contrast(1.15) saturate(.85) sepia(.2); }
.ox-hero__slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 8, .85), rgba(11, 10, 8, .35) 70%, rgba(11, 10, 8, .2)), linear-gradient(180deg, rgba(11, 10, 8, .25), rgba(11, 10, 8, 0) 30%, rgba(11, 10, 8, .94)); }
@media (max-width: 760px) { .ox-hero__slide::after { background: linear-gradient(180deg, rgba(11, 10, 8, .75), rgba(11, 10, 8, .35) 40%, rgba(11, 10, 8, .95) 80%); } }
.ox-hero { --ox-hero-pb: clamp(3rem, 9vh, 6rem); }
.ox-hero__body { width: var(--ox-wrap, min(1320px, 100% - 2.5rem)); margin: 0 auto; padding: 0 0 var(--ox-hero-pb); }
.ox-hero__title { max-width: 14ch; margin: 0; color: var(--ox-ivory, #f5efe3); font: 500 clamp(2.6rem, 7vw, 5.6rem)/1.02 var(--ox-serif, Georgia, serif); letter-spacing: .02em; }
.ox-hero__text { max-width: 46ch; margin: 1.4rem 0 0; color: rgba(245, 239, 227, .78); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; }
.ox-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
@keyframes ox-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
/* Foto vertical o de menos de 1600px (class-hero.php) o "A un lado": en celular va a sangre como las demás; en escritorio es un
   panel limpio pegado al borde derecho, de alto completo, sin marco ni filete. Las verticales se ven enteras de alto y las
   horizontales se recortan a la mitad de la pantalla; el texto queda sobre ink a la izquierda. */
.ox-hero__side, .ox-hero__clip { display: contents; }
@media (min-width: 1025px) {
	.ox-hero__slide--side::after { content: none; }
	.ox-hero__slide--side .ox-hero__body { display: grid; grid-template-columns: minmax(0, calc(50% - 3rem)); }
	.ox-hero__side { position: absolute; inset: 0 0 0 auto; display: block; margin: 0; }
	.ox-hero__clip { display: block; height: 100%; overflow: hidden; }
	.ox-hero__side .ox-hero__img { position: static; width: auto; max-width: 50vw; height: 100%; filter: none; }
}
/* Carrusel: deslizar es scroll nativo con snap (dedo, trackpad); theme.js mueve el track con flechas y puntos y marca la activa. */
.ox-hero--slider .ox-hero__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ox-hero--slider .ox-hero__track::-webkit-scrollbar { display: none; }
.ox-hero--slider .ox-hero__slide { scroll-snap-align: start; scroll-snap-stop: always; }
/* En el carrusel las fotos quedan quietas: el zoom repetido en cada cambio se veía como un latido. Lo conserva el hero de una sola foto. */
.ox-hero--slider .ox-hero__img { animation: none; }
/* Debajo de los botones, a la izquierda (el ícono de pausa alineado con el texto): a la derecha va el marco de las fotos
   enmarcadas y, abajo, el WhatsApp flotante. */
.ox-hero--slider { --ox-hero-pb: calc(clamp(1.25rem, 4vh, 2.5rem) + 44px + 1rem); }
.ox-hero__nav { position: absolute; bottom: clamp(1.25rem, 4vh, 2.5rem); left: calc(max(calc((100% - 1320px) / 2), 1.25rem) - 13px); z-index: 2; display: flex; align-items: center; }
.ox-hero__arrow, .ox-hero__pause, .ox-hero__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ox-gold-light, #e8cf8a); cursor: pointer; transition: color .2s; }
.ox-hero__arrow:hover, .ox-hero__pause:hover { color: var(--ox-ivory, #f5efe3); }
.ox-hero__nav .ox-ico { width: 22px; height: 22px; stroke: currentColor; }
.ox-hero__pause .ox-ico { width: 20px; height: 20px; }
.ox-hero__pause .ox-ico + .ox-ico, .ox-hero.is-paused .ox-hero__pause .ox-ico:first-child { display: none; }
.ox-hero.is-paused .ox-hero__pause .ox-ico + .ox-ico { display: block; }
.ox-hero__dots { display: flex; }
/* Puntos como líneas; la activa es más larga (el ancho total no cambia: las flechas no se mueven). */
.ox-hero__dot { width: 32px; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.ox-hero__dot[aria-current="true"] { width: 56px; }
.ox-hero__dot::before, .ox-hero__dot::after { content: ""; position: absolute; top: calc(50% - 1px); right: 4px; left: 4px; height: 2px; }
.ox-hero__dot::before { background: rgba(232, 207, 138, .3); transition: background-color .3s; }
.ox-hero__dot:hover::before { background: rgba(232, 207, 138, .6); }
.ox-hero__dot[aria-current="true"]::before { background: var(--ox-gold-light, #e8cf8a); }
/* Con avance solo, la activa se llena en oro durante el intervalo y al terminar pasa a la siguiente (animationend en theme.js):
   pausar o dejar el mouse encima la congela donde va, sin reiniciar la cuenta. */
.ox-hero--auto .ox-hero__dot[aria-current="true"]::before { background: rgba(232, 207, 138, .3); }
.ox-hero--auto .ox-hero__dot[aria-current="true"]::after { background: var(--ox-gold-light, #e8cf8a); transform-origin: 0 50%; animation: ox-hero-progress var(--ox-hero-interval, 6s) linear both; }
.ox-hero.is-held .ox-hero__dot::after, .ox-hero.is-paused .ox-hero__dot::after { animation-play-state: paused; }
@keyframes ox-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Elementor carga después y su `.elementor img { height: auto }` gana a una sola clase. */
.elementor .ox-hero__img, .elementor .ox-cat__img { height: 100%; }

/* ---------------------------------------------------------------- Categorías */
.ox-cats { display: grid; gap: 2rem; }
/* 170px mínimo: seis reinos (cinco + Eros) caben en una fila en escritorio; con 200 el sexto caía solo a otra fila. */
.ox-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 1rem; }
/* Con auto-fit, a 768 quedaban 4 reinos + 1 solo. Tablet: 3 por fila (6 → 3 + 3, 5 → 3 + 2). Desde 1000px: todos en una fila. */
@media (min-width: 601px) and (max-width: 999px) { .ox-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ox-cats__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
	.ox-cats__grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
	/* Con número impar de categorías, la primera va a lo ancho: nunca queda un mosaico huérfano. */
	.ox-cats .ox-cats__grid:has(> :last-child:nth-child(odd)) > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.ox-cats .ox-cat { padding: 1rem; }
	/* Cinzel solo tiene mayúsculas: sin text-transform las minúsculas salen como versalitas, más angostas. */
	.ox-cats .ox-cat__name { font-size: 1rem; letter-spacing: .02em; text-transform: none; }
}
.ox-cat { position: relative; display: grid; align-content: end; aspect-ratio: 3 / 4; overflow: hidden; padding: clamp(.9rem, 1.2vw, 1.4rem); background: var(--ox-char, #16130f); color: var(--ox-ivory, #f5efe3); text-decoration: none; isolation: isolate; }
.ox-cat__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(.85); }
.ox-cat__img--empty { background: radial-gradient(circle at 50% 40%, rgba(201, 162, 74, .25), transparent 65%); }
.ox-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(11, 10, 8, .9)); }
.ox-cat::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(232, 207, 138, 0); transition: border-color .6s; pointer-events: none; }
.ox-cat:hover .ox-cat__img { transform: scale(1.06); filter: saturate(1); }
.ox-cat:hover::before { border-color: rgba(232, 207, 138, .55); }
/* Con seis reinos por fila la tarjeta mide ~170px: el nombre escala con la pantalla para que "CABALLERO" quepa. */
.ox-cat__name { font: 500 clamp(1rem, 1.35vw, 1.5rem)/1.1 var(--ox-serif, Georgia, serif); letter-spacing: .06em; text-transform: uppercase; }
.ox-cat__count { margin-top: .4rem; color: var(--ox-gold, #c9a24a); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }

/* ---------------------------------------------------------------- Franja de confianza */
.ox-trust { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-block: 1px solid rgba(201, 162, 74, .25); }
.ox-trust__item { display: grid; justify-items: center; gap: .35rem; padding: 1.5rem 1.2rem; text-align: center; }
.ox-trust__item + .ox-trust__item { border-left: 1px solid rgba(201, 162, 74, .18); }
.ox-trust__item .ox-ico { width: 26px; height: 26px; margin-bottom: .3rem; }
@media (max-width: 760px) {
	.ox-trust { grid-template-columns: 1fr 1fr; }
	.ox-trust__item { padding: 1.1rem .6rem; }
	.ox-trust__item:nth-child(3) { border-left: 0; }
	.ox-trust__item:nth-child(n+3) { border-top: 1px solid rgba(201, 162, 74, .18); }
}
.ox-trust__item strong { color: var(--ox-ivory, #f5efe3); font: 600 .95rem/1.25 var(--ox-serif, Georgia, serif); letter-spacing: .06em; }
.ox-trust__item span { color: var(--ox-muted, #a39b8b); font-size: .85rem; }

/* ---------------------------------------------------------------- Vitrina */
.ox-products { display: grid; gap: 2rem; }
.ox-products__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
/* En celular cada vitrina muestra 4 (dos filas) y el enlace "Ver todo" hace el resto: la portada pasaba de 9 pantallas. */
@media (max-width: 680px) { .ox-products .woocommerce ul.products li.product:nth-child(n+5) { display: none; } }
/* Tablet (3 columnas): máximo 6 y nunca uno solo en la última fila (las ofertas, con 4, quedaban 3 + 1). */
@media (min-width: 681px) and (max-width: 900px) { .ox-products .woocommerce ul.products li.product:is(:nth-child(n+7), :nth-child(3n+1):last-child:not(:first-child)) { display: none; } }
@media (min-width: 681px) and (max-width: 900px) { :is(.related, .upsells, .cross-sells) ul.products li.product:nth-child(3n+1):last-child:not(:first-child) { display: none; } }

/* ---------------------------------------------------------------- Tarjeta de producto (loop WooCommerce)
   Marco uniforme 4:5 sobre fondo oscuro: iguala fotos de calidad y tamaño dispares. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { position: relative; display: block; }
.woocommerce ul.products li.product img { aspect-ratio: 4 / 5; width: 100%; height: auto; margin: 0 0 1rem; object-fit: cover; background: var(--ox-char, #16130f); transition: opacity .6s, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.woocommerce ul.products li.product .ox-hover-img { position: absolute; inset: 0 0 auto; opacity: 0; }
.woocommerce ul.products li.product:hover .ox-hover-img { opacity: 1; }
/* Sin zoom: la foto escalada se salía de su marco 4:5. El hover lo dan la segunda foto y un filete dorado. */
.woocommerce ul.products li.product:hover img:not(.ox-hover-img) { filter: brightness(1.06); }
/* Paspartú ink de .5rem con filete dorado siempre visible: las capturas de WhatsApp (fondos blancos, cian, rosa) se leen como cuadros colgados, no como parches. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 .5rem var(--ox-ink, #0b0a08); outline: 1px solid rgba(232, 207, 138, .3); outline-offset: -.5rem; transition: outline-color .4s; pointer-events: none; }
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link::before { outline-color: rgba(232, 207, 138, .7); }
/* Dentro del paspartú (.5rem + aire): si pisan la línea del marco se ven sucias. */
.ox-badges { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.ox-badge { padding: .35em .7em; border: 1px solid var(--ox-gold, #c9a24a); background: rgba(11, 10, 8, .78); color: var(--ox-gold-light, #e8cf8a); font: 600 .66rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(4px); }
/* Descuento: etiqueta oro sólido con la cifra en negro, nítida sobre cualquier foto (el negro, sólido o translúcido, se veía como parche). */
.ox-badge--sale { padding: .45em .6em; border: 0; background: var(--ox-gold, #c9a24a); color: var(--ox-ink, #0b0a08); font: 800 .9rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .03em; backdrop-filter: none; }
/* En la tarjeta el ahorro es una línea breve en muted con la cifra en oro: el precio manda, el ahorro acompaña. En la ficha vuelve a ser protagonista. */
.ox-savings { display: flex; align-items: center; gap: .3rem; margin: .3rem 0 0; color: var(--ox-muted, #a39b8b); font-size: .78rem; font-weight: 500; }
.ox-savings .ox-orn--rayo { width: 1em; height: 1em; }
.woocommerce ul.products .ox-savings .ox-orn--rayo { display: none; }
/* En la tarjeta es una frase corrida (el flex del rayo la partía en columnas al estrecharse). */
.woocommerce ul.products .ox-savings { display: block; line-height: 1.5; }
/* WooCommerce pone `ul.products li.product strong { display: block }`: sin esto la cifra caía sola a otra línea. */
.woocommerce ul.products li.product .ox-savings strong { display: inline; }
.ox-savings__was, .ox-savings__amt { white-space: nowrap; }
.ox-savings__was { text-decoration: line-through; text-decoration-color: rgba(163, 155, 139, .6); }
.ox-savings__was .amount { color: inherit; }
.ox-savings strong, .ox-savings strong .amount { color: var(--ox-gold-light, #e8cf8a) !important; font-weight: 700; }
.woocommerce div.product .ox-savings { margin: -1.1rem 0 1.6rem; color: var(--ox-gold, #c9a24a); font-size: .95rem; font-weight: 600; }
/* "Ver tallas" sobre la foto, dentro del paspartú, solo al pasar el mouse o con foco en el enlace. Sin hover (táctil) no existe: la tarjeta ya enlaza. */
.ox-card-cta { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: 1.1rem; pointer-events: none; }
.ox-card-cta span { display: block; width: 100%; padding: .85rem; background: var(--ox-gold, #c9a24a); color: var(--ox-ink, #0b0a08); font: 700 .72rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .16em; text-align: center; text-transform: uppercase; opacity: 0; translate: 0 8px; transition: opacity .3s ease-out, translate .45s cubic-bezier(.2, .7, .2, 1); }
.woocommerce ul.products li.product:hover .ox-card-cta span, .woocommerce ul.products li.product .woocommerce-LoopProduct-link:focus-visible .ox-card-cta span { opacity: 1; translate: 0; }
@media (hover: none) { .ox-card-cta { display: none; } }
.ox-savings__pct { margin-left: .4rem; padding: .3em .55em; border: 1px solid var(--ox-gold, #c9a24a); background: var(--ox-ink, #0b0a08); color: var(--ox-gold-light, #e8cf8a); font-weight: 800; }
.ox-badge--out { border-color: var(--ox-ink, #0b0a08); background: var(--ox-ink, #0b0a08); color: var(--ox-ivory, #f5efe3); } /* sólida: la translúcida no se leía sobre fotos claras */

/* ---------------------------------------------------------------- Envío gratis */
/* Sin caja: camión de trazo + frase; pendiente lleva debajo una barra de 2px a todo el ancho. */
.ox-ship { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem .6rem; margin: 0 0 1.1rem; }
.ox-ship .ox-ico { width: 20px; height: 20px; }
.ox-ship__msg { margin: 0; color: var(--ox-ivory, #f5efe3); font-size: .85rem; line-height: 1.4; }
.ox-ship__msg strong, .ox-ship__msg strong .amount { color: var(--ox-gold-light, #e8cf8a); font-weight: 700; }
/* Logrado: franja oro sólido con texto ink, como la barra de avisos y la insignia de descuento: un logro se celebra. */
.ox-ship.ox-ship--done { grid-template-columns: auto auto; justify-content: center; padding: .7rem .9rem; background-color: var(--ox-gold, #c9a24a); }
.ox-ship--done .ox-ico { stroke: var(--ox-ink, #0b0a08); }
.ox-ship.ox-ship--done .ox-ship__msg { color: var(--ox-ink, #0b0a08); font: 800 .74rem/1.2 var(--ox-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
/* Al lograrlo sin recargar (theme.js pone .is-new una vez): un brillo recorre la franja y el camión entra. */
.ox-ship--done.is-new { background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; animation: ox-ship-shine 1.1s ease-out .15s both; }
.ox-ship--done.is-new .ox-ico { animation: ox-ship-drive .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ox-ship-shine { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes ox-ship-drive { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .ox-ship--done.is-new, .ox-ship--done.is-new .ox-ico { animation: none; } }
.ox-ship__track { grid-column: 1 / -1; height: 2px; background: rgba(201, 162, 74, .25); overflow: hidden; }
.ox-ship__track span { display: block; height: 100%; background: var(--ox-gold, #c9a24a); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }

/* ---------------------------------------------------------------- Producto */
.ox-assure-box { position: relative; isolation: isolate; margin: 1.4rem 0 0; border: 1px solid rgba(201, 162, 74, .3); background: var(--ox-char, #16130f); }
.ox-assure { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--ox-ivory, #f5efe3); }
.ox-assure li { padding: .95rem 1rem; }
.ox-assure li:nth-child(odd) { border-right: 1px solid rgba(201, 162, 74, .18); }
.ox-assure li:nth-child(n+3) { border-top: 1px solid rgba(201, 162, 74, .18); }
.ox-assure-ask { display: block; padding: .85rem 1rem; border-top: 1px solid rgba(201, 162, 74, .3); color: var(--ox-muted, #a39b8b); font-size: .85rem; text-decoration: none; }
.ox-assure-ask span { color: var(--ox-gold-light, #e8cf8a); border-bottom: 1px solid rgba(201, 162, 74, .5); }
.ox-assure-ask:hover span { border-color: var(--ox-gold-light, #e8cf8a); }
.ox-assure li { display: flex; align-items: center; gap: .7rem; }
.ox-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ox-gold, #c9a24a); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ox-sticky-atc { position: fixed; inset: auto 0 0; z-index: 90; display: flex; align-items: center; gap: .9rem; padding: .7rem max(1rem, (100% - 1240px) / 2); background: rgba(11, 10, 8, .94); border-top: 1px solid rgba(201, 162, 74, .35); backdrop-filter: blur(8px); transform: translateY(100%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.ox-sticky-atc.is-on { transform: none; }
.ox-sticky-atc__img { width: 48px; height: 60px; object-fit: cover; }
.ox-sticky-atc__info { flex: 1; min-width: 0; }
.ox-sticky-atc__info p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ox-sticky-atc__name { color: var(--ox-ivory, #f5efe3); font: 500 .95rem/1.3 var(--ox-serif, Georgia, serif); }
.ox-sticky-atc__price { color: var(--ox-gold, #c9a24a); font-size: .88rem; }

@media (max-width: 600px) {
	.ox-sticky-atc__img { display: none; }
	.ox-badge { font-size: .6rem; padding: .3em .55em; }
	.ox-badge--sale { font-size: .82rem; padding: .45em .6em; }
	.ox-savings { font-size: .76rem; }
	.ox-btn { padding-inline: 1.2em; }
}
@media (prefers-reduced-motion: reduce) {
	.ox-hero__img { animation: none; }
	.ox-cat__img, .woocommerce ul.products li.product img, .ox-sticky-atc, .ox-hero__dot { transition: none; }
}

/* ---------------------------------------------------------------- Aviso +18 */
/* Umbral del Reino de Eros: sin caja; el templo en oro muy tenue al fondo y el contenido centrado sobre ink. */
.ox-age { position: relative; display: grid; place-items: center; min-height: 72vh; padding: 3rem 1.25rem; overflow: hidden; isolation: isolate; }
.ox-age__temple { position: absolute; z-index: -1; width: min(760px, 120%); height: auto; color: var(--ox-gold, #c9a24a); opacity: .08; }
.ox-age__box { max-width: 38rem; text-align: center; }
.ox-age__mark { margin: 0 0 1.4rem; color: var(--ox-gold-light, #e8cf8a); font: 600 1.6rem/1 var(--ox-serif, Georgia, serif); }
.ox-age__title { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); }
.ox-age__greca { width: 140px; margin: 1rem auto 1.4rem; }
.ox-age__text { max-width: 40ch; margin: 0 auto 2rem; color: var(--ox-muted, #a39b8b); }
.ox-age__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.ox-age__note { margin: 1.6rem 0 0; color: var(--ox-muted, #a39b8b); font-size: .8rem; }

/* ---------------------------------------------------------------- Talla y color como botones
   shop.js los crea desde los <select> de WooCommerce, que siguen mandando (ocultos): mismo flujo y mismos eventos. */
.ox-swatches { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .1rem; }
.ox-swatch { min-width: 36px; min-height: 34px; padding: 0 .55rem; border: 1px solid rgba(245, 239, 227, .28); background: transparent; color: var(--ox-ivory, #f5efe3); font: 600 .78rem/1 var(--ox-sans, system-ui, sans-serif); text-transform: capitalize; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
/* En táctil, zona de 44px (PRODUCT.md) y más separación: el dedo no cubre dos tallas. En escritorio siguen compactas. */
@media (hover: none) { .ox-swatch { min-height: 44px; min-width: 44px; } .ox-swatches { gap: .5rem; } }
.ox-swatch:hover { border-color: var(--ox-gold-light, #e8cf8a); }
.ox-swatch[aria-checked="true"] { border-color: var(--ox-gold, #c9a24a); background: var(--ox-gold, #c9a24a); color: var(--ox-ink, #0b0a08); }
.ox-swatch:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.ox-swatch:focus-visible { outline: 2px solid var(--ox-gold-light, #e8cf8a); outline-offset: 2px; }
/* Oculto pero accesible. Los !important le ganan al "width: 100%" de theme.css y al "min-width: 75%" de WooCommerce: sin ellos
   el select invisible medía todo el ancho y la ficha tenía scroll horizontal en escritorio. */
.ox-select-hidden { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.woocommerce div.product form.cart .reset_variations { font-size: .78rem; color: var(--ox-muted, #a39b8b); }
/* Debajo del botón, a todo el ancho: el contenedor del botón es flex y si no, el aviso se pega a su derecha. */
.ox-atc-hint { flex-basis: 100%; margin: .6rem 0 0; color: var(--ox-gold-light, #e8cf8a); font-size: .85rem; text-align: center; }

/* ---------------------------------------------------------------- Ornamentos del Olimpo (includes/ornaments.php) */
.ox-orn { display: inline-block; flex: none; color: var(--ox-gold, #c9a24a); }
.ox-wreath { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.ox-wreath .ox-orn--laurel { width: auto; height: 1.6em; }
.ox-wreath__l { transform: scaleX(-1) rotate(-12deg); }
.ox-wreath__r { transform: rotate(-12deg); }

.ox-badge { display: inline-flex; align-items: center; gap: .3em; }
.ox-badge .ox-orn--rayo { width: 1.15em; height: 1.15em; color: currentColor; }

.ox-hero__band { position: absolute; inset: auto 0 0; z-index: 1; }
/* Sobre ink: cuando la foto llega hasta abajo (a un lado), la greca la corta con una línea limpia en vez de dibujarse encima.
   Doble clase: el `background` abreviado de .ox-meander (theme.css, carga después) reinicia el color. */
.ox-hero .ox-hero__band { background-color: var(--ox-ink, #0b0a08); }

.ox-cat__god { order: -1; margin-bottom: .35rem; color: var(--ox-gold-light, #e8cf8a); font: 500 .74rem/1.2 var(--ox-serif, Georgia, serif); letter-spacing: .08em; opacity: .9; }

/* Banda entre dos líneas doradas sobre ink (sin caja): el templo y el texto respiran. */
/* Hueco ancho entre columnas: el edificio 3D se proyecta fuera de su caja al orbitar y no debe acercarse al texto. */
.ox-temple { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 9vw, 8rem); padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem); border-block: 1px solid rgba(201, 162, 74, .3); }
/* Templo 3D de alambre: fachada frontal (la que se dibuja), fachada trasera a -d, dos laterales de columnas girados 90°, techo y piso
   girados -90° a la altura del entablamento y de la base, y la cumbrera uniendo los dos frontones. --w lo pone theme.js en px (ancho real);
   la profundidad es el 70% del frente. El rig orbita solo (±16°); la escena se inclina con el puntero (--rx/--ry) y se acerca con el scroll (--p). */
.ox-temple { perspective: 1200px; }
.ox-temple__scene { --w: 400px; --h: calc(var(--w) * .58); --d: calc(var(--w) * .7); position: relative; width: 100%; max-width: 400px; aspect-ratio: 200 / 116; justify-self: center; color: var(--ox-gold, #c9a24a); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(.92 + var(--p, 1) * .08)); transition: transform .35s ease-out, color 1.2s ease-out 1.6s; }
.ox-reveal .ox-temple:not(.is-in) .ox-temple__scene { color: var(--ox-gold-deep, #9a7526); }
.ox-temple__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-12deg); }
.ox-reveal .ox-temple.is-in .ox-temple__rig { animation: ox-orbit 18s ease-in-out infinite alternate; }
@keyframes ox-orbit { from { transform: rotateX(7deg) rotateY(-13deg); } to { transform: rotateX(9deg) rotateY(13deg); } }
.ox-temple__face, .ox-temple__side, .ox-temple__roof, .ox-temple__floor, .ox-temple__ridge { position: absolute; display: block; color: inherit; }
.ox-temple__face { inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Firefox (158) pinta la fachada sin transform fuera de la escena, arriba a la izquierda: con un plano 3D propio queda en su sitio. */
.ox-temple__face--front { transform: translateZ(0); }
/* Caras sólidas: el relleno ink (ox-orn__fill) tapa lo que hay detrás; las caras lejanas van más apagadas para dar profundidad. */
.ox-temple .ox-orn__fill { fill: var(--ox-ink, #0b0a08); transition: opacity 1s ease-out 1.6s; }
.ox-temple__face--back { transform: translateZ(calc(-1 * var(--d))); opacity: .55; }
.ox-temple__side { top: 0; width: var(--d); height: var(--h); transform-origin: 0 50%; transform: rotateY(90deg); opacity: .8; }
.ox-temple__side--l { left: 0; }
.ox-temple__side--r { left: 100%; }
.ox-temple__roof, .ox-temple__floor { left: 0; box-sizing: border-box; width: 100%; height: var(--d); border: 1px solid rgba(201, 162, 74, .45); background: var(--ox-ink, #0b0a08); transform-origin: 50% 0; transform: rotateX(-90deg); }
.ox-temple__roof { top: calc(var(--h) * .31); }
/* El piso lleva la luz: un resplandor dorado suave que se apaga antes de sus bordes (sin recortes duros) y sigue al puntero en x. */
.ox-temple__floor { top: calc(var(--h) * .965); border-color: rgba(201, 162, 74, .3); background: radial-gradient(ellipse 40% 45% at var(--mx, 50%) 45%, rgba(201, 162, 74, .6), rgba(201, 162, 74, .15) 55%, transparent 100%), var(--ox-ink, #0b0a08); }
.ox-temple__ridge { top: calc(var(--h) * .052); left: 50%; width: 1px; height: var(--d); background: currentColor; opacity: .8; transform-origin: 50% 0; transform: rotateX(-90deg); }
/* Entrada: la fachada frontal se dibuja trazo a trazo (base, columnas de izquierda a derecha, entablamento, frontón) y después aparece el resto
   del edificio. Solo bajo html.ox-reveal (functions.php): sin JS, en el editor de Elementor o con movimiento reducido todo se ve desde el inicio. */
.ox-reveal .ox-temple .ox-temple__face--front path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1); }
.ox-reveal .ox-temple.is-in .ox-temple__face--front path { stroke-dashoffset: 0; }
.ox-temple__face--front path:nth-child(10) { transition-delay: 0s; }
.ox-temple__face--front path:nth-child(4) { transition-delay: .15s; }
.ox-temple__face--front path:nth-child(5) { transition-delay: .3s; }
.ox-temple__face--front path:nth-child(6) { transition-delay: .45s; }
.ox-temple__face--front path:nth-child(7) { transition-delay: .6s; }
.ox-temple__face--front path:nth-child(8) { transition-delay: .75s; }
.ox-temple__face--front path:nth-child(9) { transition-delay: .9s; }
.ox-temple__face--front path:nth-child(3) { transition-delay: 1.1s; }
.ox-temple__face--front path:nth-child(2) { transition-delay: 1.35s; }
.ox-temple__face--front path:nth-child(1) { transition-delay: 1.5s; }
.ox-temple :is(.ox-temple__face--back, .ox-temple__side, .ox-temple__roof, .ox-temple__floor, .ox-temple__ridge) { transition: opacity 1.4s ease-out 1.7s; }
.ox-reveal .ox-temple:not(.is-in) :is(.ox-temple__face--back, .ox-temple__side, .ox-temple__roof, .ox-temple__floor, .ox-temple__ridge, .ox-orn__fill) { opacity: 0; }
.ox-reveal .ox-temple .ox-orn--laurel > path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) .7s; }
.ox-reveal .ox-temple .ox-orn--laurel g { opacity: 0; transition: opacity .8s ease-out 1.2s; }
.ox-reveal .ox-temple.is-in .ox-orn--laurel > path { stroke-dashoffset: 0; }
.ox-reveal .ox-temple.is-in .ox-orn--laurel g { opacity: 1; }
.ox-temple :is(.ox-temple__title, .ox-temple__text, .ox-temple__motto) { transition: opacity .7s ease-out, translate .9s cubic-bezier(.2, .7, .2, 1); }
.ox-temple__body .ox-btn { transition: opacity .7s ease-out .45s, translate .9s cubic-bezier(.2, .7, .2, 1) .45s, background-color .35s, color .35s, box-shadow .35s; }
.ox-temple__text { transition-delay: .15s; }
.ox-temple__motto { transition-delay: .3s; }
.ox-reveal .ox-temple:not(.is-in) :is(.ox-temple__title, .ox-temple__text, .ox-temple__motto, .ox-temple__body .ox-btn) { opacity: 0; translate: 0 14px; }

/* ---------------------------------------------------------------- Entradas al hacer scroll (portada)
   Mismo mecanismo que el templo (html.ox-reveal + .is-in por bloque; theme.js escalona a los hijos con transition-delay).
   Cada bloque tiene su gesto: el título sube y la greca se dibuja de izquierda a derecha; los productos suben; los reinos se
   descubren de arriba abajo; la franja de confianza aparece. Una sola vez por visita. */
.ox-section-title { transition: opacity .6s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.ox-section-title + .ox-greca { transition: clip-path 1s cubic-bezier(.2, .7, .2, 1) .25s; }
.ox-products .ox-link { transition: opacity .6s ease-out .5s; }
.ox-products li.product { transition: opacity .6s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.ox-cats .ox-cat { transition: clip-path .9s cubic-bezier(.2, .7, .2, 1); }
.ox-trust__item { transition: opacity .6s ease-out, translate .7s cubic-bezier(.2, .7, .2, 1); }
.ox-reveal :is(.ox-products, .ox-cats):not(.is-in) .ox-section-title { opacity: 0; translate: 0 10px; }
.ox-reveal :is(.ox-products, .ox-cats):not(.is-in) .ox-section-title + .ox-greca { clip-path: inset(0 100% 0 0); }
.ox-reveal .ox-products:not(.is-in) .ox-link { opacity: 0; }
.ox-reveal .ox-products:not(.is-in) li.product { opacity: 0; translate: 0 16px; }
.ox-reveal .ox-cats:not(.is-in) .ox-cat { clip-path: inset(0 0 100% 0); }
.ox-reveal .ox-trust:not(.is-in) .ox-trust__item { opacity: 0; translate: 0 8px; }
.ox-temple__title { margin: 0; color: var(--ox-ivory, #f5efe3); font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--ox-serif, Georgia, serif); letter-spacing: .03em; text-wrap: balance; }
.ox-temple__text { max-width: 48ch; margin: 1.2rem 0 0; color: var(--ox-muted, #a39b8b); font-size: 1.05rem; line-height: 1.7; }
.ox-temple__motto { margin: 1.6rem 0 2rem; color: var(--ox-gold, #c9a24a); font: 500 1.05rem/1 var(--ox-serif, Georgia, serif); letter-spacing: .1em; }
@media (max-width: 760px) {
	.ox-temple { grid-template-columns: 1fr; text-align: center; }
	.ox-temple__scene { max-width: 260px; }
	.ox-temple__text { margin-inline: auto; }
}

.ox-age__mark .ox-orn--laurel { height: 2.2em; }
.ox-temple__motto .ox-orn--laurel { height: 2.1em; }

/* ---------------------------------------------------------------- Mientras carga la foto
   El templo en oro tenue y un brillo que lo recorre: se ve en el fondo del <img> hasta que la foto lo tapa.
   theme.js marca .is-loaded al cargar y detiene la animación (no sigue pintando detrás de la foto). */
.woocommerce ul.products li.product img:not(.ox-hover-img), .ox-cat__img, .woocommerce div.product div.images img {
	background-color: var(--ox-char, #16130f);
	background-image: linear-gradient(105deg, transparent 35%, rgba(232, 207, 138, .1) 50%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 208 124'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='2' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M8 36 100 6l92 30z'/%3E%3Cpath d='M30 31 100 13l70 18'/%3E%3Cpath d='M8 36h184v9H8zM12 49h176'/%3E%3Cpath d='M19 52h14M21 52v50M31 52v50M26 56v42M19 102h14'/%3E%3Cpath d='M48 52h14M50 52v50M60 52v50M55 56v42M48 102h14'/%3E%3Cpath d='M77 52h14M79 52v50M89 52v50M84 56v42M77 102h14'/%3E%3Cpath d='M109 52h14M111 52v50M121 52v50M116 56v42M109 102h14'/%3E%3Cpath d='M138 52h14M140 52v50M150 52v50M145 56v42M138 102h14'/%3E%3Cpath d='M167 52h14M169 52v50M179 52v50M174 56v42M167 102h14'/%3E%3Cpath d='M4 106h192M0 112h200'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: -150% 0, center;
	background-size: 250% 100%, 50% auto;
	animation: ox-shimmer 1.8s ease-in-out infinite;
}
.woocommerce ul.products li.product img.is-loaded, .ox-cat__img.is-loaded, .woocommerce div.product div.images img.is-loaded { animation: none; background-image: none; }
@keyframes ox-shimmer { to { background-position: 250% 0, center; } }
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product img, .ox-cat__img, .woocommerce div.product div.images img { animation: none; }
}
.ox-cat__img--empty { animation: none; }

/* ---------------------------------------------------------------- Preguntas frecuentes */
/* En su página va dentro de la columna de lectura del tema (.ox-prose); centrada por si se usa en Elementor. */
.ox-faq { max-width: 760px; margin-inline: auto; }
/* Contacto: filas sin caja separadas por línea dorada, como los pliegues de la FAQ; etiqueta en muted, canal grande en gold-light. */
.ox-contact { margin: 2rem 0; }
.ox-contact__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .3rem 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--ox-line, rgba(201, 162, 74, .22)); }
.ox-contact dt { padding-top: .45rem; color: var(--ox-muted, #a39b8b); font: 700 .68rem/1 var(--ox-sans); letter-spacing: .16em; text-transform: uppercase; }
.ox-contact dd { margin: 0; }
.ox-contact dd a { color: var(--ox-gold-light, #e8cf8a); font-size: 1.15rem; text-decoration: none; }
.ox-contact dd a:hover { text-decoration: underline; }
.ox-contact__note { display: block; margin-top: .25rem; color: var(--ox-muted, #a39b8b); font-size: .88rem; }
@media (max-width: 600px) { .ox-contact__row { grid-template-columns: 1fr; } .ox-contact dt { padding-top: 0; } }
.ox-faq__group { font: 700 .68rem/1 var(--ox-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ox-muted); margin: 1.8rem 0 .4rem; }

/* ---------------------------------------------------------------- Favoritos (includes/favorites.php, favorites.js)
   Tarjeta: corazón solo sobre la esquina de la foto, sin cuadro; la sombra lo hace legible sobre fotos claras. Marcado = relleno oro.
   El número solo aparece desde 5 favoritos reales. Ficha: fila de texto bajo el botón de compra. */
.ox-fav { position: absolute; top: .7rem; right: .7rem; z-index: 3; display: inline-flex; font-family: inherit; align-items: center; justify-content: center; gap: .3rem; min-width: 40px; height: 40px; padding: 0 .55rem; border: 0; background: none; color: var(--ox-gold-light, #e8cf8a); filter: drop-shadow(0 0 1px rgba(11, 10, 8, .9)) drop-shadow(0 1px 3px rgba(11, 10, 8, .5)); cursor: pointer; transition: color .2s; }
.ox-fav:hover { color: var(--ox-ivory, #f5efe3); }
.ox-fav .ox-ico { width: 20px; height: 20px; stroke: currentColor; transition: fill .2s; }
.ox-fav[aria-pressed="true"] { color: var(--ox-gold, #c9a24a); }
.ox-fav[aria-pressed="true"] .ox-ico { fill: currentColor; }
.ox-fav__count { color: var(--ox-ivory, #f5efe3); font: 700 .72rem/1 var(--ox-sans, system-ui, sans-serif); }
.ox-fav.is-pop .ox-ico { animation: ox-fav-pop .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes ox-fav-pop { 40% { transform: scale(1.3); } }
@media (hover: none) { .ox-fav { min-width: 44px; height: 44px; } }
.ox-fav-row { margin: .9rem 0 0; }
.ox-fav.ox-fav--wide { position: static; height: auto; min-height: 44px; padding: 0; background: none; filter: none; color: var(--ox-ivory, #f5efe3); gap: .6rem; font-size: .92rem; }
.ox-fav--wide .ox-ico { color: var(--ox-gold, #c9a24a); }
.ox-fav--wide:hover { background: none; color: var(--ox-gold-light, #e8cf8a); }
.ox-fav--wide .ox-fav__count { color: var(--ox-muted, #a39b8b); font: 400 .88rem/1.2 var(--ox-sans, system-ui, sans-serif); }
.ox-fav--wide .ox-fav__count::before { content: "· "; }
.ox-fav-total[hidden] { display: none; }
.ox-nav__foot-link .ox-fav-total { margin-left: auto; color: var(--ox-gold-light, #e8cf8a); font-weight: 700; }
/* En celular el header no tiene lugar para un cuarto ícono: Favoritos va en el menú. */
@media (max-width: 600px) { .ox-header .ox-fav-link { display: none; } }
.ox-favs__empty { display: grid; justify-items: start; gap: 1.2rem; padding: 1rem 0 2rem; }
.ox-favs__empty[hidden] { display: none; }
/* La página de favoritos va al ancho de la tienda (no es texto) y lleva la greca bajo el título, como las demás. */
.ox-main > article:has(.ox-favs) > .ox-page-title::after { content: ""; display: block; width: 140px; height: 14px; margin-top: 1rem; background: var(--ox-meander) repeat-x left center / 28px 14px; }
.ox-favs__empty p { margin: 0; color: var(--ox-muted, #a39b8b); }
@media (prefers-reduced-motion: reduce) { .ox-fav.is-pop .ox-ico { animation: none; } }

/* ---------------------------------------------------------------- Popups (includes/popups.php)
   Solo la imagen, sin marco; la X sin cuadro (sombra para leerse sobre la foto). Los topes van en la imagen, no en el <dialog>:
   así el ancho del diálogo sigue a la imagen ya achicada por el alto y la X queda sobre su esquina. */
.ox-popup { max-width: none; max-height: none; padding: 0; border: 0; background: none; overflow: visible; }
.ox-popup:focus-visible { outline: none; } /* el foco cae en el diálogo al abrir; el anillo es para la X, con Tab */
.ox-popup::backdrop { background: rgba(11, 10, 8, .78); }
.ox-popup[open] { animation: ox-popup-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes ox-popup-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ox-popup a { display: block; }
.ox-popup__img { display: block; width: auto; height: auto; max-width: min(92vw, 520px); max-height: 85dvh; }
.ox-popup .ox-popup__close { position: absolute; top: .3rem; right: .3rem; z-index: 1; filter: drop-shadow(0 0 1px rgba(11, 10, 8, .9)) drop-shadow(0 1px 3px rgba(11, 10, 8, .5)); }
html:has(.ox-popup[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ox-popup[open] { animation: none; } }

/* ---------------------------------------------------------------- Agotado (woo.php)
   Tarjeta: foto en gris y apagada y precio apagado, para que en la grilla se lea de un vistazo (la insignia sola no bastaba).
   Ficha: aviso en lugar del formulario. WooCommerce ya pone la clase outofstock en la tarjeta y en la ficha. */
.woocommerce ul.products li.product.outofstock img { filter: grayscale(1); }
.woocommerce ul.products li.product.outofstock img:not(.ox-hover-img) { opacity: .55; } /* la de hover tiene su propia opacidad (0 hasta el mouse) */
.woocommerce ul.products li.product.outofstock .price .amount, .woocommerce div.product.outofstock p.price .amount { color: var(--ox-muted, #a39b8b); }
.ox-soldout { margin: 0 0 .4rem; padding: 1.2rem 0 0; border-top: 1px solid var(--ox-line, rgba(201, 162, 74, .22)); }
.ox-soldout__label { margin: 0 0 .55rem; color: var(--ox-ivory, #f5efe3); font: 700 .82rem/1 var(--ox-sans, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.ox-soldout__text { max-width: 34rem; margin: 0 0 1.2rem; color: var(--ox-muted, #a39b8b); }