/* ==========================================================================
   for-fashion.html · page-only styles (Agent Jasmine for fashion brands)
   Loads after styles.css. Colours, space and type come from system tokens only.
   Every rule is scoped to main.page-fashion or uses an ff- class.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-fashion .ff-hero-fig img { width: 100%; height: auto; background: var(--bg-muted); border-radius: var(--radius-3); }
.page-fashion .ff-register { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 921px) {
  .page-fashion .page-hero .split { align-items: start; }
  .page-fashion .ff-hero-fig { padding-top: 6px; }
}

/* ---------- Plates: one garment, many frames ---------- */
.page-fashion .ff-plate + .ff-plate {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.page-fashion .ff-plate__tag { margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); }
.page-fashion .ff-plate__text { margin-top: var(--space-4); font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); max-width: 42ch; }
.page-fashion .ff-plate__spec { margin-top: var(--space-5); }
.page-fashion .ff-plate__spec dd { color: var(--fg); }

/* Set: a lead frame spanning two rows, four smaller frames beside it (all 3:4) */
.page-fashion .ff-set {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-3);
}
.page-fashion .ff-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.page-fashion .ff-set__item { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--fg); }
.page-fashion .ff-set__item picture { display: block; }
.page-fashion .ff-set__item img {
  width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; background: var(--bg-muted);
  border-radius: var(--radius-3); /* same 8px photo radius as the system .spread */
}
.page-fashion .ff-set__item--lead { grid-row: span 2; }
.page-fashion .ff-set__item--lead picture { position: relative; flex: 1 1 0; min-height: 0; }
.page-fashion .ff-set__item--lead img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.page-fashion .ff-set__label {
  display: block; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-2);
}
.page-fashion .ff-set__label b { color: var(--fg); font-weight: 600; margin-right: 4px; }
.page-fashion a.ff-set__item:hover .ff-set__label b {
  text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px;
}
.page-fashion a.ff-set__item:focus-visible { outline-offset: 4px; }

@media (max-width: 600px) {
  .page-fashion .ff-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-fashion .ff-set__item--lead { grid-column: 1 / -1; grid-row: auto; }
  .page-fashion .ff-set__item--lead picture { position: static; flex: none; }
  .page-fashion .ff-set__item--lead img { position: static; height: auto; aspect-ratio: 4 / 3; }
}

/* Gallery frames clip to the radius (the twin-kaftans frame is a clean crop file, no scaling needed) */
.page-fashion .ff-gallery picture { display: block; overflow: hidden; border-radius: var(--radius-3); }

/* ---------- How it works: controls list ---------- */
.page-fashion .ff-controls dt { font-size: var(--fs-small); }
.page-fashion .ff-controls dd > * + * { margin-top: var(--space-2); }
.page-fashion .ff-opts { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg); }

/* ---------- Channel sizes: ratio viewer ---------- */
.page-fashion .ff-ratio__stage {
  container-type: size;
  height: clamp(300px, 40vw, 580px);
  padding: var(--space-5);
  display: grid; place-items: center;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
}
.page-fashion .ff-ratio__frame {
  --ar: 1;
  width: min(100cqw, calc(100cqh * var(--ar)));
  height: min(100cqh, calc(100cqw / var(--ar)));
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
  outline: 1px solid var(--line-3);
  transition: width .24s ease, height .24s ease;
}
.page-fashion .ff-ratio__frame picture { width: 100%; height: 100%; }
.page-fashion .ff-ratio__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; }
.page-fashion .ff-ratio__now { color: var(--fg); font-weight: 500; }
@supports not (width: 1cqw) {
  .page-fashion .ff-ratio__frame { width: auto; height: 100%; aspect-ratio: var(--ar); max-width: 100%; }
}
@media (max-width: 520px) {
  .page-fashion .ff-ratio__stage { height: 340px; padding: var(--space-4); }
}

.page-fashion .ff-formats { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.page-fashion .ff-formats caption {
  text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small); font-weight: 600;
}
.page-fashion .ff-formats thead th {
  padding: 10px 12px 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-caption); font-weight: 600; color: var(--fg-2); text-align: left;
}
.page-fashion .ff-formats tbody th,
.page-fashion .ff-formats tbody td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle; color: var(--fg-2);
}
.page-fashion .ff-formats tbody th { font-weight: 500; color: var(--fg); }
.page-fashion .ff-formats .num { text-align: right; padding-right: 0; }
.page-fashion .ff-formats.is-enhanced tbody th { padding: 0 12px 0 0; }
.page-fashion .ff-formats__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-small); font-weight: 500; color: var(--fg);
}
.page-fashion .ff-formats__btn::before {
  content: ""; flex: none; width: 9px; height: 9px;
  box-shadow: inset 0 0 0 1.5px var(--fg-2);
}
.page-fashion .ff-formats__btn:hover { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 4px; }
.page-fashion .ff-formats__btn[aria-pressed="true"]::before { background: var(--mark); box-shadow: none; }
.page-fashion .ff-formats tr.is-current th,
.page-fashion .ff-formats tr.is-current td { color: var(--fg); background: var(--bg-raised); }
.page-fashion .ff-formats__btn:focus-visible { outline-offset: -2px; }
.page-fashion .ff-res-title { margin-top: clamp(32px, 4vw, 48px); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.page-fashion .ff-res-title + .spec { margin-top: 0; }
.page-fashion .ff-res-title + .spec > div:first-child { border-top: 0; }

/* ---------- Cost and time: comparison table ---------- */
.page-fashion .ff-compare { align-self: start; }
.page-fashion .ff-compare thead th { width: 38%; }
.page-fashion .ff-compare thead th:first-child { width: 24%; }
.page-fashion .ff-compare tbody td:last-child { color: var(--fg); }
@media (max-width: 760px) {
  .page-fashion .ff-compare,
  .page-fashion .ff-compare tbody,
  .page-fashion .ff-compare tr,
  .page-fashion .ff-compare th,
  .page-fashion .ff-compare td { display: block; width: auto; }
  .page-fashion .ff-compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .page-fashion .ff-compare tbody { border-top: 1px solid var(--rule); }
  .page-fashion .ff-compare tbody tr { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
  .page-fashion .ff-compare tbody th,
  .page-fashion .ff-compare td { padding: 0; border: 0; }
  .page-fashion .ff-compare td {
    display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--space-3);
    margin-top: 6px;
  }
  .page-fashion .ff-compare td::before {
    content: attr(data-label);
    font-size: var(--fs-caption); font-weight: 600; line-height: 1.7; color: var(--fg-2);
  }
}
@media (max-width: 420px) {
  .page-fashion .ff-compare td { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Call back form ---------- */
.page-fashion .ff-form .textarea { min-height: 112px; }
@media (max-width: 520px) {
  .page-fashion .ff-form .form__foot .btn { flex: 1 1 100%; }
}

/* ---------- FAQ side column ---------- */
.page-fashion .ff-faq-facts { margin-top: var(--space-6); }