/* ZionProducts — estilos del front-end público */

@font-face {
	font-family: 'ZionInter';
	src: url('../../assets/fonts/inter-latin-variable.woff2') format('woff2-variations'), url('../../assets/fonts/inter-latin-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/*
 * Variables en :root (además de en los contenedores) porque elementos como
 * el lightbox de zoom se insertan como hijos directos de <body> y no
 * heredarían las custom properties si solo vivieran en .zion-catalog/etc.
 */
:root {
	--zion-primary: #16a34a;
	--zion-primary-dark: #0f7a37;
	--zion-ink: #0f172a;
	--zion-muted: #64748b;
	--zion-border: #e2e8f0;
	--zion-bg: #f8fafc;
	--zion-danger: #dc2626;
	--zion-accent: #0190F9;
	--zion-panel-bg: #F2FBFE;
	--zion-radius: 12px;
	--zion-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.zion-catalog,
.zion-product,
.zion-archive {
	font-family: 'ZionInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--zion-ink);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.zion-catalog *,
.zion-product *,
.zion-archive * {
	box-sizing: border-box;
}

.zion-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: var(--zion-primary);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease, transform .05s ease;
}
.zion-btn:hover { background: var(--zion-primary-dark); color: #fff; }
.zion-btn:focus-visible { outline: 2px solid var(--zion-primary-dark); outline-offset: 2px; }
.zion-btn--outline { background: #fff; color: var(--zion-ink); border-color: var(--zion-border); }
.zion-btn--outline:hover { background: var(--zion-bg); color: var(--zion-ink); }
.zion-btn--text { background: transparent; color: var(--zion-muted); padding: 6px 10px; }
.zion-btn--text:hover { color: var(--zion-ink); background: transparent; }
.zion-btn--secondary { background: var(--zion-ink); }
.zion-btn--secondary:hover { background: #1e293b; }
.zion-btn--whatsapp {
	background: #61CE70; margin-top: 20px; margin-bottom: 20px; padding: 16px 22px; font-size: 13px; font-weight: 400;
	animation: zion-whatsapp-pulse 2.2s ease-out infinite;
}
.zion-btn--whatsapp:hover { background: var(--zion-accent); animation-play-state: paused; }
.zion-btn--whatsapp img { filter: invert(1); }
@keyframes zion-whatsapp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(97, 206, 112, .55); }
	70% { box-shadow: 0 0 0 12px rgba(97, 206, 112, 0); }
	100% { box-shadow: 0 0 0 0 rgba(97, 206, 112, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.zion-btn--whatsapp { animation: none; }
}

/* Refuerzo de especificidad: reset.css del tema hello-elementor trae
   "button, [type=button] { border:1px solid #c36; color:#c36; }" con la
   misma especificidad que .zion-btn/.zion-chip/.zion-pagination__link, y
   como carga después en <head>, ganaba el empate y pintaba bordes/texto
   rosa en los botones reales (no en los <a> con estas mismas clases). */
button.zion-btn { border-color: transparent; color: #fff; }
button.zion-btn.zion-btn--outline { border-color: var(--zion-border); color: var(--zion-ink); }
button.zion-btn.zion-btn--text { border-color: transparent; color: var(--zion-muted); }
/* El tema también trae "button:hover { background-color:#c36; }" para el hover. */
button.zion-btn:hover, button.zion-btn:focus { background: var(--zion-primary-dark); color: #fff; }
button.zion-btn.zion-btn--outline:hover, button.zion-btn.zion-btn--outline:focus { background: var(--zion-bg); color: var(--zion-ink); }
button.zion-btn.zion-btn--text:hover, button.zion-btn.zion-btn--text:focus { background: transparent; color: var(--zion-ink); }

.zion-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--zion-border);
	border-radius: 10px;
	font-size: 14px;
	background: #fff;
	color: var(--zion-ink);
}
.zion-input:focus-visible { outline: 2px solid var(--zion-primary); outline-offset: 1px; }
.zion-input--sm { max-width: 120px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* Toolbar */
.zion-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}
.zion-catalog__search { flex: 1 1 260px; }
.zion-catalog__sort { flex: 0 0 auto; }

/* Chips / filtros */
.zion-filters__group { margin-bottom: 18px; }
.zion-filters__title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--zion-muted); margin: 0 0 8px; }
.zion-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.zion-chip { border-color: var(--zion-border); color: var(--zion-ink); }
button.zion-chip:hover, button.zion-chip:focus { background: var(--zion-bg); color: var(--zion-ink); }
.zion-chip {
	border: 1px solid var(--zion-border);
	background: #fff;
	color: var(--zion-ink);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}
.zion-chip[aria-pressed="true"] { background: var(--zion-ink); color: #fff; border-color: var(--zion-ink); }
.zion-chip:focus-visible { outline: 2px solid var(--zion-primary); outline-offset: 2px; }
.zion-filters__price { display: flex; align-items: center; gap: 8px; }

/* Slider de precio: dos <input type="range"> superpuestos (transparentes,
   solo el "thumb" es clicable) sobre una barra decorativa + un relleno que
   marca visualmente el rango seleccionado. */
.zion-price-slider { position: relative; height: 24px; margin-top: 14px; }
.zion-price-slider__track {
	position: absolute; top: 50%; left: 0; right: 0; height: 4px;
	transform: translateY(-50%);
	background: var(--zion-border); border-radius: 999px;
}
.zion-price-slider__range {
	position: absolute; top: 50%; height: 4px;
	transform: translateY(-50%);
	background: var(--zion-ink); border-radius: 999px;
}
.zion-price-slider__thumb {
	position: absolute; top: 50%; left: 0;
	width: 100%; height: 18px;
	margin: 0; transform: translateY(-50%);
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}
.zion-price-slider__thumb::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 18px; }
.zion-price-slider__thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--zion-ink);
	cursor: pointer;
	box-shadow: var(--zion-shadow);
}
.zion-price-slider__thumb::-moz-range-track { background: transparent; height: 18px; border: none; }
.zion-price-slider__thumb::-moz-range-thumb {
	pointer-events: auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--zion-ink);
	cursor: pointer;
	box-shadow: var(--zion-shadow);
}
.zion-price-slider__thumb:focus { outline: none; z-index: 2; }
.zion-price-slider__thumb:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(15, 23, 42, .15); }
.zion-price-slider__thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(15, 23, 42, .15); }

/* Botón "Ver más filtros": oculto por defecto (desktop muestra todos los
   grupos siempre); en móvil se ocultan los grupos secundarios (marca, grado,
   capacidad, batería) y este botón los revela. Categoría/Condición/Precio
   quedan siempre visibles. */
.zion-filters__more-toggle { display: none; }
@media (max-width: 900px) {
	.zion-filters__group--extra { display: none; }
	.zion-filters.is-expanded .zion-filters__group--extra { display: block; }
	.zion-filters__more-toggle {
		display: flex; align-items: center; justify-content: center; gap: 6px;
		width: 100%; margin: 4px 0 10px;
		border: 1px solid var(--zion-border); background: #fff; color: var(--zion-ink);
		border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
	}
	button.zion-filters__more-toggle { border-color: var(--zion-border); color: var(--zion-ink); }
	button.zion-filters__more-toggle:hover, button.zion-filters__more-toggle:focus { background: var(--zion-bg); color: var(--zion-ink); }
}

.zion-catalog__filters-panel {
	border: 1px solid var(--zion-border);
	border-radius: var(--zion-radius);
	padding: 20px;
	margin-bottom: 20px;
	background: #fff;
}
.zion-catalog__filters-panel[hidden] { display: none; }
.zion-filters__actions { border-top: 1px solid var(--zion-border); padding-top: 12px; margin-top: 4px; }

.zion-catalog__active-filters {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 12px;
}
.zion-catalog__active-filters:empty { display: none; }
.zion-active-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--zion-bg); border: 1px solid var(--zion-border);
	border-radius: 999px; padding: 4px 10px 4px 12px; font-size: 13px;
}
.zion-active-chip button {
	background: none; border: none; cursor: pointer; color: var(--zion-muted);
	font-size: 15px; line-height: 1; padding: 0;
}

/* Grid */
.zion-catalog__grid {
	--zion-cols-desktop: 3;
	display: grid;
	grid-template-columns: repeat(var(--zion-cols-desktop), minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 1024px) {
	.zion-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.zion-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.zion-related-card { padding: 12px; border-radius: 14px; }
	.zion-related-card__image-link { padding: 10px; margin-bottom: 10px; }
	.zion-related-card__title { font-size: 13px; margin-bottom: 8px; }
	.zion-related-card__meta { gap: 6px; margin-bottom: 10px; }
	.zion-related-card__meta-item { font-size: 11px; }
	.zion-related-card__price {
		margin-bottom: 12px; gap: 2px;
		flex-direction: column-reverse; align-items: flex-start;
	}
	.zion-related-card__price-sale,
	.zion-related-card__price-regular--only { font-size: 15px; }
	.zion-related-card__price-regular { font-size: 11px; }
	.zion-related-card__cta {
		padding: 9px 10px; font-size: 12px; gap: 4px;
		width: 100%; max-width: 100%; justify-content: center;
	}
}

/* Skeleton */
.zion-skeleton-card { border: 1px solid var(--zion-border); border-radius: var(--zion-radius); overflow: hidden; }
.zion-skeleton-card__image { aspect-ratio: 1/1; background: linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%); background-size: 400% 100%; animation: zion-shimmer 1.4s ease infinite; }
.zion-skeleton-card__line { height: 12px; margin: 14px 16px; border-radius: 6px; background: linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%); background-size: 400% 100%; animation: zion-shimmer 1.4s ease infinite; }
.zion-skeleton-card__line--sm { width: 50%; }
@keyframes zion-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Empty state */
.zion-empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--zion-muted); }
.zion-empty-state__message { margin-bottom: 16px; font-size: 16px; }

/* Pagination */
.zion-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; margin-bottom: 120px; }
.zion-pagination__link {
	border: 1px solid var(--zion-border); background: #fff; border-radius: 8px;
	padding: 8px 12px; font-size: 14px; cursor: pointer; min-width: 40px; color: var(--zion-ink);
}
button.zion-pagination__link { border-color: var(--zion-border); color: var(--zion-ink); }
button.zion-pagination__link:hover, button.zion-pagination__link:focus { background: var(--zion-bg); color: var(--zion-ink); }
.zion-pagination__link.is-current { background: var(--zion-ink); color: #fff; border-color: var(--zion-ink); }
button.zion-pagination__link.is-current { border-color: var(--zion-ink); color: #fff; }
.zion-pagination__link:disabled { opacity: .4; cursor: not-allowed; }
.zion-pagination__ellipsis { padding: 8px 4px; color: var(--zion-muted); }

/* Catálogo organizado con sidebar de filtros siempre visible */
.zion-catalog--sidebar .zion-catalog__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.zion-catalog--sidebar .zion-catalog__sidebar {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.zion-catalog__filters-panel--static {
	border: 1px solid var(--zion-border);
	border-radius: var(--zion-radius);
	padding: 18px;
	background: #fff;
}
.zion-catalog__toolbar--content { justify-content: space-between; }
@media (max-width: 900px) {
	.zion-catalog--sidebar .zion-catalog__layout { grid-template-columns: 1fr; }
	.zion-catalog--sidebar .zion-catalog__sidebar { position: static; }
}

/* Archive header */
.zion-archive { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.zion-archive .zion-catalog { padding-bottom: 40px; }
.zion-archive__header { text-align: center; margin-bottom: 32px; }
.zion-archive__image { max-height: 140px; border-radius: var(--zion-radius); margin-bottom: 12px; }
.zion-archive__image--logo { max-height: 90px; object-fit: contain; }
.zion-archive__title { font-size: 28px; margin: 0 0 6px; }
.zion-archive__description { color: var(--zion-muted); max-width: 640px; margin: 0 auto; }

/* Single product */
.zion-product { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.zion-product__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .zion-product__layout { grid-template-columns: 1fr; } }
.zion-product__main-image-wrap { position: relative; aspect-ratio: 1/1; border-radius: var(--zion-radius); overflow: hidden; background: var(--zion-bg); border: 1px solid var(--zion-border); }
.zion-product__sale-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--zion-danger); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
	text-align: center; line-height: 1.1; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.zion-product__main-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.zion-product__main-image-wrap:hover .zion-product__main-image { transform: scale(1.12); }
@media (hover: none) { .zion-product__main-image-wrap:hover .zion-product__main-image { transform: none; } }
.zion-product__main-image--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#eef2f7,#e2e8f0); }
/* button.zion-product__zoom-trigger (no solo la clase) para ganarle en
   especificidad a "button { border: 1px solid #c36; }" del reset.css del
   tema hello-elementor, que si no, gana el empate y pinta el borde rosa. */
button.zion-product__zoom-trigger {
	display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in;
}
/* El tema también trae "button:hover, button:focus { background-color:#c36; }" — se refuerza igual. */
button.zion-product__zoom-trigger:hover, button.zion-product__zoom-trigger:focus { background: none; }
.zion-product__zoom-trigger:focus-visible { outline: 2px solid var(--zion-primary); outline-offset: 2px; }
.zion-lightbox {
	position: fixed; inset: 0; background: rgba(15, 23, 42, .9); z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.zion-lightbox__image { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.zion-lightbox__close {
	position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.15); color: #fff;
	border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer;
}
.zion-product__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
button.zion-product__thumb { width: 100px; height: 100px; border-radius: 10px; overflow: hidden; border: 1px solid var(--zion-border); padding: 0; cursor: pointer; background: #fff; }
button.zion-product__thumb:hover, button.zion-product__thumb:focus { background: #fff; }
button.zion-product__thumb.is-active { border-color: #4b5563; border-width: 2px; }
.zion-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Panel de información: fondo tintado distinto de la columna de imagen */
.zion-product__info {
	background: var(--zion-panel-bg); border-radius: var(--zion-radius); padding: 28px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.zion-product__title { font-size: 29px; font-weight: 600; text-transform: uppercase; color: #000; margin: 0 0 16px; line-height: 1.25; }

/* Fila de "píldoras": grado/condición + atributos, fondo negro y texto blanco */
.zion-product__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.zion-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: #000; color: #fff; padding: 7px 13px; border-radius: 999px;
	font-size: 12px; font-weight: 500; text-transform: capitalize;
}
.zion-pill svg { flex-shrink: 0; width: 14px; height: 14px; }

.zion-product__section-title { font-size: 16px; font-weight: 600; color: #000; margin: 0 0 10px; }
.zion-product__description { color: var(--zion-ink); font-size: 13px; font-weight: 400; margin: 0 0 18px; }

.zion-product__grade-badge { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid var(--zion-accent); display: block; margin-bottom: 14px; }

.zion-product__price { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 12px; margin-bottom: 18px; max-width: 100%; }
.zion-product__price-regular { color: #7A7A7A; font-weight: 500; text-decoration: line-through; font-size: 16px; white-space: nowrap; }
.zion-product__price-regular--only { color: var(--zion-accent); text-decoration: none; font-size: 19px; font-weight: 700; white-space: nowrap; }
.zion-product__price-sale { color: var(--zion-danger); font-size: 19px; font-weight: 700; white-space: nowrap; }

/* "Sobre este Grado": descripción + lista de características del grado seleccionado */
.zion-grade-info { margin: 0 0 18px; }
.zion-grade-info__accent { color: var(--zion-accent); }
.zion-grade-info__body p { margin: 0 0 10px; color: var(--zion-ink); line-height: 1.5; }
.zion-grade-info__body p:last-child { margin-bottom: 0; }
.zion-grade-info__list { margin: 0 0 10px; padding: 0; list-style: none; }
.zion-grade-info__list:last-child { margin-bottom: 0; }
.zion-grade-info__list li { position: relative; padding-left: 18px; color: var(--zion-ink); line-height: 1.5; }
.zion-grade-info__list li::before { content: '•'; position: absolute; left: 0; color: var(--zion-ink); font-weight: 700; }
/* El párrafo que sigue a la lista (ej. "Ideal para quienes...") se resalta como cierre en cursiva */
.zion-grade-info__list + p { font-style: italic; color: var(--zion-muted); }

.zion-grade-info__more { font-size: 13px; font-style: italic; color: var(--zion-accent); margin: 10px 0 0; }

/* "Información adicional": resumen Marca/Categoría/Estado + compartir */
.zion-product__additional { margin-top: 4px; padding-top: 18px; border-top: 1px solid #D6D6D6; }
.zion-product__additional .zion-product__section-title { font-size: 14px; font-weight: 500; }
.zion-product__meta-list { margin: 0 0 16px; }
.zion-product__meta-row { display: flex; gap: 6px; padding: 3px 0; font-size: 13px; }
.zion-product__meta-row dt { color: #070707; font-size: 13px; font-weight: 700; margin: 0; }
.zion-product__meta-row dt::after { content: ':'; }
.zion-product__meta-row dd { color: #070707; margin: 0; }

/* Compartir: solo ícono, sin fondo ni borde (estilo "minimal") */
.zion-share { display: flex; align-items: center; gap: 10px; }
.zion-share__label { font-size: 13px; color: var(--zion-muted); }
.zion-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0;
	color: #070707; background: none; transition: color .15s ease;
}
.zion-share__btn:hover { color: var(--zion-accent); }
.zion-share__btn svg { width: 16px; height: 16px; }
.zion-share__btn img { width: 16px; height: 16px; opacity: .85; }
.zion-share__btn:hover img { opacity: 1; }

/* "También puede interesarte" */
.zion-related { margin-top: 60px; }
@media (min-width: 641px) {
	.zion-related { padding-bottom: 50px; }
}
.zion-related__title { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.zion-related__accent { color: var(--zion-accent); }
.zion-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .zion-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Desktop/tablet: aunque se consulten más productos relacionados (para que
   el slider móvil tenga variedad), solo se muestran 3 en la grilla fija. */
@media (min-width: 641px) {
	.zion-related__grid .zion-related-card:nth-child(n+4) { display: none; }
}

/* Móvil: slider horizontal con scroll-snap en vez de grid — se ven 2 tarjetas
   a la vez y el swipe avanza de una en una (cada tarjeta define su propio
   punto de snap). */
@media (max-width: 640px) {
	.zion-related__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 6px;
		margin: 0 -20px;
		padding-left: 20px;
		padding-right: 20px;
		scrollbar-width: none;
	}
	.zion-related__grid::-webkit-scrollbar { display: none; }
	.zion-related__grid .zion-related-card {
		flex: 0 0 calc(50% - 6px);
		scroll-snap-align: start;
	}
}

.zion-related-card {
	min-width: 0;
	border: 1px solid var(--zion-border); border-radius: 18px; background: #fff;
	padding: 20px; display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zion-related-card__body { min-width: 0; }
/* Solo en dispositivos con hover "real" (mouse); en táctil el :hover se
   queda "pegado" tras el tap/swipe y deforma el borde de la tarjeta,
   sobre todo dentro del slider móvil. */
@media (hover: hover) and (pointer: fine) {
	.zion-related-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,.10); border-color: #d1d5db; }
	.zion-related-card:hover .zion-related-card__image { transform: scale(1.06); }
}
/* Padding fijo para que todas las fotos se vean del mismo tamaño relativo,
   sin importar cuánto "aire" traiga cada imagen de origen. */
.zion-related-card__image-link { display: block; aspect-ratio: 1 / 1; margin-bottom: 16px; padding: 22px; overflow: hidden; border-radius: 12px; }
.zion-related-card__image { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s ease; }
.zion-related-card__image--placeholder { width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(135deg,#eef2f7,#e2e8f0); }
.zion-related-card__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; line-height: 1.35; }
.zion-related-card__title a { color: var(--zion-ink); text-decoration: none; }
.zion-related-card__title a:hover { text-decoration: underline; }
.zion-related-card__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.zion-related-card__meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #070707; font-weight: 400; text-transform: capitalize; }
.zion-related-card__meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.zion-related-card__price { min-width: 0; margin: 0 0 16px; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; max-width: 100%; }
.zion-related-card__price-regular { color: #7A7A7A; text-decoration: line-through; font-size: 12px; font-weight: 500; white-space: nowrap; }
.zion-related-card__price-regular--only { color: var(--zion-accent); text-decoration: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
.zion-related-card__price-sale { color: var(--zion-danger); font-size: 16px; font-weight: 700; white-space: nowrap; }
.zion-related-card__cta {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	background: var(--zion-accent); color: #fff; text-decoration: none;
	padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
	margin-top: auto; transition: background-color .15s ease, color .15s ease;
	white-space: nowrap; flex-shrink: 0;
}
.zion-related-card__cta svg { flex-shrink: 0; }
.zion-related-card__cta:hover { background: #0B2E5C; color: #fff; }