/* Public shop site at /s/{slug}. Shop brand on the page. Aestar stays off the chrome. */

:root {
  --shop-canvas: #f6f4f0;
  --shop-ink: #141414;
  --shop-muted: #52525b;
  --shop-line: #e4e4e7;
  --shop-accent: #b42318;
  --shop-paper: #ffffff;
  --shop-bar: #ffffff;
  --shop-bar-ink: #141414;
  --shop-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body.shop-public {
  background: var(--shop-canvas);
  color: var(--shop-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.shop-preview {
  background: #fff7ed;
  border-bottom: 1px solid var(--shop-line);
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
}
.shop-demo {
  background: #fffbeb;
  border-bottom: 1px solid var(--shop-line);
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
}
.shop-bar {
  background: var(--shop-bar);
  color: var(--shop-bar-ink);
  border-bottom: 1px solid var(--shop-line);
  position: sticky;
  top: 0;
  z-index: 8;
  padding-top: env(safe-area-inset-top, 0px);
}
.shop-bar .inner,
.shop-wrap {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}
.shop-bar .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand phone"
    "nav nav";
  align-items: center;
  gap: 10px 16px;
  padding: 12px 0 10px;
}
.shop-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.shop-logo {
  height: 40px;
  width: auto;
  max-width: min(220px, 58vw);
  display: block;
  background: transparent;
}
.shop-name {
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}
.shop-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
}
.shop-nav a {
  color: var(--shop-muted);
  text-decoration: none;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
}
.shop-nav a[aria-current="page"],
.shop-nav a:hover {
  color: var(--shop-accent);
  background: color-mix(in srgb, var(--shop-accent) 8%, transparent);
}
.shop-bar-phone {
  grid-area: phone;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--shop-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
body[data-palette="chrome-red"] {
  --shop-canvas: #fafafa;
  --shop-ink: #111111;
  --shop-accent: #dc2626;
  --shop-bar: #050505;
  --shop-bar-ink: #fafafa;
}
body[data-palette="chrome-red"] .shop-nav a {
  color: #d4d4d8;
}
body[data-palette="chrome-red"] .shop-nav a[aria-current="page"],
body[data-palette="chrome-red"] .shop-nav a:hover {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.16);
}
body[data-palette="chrome-red"] .shop-bar-phone {
  background: #dc2626;
  color: #fff;
}
body[data-palette="graphite-red"] {
  --shop-canvas: #f4f4f5;
  --shop-ink: #111111;
  --shop-accent: #b91c1c;
  --shop-bar: #18181b;
  --shop-bar-ink: #fafafa;
}
body[data-palette="graphite-red"] .shop-nav a {
  color: #d4d4d8;
}
body[data-palette="graphite-red"] .shop-nav a[aria-current="page"],
body[data-palette="graphite-red"] .shop-nav a:hover {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.18);
}
body[data-palette="graphite-red"] .shop-bar-phone {
  background: #b91c1c;
  color: #fff;
}
body[data-palette="white-chrome"] {
  --shop-canvas: #f6f4f0;
  --shop-ink: #141414;
  --shop-accent: #b91c1c;
  --shop-line: #e4e4e7;
  --shop-bar: #ffffff;
  --shop-bar-ink: #141414;
}
.shop-hero {
  padding: 36px 0 20px;
}
/* Never one word alone on a heading's last line (Tony's rule): "Desert Demo
   Electric" breaks as "Desert / Demo Electric", not "Desert Demo / Electric". */
.shop-wrap h1,
.shop-wrap h2,
.shop-wrap h3 {
  text-wrap: pretty;
}
.shop-hero h1 {
  font-size: clamp(34px, 7vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0 0 14px;
  max-width: 14ch;
}
.shop-kicker {
  color: var(--shop-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.shop-lead {
  color: var(--shop-muted);
  max-width: 620px;
  margin: 0 0 18px;
  font-size: 17px;
}
.shop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-paper);
  color: var(--shop-ink);
  font-size: 13px;
  font-weight: 650;
}
.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.shop-btn,
.shop-public button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #141414;
  background: #141414;
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.shop-btn.ghost,
.shop-public button.ghost {
  background: var(--shop-paper);
  color: #141414;
  border-color: var(--shop-line);
}
.shop-btn:disabled,
.shop-public button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.shop-btn.is-talk-live,
.shop-btn[data-talk-live="1"] {
  opacity: 1 !important;
  filter: none;
  background: var(--shop-accent);
  color: #fff;
  border-color: var(--shop-accent);
  cursor: pointer;
}
.shop-section {
  padding: 12px 0 8px;
}
.shop-section-head {
  margin: 0 0 16px;
}
.shop-section-head h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.03em;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 40px;
}
/* Recent work: the shop's own photos. Each tile holds its 4:3 box before the
   picture arrives, so the grid never jumps as photos load. */
.shop-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 40px;
}
.shop-gallery-tile {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: var(--shop-line);
}
.shop-gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 760px) {
  .shop-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
.shop-card {
  background: var(--shop-paper);
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shop-shadow);
}
.shop-card h2,
.shop-card h3 {
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.shop-card a {
  color: var(--shop-accent);
  font-weight: 650;
  text-decoration: none;
}
a.shop-trade {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
a.shop-trade:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 35%, var(--shop-line));
  transform: translateY(-1px);
}
a.shop-trade .shop-card-link {
  color: var(--shop-accent);
  font-weight: 650;
  margin: 12px 0 0;
}
.shop-quote-band .shop-card {
  padding: 22px;
}
.shop-svc,
.shop-slot,
.shop-rev {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--shop-line);
}
.shop-svc:last-child,
.shop-slot:last-child,
.shop-rev:last-child {
  border-bottom: none;
}
.price,
.muted,
.note {
  color: var(--shop-muted);
}
label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shop-muted);
  margin: 0 0 6px;
}
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--shop-line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
textarea {
  min-height: 96px;
  resize: vertical;
}
.ok {
  color: #16a34a;
}
.err {
  color: #dc2626;
}
.chat-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  border-radius: 999px;
}
.chat-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px));
  z-index: 80;
  display: none;
  max-height: min(72vh, 560px);
  overflow: auto;
}
.chat-panel[hidden] {
  display: none !important;
}
.chat-panel.open,
.chat-panel[data-open="1"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.chat-panel .talk-shop {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.chat-panel .talk-trade {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--shop-muted);
}
.talk-thread {
  max-height: 240px;
  overflow: auto;
  margin: 0 0 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
}
.talk-line {
  margin: 0 0 10px;
  font-size: 14px;
}
.talk-line b {
  display: block;
  font-size: 12px;
  color: var(--shop-muted);
}
.talk-line.is-you {
  text-align: right;
}
.talk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.talk-row .shop-btn {
  flex: 1 1 140px;
}
.talk-photo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid var(--shop-line);
  border-radius: 10px;
  background: var(--shop-paper);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--shop-ink);
  cursor: pointer;
}
.talk-photo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.talk-callback {
  margin-top: 8px;
}
.talk-callback summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--shop-ink);
  margin-bottom: 10px;
}
.empty {
  text-align: center;
  padding: 48px 16px;
}
.shop-foot {
  border-top: 1px solid var(--shop-line);
  padding: 28px 0 56px;
  color: var(--shop-muted);
  font-size: 13px;
}
.shop-foot strong {
  color: var(--shop-ink);
}
@media (max-width: 720px) {
  .shop-actions {
    display: grid;
  }
  .shop-actions .shop-btn {
    width: 100%;
  }
}
@media (max-width: 390px) {
  .chat-btn {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .chat-panel {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: auto;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    max-height: min(70vh, 520px);
  }
  .talk-thread {
    max-height: 200px;
  }
  .shop-foot {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 860px) {
  .shop-bar .inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav phone";
    padding: 14px 0;
    gap: 20px;
  }
  .shop-logo {
    height: 44px;
    max-width: 260px;
  }
  .shop-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
  .shop-nav a {
    padding: 8px 10px;
  }
  .shop-hero {
    padding: 56px 0 32px;
  }
}

/* Graphite-red: the hero is a full-bleed dark band, not a light page with a
   dark bar on top. This is what makes it a third look rather than the same
   page with different words — the difference is treatment, which every shop
   has, instead of content, which not every shop does.

   The band carries the bar's own colour so the two read as one block, then
   the services section below it is light. The hero keeps the 1080 grid: it
   goes full width and pads back in, so its text still lines up with every
   section under it. */
body[data-palette="graphite-red"] .shop-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px max(16px, calc((100% - 1080px) / 2)) 40px;
  background: #18181b;
}
body[data-palette="graphite-red"] .shop-hero h1 {
  color: #fafafa;
}
body[data-palette="graphite-red"] .shop-hero .shop-lead {
  color: #d4d4d8;
}
/* The palette accent is #b91c1c, which is 2.7:1 on this band — unreadable.
   #f87171 is the same red lightened to 6.4:1. */
body[data-palette="graphite-red"] .shop-hero .shop-kicker {
  color: #f87171;
}
body[data-palette="graphite-red"] .shop-hero .shop-chip {
  background: transparent;
  color: #e4e4e7;
  border-color: rgba(250, 250, 250, 0.35);
}
/* Call Ava stays the solid red — white on it is 6.5:1. Everything else on
   the band outlines in the band's own text colour. */
body[data-palette="graphite-red"] .shop-hero .shop-btn.ghost,
body[data-palette="graphite-red"] .shop-hero button.ghost {
  color: #fafafa;
  border-color: #fafafa;
  background: transparent;
}
/* --shop-muted is tuned for the light page underneath; on the band it comes
   out at 2.3:1, which is invisible rather than quiet. Anything muted inside
   the hero gets the band's own quiet colour, 12:1. */
body[data-palette="graphite-red"] .shop-hero .muted,
body[data-palette="graphite-red"] .shop-hero .note,
body[data-palette="graphite-red"] .shop-hero small {
  color: #d4d4d8;
}
@media (max-width: 760px) {
  body[data-palette="graphite-red"] .shop-hero {
    padding-top: 32px;
    padding-bottom: 28px;
  }
}

/* "From $1,450" on a service page Ava wrote. */
.shop-from {
  margin: 4px 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
}

/* "OK to text me": an unticked, optional box. The whole sentence is the tap
   target, and the box is big enough for a thumb. */
.shop-public .shop-consent {
  margin: 4px 0 14px;
}
.shop-public label.shop-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: var(--shop-ink);
  cursor: pointer;
}
.shop-public .shop-consent-row input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  accent-color: #c94f0c;
}
.shop-public .shop-consent-links {
  margin: 0 0 0 36px;
  font-size: 13px;
}
.shop-public .shop-consent-links a {
  color: inherit;
  text-underline-offset: 3px;
}