.build-look-page { font-family: Raleway, sans-serif; }
.build-look-page .build-look { color: var(--brand-red); }
.look-page { max-width: 980px; margin: 110px auto 70px; padding: 0 24px; }
.look-page h1, .look-page h2 { font-family: BRUSHY, sans-serif; color: var(--brand-red); font-weight: 400; text-align: center; }
.look-page h1 { font-size: clamp(48px, 7vw, 110px); margin: 0 0 70px; }
.outfit-stage { position: relative; width: 100%; aspect-ratio: 1 / 1.42; }
.outfit-slot { position: absolute; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; width: 39%; gap: 12px; }
.slot-accessories { top: 0; left: 0; width: 30%; transform: rotate(-13deg); }
.slot-tops { top: 13%; left: 30.5%; }
.slot-trousers { top: 42%; left: 1%; }
.slot-bags { top: 42%; right: 1%; }
.slot-shoes { top: 72%; left: 30.5%; }
.outfit-card { aspect-ratio: 3 / 4; background: #f6f3f4; display: grid; place-items: center; overflow: hidden; }
.outfit-card img { width: 100%; height: 100%; object-fit: contain; }
.outfit-card.is-empty { background: var(--brand-red); color: white; }
.okay-label { font: clamp(34px, 5vw, 78px)/1 BRUSHY, sans-serif; text-align: center; }
.outfit-arrow { background: none; border: 0; cursor: pointer; padding: 12px 5px; min-height: 44px; }
.outfit-arrow img { width: 100%; filter: grayscale(1); }
.outfit-arrow.previous img { transform: rotate(180deg); }
.outfit-arrow:hover img { filter: none; }
.look-page button:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.look-summary { max-width: 760px; margin: 110px auto 0; }
.look-page h2 { font-size: clamp(40px, 5vw, 68px); margin: 0 0 48px; }
#look-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 60px; }
.look-item h3 { font-size: 22px; font-weight: 400; margin: 0 0 12px; }
.look-item p { font-size: 14px; color: #777; margin: 8px 0; }
.look-sizes { display: flex; flex-wrap: wrap; gap: 4px; border: 0; margin: 0; padding: 0; }
.look-sizes legend { font-size: 12px; color: #777; margin-bottom: 5px; }
.look-sizes button { font: inherit; font-size: 12px; border: 0; background: transparent; color: #666; padding: 8px 4px; min-width: 26px; cursor: pointer; }
.look-sizes button[aria-pressed="true"] { color: var(--brand-red); text-decoration: underline; text-underline-offset: 4px; }
#look-message { color: var(--brand-red); min-height: 24px; font-size: 14px; }
#add-look { display: flex; align-items: center; gap: 18px; margin: 24px 0 0 auto; padding: 10px 20px; border: 1px solid var(--brand-red); border-radius: 40px; background: white; color: var(--brand-red); font: 400 22px Raleway, sans-serif; cursor: pointer; }
#add-look img { width: 48px; }
#add-look:disabled { opacity: .45; cursor: default; }
@media (max-width: 600px) {
  .look-page { margin-top: 65px; padding: 0 12px; }
  .look-page h1 { margin-bottom: 45px; }
  .outfit-slot { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 4px; width: 44%; }
  .slot-accessories { width: 33%; }
  .slot-tops, .slot-shoes { left: 28%; }
  .slot-trousers { left: 0; }
  .slot-bags { right: 0; }
  .look-summary { margin: 80px 20px 0; }
  #look-items { gap: 30px 16px; }
  .look-item h3 { font-size: 15px; }
  .look-item p { font-size: 11px; }
  #add-look { font-size: 16px; padding: 10px 14px; }
  #add-look img { width: 32px; }
}