/* The demo's front door and retailer picker: the August shopping demo's own selector (web/public/demos-shopping,
   _interactive-shopping/showcase.css and styles.css), with the password first and Fashion Nova's two demos added. */
@font-face { font-family: "DM Sans"; src: url("dm-sans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("dm-sans-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("dm-sans-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("dm-sans-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; color: #1c1e21; }
body { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.showcase-header { position: sticky; z-index: 101; top: 0; height: 48px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid rgba(28,30,33,.11); background: rgba(255,255,255,.97); backdrop-filter: blur(16px); }
.showcase-header__wordmark { width: 132px; display: block; }
.showcase-header__wordmark img { width: 100%; display: block; }

.signin { min-height: calc(100dvh - 48px); display: grid; place-items: center; padding: 40px 24px; }
.signin__card { width: min(720px, 100%); text-align: center; }
.appearance-wordmark { width: 168px; display: block; margin: 0 auto 26px; }
.signin h1 { max-width: 700px; margin: 0 auto; font-size: 36px; font-weight: 500; line-height: 36px; }
.signin__intro { max-width: 410px; margin: 22px auto 34px; color: #454545; font-size: 15px; line-height: 1.5; }

.retailer-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(610px, 100%); margin: 0 auto; }
.retailer-card { position: relative; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 1px solid #d2d2d2; border-radius: 13px; background: #fff; transition: border-color .18s ease, background-color .18s ease, transform .12s ease; }
.retailer-card:hover { border-color: #777; }
.retailer-card:active { transform: scale(.988); }
.retailer-card:focus-visible { outline: 2px solid #087fff; outline-offset: 2px; }
.retailer-card.is-selected { border-color: #050505; box-shadow: inset 0 0 0 1px #050505; }
.retailer-card__logo { height: 42px; display: grid; place-items: center; }
.retailer-card__logo--finesse img { display: block; width: 154px; height: auto; }
.retailer-card__logo--asos img { display: block; width: 144px; height: auto; }
.retailer-card__logo--nova img { display: block; width: 168px; height: auto; }
.retailer-card__logo--mara img { display: block; width: 132px; height: auto; }
.retailer-card__kind { color: #454545; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.signin__button { width: min(610px, 100%); min-height: 56px; margin-top: 16px; border: 1px solid #1c1e21; border-radius: 13px; color: #fff; background: #1c1e21; font-size: 15px; font-weight: 500; transition: transform .12s, opacity .12s; }
.signin__button:active { transform: scale(.985); opacity: .82; }

.door { display: grid; justify-items: center; }
.door input { width: min(610px, 100%); min-height: 56px; padding: 0 18px; border: 1px solid #d2d2d2; border-radius: 13px; background: #fff; font-size: 16px; text-align: center; }
.door input:focus { outline: none; border-color: #050505; box-shadow: inset 0 0 0 1px #050505; }
.door-error { min-height: 20px; margin: 12px 0 0; color: #B42318; font-size: 13px; }

@media (max-width: 699px) {
  .showcase-header { height: 44px; padding: 0 14px; }
  .showcase-header__wordmark { width: 112px; }
  .signin { min-height: calc(100dvh - 44px); align-items: start; padding: 42px 18px 28px; }
  .signin__card { margin: auto 0; }
  .signin h1 { font-size: 32px; line-height: 36px; }
  .signin__intro { margin: 18px auto 26px; font-size: 13px; }
  .retailer-picker { gap: 7px; }
  .retailer-card { min-height: 112px; padding: 15px 10px; }
  .retailer-card__logo--finesse img, .retailer-card__logo--asos img { width: 126px; }
  .retailer-card__logo--nova img { width: 132px; }
  .retailer-card__logo--mara img { width: 104px; }
  .retailer-card__kind { font-size: 11px; }
}