/* Buying website styles. Every colour, size and radius comes from tokens.css,
   so the shop's theme (chosen on the Studio's Store page) carries through.
   The layout is the store handoff of Nov 4 (docs/website-design-pass-3.md):
   the front page a banner with the profile over its foot, the Live now card
   and the next shows; the live page the video filling the screen with a HUD,
   one item card, and the chat as a glass panel (a laptop) or messages over
   the picture's foot (a phone). What reads or asks is one sheet. */

/* Inter, served from this site rather than a font service: one variable
   file has every weight. SIL Open Font License, in fonts/Inter-OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.ac87cd6a1b.woff2") format("woff2");
}

:root {
  /* The handoff's glass, stroke and gradients, from the theme's colours. */
  --glass: color-mix(in srgb, var(--color-bg) 55%, transparent);
  --stroke: color-mix(in srgb, var(--color-text) 12%, transparent);
  --grad: linear-gradient(135deg, var(--color-primary-button), var(--color-primary-button-pressed));
  --grad-accent: linear-gradient(180deg, var(--color-accent-text), var(--color-accent-pressed));
  --text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1 { font-size: var(--text-title-large-size); font-weight: var(--text-title-large-weight); line-height: 1.2; }
h2 { font-size: var(--text-title-large-size); font-weight: var(--text-title-large-weight); line-height: 1.2; }

.muted { color: var(--color-text-secondary); }
.strong { font-weight: var(--text-body-strong-weight); }
.overline {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overline.accent { color: var(--color-accent-text); }

/* The brand mark before a heading or an eyebrow: a slash in the accent. */
.slash {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--grad-accent);
  transform: skewX(-18deg);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -2px;
  flex: none;
}
.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 600;
}
.sec { margin: 44px 0 16px; font-size: 18px; letter-spacing: -0.01em; font-weight: 700; display: flex; align-items: center; }

/* The call to action: a pill in the main button's gradient; ghost, a glass pill. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  background: var(--grad);
  color: var(--color-on-primary-button);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary-button) 35%, transparent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.cta:hover:not(:disabled) { filter: brightness(1.06); }
.cta.ghost {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border: 1px solid var(--stroke);
  box-shadow: none;
  color: var(--color-text);
}
.cta.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 14%, transparent); filter: none; }
.cta.sm { padding: 8px 14px; font-size: 13px; }
.cta:disabled { opacity: 0.4; cursor: default; }
.cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-danger);
  color: var(--color-on-danger);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---- The site: the header, the page, the footer. ---- */
.site { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.site > main, .page-frame > main { flex: 1; width: 100%; min-height: 0; }
/* The frame the front page's and the live page's headers lie over: it
   starts under any band above (the testing mode, a new release). */
.page-frame { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* The header on a show's page before and after it is live: the store's
   name links home, the account at the right. */
.top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 48px;
  flex: none;
  padding: 0 var(--space-lg);
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  flex: 0 1 auto;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-window-title-size);
  font-weight: var(--text-window-title-weight);
  white-space: nowrap;
}
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand-logo { border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.brand-logo-slot { display: inline-block; width: 28px; height: 28px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.signed-in { color: var(--color-info); font-weight: var(--text-body-strong-weight); }
.account-pill { padding: 8px 14px; font-size: 13px; max-width: 200px; }
.account-pill .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-initial { display: none; }
/* Their Google picture, round, tucked to the pill's end. */
.icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  background: var(--glass);
  color: var(--color-text);
  cursor: pointer;
  flex: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.icon-button:hover { background: color-mix(in srgb, var(--color-bg) 75%, transparent); }
.icon-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sound-button.off { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 60%, transparent); }

/* The front page's header lies over the banner, and a show's over its
   cover. */
.site.home .top-bar.top, .site.showfront .top-bar.top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  background: none;
  border: 0;
}
/* The shop's logo and name, and on a show's page All shows under them
   (asked Nov 6). The name shortens with an ellipsis rather than push past a
   narrow header. */
.front-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.front-brand { max-width: 100%; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-shadow: var(--text-shadow); }
.front-brand .brand-logo { width: 32px; height: 32px; border-radius: 8px; display: block; }
.front-brand .brand-logo.initials { display: grid; place-items: center; background: var(--grad-accent); color: var(--color-on-accent); font-size: 13px; text-shadow: none; }
.front-who .back-link { font-size: 14px; text-shadow: var(--text-shadow); }

/* The tab an emailed link opened, once the page that started is signed in
   (asked Nov 6): it says to go back to that page and close this one. */
.close-tab-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) max(16px, env(safe-area-inset-right, 0px)) var(--space-xl) max(16px, env(safe-area-inset-left, 0px));
}
.close-tab-card { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.close-tab-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-accent); color: var(--color-on-accent); font-size: 28px; font-weight: 700; }
.close-tab-card h1 { margin: var(--space-sm) 0 0; font-size: 24px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.close-tab-card p { margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }

/* The pages. A show coming up or over, and a show that cannot be shown:
   one column. */
.page { width: 100%; }
.page.solo { max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-xxl); }

button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-info);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
button.link:hover { color: var(--color-text); }
button.link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card.empty, .empty { text-align: center; padding: var(--space-xxl); }
.card.empty { gap: var(--space-xs); }
.hint { color: var(--color-text-secondary); }

.button {
  min-height: 36px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--text-body-strong-weight);
  cursor: pointer;
  transition: filter var(--motion-transition) ease-out, background var(--motion-transition) ease-out;
}
.button:hover:not(:disabled) { background: var(--color-selected); }
.button.primary {
  border-color: var(--color-primary-button);
  background: var(--color-primary-button);
  color: var(--color-on-primary-button);
  font-weight: 700;
}
.button.primary:hover:not(:disabled) { border-color: var(--color-primary-button-hover); background: var(--color-primary-button-hover); }
.button.primary:active:not(:disabled) { border-color: var(--color-primary-button-pressed); background: var(--color-primary-button-pressed); }
.button.ghost { background: transparent; }
.button.large { min-height: 44px; font-size: 14px; }
.button:disabled { opacity: 0.4; cursor: default; }
.button.pill { border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.button { color: var(--color-text); }
a.button.primary { color: var(--color-on-accent); }

:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 60%, transparent); outline-offset: 2px; }

.notice {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-caption-size);
}
.notice.success { background: var(--color-success-tint); color: var(--color-success); }
.notice.danger { background: var(--color-danger-tint); color: var(--color-danger-text); }
.notice.info { background: var(--color-info-tint); color: var(--color-info-text); }

/* ---- A buyer's order: the purchases, the totals, the shipping. ---- */
.purchases { display: flex; flex-direction: column; gap: var(--space-sm); }
.purchases li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-lg);
  min-height: 44px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.purchase-includes { font-size: 12px; }
.order-totals { display: flex; flex-direction: column; gap: var(--space-sm); }
.order-totals dl { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; }
.order-totals .row { display: flex; justify-content: space-between; gap: var(--space-lg); }
.order-totals dt { color: var(--color-text-secondary); }
.order-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.order-totals .total dt, .order-totals .total dd { color: var(--color-text); font-weight: 600; }
.order-totals .danger dt, .order-totals .danger dd { color: var(--color-danger-text); }
.status { color: var(--color-text-secondary); font-size: var(--text-caption-size); font-weight: 600; }
.status.success { color: var(--color-success); }
.status.danger { color: var(--color-danger-text); }
.status.accent { color: var(--color-accent-text); }

.orders-back { padding-right: 28px; }
.my-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.my-order { border-bottom: 1px solid var(--color-border-subtle); }
.my-order-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-sm) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.my-order-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.my-order-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.my-order-title .strong { min-width: 0; overflow-wrap: anywhere; }
.my-order-title .status { flex-shrink: 0; }
.my-order-body { padding-bottom: var(--space-md); }

/* ---- The account's forms. ---- */
.account form { display: flex; flex-direction: column; gap: var(--space-md); }
.account .actions, .actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--space-xs); }
.tab {
  height: 30px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
}
.tab.selected { background: var(--color-selected); color: var(--color-text); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field label { color: var(--color-text-secondary); font-size: var(--text-caption-size); }
.field input {
  height: 36px;
  width: 100%;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field input:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
.field select {
  height: 36px;
  width: 100%;
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field select:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
.field.invalid select { border-color: var(--color-danger-border); }
.check { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-caption-size); color: var(--color-text-secondary); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.stripe-card { min-height: 64px; }
/* Signing in (asked Nov 3; through the accounts service's popup since Nov 5):
   Continue with Google, white as Google asks, then "or", then the emailed
   link, whose address the popup asks for. */
.google-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #1f1f1f; border-color: #dadce0; }
.google-button:hover:not(:disabled) { background: #f6f6f6; }
.google-button svg { flex: none; }
.sign-in-or { display: flex; align-items: center; gap: var(--space-md); color: var(--color-text-secondary); font-size: var(--text-caption-size); }
.sign-in-or::before, .sign-in-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.field-note { display: block; margin-top: 4px; font-size: var(--text-caption-size); color: var(--color-text-secondary); }
.field-note.error { color: var(--color-danger-text); }
.field.invalid input { border-color: var(--color-danger-border); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- The front page (the store handoff, Nov 4). ---- */
.site.home main.home-page, .site.showfront main.showfront-page { max-width: none; padding: 0; margin: 0; }
/* Who the shop is, over the banner's foot. */
.profile { display: flex; gap: 24px; align-items: flex-end; position: relative; flex-wrap: wrap; }
.who { flex: 1 1 360px; min-width: 0; }
.who h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.handle { margin: 4px 0 10px; color: var(--color-accent-text); font-size: 14px; }
.bio { margin: 0 0 12px; color: var(--color-text); opacity: 0.86; font-size: 16px; line-height: 1.55; max-width: 620px; white-space: pre-line; }
.facts { color: var(--color-text-secondary); font-size: 14px; }
/* The show that is on: the whole card a way in. */
.livecard {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin: 36px 0 8px;
  background: var(--color-panel);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s;
}
.livecard:hover { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.lc-vid { position: relative; aspect-ratio: 16 / 9; background: var(--color-video-black); }
.lc-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-vid .live-badge { position: absolute; top: 14px; left: 14px; }
.vc {
  position: absolute;
  top: 14px;
  left: 72px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}
.lc-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: flex-start; min-width: 0; }
.lc-body h2 { margin: 0; font-size: 24px; letter-spacing: -0.01em; font-weight: 700; overflow-wrap: anywhere; }
.lc-body .cta { margin-top: 10px; }
/* The next shows: the date as a chip, the title, the time. */
.ups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.up a {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--color-panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 16px;
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
  height: 100%;
  transition: border-color 0.2s;
}
.up a:hover { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.up-text { flex: 1; min-width: 0; }
.up h4 { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.up .muted { font-size: 13px; margin-top: 4px; }
.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  flex: none;
}
.date b { font-size: 11px; letter-spacing: 0.1em; }
/* A show to come with a cover shows it in the date's place (asked Nov 5). */
.up-cover { flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--color-panel); }
.up-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.date span { font-size: 13px; color: var(--color-text); font-weight: 600; white-space: nowrap; }
.upcoming-empty {
  padding: var(--space-xxl);
  border-radius: 16px;
  background: var(--color-panel);
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  text-align: center;
}
/* About the shop: its photos and its details. */
.about-photos { flex: 999 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.about-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 14px; display: block; background: var(--color-panel); }
.about-photos .about-photo { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; display: block; }
.about-photos .about-photo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.about-details {
  flex: 1 1 280px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: 16px;
  background: var(--color-panel);
  border: 1px solid var(--stroke);
}
.about-details dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-secondary); text-transform: uppercase; }
.about-details dd { margin: 2px 0 0; }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  max-width: 1180px;
  width: 100%;
  margin: 56px auto 0;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--stroke);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.site.show .site-footer { margin-top: var(--space-xl); }
@media (max-width: 900px) {
  .livecard { grid-template-columns: 1fr; }
  .ups { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .profile { gap: 14px; }
  .lc-body { padding: 20px; }
  .lc-body h2 { font-size: 20px; }
  .about-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-cover { width: 96px; }
}

/* ---- The front page, the whole width (asked Nov 5, as gosell.live's own
   page): the banner behind everything, fading to the ground; the shop in
   the bottom left corner; the shows in the middle from where the banner
   fades, scrolling on their own; About the shop, with the footer's line,
   in a card in the bottom right. One screen on a laptop or wider; stacked,
   and scrolling, on a phone or a short window. ---- */
.storefront { position: relative; }
.sf-backdrop { position: absolute; inset: 0 0 auto; height: clamp(260px, 56vw, 420px); overflow: hidden; background: var(--color-panel); z-index: 0; }
.sf-backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
.sf-backdrop .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 60%, transparent), color-mix(in srgb, var(--color-bg) 10%, transparent) 30%, color-mix(in srgb, var(--color-bg) 20%, transparent) 55%, var(--color-bg));
}
.sf-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: calc(clamp(260px, 56vw, 420px) - 120px) max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
}
.sf-shop { text-shadow: var(--text-shadow); }
.sf-shows { display: flex; flex-direction: column; min-width: 0; }
.sf-shows .sec { margin-top: 0; }
.sf-shows .ups { grid-template-columns: 1fr; gap: 10px; }
.sf-shows .livecard { margin: 0 0 var(--space-lg); }
.sf-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  min-width: 0;
}
.sf-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.sf-about .about-photos { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-about .about-photos .about-photo, .sf-about .about-photos img { width: 64px; height: 64px; border-radius: 10px; }
.sf-about .about-photos img { object-fit: cover; aspect-ratio: auto; }
.sf-about .about-details { flex: none; padding: 0; border: 0; background: none; border-radius: 0; gap: var(--space-sm); font-size: 13px; }
.sf-about .about-details dt { font-size: 10px; }
.sf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--stroke);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.sf-foot .muted { min-width: 0; overflow-wrap: anywhere; }
.sf-foot .privacy-policy-link { font-size: 11px; }
/* Powered by and the platform's mark, on a line of their own at the card's
   foot (asked Nov 6). */
.powered-line { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.powered-line img { border-radius: 5px; flex: none; }
.powered-line .powered-by { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.powered-line .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.powered-line:hover .brand-name { color: var(--color-accent-text); }
@media (min-width: 1000px) and (min-height: 620px) {
  /* One screen: nothing scrolls but the shows (and a corner whose words
     run longer than the screen). */
  .site.home, .site.showfront { height: 100vh; height: 100dvh; overflow: hidden; }
  .site.home .page-frame, .site.home main.home-page,
  .site.showfront .page-frame, .site.showfront main.showfront-page { min-height: 0; height: 100%; }
  .storefront { height: 100%; overflow: hidden; }
  .sf-backdrop { inset: 0; height: auto; }
  .sf-backdrop .shade {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 55%, transparent) 0%, color-mix(in srgb, var(--color-bg) 5%, transparent) 22%, color-mix(in srgb, var(--color-bg) 10%, transparent) 38%, color-mix(in srgb, var(--color-bg) 82%, transparent) 70%, var(--color-bg) 100%);
  }
  .sf-grid {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 38vw)) minmax(0, 1fr);
    gap: var(--space-xl);
    padding: 88px var(--space-xl) var(--space-xl);
  }
  .sf-shop, .sf-about { align-self: end; max-height: 100%; overflow-y: auto; }
  .sf-shop { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sf-shop .who { flex: none; }
  .sf-shop .bio { max-width: 46ch; }
  .sf-about { justify-self: end; width: min(100%, 380px); }
  /* The middle starts where the banner fades. */
  .sf-shows { padding-top: calc(38vh - 88px); min-height: 0; }
  .sf-shows .livecard { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); flex: none; }
  .sf-shows .lc-body { padding: 16px 18px; gap: 4px; }
  .sf-shows .lc-body h2 { font-size: 18px; }
  .sf-shows .lc-body .cta { margin-top: 6px; max-width: 100%; white-space: normal; text-align: start; }
  .sf-shows > section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .sf-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
}

/* ---- A show coming up or over, as the front page (asked Nov 5): its
   cover behind, the show in the bottom left, its items in the middle, the
   shop's card in the bottom right. ---- */
.show-page.storefront { display: block; gap: 0; }
.sf-backdrop.banner-logo { display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; background: linear-gradient(135deg, var(--color-accent-tint), var(--color-panel)); }
.sf-backdrop.banner-logo img { width: auto; height: auto; max-width: 30%; max-height: 30%; object-fit: contain; }
.show-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.show-who .cover-pill { position: static; }
.show-page .show-who h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; font-weight: 700; line-height: 1.15; }
.show-who .show-meta { font-size: 14px; color: var(--color-text); opacity: 0.86; margin: 0; max-width: 46ch; }
.sf-shows .item-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.shop-card .order-line { margin: 0; }
.shop-card-name { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* A show's items (asked Nov 6): stacked as always under the one-screen
   layout; in it, the middle wider and the items six at a time in one row,
   paged by the buttons beside the heading (and a wheel turn or swipe). */
/* A scrim behind the heading, the pager and the tiles (asked Nov 6), so
   they read on any cover. */
.show-page .show-items {
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  min-width: 0;
}
.items-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 16px; }
.items-head .sec { margin: 0; min-width: 0; }
.items-pager { display: none; align-items: center; gap: 8px; flex: none; }
.items-pager-count { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: var(--text-shadow); }
.items-pager .icon-button:disabled { opacity: 0.35; cursor: default; background: var(--glass); }
@media (min-width: 1000px) and (min-height: 620px) {
  .show-page .sf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, min(760px, 46vw)) minmax(0, 1fr); }
  /* The scrim as tall as its row, not the column. */
  .show-page .sf-shows > section.show-items { flex: none; }
  .items-pager { display: flex; }
  .show-page .sf-shows .item-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .show-page .item-tile.off-page { display: none; }
}

/* ---- A show coming up or over: its cover and what is in it. ---- */
.show-page { display: flex; flex-direction: column; gap: var(--space-md); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--text-body-strong-weight); color: var(--color-accent-text); text-decoration: none; align-self: flex-start; }
.back-link::before { content: "‹"; font-size: 18px; line-height: 1; }
.back-link:hover { color: var(--color-accent); }
.cover-big { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--color-panel); border: 1px solid var(--color-border-subtle); }
.cover-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-big.banner-logo { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-accent-tint), var(--color-panel)); }
.cover-big.banner-logo img { width: auto; height: auto; max-width: 40%; max-height: 45%; object-fit: contain; }
.cover-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cover-pill.ended { color: var(--color-text-secondary); }
.show-page h1 { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.show-meta { font-size: 13px; }
.show-items { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-sm); }
.show-items h2 { font-size: 17px; font-weight: 700; }
.item-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
.item-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-tile-photo { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--color-panel); border: 1px solid var(--color-border-subtle); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.item-tile-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-tile-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tile-price { font-size: 12px; color: var(--color-text-secondary); }
.item-tile-price.sold { text-decoration: line-through; }
/* A buyer's order from a show that is over: a card across the page. */
.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: left;
  /* The overline's letter-spacing trails its last letter by a pixel or two. */
  overflow: hidden;
}
.order-line .overline { display: block; grid-row: 1; grid-column: 1; }
.order-line .strong { grid-row: 2; grid-column: 1; white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
.order-line .purchases-open { grid-row: 1 / span 2; grid-column: 2; font-size: 13px; color: var(--color-info); text-decoration: underline; text-underline-offset: 2px; }
.show-page .column-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-panel); }
.column-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.column-card-title { font-size: 16px; overflow-wrap: anywhere; }
.banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
@media (max-width: 600px) {
  .page.solo { padding: var(--space-md) var(--space-lg) var(--space-xl); }
  .cover-big { border-radius: 10px; }
  .show-page h1 { font-size: 20px; }
  .item-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- The live show (the store handoff, Nov 4). ----
   The video fills the screen; over it the HUD at the top, one item card
   over the foot at the left, and the chat: a glass panel at the right on a
   laptop (900px and up), the messages over the picture's foot on a phone,
   the composer pinned to the bottom. Nothing scrolls but the chat. */
.site.live { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.site.live main.page.live { position: relative; flex: 1; min-height: 0; display: block; }
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--color-video-black, #000); }
.video-area { position: absolute; inset: 0; z-index: 0; }
.video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-video-black, #000); overflow: hidden; }
.video-stage { position: absolute; inset: 0; }
.video-stage video.main { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A landscape picture, which the Studio sends, shows whole on a phone,
   high up, with the chat and the item over the dark below it; a portrait
   picture fills the screen. */
@media (orientation: portrait) {
  .video-stage video.main:not(.portrait) { object-fit: contain; object-position: center 24%; }
}
.video-stage video.inset {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 132px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
}
.video-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
}
.vshade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 55%, transparent), transparent 22%, transparent 50%, color-mix(in srgb, var(--color-bg) 75%, transparent));
}
/* Sound held back by the browser until a click: under the HUD, gone at the
   first click. */
.sound-pill {
  position: absolute;
  left: max(14px, env(safe-area-inset-left, 0px));
  top: calc(max(14px, env(safe-area-inset-top, 0px)) + 56px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--glass);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The seller away or the show paused: the show's cover where the video
   was, the message in a band across its middle. */
.video-away { position: absolute; inset: 0; background: var(--color-panel); }
.video-away img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-away-band {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border: 1px solid var(--stroke);
  color: var(--color-text);
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.video-away-band .strong { font-size: 1.1rem; }
.video-away-band span:not(.strong) { color: var(--color-text-secondary); }
.video:has(.video-away) .sound-pill { display: none; }

/* The HUD: the shop and the show in a pill, LIVE, how many watch, the
   sound, the account; on a phone the way back. */
.site.live .top-bar.lhud {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
  background: none;
  border: 0;
}
.seller {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--color-text);
  text-decoration: none;
}
.av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: block; background: var(--color-panel); }
.av.initials { display: grid; place-items: center; background: var(--grad-accent); color: var(--color-on-accent); font-weight: 700; font-size: 13px; }
.nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-name { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { display: flex; gap: 6px; align-items: center; margin-left: auto; flex: none; }
.viewers {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.lhud .account-pill { height: 34px; padding: 0 12px; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--stroke);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  flex: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* The item on sale, over the foot at the left. */
.item-dock { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.item-card-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.item-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: color-mix(in srgb, var(--color-panel) 78%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow: hidden;
}
.item-image {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-raised);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.item-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-open { cursor: zoom-in; font: inherit; }
.item-open:focus-visible, .item-title-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ib { min-width: 0; }
.item-status { font-size: 10.5px; }
.item-card.sold-out .item-status { color: var(--color-danger-text); }
.item-card.paused .item-status { color: var(--color-warning); }
.item-title { margin: 2px 0; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-title-open {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-title-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.ip { margin: 0; font-size: 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.item-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.item-card.sold-out .item-price { color: var(--color-text-secondary); text-decoration: line-through; }
.item-stock { font-size: 12px; color: var(--color-text-secondary); }
.item-stock.low { color: var(--color-danger-text); }
.item-details-link { font-size: 12px; }
.item-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--grad);
  color: var(--color-on-primary-button);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary-button) 35%, transparent);
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.item-buy:hover:not(:disabled) { filter: brightness(1.06); }
.item-buy:disabled { background: var(--color-raised); color: var(--color-text-secondary); box-shadow: none; cursor: default; }
.item-buy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.item-buy-hint { font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); text-align: right; max-width: 150px; }
.item-card.loading .item-title { height: 16px; width: 60%; border-radius: var(--radius-sm); background: var(--color-raised); }
.item-card.loading .item-image { animation: item-fade 1.2s ease-in-out infinite alternate; }
@keyframes item-pulse { 50% { opacity: 0.35; } }
@keyframes item-fade { from { opacity: 0.6; } to { opacity: 1; } }
.item-card-wrap .notice { margin: 0; }
/* Your purchases, in one glass chip that opens them. */
.purchases-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.purchases-line:hover { background: color-mix(in srgb, var(--color-bg) 75%, transparent); }
.purchases-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.purchases-line .overline { display: inline; font-size: 10px; }
.purchases-line .strong { font-size: 12.5px; white-space: nowrap; }
.purchases-line .purchases-open { color: var(--color-text-secondary); }
.brandmark { display: none; }

/* The chat. */
.chat-dock { position: absolute; z-index: 2; display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.chat-title { display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; }
.chat-toggle { font-size: 12px; }
.chat-pinned { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); font-size: 12.5px; }
.chat-pinned .overline { font-size: 10px; color: var(--color-accent-text); }
.chat-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.chat-list::-webkit-scrollbar { display: none; }
.chat-list > :first-child { margin-top: auto; }
.chat-message { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-name { color: var(--color-accent-text); font-weight: 600; margin-right: 6px; }
.chat-name.seller { color: var(--color-text); }
.chat .hint { font-size: 12.5px; padding: 8px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chat .notice { margin: 0; }
.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  color: var(--color-text);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
}
.chat-form input:focus { outline: none; border-color: var(--color-accent); }
.chat-form .send { width: 44px; height: 44px; padding: 0; flex: none; }

/* A phone: the HUD along the top; over the picture's foot, stacked from
   the bottom up, the composer, the item (with the purchases chip), and the
   messages above them, each clear of the next whatever their height. */
@media (max-width: 899px) {
  .stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  /* The chat's parts stack with the item in the stage's own column. */
  .chat-dock, .chat { display: contents; }
  .chat-head { display: none; }
  .chat-list {
    position: relative;
    z-index: 2;
    order: 1;
    width: 100%;
    max-height: 30vh;
    flex: none;
    -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
    mask-image: linear-gradient(to top, #000 60%, transparent);
    padding-top: 16px;
  }
  .chat-message { text-shadow: var(--text-shadow); }
  .chat-pinned { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); top: calc(max(14px, env(safe-area-inset-top, 0px)) + 54px); z-index: 2; }
  .item-dock { position: relative; order: 2; width: 100%; flex: none; }
  .chat .hint, .chat .notice, .chat-form { position: relative; z-index: 2; order: 3; flex: none; margin-top: 0; }
  .chat-form { width: 100%; }
  .item-card { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .item-image { width: 60px; height: 60px; }
  /* The price over the stock line, and no Details link: the picture and
     the title open the details, and the card stays under 100px so the
     messages clear it. */
  .ip { flex-direction: column; align-items: flex-start; gap: 2px; }
  .item-details-link { display: none; }
  .item-buy { padding: 11px 18px; font-size: 14px; }
  .lhud .account-pill.signed-in { width: 34px; padding: 0; border-radius: 50%; justify-content: center; }
  .lhud .account-pill.signed-in .account-name { display: none; }
  .lhud .account-pill.signed-in .account-initial { display: inline; font-size: 12px; }
  /* Not yet signed up: no letters to show, so the words stay. */
  .lhud .account-pill.signed-in.unnamed .account-name { display: inline; }
  .nm b { max-width: 150px; }
  .show-name { max-width: 150px; }
  .lhud .sound-button { display: none; }
  .chat .hint { align-self: flex-start; }
  .signin-dock { position: absolute; }
}
@media (max-width: 480px) {
  .lhud .viewers { display: none; }
  .nm b, .show-name { max-width: 110px; }
  .lhud { gap: 8px; }
}
/* A laptop: the chat a glass panel at the right, the item over the foot
   at the left, the brand mark under it. */
@media (min-width: 900px) {
  .site.live .top-bar.lhud { right: auto; max-width: calc(100% - 420px); padding: max(24px, env(safe-area-inset-top, 0px)) 14px 10px 28px; }
  .x { display: none; }
  .chat-dock {
    top: max(16px, env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    width: 360px;
    background: color-mix(in srgb, var(--color-panel) 55%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    padding: 16px;
  }
  .chat-head { padding-bottom: 12px; border-bottom: 1px solid var(--stroke); }
  .chat-pinned { margin-top: 12px; }
  .chat-list { flex: 1; padding: 12px 0; gap: 9px; }
  .chat .hint { align-self: stretch; text-align: center; }
  .chat-form { padding-top: 4px; }
  /* Hide folds the panel to its heading, Show chat on it. */
  .chat-dock.hidden { bottom: auto; padding: 10px 16px; }
  .chat-dock.hidden .chat-head { padding-bottom: 0; border-bottom: 0; }
  .chat-dock.hidden .chat > :not(.chat-head) { display: none; }
  .item-dock { left: 28px; bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 48px); width: min(440px, calc(100% - 440px)); }
  .brandmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    color: var(--color-text);
    opacity: 0.85;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: var(--text-shadow);
  }
  .brandmark img { border-radius: 6px; }
}
/* Signed out on a live show (work queue item 53): the cover in the video's
   place with the band across its foot, Sign in and Create account in a
   card over the middle. */
.show-banner .video-away-band { top: auto; bottom: 0; left: 0; right: 0; transform: none; border-radius: 0; border: 0; text-align: left; align-items: flex-start; background: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.video-away.banner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-tint), var(--color-panel));
}
.video-away.banner-logo img.banner-logo-image { width: auto; height: auto; max-width: 40%; max-height: 45%; object-fit: contain; margin-bottom: 18%; }
.signin-dock {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 24px));
}
.signin-dock .column-card { background: color-mix(in srgb, var(--color-panel) 85%, transparent); border: 1px solid var(--stroke); border-radius: 20px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---- The sheet: everything that reads or asks. ---- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.sheet-backdrop.over { z-index: 50; }
.sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 40px rgb(0 0 0 / 0.35);
}
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 14px var(--space-lg) 10px; }
.sheet-head h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.sheet .card { border: 0; padding: 0; background: transparent; }
.menu-close {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.menu-close:hover { background: var(--color-selected); color: var(--color-text); }
.menu-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 699px) {
  .sheet {
    top: auto;
    left: 0;
    width: 100%;
    height: 92%;
    max-height: 92%;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgb(0 0 0 / 0.35);
  }
  .sheet::before { content: ""; display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--stroke); }
  .sheet.short { height: auto; }
  .sheet-body { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
}

/* The details of an item, in the sheet. */
.details-photos { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.details-photo { aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--color-raised); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); }
.details-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.details-thumbs { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.details-thumb { width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-raised); overflow: hidden; cursor: pointer; }
.details-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.details-thumb.selected { border-color: var(--color-accent); }
.details-thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.details-body { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.details-body h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.details-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text); }
.item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-secondary); display: inline-block; flex: none; }
.details-status .item-dot { background: var(--color-danger); animation: item-pulse 1.6s ease-in-out infinite; }
.details-status.sold-out { color: var(--color-danger-text); }
.details-status.sold-out .item-dot { background: var(--color-danger-text); animation: none; }
.details-status.coming-up { color: var(--color-text-secondary); }
.details-status.coming-up .item-dot { background: var(--color-text-secondary); animation: none; }
.details-status.paused { color: var(--color-warning); }
.details-status.paused .item-dot { background: var(--color-warning); animation: none; }
.details-variant { margin: 0; color: var(--color-text-secondary); }
.details-bundle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.details-bundle-item { display: flex; gap: var(--space-md); align-items: center; width: 100%; min-width: 0; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.details-bundle-item:hover { background: var(--color-raised); }
.details-bundle-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.details-bundle-item > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.details-bundle-open { color: var(--color-text-secondary); font-size: 20px; line-height: 1; }
.details-back { align-self: flex-start; }
.details-bundle-photo { width: 56px; height: 56px; flex: none; border-radius: var(--radius-md); object-fit: contain; background: var(--color-raised); }
.details-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.details-buy .item-price-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.details-buy .item-price-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.details-buy .item-price { font-size: 22px; line-height: 1.05; font-weight: 800; }
.details-left { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.details-over { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.details-note { margin: 0; font-weight: 600; }
.details-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); }
.details-facts dt { color: var(--color-text-secondary); font-size: var(--text-caption-size); padding-top: 2px; }
.details-facts dd { margin: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.details-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* The card terms (work queue item 58) and the agree step. */
.terms-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.card-terms { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: var(--space-sm); }
.card-terms .field-note { margin-top: 0; }
.card-terms-links { display: flex; flex-wrap: wrap; gap: 4px var(--space-lg); }
.card-terms-box { color: var(--color-text); }

/* A shop photo opened whole over the page (asked Oct 24). */
.photo-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-lg); background: rgb(0 0 0 / 0.7); }
.photo-viewer { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-width: min(1100px, 100%); }
.photo-full { max-width: 100%; max-height: calc(100vh - 2 * var(--space-lg) - 56px); object-fit: contain; border-radius: var(--radius-lg); background: var(--color-raised); display: block; }
.photo-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 32px; height: 32px; background: color-mix(in srgb, var(--color-panel) 80%, transparent); }
.photo-nav { display: flex; align-items: center; gap: var(--space-md); }
.photo-nav .button { min-width: 44px; font-size: 20px; line-height: 1; }

/* ---- While the store loads: nothing for half a second, then a quiet spinner. ---- */
.page-loading { display: grid; place-items: center; min-height: 40vh; opacity: 0; animation: page-loading-show 0.2s ease-out 0.5s forwards; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-top-color: var(--color-text-secondary); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes page-loading-show { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Testing mode and a new release: bands above everything. ---- */
.testing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-warning);
  color: var(--color-bg);
  font-weight: var(--text-body-strong-weight);
  text-align: center;
  flex: none;
  position: relative;
  z-index: 4;
}
.testing-banner-label { padding: 2px var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-warning); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.new-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent-tint);
  color: var(--color-text);
  font-weight: var(--text-body-strong-weight);
  text-align: center;
  flex: none;
  position: relative;
  z-index: 4;
}

/* ---- Coming soon: the one stage left. ---- */
.site.stage { min-height: 100vh; min-height: 100dvh; }
.site.stage > main { display: flex; flex-direction: column; }
.stage-frame { position: relative; flex: 1; display: flex; flex-direction: column; overflow: clip; }
.site.stage.whole .stage-frame { min-height: 100vh; min-height: 100dvh; }
.stage-frame > main { flex: 1; display: flex; flex-direction: column; }
.site.stage .home-page { max-width: none; padding: 0; margin: 0; }
.stage-page { position: static; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.stage-backdrop { position: absolute; inset: 0; background: var(--color-bg); z-index: 0; }
.stage-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.site.stage .top-bar {
  height: auto;
  min-height: 44px;
  padding: 6px var(--space-xl) 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 62%, transparent) 0%, color-mix(in srgb, var(--color-bg) 20%, transparent) 60%, transparent 100%);
  border-bottom: 0;
}
.site.stage .top-bar .brand, .site.stage .top-bar .signed-in { text-shadow: var(--text-shadow); }
.stage-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 64px var(--space-xl) var(--space-lg);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 82%, transparent) 0%, color-mix(in srgb, var(--color-bg) 40%, transparent) 60%, transparent 100%);
}
.stage-tease { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 520px; text-shadow: var(--text-shadow); }
.stage-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.stage-headline { margin: 0; font-size: 28px; line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.stage-sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-text); opacity: 0.85; max-width: 46ch; white-space: pre-line; }
.coming-soon-message { font-size: 16px; }
@media (max-width: 600px) {
  .site.stage .top-bar { padding: 6px var(--space-md) 20px; }
  .stage-bottom { padding: 48px var(--space-md) var(--space-md); }
  .stage-headline { font-size: 22px; }
  .stage-sub { font-size: 13px; }
  .stage-tease { max-width: none; }
}