/* Ferns Moda — Home, sección «best». Solo tokens --fm-*; sin hex. */
.fm-best { display: grid; grid-template-columns: 1fr 3fr; gap: var(--fm-space-10); align-items: center; }
.fm-best--reverse { grid-template-columns: 3fr 1fr; padding-top: 0; }
.fm-best--reverse .fm-best__intro { order: 2; padding-left: var(--fm-space-6); }
.fm-best__intro > .fm-label { margin: 0 0 var(--fm-space-4); }
.fm-best__sub { font-size: var(--fm-fs-small); margin: 0 0 var(--fm-space-2); }
.fm-best__intro .fm-link { display: inline-block; margin-top: var(--fm-space-5); font-size: var(--fm-fs-small); min-height: var(--fm-btn-h); align-content: center; }
.fm-best__intro .fm-link:hover { color: var(--fm-hover, var(--fm-sand-600)); }

/* Carrusel continuo: misma velocidad (px/s) que los reels; fm-sec-best.js ajusta --fm-best-dur. Solo se detiene con el cursor encima */
.fm-best__cards { --fm-best-card-w: calc((100cqw - 2 * var(--fm-grid-gap)) / 3); container-type: inline-size; overflow: hidden; min-width: 0; }
.fm-best__track { display: flex; width: max-content; animation: fm-best-travel var(--fm-best-dur, 70s) linear infinite; }
.fm-best__cards:hover .fm-best__track, .fm-best__cards:focus-within .fm-best__track { animation-play-state: paused; }
.fm-best__group { display: flex; flex-shrink: 0; gap: var(--fm-grid-gap); padding-right: var(--fm-grid-gap); }
@keyframes fm-best-travel { to { transform: translateX(-50%); } }

.fm-best__card { position: relative; overflow: hidden; flex: 0 0 var(--fm-best-card-w); aspect-ratio: 3 / 5; background: var(--fm-surface-media); }
.fm-best__card::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, var(--fm-ink-900)); opacity: .65; pointer-events: none; }
.fm-best__link { position: absolute; inset: 0; display: block; }
.fm-best__link:focus-visible { outline: 2px solid var(--fm-hover, var(--fm-sand-600)); outline-offset: -4px; }
.fm-best__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--fm-dur-base) var(--fm-ease-soft), transform var(--fm-dur-slow, .8s) var(--fm-ease-out); }
/* 2.a foto del mismo producto al pasar el cursor; sin 2.a foto, solo el zoom suave */
.fm-best__link img + img { opacity: 0; }
.fm-best__card:hover .fm-best__link img:first-child:not(:only-of-type), .fm-best__card:focus-within .fm-best__link img:first-child:not(:only-of-type) { opacity: 0; }
.fm-best__card:hover .fm-best__link img + img, .fm-best__card:focus-within .fm-best__link img + img { opacity: 1; }
.fm-best__card:hover .fm-best__link img { transform: scale(1.04); }

/* Franja inferior: [tallas] y [swatches] aparecen al pasar el cursor, encima del nombre */
.fm-best__meta { position: absolute; inset: auto var(--fm-space-5) var(--fm-space-5); z-index: 2; display: grid; pointer-events: none; color: var(--fm-white); }
.fm-best__extra { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--fm-dur-base) var(--fm-ease-out), opacity var(--fm-dur-base) var(--fm-ease-out); }
.fm-best__extra-in { overflow: hidden; min-height: 0; display: grid; gap: var(--fm-space-3); padding-bottom: var(--fm-space-3); }
.fm-best__card:hover .fm-best__extra, .fm-best__card:focus-within .fm-best__extra { grid-template-rows: 1fr; opacity: 1; }
.fm-best__sizes { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--fm-space-1); }
.fm-best__size { flex: 1 1 0; max-width: 3.25rem; display: grid; place-items: center; min-height: 2rem; background: var(--fm-white); color: var(--fm-text); border: var(--fm-border-hair); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-label); text-transform: uppercase; }
.fm-best__size.is-out { color: var(--fm-text-muted); text-decoration: line-through; opacity: .6; }
.fm-best__swatches { display: flex; flex-wrap: nowrap; overflow: hidden; padding: 4px; margin: -4px; gap: var(--fm-space-2); pointer-events: auto; }
.fm-best__swatch { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: var(--fm-radius-pill); border: var(--fm-border-hair); cursor: pointer; background: var(--fm-sw, var(--fm-surface-media)) center / cover no-repeat; box-shadow: 0 0 0 2px var(--fm-white), 0 0 0 3px transparent; transition: box-shadow var(--fm-dur-base) var(--fm-ease-out), transform var(--fm-dur-base) var(--fm-ease-out); }
.fm-best__swatch[hidden] { display: none; }
.fm-best__swatch:hover { transform: scale(1.15); }
.fm-best__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fm-ink-900), 0 0 0 4px var(--fm-white); }
.fm-best__swatch:focus-visible { outline: 2px solid var(--fm-white); outline-offset: 3px; }
.fm-best__more { flex: none; align-self: center; font-size: var(--fm-fs-small); font-weight: var(--fm-fw-semibold); color: var(--fm-white); padding-inline: var(--fm-space-1); }
.fm-best__title { display: flex; justify-content: space-between; gap: var(--fm-space-2); font-size: var(--fm-fs-small); text-transform: uppercase; letter-spacing: var(--fm-ls-label); }
.fm-best__name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (hover: none) { .fm-best__extra { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fm-best__track { animation: none; }
  .fm-best__cards { overflow-x: auto; scrollbar-width: none; }
  .fm-best__group[aria-hidden] { display: none; }
  .fm-best__extra, .fm-best__swatch, .fm-best__link img { transition: none; }
}
@media (max-width: 899px) {
  .fm-best, .fm-best--reverse { grid-template-columns: 1fr; gap: var(--fm-space-6); }
  .fm-best--reverse .fm-best__intro { order: 0; padding-left: 0; }
  .fm-best__intro .fm-h1 br { display: none; }
  .fm-best__intro > .fm-label { margin-bottom: var(--fm-space-4); }
  .fm-best__intro .fm-link { margin-top: var(--fm-space-3); }
  .fm-best__cards { --fm-best-card-w: 62cqw; }
  .fm-best__meta { inset: auto var(--fm-space-3) var(--fm-space-3); }
}
.fm-best .fm-h1 { font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular, 400); color: var(--fm-text); line-height: 1.05; margin: 0; }
.fm-best .fm-h1 em { font-style: italic; font-weight: inherit; color: inherit; }