/* Ferns Moda - Home, seccion "products": tarjeta v2. Solo tokens --fm-*; sin hex. */
:is(.fm-home, .fm-shop-page) .fm-card__link { position: absolute; inset: 0; display: block; }
:is(.fm-home, .fm-shop-page) .fm-card__link:focus-visible { outline: 2px solid var(--fm-hover, var(--fm-sand-600)); outline-offset: -4px; }
:is(.fm-home, .fm-shop-page) .fm-card__quick { display: none; }

/* Sin segunda foto de la misma variacion, la tarjeta no cambia al pasar el cursor. */
:is(.fm-home, .fm-shop-page) .fm-card__media img:only-of-type { opacity: 1 !important; transform: none; }

/* Etiquetas */
:is(.fm-home, .fm-shop-page) .fm-card__badges { position: absolute; top: var(--fm-space-2); left: var(--fm-space-2); z-index: 2; display: flex; flex-wrap: wrap; gap: var(--fm-space-1); pointer-events: none; }
:is(.fm-home, .fm-shop-page) .fm-card__badges:empty { display: none; }
:is(.fm-home, .fm-shop-page) .fm-card__badge { position: static; background: var(--fm-white); color: var(--fm-text); padding: 2px var(--fm-space-2); font-size: var(--fm-fs-micro); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-label); text-transform: uppercase; }

/* Tallas: aparecen al pasar el cursor, en la parte baja de la foto */
:is(.fm-home, .fm-shop-page) .fm-card__sizes { position: absolute; inset: auto var(--fm-space-2) var(--fm-space-2); z-index: 2; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fm-space-1); pointer-events: none; opacity: 0; transform: translateY(var(--fm-space-2)); transition: opacity var(--fm-dur-base) var(--fm-ease-out), transform var(--fm-dur-base) var(--fm-ease-out); }
:is(.fm-home, .fm-shop-page) .fm-card:hover .fm-card__sizes, :is(.fm-home, .fm-shop-page) .fm-card:focus-within .fm-card__sizes { opacity: 1; transform: none; }
:is(.fm-home, .fm-shop-page) .fm-card__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; }
:is(.fm-home, .fm-shop-page) .fm-card__size.is-out { color: var(--fm-text-muted); text-decoration: line-through; opacity: .6; }
@media (hover: none) { :is(.fm-home, .fm-shop-page) .fm-card__sizes { display: none; } }

/* Degradado oscuro bajo las tallas (solo en hover) */
:is(.fm-home, .fm-shop-page) .fm-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--fm-ink-900) 78%, transparent), color-mix(in srgb, var(--fm-ink-900) 28%, transparent) 55%, transparent); opacity: 0; transition: opacity var(--fm-dur-base) var(--fm-ease-out); }
:is(.fm-home, .fm-shop-page) .fm-card:hover .fm-card__media::after, :is(.fm-home, .fm-shop-page) .fm-card:focus-within .fm-card__media::after { opacity: 1; }
@media (hover: none) { :is(.fm-home, .fm-shop-page) .fm-card__media::after { display: none; } }

/* Swatches */
:is(.fm-home, .fm-shop-page) .fm-card__swatches { display: flex; flex-wrap: nowrap; overflow: hidden; padding: 4px; margin: -4px; gap: var(--fm-space-2); }
:is(.fm-home, .fm-shop-page) .fm-card__swatch[hidden] { display: none; }
:is(.fm-home, .fm-shop-page) .fm-card__more { flex: none; align-self: center; font-size: var(--fm-fs-small); font-weight: var(--fm-fw-semibold); color: var(--fm-text-muted); padding-inline: var(--fm-space-1); }
:is(.fm-home, .fm-shop-page) .fm-card__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); }
:is(.fm-home, .fm-shop-page) .fm-card__swatch:hover { transform: scale(1.15); }
:is(.fm-home, .fm-shop-page) .fm-card__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fm-white), 0 0 0 3px var(--fm-text); }
:is(.fm-home, .fm-shop-page) .fm-card__swatch:focus-visible { outline: 2px solid var(--fm-hover, var(--fm-sand-600)); outline-offset: 3px; }

/* Nombre y precio */
:is(.fm-home, .fm-shop-page) .fm-card .fm-card__title { font-size: var(--fm-fs-small); }

:is(.fm-home, .fm-shop-page) .fm-card .fm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fm-space-2); }
:is(.fm-home, .fm-shop-page) .fm-card .fm-price__was { color: var(--fm-text-muted); font-weight: var(--fm-fw-regular); font-size: var(--fm-fs-small); text-decoration: line-through; }
:is(.fm-home, .fm-shop-page) .fm-card .fm-price__now { color: var(--fm-text); font-weight: var(--fm-fw-semibold); font-size: var(--fm-fs-body-lg); }
:is(.fm-home, .fm-shop-page) .fm-card .fm-price__now small { font-weight: var(--fm-fw-regular); }

@media (prefers-reduced-motion: reduce) {
  :is(.fm-home, .fm-shop-page) .fm-card__sizes, :is(.fm-home, .fm-shop-page) .fm-card__swatch { transition: none; transform: none; }
}