/* Outfits section: the Outfits tab as a wide stage (saved looks standing in a row on the app's warm grey stage),
   with a phone beside it showing the look in the middle opened, or the Studio after Modify or Ask AI. Sizes on the
   stage are in px, as on an iPhone in points; inside the phone they're in iOS points (var(--pt)). */

.outfits-section {
  background: var(--stage);
  overflow-x: clip;
}

/* ---------- Layout: stage, then the phone (side by side from 900px) ---------- */
.outfits-demo {
  --outfits-phone: var(--demo-phone);
  --outfits-sub: #5d574f;      /* secondary text on the stage: AA on --stage */
  --outfits-faint: #67615a;    /* demo notes on the stage: AA on --stage */
  --outfits-red: #d70015;      /* iOS's accessible red, for Delete */
  --outfits-fill: #f2f2f7;     /* secondarySystemBackground */
  --outfits-cap: 122px;        /* the name, pieces, dots and handle under the look */
  display: grid;
  gap: 40px;
  justify-items: center;
}
.outfits-stagewrap { width: 100%; min-width: 0; }
.outfits-phonewrap { display: grid; justify-items: center; min-width: 0; }
.outfits-phone { --phone-w: var(--outfits-phone); }

@media (min-width: 900px) {
  .outfits-demo {
    --outfits-phone: 300px;
    grid-template-columns: minmax(0, 1fr) var(--outfits-phone);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    justify-items: stretch;
  }
}
@media (min-width: 1200px) {
  .outfits-demo { --outfits-phone: 340px; }
}

/* ---------- The stage ---------- */
.outfits-stage {
  position: relative;
  height: clamp(560px, 150vw, 700px);
  margin-inline: calc(var(--gutter) * -1);
  color: #000;
  overflow: hidden;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
@media (min-width: 900px) {
  .outfits-stage {
    margin-inline: 0;
    height: calc(var(--outfits-phone) * 2.1);
    border-radius: 32px;
  }
}
/* The sort list keeps the usual white page, as in the app. */
.outfits-stage[data-mode="sort"], .outfits-stage[data-mode="empty"] { background: var(--white); }
@media (min-width: 900px) {
  .outfits-stage[data-mode="sort"], .outfits-stage[data-mode="empty"] { box-shadow: var(--shadow-1); }
}

/* Glass controls, as on iOS 26 */
.outfits-glass {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}
.outfits-stage[data-mode="sort"] .outfits-glass,
.outfits-stage[data-mode="empty"] .outfits-glass { background: rgba(242, 242, 247, 0.92); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05); }

.outfits-bar {
  position: absolute; z-index: 30; top: 12px; left: 16px; right: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.outfits-bar > * { pointer-events: auto; }
@media (min-width: 900px) { .outfits-bar { top: 16px; left: 18px; right: 18px; } }

.outfits-filter { position: relative; min-width: 0; }
.outfits-filter__btn {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  height: 44px; padding: 0 16px 0 18px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #000;
  transition: transform 0.15s;
}
.outfits-filter__btn:active { transform: scale(0.97); }
.outfits-filter__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-filter__chev { width: 12px; height: 12px; flex: none; transition: rotate 0.25s var(--ease); }
.outfits-filter__btn[aria-expanded="true"] .outfits-filter__chev { rotate: 180deg; }

.outfits-tools { display: flex; align-items: center; height: 44px; padding: 0 3px; flex: none; }
.outfits-tools__btn {
  display: grid; place-items: center; width: 46px; height: 44px; border-radius: 999px; color: #000;
  transition: background 0.2s;
}
.outfits-tools__btn:hover { background: rgba(0, 0, 0, 0.05); }
.outfits-tools__btn svg { width: 23px; height: 23px; }
.outfits-tools__done {
  height: 44px; padding: 0 15px; border-radius: 999px;
  font-size: 17px; font-weight: 600; color: #000;
}
.outfits-tools__done:hover { background: rgba(0, 0, 0, 0.05); }
.outfits-tools__btn:focus-visible, .outfits-tools__done:focus-visible, .outfits-filter__btn:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* Pop-up menu (the category dropdown) */
.outfits-pop {
  position: absolute; z-index: 50; top: 52px; left: 0;
  min-width: 236px; padding: 7px 0;
  border-radius: 24px;
  background: rgba(250, 250, 250, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.16);
  transform-origin: 24px 0;
}
.outfits-pop__item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 18px 0 14px;
  font-size: 17px; text-align: left; color: #000; letter-spacing: -0.01em;
}
.outfits-pop__item:hover { background: rgba(0, 0, 0, 0.05); }
.outfits-pop__item:focus-visible { outline-offset: -3px; border-radius: 12px; background: rgba(0, 0, 0, 0.05); }
.outfits-pop__item svg { width: 18px; height: 18px; }
.outfits-pop__check { visibility: hidden; }
.outfits-pop__item[aria-checked="true"] .outfits-pop__check { visibility: visible; }
.outfits-pop__icon { color: #3c3c43; }
.outfits-pop__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Carousel ---------- */
.outfits-carousel { position: absolute; inset: 0; z-index: 0; }
/* The looks, which shrink towards their heads while the actions show. */
.outfits-looks {
  position: absolute; left: 0; right: 0; top: 30px; bottom: var(--outfits-cap);
  transform-origin: 50% 10%;
  transition: transform 0.42s var(--ease);
}
.outfits-carousel.is-actions .outfits-looks { transform: scale(var(--outfits-s, 0.8)); }
.outfits-track {
  position: absolute; inset: 0;
  touch-action: pan-y;
  cursor: grab;
}
.outfits-track.is-dragging { cursor: grabbing; }
@media (min-width: 900px) {
  .outfits-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}

/* One look: you, cut out (9:16, standing in the middle of the picture), as tall as the track. */
.outfits-look {
  position: absolute; top: 0; left: 50%; height: 100%;
  aspect-ratio: 893 / 1600;
  translate: -50% 0;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.outfits-look img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
  transition: opacity 0.45s ease;
}
.outfits-look img.is-leaving { opacity: 0; }
/* A soft shadow where the feet meet the stage. */
.outfits-look__floor {
  position: absolute; z-index: 0; left: 26%; right: 26%; bottom: 1.6%; height: 3.4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 32, 22, 0.22), rgba(45, 32, 22, 0) 100%);
}
.outfits-look:focus-visible { outline-offset: -4px; border-radius: 28px; }

/* Name, pieces, dots and the handle under the look in the middle, with the arrows either side. */
.outfits-caption {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--outfits-cap);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px;
  padding: 0 14px 8px;
  transition: transform 0.42s var(--ease);
}
.outfits-carousel.is-actions .outfits-caption { transform: translateY(calc(var(--outfits-lift, 96px) * -1)); }
@media (min-width: 900px) { .outfits-caption { padding: 0 18px 10px; } }
.outfits-caption__text { display: grid; justify-items: center; min-width: 0; text-align: center; }
.outfits-caption__name {
  display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
  font-size: 22px; line-height: 1.25; color: #000;
}
@media (min-width: 900px) { .outfits-caption__name { font-size: 24px; } }
.outfits-caption__name .ios-serif { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-heart { width: 0.78em; height: 0.78em; flex: none; color: var(--accent); }
.outfits-caption__name:not(.is-fav) .outfits-heart { display: none; }
.outfits-caption__sum { font-size: 15px; line-height: 1.3; color: var(--outfits-sub); margin-top: 3px; }

/* One dot per outfit (up to 9 around the current one, the outer ones smaller when there are more). The app's dots
   are 22 x 30 pt targets; here they're taller (and wider on touch screens), so they're easy to hit on a phone, with the
   dots themselves where they were. */
.outfits-dots { display: flex; justify-content: center; height: 40px; margin-top: -3px; }
.outfits-dot {
  display: grid; place-items: center; width: 24px; height: 40px; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) { .outfits-dot { width: 28px; } }
.outfits-dot span {
  width: var(--d, 7px); height: var(--d, 7px); border-radius: 50%;
  background: rgba(60, 60, 67, 0.3);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), background-color 0.25s;
}
.outfits-dot[aria-current="true"] span { background: var(--accent); }
.outfits-dot:hover:not([aria-current="true"]) span { background: rgba(60, 60, 67, 0.5); }
.outfits-dot:focus-visible { outline-offset: -2px; }

.outfits-handle {
  display: grid; place-items: center; width: 80px; height: 40px; margin: -11px 0 -13px;
  color: rgba(60, 60, 67, 0.36); border-radius: 10px;
  transition: color 0.2s;
}
.outfits-handle:hover { color: rgba(60, 60, 67, 0.6); }
.outfits-handle svg { width: 36px; height: 12px; }
.outfits-handle__down { display: none; }
.outfits-handle[aria-expanded="true"] .outfits-handle__up { display: none; }
.outfits-handle[aria-expanded="true"] .outfits-handle__down { display: block; }

.outfits-step {
  display: grid; place-items: center; width: 44px; height: 44px; color: #000;
  transition: opacity 0.2s, transform 0.15s;
}
.outfits-step svg { width: 20px; height: 20px; }
.outfits-step:active { transform: scale(0.94); }
.outfits-step[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.outfits-step:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* Share, Modify, Ask AI and Delete in a row under the look. */
.outfits-actions {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 22px;
  opacity: 0; transform: translateY(28px); visibility: hidden;
  transition: opacity 0.22s ease, transform 0.36s var(--ease), visibility 0s linear 0.36s;
}
.outfits-carousel.is-actions .outfits-actions {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 0.3s ease 0.06s, transform 0.42s var(--ease), visibility 0s;
}
@media (max-width: 360px) { .outfits-actions { gap: 14px; } }
.outfits-act { display: grid; justify-items: center; gap: 6px; min-width: 60px; -webkit-tap-highlight-color: transparent; }
.outfits-act__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: #000;
  transition: transform 0.15s, background 0.2s;
}
.outfits-act__icon svg { width: 23px; height: 23px; }
.outfits-act:hover .outfits-act__icon { background: rgba(255, 255, 255, 0.95); }
.outfits-act:active .outfits-act__icon { transform: scale(0.94); }
.outfits-act__label { font-size: 12px; color: var(--outfits-sub); }
.outfits-act.is-destructive .outfits-act__icon { color: var(--outfits-red); }
.outfits-act:focus-visible { outline-offset: 2px; border-radius: 14px; }

/* ---------- Sorting ---------- */
.outfits-sorter {
  position: absolute; left: 0; right: 0; top: 64px; bottom: 0;
  overflow-y: auto; scrollbar-width: thin;
  padding: 6px 16px 28px;
}
@media (min-width: 900px) { .outfits-sorter { top: 72px; } }
.outfits-sorter__head, .outfits-sorter__list { max-width: 560px; margin-inline: auto; }
.outfits-sorter__head { padding: 4px 16px 12px; font-size: 13px; line-height: 1.4; color: #5f5f64; text-wrap: pretty; }
.outfits-sorter__list { position: relative; display: grid; gap: 8px; padding: 0; margin-block: 0; list-style: none; }
.outfits-row {
  position: relative;
  display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
  min-height: 70px; padding: 0 4px 0 16px; border-radius: 18px;
  background: var(--outfits-fill);
  transition: transform 0.22s var(--ease), box-shadow 0.22s;
}
.outfits-row.is-lifted { z-index: 2; transition: box-shadow 0.22s; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); background: #f7f7fa; }
.outfits-sorter__list.is-sorting .outfits-row { user-select: none; -webkit-user-select: none; }
.outfits-row__place { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #5f5f64; }
.outfits-row__thumb {
  position: relative; width: 36px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--paper-2);
}
.outfits-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.outfits-row__text { display: grid; min-width: 0; }
.outfits-row__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.outfits-row__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-row__name svg { width: 12px; height: 12px; flex: none; color: var(--accent); }
.outfits-row__sum { font-size: 12px; color: #5f5f64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-row__handle {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: #8e8e93; cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.outfits-row__handle svg { width: 22px; height: 22px; }
.outfits-row__handle:hover { color: #3c3c43; }
.outfits-row__handle:focus-visible { outline-offset: -3px; color: #000; }
.outfits-row.is-lifted .outfits-row__handle { cursor: grabbing; color: #000; }

/* ---------- Empty states (ContentUnavailableView) ---------- */
.outfits-empty {
  position: absolute; inset: 70px 24px 40px;
  display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center;
}
.outfits-empty svg { width: 46px; height: 46px; color: #8e8e93; margin-bottom: 6px; }
.outfits-empty__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #000; }
.outfits-empty__text { font-size: 15px; color: #5f5f64; max-width: 300px; text-wrap: pretty; }
.outfits-empty__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; margin-top: 8px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
}
.outfits-empty__btn:hover { background: var(--accent-ink); }

/* ---------- Over the stage: scrim, long-press menu, confirmation, sheets ---------- */
.outfits-scrim {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(236, 234, 232, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.outfits-stage[data-mode="sort"] .outfits-scrim { background: rgba(255, 255, 255, 0.6); }
.outfits-scrim.is-dim { background: rgba(20, 16, 12, 0.22); -webkit-backdrop-filter: none; backdrop-filter: none; }

.outfits-ctx {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px 16px;
  pointer-events: none;
}
.outfits-ctx > * { pointer-events: auto; }
.outfits-ctx__preview {
  height: min(50%, 380px); width: auto; aspect-ratio: 893 / 1600; object-fit: cover; flex: none;
  border-radius: 16px; background: var(--studio);
  box-shadow: 0 18px 50px rgba(30, 20, 10, 0.22);
}
.outfits-ctx__menu, .outfits-ctx__sub {
  width: min(300px, 100%);
  border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 10px 34px rgba(0, 0, 0, 0.14);
}
.outfits-ctx__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.outfits-ctx__act {
  display: grid; justify-items: center; gap: 4px; padding: 13px 4px 11px;
  font-size: 13px; font-weight: 500; color: #000;
  transition: background 0.15s;
}
.outfits-ctx__act + .outfits-ctx__act { box-shadow: inset 0.5px 0 0 rgba(0, 0, 0, 0.14); }
.outfits-ctx__act:hover, .outfits-ctx__line:hover, .outfits-ctx__opt:hover { background: rgba(0, 0, 0, 0.05); }
.outfits-ctx__act svg { width: 23px; height: 23px; }
.outfits-ctx__act.is-destructive { color: var(--outfits-red); }
.outfits-ctx__line, .outfits-ctx__opt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 16px; text-align: left;
  font-size: 16px; color: #000; letter-spacing: -0.01em;
  box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.14);
}
.outfits-ctx__line svg, .outfits-ctx__opt svg { width: 20px; height: 20px; }
.outfits-ctx__more { width: 15px; height: 15px; color: #8e8e93; }
.outfits-ctx__cats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-ctx__sub .outfits-ctx__opt:first-child { box-shadow: none; font-weight: 600; }
.outfits-ctx__opt .outfits-ctx__tick { visibility: hidden; color: #000; }
.outfits-ctx__opt[aria-checked="true"] .outfits-ctx__tick { visibility: visible; }
.outfits-ctx__act:focus-visible, .outfits-ctx__line:focus-visible, .outfits-ctx__opt:focus-visible { outline-offset: -3px; border-radius: 16px; background: rgba(0, 0, 0, 0.05); }

/* "Delete this outfit?" as an action sheet */
.outfits-confirm {
  position: absolute; z-index: 60; left: 50%; bottom: 16px; translate: -50% 0;
  display: grid; gap: 8px; width: min(320px, calc(100% - 32px));
}
.outfits-confirm__ask, .outfits-confirm__cancel {
  border-radius: 20px; background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 10px 34px rgba(0, 0, 0, 0.14);
}
.outfits-confirm__ask { display: grid; justify-items: center; padding-top: 14px; overflow: hidden; text-align: center; }
.outfits-confirm__ask p { font-size: 13px; color: #5f5f64; padding: 0 18px; }
.outfits-confirm__q { font-weight: 600; }
.outfits-confirm__del {
  width: 100%; min-height: 54px; margin-top: 14px; box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.14);
  font-size: 17px; color: var(--outfits-red);
}
.outfits-confirm__del:hover { background-color: rgba(0, 0, 0, 0.04); }
.outfits-confirm__cancel:hover { background-color: #f1f1f3; }
.outfits-confirm__cancel { min-height: 54px; font-size: 17px; font-weight: 600; color: #000; }
.outfits-confirm__del:focus-visible, .outfits-confirm__cancel:focus-visible { outline-offset: -4px; border-radius: 16px; }

/* Sheets float inset from the edges, as on iOS 26. */
.outfits-sheet {
  position: absolute; z-index: 55; left: 50%; bottom: 8px; translate: -50% 0;
  width: min(440px, calc(100% - 16px)); max-height: calc(100% - 16px);
  display: flex; flex-direction: column;
  border-radius: 30px; background: var(--white);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 -6px 40px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
/* Share: the iPhone's share sheet, as the Shop section draws it (header, a row of apps, then actions), here in px. */
.outfits-share { width: min(402px, calc(100% - 16px)); padding-bottom: 16px; background: #f2f2f7; color: #000; }
.outfits-share__head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; align-items: center; gap: 12px;
  padding: 18px 18px 14px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.outfits-share__thumb { width: 44px; height: 58px; border-radius: 9px; object-fit: cover; background: var(--studio); }
.outfits-share__text { display: grid; gap: 2px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.outfits-share__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-share__text span + span { font-size: 13px; font-weight: 400; color: #5f5f64; }
.outfits-share__x {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(118, 118, 128, 0.12); color: #6c6c70;
  transition: background 0.15s;
}
.outfits-share__x svg { width: 13px; height: 13px; }
.outfits-share__x:hover { background: rgba(118, 118, 128, 0.2); }
.outfits-share__x:focus-visible { outline-offset: 2px; border-radius: 50%; }
.outfits-share__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 8px 16px; }
.outfits-share__app { display: grid; justify-items: center; gap: 7px; font-size: 11.5px; color: #3c3c43; }
.outfits-share__app i {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px;
  background: #fff; color: #8e8e93; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.outfits-share__app i svg { width: 28px; height: 28px; }
.outfits-share__app i.is-more { border-radius: 50%; background: #e5e5ea; }
.outfits-share__app i.is-more svg { width: 23px; }
.outfits-share__actions { margin: 0 16px; overflow: hidden; border-radius: 14px; background: #fff; }
.outfits-share__actions span {
  display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 16px;
  font-size: 17px; letter-spacing: -0.01em; border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}
.outfits-share__actions span:first-child { border-top: 0; }
.outfits-share__actions svg { width: 22px; height: 22px; }

.outfits-ask { color: #000; }
.outfits-ask__nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 14px 6px;
}
.outfits-ask__close {
  justify-self: start; height: 38px; padding: 0 14px; border-radius: 999px;
  background: #f0f0f3; font-size: 16px; font-weight: 500;
}
.outfits-ask__close:hover { background: #e6e6eb; }
.outfits-ask__title { font-size: 17px; font-weight: 600; }
.outfits-ask__body { display: grid; gap: 14px; padding: 8px 20px 14px; overflow-y: auto; min-height: 0; }
.outfits-ask__intro { font-size: 15px; line-height: 1.35; color: #5f5f64; }
.outfits-ask__worn { display: flex; gap: 6px; }
.outfits-ask__worn span { position: relative; flex: none; width: 40px; height: 52px; border-radius: 8px; background: var(--paper-2); }
.outfits-ask__worn img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.outfits-ask__q {
  display: block; width: 100%; resize: none;
  padding: 13px 14px; border: 0; border-radius: 14px; background: var(--outfits-fill);
  font: inherit; font-size: 17px; line-height: 1.3; color: #000;
}
.outfits-ask__q::placeholder { color: #8a8a8e; }
.outfits-ask__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.outfits-ask__ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.outfits-ask__idea {
  padding: 7px 12px; border-radius: 999px; background: var(--outfits-fill);
  font-size: 13px; color: #000; transition: background 0.15s;
}
.outfits-ask__idea:hover { background: #e7e7ec; }
.outfits-ask__idea[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.outfits-ask__idea:focus-visible { outline-offset: 2px; border-radius: 999px; }
.outfits-ask__foot {
  display: grid; gap: 10px; padding: 12px 16px 16px;
  background: rgba(249, 249, 250, 0.96); box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.1);
}
.outfits-ask__status { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.35; color: #5f5f64; }
.outfits-ask__status:empty { display: none; }
.outfits-ask__status svg { width: 18px; height: 18px; flex: none; align-self: flex-start; margin-top: 1px; }
.outfits-ask__status a { color: var(--accent-ink); font-weight: 600; }
.outfits-ask__decide {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 600; transition: opacity 0.2s, background 0.2s;
}
.outfits-ask__decide svg { width: 18px; height: 18px; }
.outfits-ask__decide:hover { background: var(--accent-ink); }
.outfits-ask__decide[aria-disabled="true"] { opacity: 0.4; cursor: default; background: var(--accent); }

.outfits-spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.14); border-top-color: rgba(0, 0, 0, 0.55);
  animation: outfits-spin 0.8s linear infinite;
}
@keyframes outfits-spin { to { rotate: 360deg; } }

/* ---------- Under the stage ---------- */
.outfits-note { margin-top: 18px; color: var(--outfits-faint); }
.outfits-reset { margin-top: 12px; }

/* =====================================================================================================
   The phone: the look opened (OutfitDetailView), or the Studio. Everything in iOS points.
   ===================================================================================================== */
.outfits-detail { background: var(--stage); }
.outfits-page { z-index: 1; transition: opacity 0.3s; }
.outfits-d-scroll {
  position: absolute; inset: 0; z-index: 1;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;
  /* A piece reached with the keyboard comes into view clear of the top fade, the tab bar and the save bar. */
  scroll-padding: calc(var(--pt) * 124) 0 calc(var(--pt) * 170);
}
.outfits-d-scroll::-webkit-scrollbar { display: none; }
.outfits-d-scroll:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: inherit; }
.outfits-d-scroll.is-stale { opacity: 0.35; }
/* The soft edge under the status bar and the glass buttons, as the page scrolls beneath them. */
.outfits-d-fade {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: calc(var(--pt) * 118);
  background: linear-gradient(180deg, var(--stage) 46%, rgba(236, 234, 232, 0));
  pointer-events: none;
}
.outfits-d-nav {
  position: absolute; z-index: 6; top: calc(var(--pt) * 58); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  display: flex; justify-content: space-between; pointer-events: none;
}
.outfits-d-nav__btn { padding: 0; width: calc(var(--pt) * 44); color: #000; }
.outfits-d-nav__btn svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }

.outfits-d { padding: calc(var(--pt) * 100) 0 calc(var(--pt) * 190); }
.outfits-d__look { position: relative; height: calc(var(--pt) * 540); }
.outfits-d__pic {
  position: absolute; inset: 0;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.outfits-d__pic.is-dim { opacity: 0.55; filter: blur(calc(var(--pt) * 2)); }
.outfits-d__pic img {
  position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; width: auto; max-width: none;
  transition: opacity 0.4s ease;
}
.outfits-d__pic img.is-leaving { opacity: 0; }
.outfits-d__status {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 18); border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 calc(var(--pt) * 2) calc(var(--pt) * 10) rgba(0, 0, 0, 0.06);
  font-size: calc(var(--pt) * 15); font-weight: 500; white-space: nowrap;
}
.outfits-d__status .outfits-spinner { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); border-width: calc(var(--pt) * 2); }

.outfits-d__head { display: grid; gap: calc(var(--pt) * 4); padding: calc(var(--pt) * 8) calc(var(--pt) * 20) 0; }
.outfits-d__title { display: flex; align-items: center; gap: calc(var(--pt) * 10); font-size: calc(var(--pt) * 28); line-height: 1.15; color: #000; }
.outfits-d__title svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); color: var(--accent); flex: none; }
.outfits-d__sum { font-size: calc(var(--pt) * 15); color: #5f5f64; }
.outfits-d__tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pt) * 6); margin-top: calc(var(--pt) * 6); }
.outfits-d__tag {
  padding: calc(var(--pt) * 6) calc(var(--pt) * 12); border-radius: 999px;
  background: var(--outfits-fill); font-size: calc(var(--pt) * 13); font-weight: 500; color: #000;
}
.outfits-d__plus {
  display: grid; place-items: center; width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); border-radius: 50%;
  background: var(--outfits-fill); color: #5f5f64;
}
.outfits-d__plus svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }

/* A row per kind of clothing: its name and count, then the pieces to swipe through. */
.outfits-d__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--pt) * 28); margin-top: calc(var(--pt) * 28); }
.outfits-d__kind {
  display: flex; align-items: baseline; gap: calc(var(--pt) * 6);
  padding: 0 calc(var(--pt) * 20);
  font-size: calc(var(--pt) * 20); font-weight: 600; letter-spacing: -0.01em; color: #000;
}
.outfits-d__kind small { font-size: calc(var(--pt) * 15); font-weight: 500; color: #5f5f64; font-variant-numeric: tabular-nums; }
.outfits-d__tiles {
  display: flex; gap: calc(var(--pt) * 2);
  margin-top: calc(var(--pt) * 10); padding: 0 calc(var(--pt) * 15);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: calc(var(--pt) * 15);
}
.outfits-d__tiles::-webkit-scrollbar { display: none; }
.outfits-d__tile, .outfits-d__add {
  position: relative; flex: none; padding: calc(var(--pt) * 5);
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.2s var(--ease);
}
.outfits-d__tile:active, .outfits-d__add:active { scale: 0.96; }
.outfits-d__box {
  position: relative; display: grid; place-items: center;
  width: calc(var(--pt) * 88); height: calc(var(--pt) * 110);
  border-radius: calc(var(--pt) * 14); background: var(--paper-2);
  box-shadow: 0 calc(var(--pt) * 1) calc(var(--pt) * 3) rgba(0, 0, 0, 0.06);
}
.outfits-d__box img {
  position: absolute; inset: calc(var(--pt) * 8);
  width: calc(100% - var(--pt) * 16); height: calc(100% - var(--pt) * 16); object-fit: contain;
}
/* What you're wearing: ringed and ticked in the accent colour, as in the Studio's tray. */
.outfits-d__tile::after {
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--pt) * 19);
  border: calc(var(--pt) * 2) solid var(--accent); opacity: 0; transition: opacity 0.25s;
}
.outfits-d__tick {
  position: absolute; z-index: 1; right: calc(var(--pt) * 11); bottom: calc(var(--pt) * 11);
  width: calc(var(--pt) * 20); height: calc(var(--pt) * 20);
  opacity: 0; scale: 0.5; transition: opacity 0.22s, scale 0.25s var(--ease);
}
.outfits-d__tile[aria-pressed="true"]::after { opacity: 1; }
.outfits-d__tile[aria-pressed="true"] .outfits-d__tick { opacity: 1; scale: 1; }
.outfits-d__tile:focus-visible { outline-offset: -1px; border-radius: calc(var(--pt) * 19); }
.outfits-d__wish {
  position: absolute; top: calc(var(--pt) * 6); right: calc(var(--pt) * 6);
  display: grid; place-items: center; width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); border-radius: 50%;
  background: var(--accent); color: #fff;
}
.outfits-d__wish svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.outfits-d__add .outfits-d__box {
  align-content: center; gap: calc(var(--pt) * 8);
  background: rgba(0, 0, 0, 0.04); box-shadow: none;
  font-size: calc(var(--pt) * 12); font-weight: 500; color: #5f5f64;
}
.outfits-d__add .outfits-d__box > span:first-child {
  display: grid; place-items: center; width: calc(var(--pt) * 36); height: calc(var(--pt) * 36); border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
}
.outfits-d__add svg { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }

.outfits-d__buy { display: grid; gap: calc(var(--pt) * 12); margin-top: calc(var(--pt) * 34); padding: 0 calc(var(--pt) * 20); }
.outfits-d__buyhead { font-size: calc(var(--pt) * 17); font-weight: 600; color: #000; }
.outfits-d__buyrow { display: grid; grid-template-columns: calc(var(--pt) * 48) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--pt) * 12); }
.outfits-d__buytile {
  position: relative; width: calc(var(--pt) * 48); height: calc(var(--pt) * 60);
  border-radius: calc(var(--pt) * 10); background: var(--paper-2);
}
.outfits-d__buytile img {
  position: absolute; inset: calc(var(--pt) * 5);
  width: calc(100% - var(--pt) * 10); height: calc(100% - var(--pt) * 10); object-fit: contain;
}
.outfits-d__buytext { display: grid; min-width: 0; font-size: calc(var(--pt) * 15); color: #000; }
.outfits-d__buytext span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-d__buytext span + span { font-size: calc(var(--pt) * 12); color: #5f5f64; }
.outfits-d__buybtn {
  display: grid; place-items: center; height: calc(var(--pt) * 30); padding: 0 calc(var(--pt) * 14); border-radius: 999px;
  background: var(--accent); color: #fff; font-size: calc(var(--pt) * 15); font-weight: 600;
}
.outfits-d__studio {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 6);
  width: calc(100% - var(--pt) * 40); height: calc(var(--pt) * 50); margin: calc(var(--pt) * 30) calc(var(--pt) * 20) 0; border-radius: 999px;
  background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); font-size: calc(var(--pt) * 17); font-weight: 600;
  transition: background 0.2s;
}
.outfits-d__studio:hover { background: rgba(90, 91, 216, 0.2); }
.outfits-d__studio svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.outfits-d__studio:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* Save outfit / Discard, while there are changes. */
.outfits-savebar {
  position: absolute; z-index: 20; left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); bottom: calc(var(--pt) * 91);
  display: flex; gap: calc(var(--pt) * 12); padding: calc(var(--pt) * 10);
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * 4) calc(var(--pt) * 12) rgba(0, 0, 0, 0.1);
}
.outfits-savebar button {
  height: calc(var(--pt) * 50); border-radius: 999px;
  font-size: calc(var(--pt) * 17); font-weight: 600;
  transition: background 0.2s, opacity 0.2s;
}
.outfits-savebar__discard { padding: 0 calc(var(--pt) * 20); background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); }
.outfits-savebar__save { flex: 1; background: var(--accent); color: #fff; }
.outfits-savebar__save[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.outfits-savebar button:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* The note after a tap (what else came off, or why nothing changed): the app's pill, for a few seconds, its foot
   just above the save bar (or the tab bar), or above the clothes panel in the Studio. */
.outfits-section .outfits-toast {
  position: absolute; z-index: 21; left: 50%; top: auto; bottom: calc(var(--pt) * 172);
  width: max-content; max-width: calc(100% - var(--pt) * 14);
  justify-content: center; text-align: center; text-wrap: balance;
  padding: calc(var(--pt) * 8) calc(var(--pt) * 11); border-radius: calc(var(--pt) * 18);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: calc(var(--pt) * 12); line-height: 1.3; color: #000;
  pointer-events: none;
  opacity: 0; translate: -50% calc(var(--pt) * 6);
  transition: opacity 0.25s ease, translate 0.3s var(--ease), bottom 0.3s var(--ease);
}
.outfits-section .outfits-toast.is-on { opacity: 1; translate: -50% 0; }
.outfits-section .outfits-savebar[hidden] ~ .outfits-toast { bottom: calc(var(--pt) * 100); }
.outfits-section .outfits-studio .outfits-toast { bottom: calc(100% - var(--pt) * 626); }
/* Above "Dressing you…" while a new look is made. */
.outfits-section .outfits-studio .studio-status:not(.is-hidden) ~ .outfits-toast { bottom: calc(100% - var(--pt) * 574); }
@media (prefers-reduced-motion: reduce) {
  .outfits-section .outfits-toast { transition: none; translate: -50% 0; }
}

/* ---------- The Studio in the phone (shared .studio-* classes, adjusted only here) ---------- */
.outfits-section .outfits-studio { position: absolute; inset: 0; z-index: 2; }
.outfits-section .outfits-studio .studio-bar { top: calc(var(--pt) * 58); }
.outfits-section .outfits-studio .ios-navtitle { max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfits-section .outfits-studio .studio-status { display: inline-flex; align-items: center; gap: calc(var(--pt) * 8); }
/* The panel works as in the Studio section: chips pick a kind, a tap puts a piece on or takes it off. */
.outfits-section .outfits-studio__chips {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-block: calc(var(--pt) * 3); margin-block: calc(var(--pt) * -3);
}
.outfits-section .outfits-studio__chips::-webkit-scrollbar { display: none; }
.outfits-section .outfits-studio__chips .ios-chip { transition: background 0.2s, color 0.2s, scale 0.15s; }
.outfits-section .outfits-studio__chips .ios-chip:not(.is-on):hover { background: rgba(255, 255, 255, 0.85); }
.outfits-section .outfits-studio__chips .ios-chip:active { scale: 0.96; }
.outfits-section .outfits-studio__chips .ios-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 999px; }
.outfits-section .outfits-studio .studio-items { padding-block: calc(var(--pt) * 4); top: calc(var(--pt) * 58); overscroll-behavior-x: contain; }
.outfits-section .outfits-studio .studio-item { transition: transform 0.15s var(--ease), filter 0.2s; -webkit-tap-highlight-color: transparent; }
.outfits-section .outfits-studio .studio-item:hover { filter: brightness(0.97); }
.outfits-section .outfits-studio .studio-item:active { transform: scale(0.95); }
.outfits-section .outfits-studio .studio-item:focus-visible { outline: 2px solid #000; outline-offset: 1px; border-radius: calc(var(--pt) * 12); }
.outfits-section .outfits-studio .studio-item img { pointer-events: none; -webkit-user-drag: none; }
/* A wishlist piece: a tag in the corner, as on its closet card. */
.outfits-tag {
  position: absolute; z-index: 1; top: calc(var(--pt) * 5); right: calc(var(--pt) * 5);
  display: grid; place-items: center;
  width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); border-radius: 50%;
  background: var(--accent); color: #fff;
}
.outfits-tag svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }

/* Help me decide's answer: what it put on and why, with Undo, over the bottom of the look. */
.outfits-why {
  position: absolute; z-index: 8; left: calc(var(--pt) * 24); right: calc(var(--pt) * 24); bottom: calc(var(--pt) * 254);
  display: flex; align-items: flex-start; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 8) 0 calc(var(--pt) * 8) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 14);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 calc(var(--pt) * 4) calc(var(--pt) * 16) rgba(0, 0, 0, 0.08);
  color: #000;
}
.outfits-why__thumb {
  position: relative; flex: none; width: calc(var(--pt) * 36); height: calc(var(--pt) * 46); margin-top: calc(var(--pt) * 2);
  border-radius: calc(var(--pt) * 8); background: var(--paper-2);
  box-shadow: 0 0 calc(var(--pt) * 2) rgba(0, 0, 0, 0.08);
}
.outfits-why__thumb img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.outfits-why__body { flex: 1; min-width: 0; display: grid; justify-items: start; gap: calc(var(--pt) * 6); }
.outfits-why__text { font-size: calc(var(--pt) * 13); line-height: 1.35; }
.outfits-why__undo {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 5);
  height: calc(var(--pt) * 28); padding: 0 calc(var(--pt) * 11); border-radius: 999px;
  background: rgba(90, 91, 216, 0.14); color: var(--accent-ink);
  font-size: calc(var(--pt) * 13); font-weight: 600;
}
.outfits-why__undo svg, .outfits-why__fold svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.outfits-why__x {
  flex: none; display: grid; place-items: center; width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); margin: calc(var(--pt) * -8) 0;
}
.outfits-why__x span {
  display: grid; place-items: center; width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); border-radius: 50%;
  background: rgba(118, 118, 128, 0.12); color: #5f5f64;
}
.outfits-why__x svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
/* Folded into a small "Why" in the corner beside the feet. */
.outfits-why.is-folded {
  left: auto; align-items: center; gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 2) calc(var(--pt) * 2) calc(var(--pt) * 6); border-radius: 999px;
}
.outfits-why__fold { display: inline-flex; align-items: center; gap: calc(var(--pt) * 6); padding: calc(var(--pt) * 4) 0; font-size: calc(var(--pt) * 13); font-weight: 600; color: #000; }
.outfits-why__fold .outfits-why__thumb { width: calc(var(--pt) * 22); height: calc(var(--pt) * 28); margin: 0; border-radius: calc(var(--pt) * 6); }
/* "Dressing you…" stays above the card while the pick is made. */
.outfits-section .outfits-studio.has-why .studio-status { top: calc(var(--pt) * 450); }
.outfits-why__fundo { display: grid; place-items: center; width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); color: var(--accent); }
.outfits-why__fundo svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.outfits-why button:focus-visible { outline-offset: 1px; border-radius: 999px; }

.outfits-back { margin-top: 10px; }
.outfits-phonenote { max-width: 340px; }

/* ---------- Points ---------- */
.outfits-points { margin-top: clamp(56px, 7vw, 96px); gap: 26px 40px; }
.outfits-points strong { display: block; color: var(--ink); margin-bottom: 4px; }
.outfits-points p { font-size: 16px; text-wrap: pretty; }
@media (min-width: 700px) { .outfits-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .outfits-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Last, so it wins over the display rules above. */
.outfits-section [hidden] { display: none; }

/* Below 900 px the heading lines up on the left like the other feature sections; it's centred above the wide stage. */
@media (max-width: 899px) { .outfits-section .section-head.center { margin-inline: 0; text-align: start; justify-items: start; } }