/* ── H2 Shop by occasion · carrusel por ocasión ─────────────────────────────
   Diseño: Figma 127:31 / 137:34, ajustado a la referencia brars.com (26 sep):
   - Pestañas: misma forma que la activa (radio 12); en hover solo un trazo de 2px.
   - Barra inferior: rectángulo radio 12; flechas en chips de 35px con trazo grueso;
     "View All" radio 12 con chip y chevron.
   - Carrusel en loop: siempre 5 productos a la vista en desktop (3 en tablet),
     máximo 7 por ocasión. Posiciones circulares con transform (el JS fija --o por slide).
   Radios (27 sep): 4px contenedores y tarjetas, 8px elementos internos y botones, 4px chips dentro de botones.
   Excepciones elegidas por Liberman: fondo del producto activo 20px; barra inferior 12px (como la referencia).
   Producto activo: vecinos atenuados, pedestal peach y el mismo hover para todos
   (sin forma de fondo desde el 27 sep). Precio en Fraunces, ink, sin decimales si es redondo.
   Tokens: docs/02-spec.md. Prefijo cl-occ. ────────────────────────────────── */
.cl-occ {
	--cl-visible: 5;
	--cl-teal: #1A545C;
	--cl-wine: #4F1731;
	--cl-cream: #F7F1E8;
	--cl-peach: #FFEFE3;
	--cl-muted: #5A514B;
	--cl-ink: #1C1A1B;
	--cl-magenta: #B53570;
	--cl-ease: cubic-bezier(.2, 1, .2, 1);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--cl-teal);
}

.cl-occ .cl-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cl-occ svg { display: block; flex: none; }

/* Pestañas (desktop): misma forma en los tres estados */
.cl-occ__tabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin: 0 0 48px; padding: 0; list-style: none;
}
.cl-occ__tab {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; padding: 13px 22px; border: 2px solid transparent; border-radius: 8px;
	background: transparent; color: var(--cl-wine);
	font: 600 15px/18px "Inter", system-ui, sans-serif; cursor: pointer;
	transition: border-color .6s var(--cl-ease), background-color .6s var(--cl-ease), color .6s var(--cl-ease);
}
.cl-occ__tab svg { width: 18px; height: 18px; }
.cl-occ__tab:hover { border-color: var(--cl-teal); }
.cl-occ__tab[aria-current="true"] { background: var(--cl-teal); border-color: var(--cl-teal); color: var(--cl-cream); }

/* Selector (móvil) */
.cl-occ__select { display: none; position: relative; width: 260px; margin: 0 auto 32px; }
.cl-occ__select select {
	appearance: none; -webkit-appearance: none; width: 100%; height: 52px; margin: 0;
	padding: 0 56px 0 20px; border: 0; border-radius: 8px;
	background: var(--cl-teal); color: var(--cl-cream);
	font: 600 16px/1 "Inter", system-ui, sans-serif; cursor: pointer;
}
.cl-occ__select span {
	position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 4px;
	display: grid; place-items: center; background: var(--cl-cream); color: var(--cl-teal);
	pointer-events: none;
}
.cl-occ__select svg { width: 16px; height: 16px; }
.cl-occ__select svg path { stroke-width: 2.5; }

/* Carrusel en loop */
.cl-occ__viewport { overflow: hidden; touch-action: pan-y; }
.cl-occ__track { display: grid; margin: 0; padding: 8px 0 4px; list-style: none; }
.cl-occ__slide {
	grid-area: 1 / 1; justify-self: center; box-sizing: border-box;
	width: calc(100% / var(--cl-visible)); padding: 0 8px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	transform: translateX(calc(var(--o, 0) * 100%));
	transition: transform .6s var(--cl-ease);
}
.cl-occ__slide[hidden] { display: none; }
.cl-occ__slide.is-far { visibility: hidden; }
.cl-occ__card { display: flex; flex-direction: column; align-items: center; width: 100%; color: inherit; text-decoration: none; border-radius: 8px; }
/* 24 oct: foto completa de la clienta (no recorte) en un marco 3:4, igual para todos los productos. */
.cl-occ__media { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; display: grid; place-items: center; }
.cl-occ__shape { display: none; } /* marcado anterior al 27 sep (por si hay caché) */

/* ── Producto activo (27 sep): varias pistas juntas, no solo el tamaño ──
   1) los vecinos quedan un poco más chicos (0.92) y el activo al 100% (sin opacidad desde el 27 sep, a pedido de Liberman);
   2) un pedestal peach aparece detrás del activo;
   3) todos reaccionan igual al hover (+5%).
   ("View gift" se quitó el 27 sep: la sección invita a conocer y a ir a "View All".) */
.cl-occ__media::before {
	content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 20px; background: var(--cl-peach); /* rosa pálido en la home suave (.cl-soft, style.css) */
	opacity: 0; transform: scale(.9); transition: opacity .5s var(--cl-ease), transform .5s var(--cl-ease);
}
.cl-occ__slide.is-selected .cl-occ__media::before { opacity: 1; transform: scale(1); }
/* La sombra difusa bajo el producto era para el recorte sin fondo; con la foto completa la sombra va en la foto. */
.cl-occ__slide.is-selected { z-index: 1; }
.cl-occ__media img {
	position: relative; z-index: 1; width: 86%; height: 89%; object-fit: cover; border-radius: 12px;
	box-shadow: 0 10px 24px -14px rgba(79, 23, 49, .45);
	transform: scale(.92);
	transition: transform .5s var(--cl-ease);
}
.cl-occ__slide.is-selected .cl-occ__media img { transform: scale(1); }
@media (hover: hover) and (min-width: 769px) {
	.cl-occ__slide.is-selected .cl-occ__card:hover .cl-occ__media img { transform: scale(1.05); }
	.cl-occ__slide:not(.is-selected) .cl-occ__card:hover .cl-occ__media img { transform: scale(.97); }
}
.cl-occ__name {
	margin: 20px 0 0; color: var(--cl-teal);
	font: 600 17px/22px "Inter", system-ui, sans-serif; letter-spacing: .01em; text-transform: uppercase;
}
/* Precio: otro nivel de jerarquía que el nombre (Fraunces, más grande, ink). Sin magenta ni rojo: se leen como "oferta". */
.cl-occ__price {
	margin: 6px 0 0; color: var(--cl-ink);
	font: 600 20px/24px "Fraunces", Georgia, serif; font-variant-numeric: lining-nums tabular-nums;
}
.cl-occ__price .woocommerce-Price-currencySymbol { margin-right: 1px; }
.cl-occ__price del { margin-right: 6px; color: var(--cl-muted); font-size: 16px; font-weight: 400; }
.cl-occ__price ins { text-decoration: none; }
.cl-occ__cta { display: none; } /* "View gift" se quitó el 27 sep; por si queda marcado en caché */
.cl-occ__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.cl-occ__badges li { display: inline-flex; align-items: center; gap: 6px; color: var(--cl-muted); font: 500 13px/16px "Inter", system-ui, sans-serif; }
.cl-occ__badges svg { width: 16px; height: 16px; color: var(--cl-magenta); }

/* Barra inferior (referencia brars: rectángulo radio 12, padding 10) */
.cl-occ__nav {
	display: flex; align-items: center; width: max-content; margin: 48px auto 0;
	padding: 10px; border-radius: 12px; background: var(--cl-teal);
}
.cl-occ__controls { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 257px; padding: 0 20px; box-sizing: border-box; }
.cl-occ__arrow {
	width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
	background: var(--cl-cream); color: var(--cl-teal); cursor: pointer; transition: background-color .2s ease;
}
.cl-occ__arrow:hover { background: #fff; }
.cl-occ__arrow svg { width: 18px; height: 18px; }
.cl-occ__arrow svg path { stroke-width: 2.25; }
.cl-occ__arrow[data-dir="1"] { margin-left: 12px; }
.cl-occ__arrow[data-dir="-1"] { margin-right: 12px; }
.cl-occ__dots { display: flex; align-items: center; gap: 8px; }
.cl-occ__dots i { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--cl-cream); opacity: .35; transition: width .3s var(--cl-ease), opacity .3s var(--cl-ease); } /* width, no flex-basis: Safari no lo cuenta en el ancho del grupo */
.cl-occ__dots i.is-active { width: 20px; opacity: 1; }
.cl-occ__all {
	display: inline-flex; align-items: center; gap: 8px; height: 52px; box-sizing: border-box; padding: 0 24px; border-radius: 8px;
	background: var(--cl-cream); color: var(--cl-teal); font: 700 16px/1 "Inter", system-ui, sans-serif; text-decoration: none;
	transition: background-color .2s ease;
}
.cl-occ__all::after {
	content: ""; width: 18px; height: 18px; border-radius: 4px; flex: none;
	background: var(--cl-teal) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23F7F1E8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222.5%22 d=%22M9 5L15 12L9 19%22/%3E%3C/svg%3E") center / 10px no-repeat;
}
.cl-occ__all:hover { background: #fff; color: var(--cl-teal); }

@media (max-width: 1279px) {
	.cl-occ__name { font-size: 15px; line-height: 20px; }
}
@media (max-width: 1023px) {
	.cl-occ { --cl-visible: 3; }
	/* 6 pestañas no entran en una fila: selector, como en móvil */
	.cl-occ__tabs { display: none; }
	.cl-occ__select { display: block; }
}
@media (max-width: 767px) {
	.cl-occ { --cl-visible: 1; }
	.cl-occ__slide { width: 280px; }
	/* referencia móvil: barra sin fondo, en columna */
	.cl-occ__nav { flex-direction: column; gap: 24px; width: 100%; box-sizing: border-box; margin-top: 32px; padding: 0 20px; background: none; }
	.cl-occ__controls { min-width: 0; padding: 0; }
	.cl-occ__arrow { width: 44px; height: 44px; background: var(--cl-teal); color: var(--cl-cream); }
	.cl-occ__arrow:hover { background: #164950; }
	.cl-occ__dots i { background: var(--cl-teal); }
	.cl-occ__all { background: var(--cl-teal); color: var(--cl-cream); }
	.cl-occ__all::after { background: var(--cl-cream) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%231A545C%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222.5%22 d=%22M9 5L15 12L9 19%22/%3E%3C/svg%3E") center / 10px no-repeat; }
	.cl-occ__all:hover { background: #164950; color: var(--cl-cream); }
}

@supports not (aspect-ratio: 1 / 1) {
	.cl-occ__media { height: 0; padding-top: min(133.33%, 400px); }
	.cl-occ__media img { position: absolute; top: 5.5%; left: 7%; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-occ *, .cl-occ *::before, .cl-occ *::after { transition: none !important; }
}