/* Ferns Moda - Home, seccion "look" (sets, vista compacta de una pantalla). Solo tokens --fm-*; sin hex. */
.fm-look {
  --fm-look-h: calc(var(--fm-vh, 100svh) - var(--fm-header-h));
  background: var(--fm-bg-alt);
  min-height: var(--fm-look-h); box-sizing: border-box; margin-top: 0;
  display: flex; align-items: center;
  padding-block: var(--fm-space-12);
}
.fm-look__layout {
  display: grid; grid-template-columns: auto minmax(0, 34rem); justify-content: center; align-items: center;
  column-gap: clamp(var(--fm-space-8), 6vw, var(--fm-space-20));
  height: calc(var(--fm-look-h) - 2 * var(--fm-space-16));
  max-height: 60rem;
}

/* ---------- Medios: foto principal + miniaturas ---------- */
.fm-look__media { display: flex; flex-direction: column; gap: var(--fm-space-3); height: 100%; min-height: 0; }
.fm-look__frame {
  flex: 1 1 0; min-height: 0; margin: 0; aspect-ratio: 2 / 3; max-width: 100%;
  background: var(--fm-surface-media); overflow: hidden; position: relative;
}
.fm-look__main {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transition: opacity var(--fm-dur-base) var(--fm-ease-soft);
}
.fm-look__main.is-fading { opacity: 0; }
.fm-look__thumbs { display: flex; gap: var(--fm-space-2); overflow-x: auto; padding-bottom: var(--fm-space-1); scrollbar-width: thin; flex: 0 0 auto; }
.fm-look__thumbs button {
  flex: 0 0 auto; width: 3rem; padding: 0; border: var(--fm-border-hair); background: var(--fm-white); cursor: pointer; opacity: .75;
  transition: opacity var(--fm-dur-fast), border-color var(--fm-dur-fast);
}
.fm-look__thumbs button:hover { opacity: 1; border-color: var(--fm-hover, var(--fm-sand-600)); }
.fm-look__thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--fm-border-strong); outline: 1px solid var(--fm-border-strong); outline-offset: -1px; }
.fm-look__thumbs img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- Informacion ---------- */
.fm-look__info { display: flex; flex-direction: column; min-width: 0; }
.fm-look__info > .fm-label { margin: 0 0 var(--fm-space-3); }
.fm-look__title {
  margin: 0 0 var(--fm-space-4); font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular);
  font-size: var(--fm-fs-h1); line-height: 1.05; letter-spacing: normal;
}
.fm-look__title em { font-style: italic; font-weight: inherit; color: inherit; } /* la base pinta h2 em en dorado (casi blanco aquí) */
.fm-look__selection { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-4); margin-bottom: var(--fm-space-3); }
.fm-look__selection .fm-label { margin: 0; }
.fm-look .fm-arrow { width: 2rem; height: 2rem; }
.fm-look .fm-arrow:hover, .fm-look .fm-arrow:focus-visible { background: var(--fm-hover, var(--fm-sand-600)); color: var(--fm-ink-900); }
.fm-look__name { margin: 0 0 var(--fm-space-2); font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: var(--fm-lh-snug); letter-spacing: var(--fm-ls-display); }
.fm-look__desc { margin: 0 0 var(--fm-space-4); color: var(--fm-text-muted); font-size: var(--fm-fs-small); line-height: var(--fm-lh-normal); max-width: 42ch; }

.fm-look__attributes { display: grid; gap: var(--fm-space-4); margin-bottom: var(--fm-space-5); }
.fm-look__attr { min-width: 0; margin: 0; padding: 0; border: 0; }
.fm-look__attr legend { display: flex; align-items: center; gap: var(--fm-space-2); padding: 0; margin-bottom: var(--fm-space-2); font-size: var(--fm-fs-small); }
.fm-look__attr legend svg { width: 1.375rem; height: 1.375rem; flex: none; }
.fm-look__attr legend strong { font-weight: var(--fm-fw-semibold); }
.fm-look__options { display: flex; flex-wrap: wrap; gap: var(--fm-space-2); }
.fm-look__opt {
  display: inline-flex; align-items: center; gap: var(--fm-space-2); min-height: 2.25rem; padding: var(--fm-space-1) var(--fm-space-3) var(--fm-space-1) var(--fm-space-1);
  border: var(--fm-border-hair); background: var(--fm-white); color: var(--fm-text); font: inherit; font-size: var(--fm-fs-small); cursor: pointer;
  transition: border-color var(--fm-dur-fast), background var(--fm-dur-fast);
}
.fm-look__opt:hover { border-color: var(--fm-hover, var(--fm-sand-600)); }
.fm-look__opt[aria-pressed="true"] { border-color: var(--fm-border-strong); background: var(--fm-sand-100); }
.fm-look__opt:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.fm-look__opt--size { min-width: 2.75rem; justify-content: center; padding-inline: var(--fm-space-3); }
.fm-look__swatch { width: 1.625rem; height: 1.625rem; flex: none; border-radius: var(--fm-radius-pill); border: var(--fm-border-hair); background: var(--fm-ink-100) center / cover no-repeat; }
.fm-look__buy { align-self: flex-start; min-width: 14rem; }
/* el hover del botón lo define el sistema de botones de cristal (fm-components.css) */

/* ---------- Ventanas bajas (portatiles): se compacta un poco mas ---------- */
@media (max-height: 760px) and (min-width: 900px) {
  .fm-look__title { margin-bottom: var(--fm-space-2); }
  .fm-look__attributes { gap: var(--fm-space-3); margin-bottom: var(--fm-space-3); }
  .fm-look__desc { margin-bottom: var(--fm-space-2); }
}

/* ---------- Movil / tablet: apilado, miniaturas en fila con scroll ---------- */
@media (max-width: 899px) {
  .fm-look { min-height: 0; display: block; padding-block: var(--fm-space-10); }
  .fm-look__layout { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; row-gap: var(--fm-space-6); }
  .fm-look__media { height: auto; }
  .fm-look__frame { flex: none; width: min(100%, 26rem); margin-inline: auto; }
  .fm-look__thumbs { width: min(100%, 26rem); margin-inline: auto; }
  .fm-look__buy { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-look__main { transition: none; }
}

/* La base pinta h2/h3 en azul marino: títulos de la sección con la tinta del sistema */
.fm-look .fm-look__title, .fm-look .fm-look__name { color: var(--fm-text); }

/* Swatches: solo la muestra, sin nombre */
.fm-look__options:has(.fm-look__opt--swatch) { gap: var(--fm-space-2); }
.fm-look__opt--swatch { width: 2.5rem; height: 2.5rem; min-height: 0; padding: 3px; justify-content: center; border-radius: var(--fm-radius-pill); background: var(--fm-white); }
.fm-look__opt--swatch .fm-look__swatch { width: 100%; height: 100%; border: 0; }
.fm-look__opt--swatch[aria-pressed="true"] { border-color: var(--fm-border-strong); box-shadow: 0 0 0 1px var(--fm-border-strong); background: var(--fm-white); }
.fm-look__thumbs[hidden] { display: none; }

/* Aire simetrico alrededor de la foto principal (gana a .fm-section por especificidad) */
html body .fm-look { padding-block: var(--fm-section-y); }

/* Galeria de la variante: tarjetas verticales bajo la informacion */
.fm-look__info .fm-look__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fm-space-3); overflow: visible; margin: var(--fm-space-5) 0; padding: 0; }
.fm-look__info .fm-look__thumbs button { width: auto; opacity: 1; }
.fm-look__slot, .fm-look__thumbs .fm-look__more { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--fm-white); border: var(--fm-border-hair); font-size: var(--fm-fs-small); color: var(--fm-text-muted); }
.fm-look__options .fm-look__more { min-width: 2.5rem; justify-content: center; font-size: var(--fm-fs-small); }
.fm-look__info .fm-look__title { margin-bottom: var(--fm-space-3); }

/* Layout de la referencia: foto principal de ancho fijo; las 4 tarjetas de galeria van abajo, empiezan en el centro
   de la foto y llegan al borde derecho de la informacion. La seccion crece con su contenido: nada se sale. */
@media (min-width: 900px) {
  html body .fm-look { padding-block: var(--fm-section-y); min-height: 0; }
  .fm-look { --fm-img-w: clamp(320px, 30vw, 520px); --fm-look-gap: clamp(var(--fm-space-8), 6vw, var(--fm-space-20)); }
  .fm-look__layout { height: auto; max-height: none; align-items: stretch; column-gap: var(--fm-look-gap); }
  .fm-look__media { height: auto; }
  .fm-look__frame { flex: none; width: var(--fm-img-w); aspect-ratio: 2 / 3; }
  .fm-look__info { position: relative; justify-content: flex-start; --fm-th-w: calc(100% + var(--fm-look-gap) + var(--fm-img-w) / 2); padding-bottom: calc((var(--fm-th-w) - 3 * var(--fm-space-4)) / 3 + var(--fm-space-6)); }
  .fm-look__info .fm-look__thumbs { position: absolute; right: 0; bottom: 0; z-index: 2; width: var(--fm-th-w); margin: 0; gap: var(--fm-space-4); }
  .fm-look__info .fm-look__thumbs > * { box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--fm-ink-900) 45%, transparent); }
}