:root {
  --bg: #f3f5f1;
  --surface: #fff;
  --ink: #142b22;
  --muted: #63746b;
  --line: #dce4dc;
  --accent: #0b6e50;
  --soft: #e6f3eb;
  --warn: #995c00;
  --bad: #b42318;
  --good: #0b6e50;
  /* Chart bars: a livelier step of the brand green, checked for contrast and
     chroma on white. */
  --chart: #0e7d57;
  --chart-hover: #14a06a;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a {
  color: var(--accent);
}
:focus-visible {
  outline: 3px solid #73b99d;
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.3px;
}
h3 {
  font-size: 16px;
}
p {
  color: var(--muted);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  text-decoration: none;
}
/* SellPlaza's logo; a shop without a logo shows its initials in .mark instead. */
.logo-mark {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
}
.mark {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 23px;
}
.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-in {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Menus: the profile (top right) and a record's ⋯ actions. */
.dropdown {
  position: relative;
}
.dropdown summary {
  list-style: none;
  cursor: pointer;
}
.dropdown summary::-webkit-details-marker {
  display: none;
}
.profile-menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.row-menu {
  flex: none;
  /* Pushed to the end of its row, so the menu opens on screen even on phones. */
  margin-left: auto;
}
.row-menu summary {
  min-width: 44px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
}
.row-menu[open] summary {
  border-color: var(--accent);
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 15px;
  font-weight: 750;
}
/* Ringed while the menu is open or the profile is showing. */
.profile-menu[open] .avatar,
.profile-menu summary.current .avatar {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--accent);
}
.dropdown .menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 230px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px #0002;
}
.menu-who {
  margin: 6px 10px 8px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.dropdown .menu a,
.dropdown .menu button {
  display: block;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}
.dropdown .menu a:hover,
.dropdown .menu button:hover {
  background: var(--bg);
}
.dropdown .menu .danger,
.profile-menu .menu button {
  color: var(--bad);
}
.wrap {
  max-width: 1200px;
  margin: auto;
  padding: 0 28px 70px;
}
/* Seller pages on wider screens: the sections in a panel down the left edge, the page
   beside it. The menu button by the logo folds the panel down to its icons. */
.top-start {
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-toggle {
  display: none;
}
.seller-layout {
  /* The sticky header's height: the panel starts just below it. */
  --top-h: 77px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}
.seller-layout.side-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}
.seller-layout .wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0;
  padding: 0 32px 70px;
}
.side-nav {
  position: sticky;
  top: var(--top-h);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: calc(100vh - var(--top-h));
  overflow: hidden auto;
  padding: 28px 12px 20px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
/* Icons keep one column, open or folded. */
.side-nav a {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.side-nav a:hover {
  background: var(--bg);
  color: var(--ink);
}
.side-nav a[aria-current="page"] {
  background: var(--soft);
  color: var(--accent);
}
.side-nav svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.side-count {
  min-width: 22px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--bad);
  color: white;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
.side-nav hr {
  width: 100%;
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
/* Folded: names leave the screen (they show as tooltips, and screen readers still
   read them), and the waiting-orders count sits on the icon. */
.side-collapsed .side-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.side-collapsed .side-count {
  position: absolute;
  top: 4px;
  left: 26px;
  min-width: 18px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 18px;
}
@media (prefers-reduced-motion: no-preference) {
  .seller-layout {
    transition: grid-template-columns 0.2s ease;
  }
}
@media (min-width: 761px) {
  .app-top .top-in {
    max-width: none;
    padding-left: 16px;
    padding-right: 24px;
  }
  .side-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
  }
  .side-toggle:hover {
    background: var(--bg);
  }
  .side-toggle svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 1024px) {
  .seller-layout {
    grid-template-columns: 208px minmax(0, 1fr);
  }
  .seller-layout .wrap {
    padding: 0 24px 70px;
  }
}
@media (max-width: 850px) {
  .seller-layout {
    --top-h: 73px;
  }
}
/* Phones: a bar at the bottom replaces the sidebar, with Sell raised in the middle. */
.app-bar {
  display: none;
}
@media (max-width: 760px) {
  .seller-layout {
    display: block;
  }
  .seller-layout .wrap {
    padding: 0 18px 40px;
  }
  .side-nav {
    display: none;
  }
  .app-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px #0000000d;
  }
  .app-bar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
  }
  .app-bar svg {
    width: 24px;
    height: 24px;
  }
  .app-bar button[aria-current="page"] {
    color: var(--accent);
  }
  .app-bar-sell {
    color: var(--accent);
  }
  .sell-disc {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-top: -26px;
    border: 4px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    color: white;
    box-shadow: 0 6px 16px #0b6e5040;
  }
  .app-bar-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bad);
    color: white;
    font-size: 13px;
    line-height: 20px;
  }
  /* Room for the bar below the page, and toasts above it. */
  body:has(.app-bar) .wrap {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
  body:has(.app-bar) .toast {
    bottom: calc(100px + env(safe-area-inset-bottom));
  }
}
.more-list {
  display: grid;
  gap: 8px;
}
.more-item {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.more-item strong {
  font-size: 15px;
}
.more-item[aria-current="page"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 22px;
}
.head p {
  margin-bottom: 0;
}
.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Keep text such as an order total whole; the buttons wrap to the next line instead. */
.actions > .grow {
  min-width: max-content;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 9px 15px;
  font-weight: 650;
  text-decoration: none;
  font-size: 14px;
  color: var(--ink);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.btn.danger {
  color: var(--bad);
}
.btn.small {
  padding: 5px 10px;
  font-size: 13px;
}
.btn.block {
  width: 100%;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stat:first-child {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.stat .label {
  font-size: 13px;
  opacity: 0.75;
}
.stat .value {
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -1px;
  font-weight: 750;
  margin: 8px 0;
}
.stat .hint {
  font-size: 13px;
  opacity: 0.7;
}
.grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
}
.panel h2 {
  margin-bottom: 18px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}
.row.voided .grow > strong,
.row.voided > strong {
  color: var(--muted);
  text-decoration: line-through;
}
@media (max-width: 600px) {
  /* Rows with actions put the details on their own line, actions underneath. */
  .row:has(.btn) {
    flex-wrap: wrap;
  }
  .row:has(.btn) > .grow {
    flex-basis: 100%;
  }
}
.void-effects {
  margin: 12px 0;
  padding-left: 20px;
  line-height: 1.5;
}
.grow {
  flex: 1;
  min-width: 0;
}
.sub {
  color: var(--muted);
  font-size: 13px;
}
.num {
  font-variant-numeric: tabular-nums;
}
.pill {
  display: inline-block;
  background: var(--soft);
  color: var(--accent);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 650;
}
.pill.warn {
  background: #fff1da;
  color: var(--warn);
}
.pill.bad {
  background: #fce8e5;
  color: var(--bad);
}
.empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--muted);
}
.empty strong {
  display: block;
  color: var(--ink);
  margin-bottom: 5px;
}
.empty-actions {
  justify-content: center;
  margin-top: 14px;
}
/* A new shop's first steps on Overview. */
.getting-started ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.getting-started li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.getting-started li strong,
.getting-started li .sub {
  display: block;
}
.getting-started li.done strong {
  color: var(--muted);
  text-decoration: line-through;
}
.step-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.done .step-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* On phones a step's buttons go under its text. */
@media (max-width: 600px) {
  .getting-started li {
    grid-template-columns: 28px 1fr;
  }
  .getting-started li > .actions {
    grid-column: 2;
  }
}
.note {
  padding: 14px 18px;
  background: var(--soft);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 20px;
}
.field {
  display: grid;
  gap: 6px;
  margin-bottom: 17px;
}
label {
  font-size: 13px;
  font-weight: 650;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #c8d4cb;
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  min-width: 0;
  /* 16px or larger: iOS Safari zooms the page when a smaller field is focused. */
  font-size: 16px;
}
textarea {
  min-height: 85px;
  resize: vertical;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form {
  max-width: 700px;
}
.table-wrap {
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
}
table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
th {
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  background: #f9fbf8;
}
td,
th {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
td {
  font-size: 13px;
}
tbody tr:last-child td {
  border: 0;
}
.search {
  max-width: 330px;
  margin-bottom: 18px;
}
.scrim {
  position: fixed;
  inset: 0;
  background: #10281e80;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.dialog {
  background: var(--bg);
  width: min(100%, 530px);
  padding: 26px;
  overflow: auto;
  height: 100%;
  box-shadow: -12px 0 40px #0001;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.dialog-head h2 {
  margin: 0;
}
.loading {
  padding: 100px 20px;
  text-align: center;
  color: var(--muted);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  padding: 13px 20px;
  border-radius: 10px;
  z-index: 80;
  max-width: 90vw;
  box-shadow: 0 8px 35px #0002;
}
.toast a,
.toast button {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.auth-story {
  background: var(--ink);
  color: white;
  padding: clamp(35px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-story .brand,
.auth-story p {
  color: #d0e3d7;
}
.auth-story .auth-headline {
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  max-width: 580px;
  margin: 55px 0 22px;
  line-height: 1.08;
  letter-spacing: -2px;
}
.auth-story .eyebrow {
  color: #9cd2b5;
}
.auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.auth-form form {
  width: 100%;
  max-width: 370px;
}
.auth-form h1 {
  font-size: 26px;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.auth-form .consent {
  margin: 4px 0 14px;
}
.auth-other {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
}
/* The Show button sits inside the password box. */
.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 76px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  min-width: 64px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.error {
  background: #fce8e5;
  color: var(--bad);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
/* Sign-up's live shop link: the full address, then whether it's free. */
.link-preview {
  margin: 8px 0 4px;
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.link-status {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 650;
}
.link-status.good {
  color: var(--accent);
}
.link-status.bad {
  color: var(--bad);
}
.link-status.current {
  color: var(--muted);
}
/* Google's sign-in branding: a white button, its "G", dark text. */
.btn.google {
  min-height: 44px;
  border-color: #c8d1ca;
  color: #1f1f1f;
}
.btn.google:hover {
  background: #f6f8f6;
}
/* "or use your email": a rule on each side of the words. */
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.sign-in-way {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sign-in-way p {
  margin: 2px 0 0;
}
.sign-in-way .btn {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .sign-in-way {
    flex-direction: column;
    align-items: stretch;
  }
}
.auth-switch {
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 700;
  /* A 44px-tall tap area that looks like inline text. */
  padding: 13px 6px;
  margin: -13px -6px;
}
.catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.product {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.product-art {
  /* Storefront surfaces follow the shop brand colour (see applyBrand). Without a
     photo, a pale tint and a faint bag outline keep the card quiet. */
  background: color-mix(in srgb, var(--soft) 55%, white);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 35%, white);
}
.product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}
.product-body h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price {
  font-size: 15px;
  margin-bottom: 8px;
}
/* The button sits at the foot of the card, so buttons line up across a row. */
.product-body .btn {
  margin-top: auto;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 13px;
}
.sold-out .product-art {
  filter: grayscale(1);
  opacity: 0.55;
}
.sold-out .product-price {
  color: var(--muted);
}
.shop-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 0 20px;
}
.shop-intro {
  flex: 1;
  min-width: 0;
}
.shop-hero h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
.shop-intro p {
  margin: 4px 0 0;
}
.shop-intro .btn {
  margin-top: 12px;
}
.summary {
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.9;
  background: #f3f7f2;
  padding: 20px;
  border-radius: 8px;
  overflow: auto;
}
/* The sale form: product cards to tap, the sale's items with − and +, and the total
   kept in view above the button. */
.sale-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: min(46vh, 420px);
  overflow: auto;
  margin: 10px 0 6px;
  padding: 2px;
}
.sale-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.sale-tile:hover:not(:disabled) {
  border-color: var(--accent);
}
.sale-tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sale-tile.in-sale {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sale-tile img,
.sale-tile-art {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.sale-tile-art {
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--muted);
}
.sale-tile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.sale-tile-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sale-tile-colour {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
/* Colours: a dot for common colour names, beside the name. */
.colour-dot {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #0003;
  border-radius: 50%;
  vertical-align: -1px;
}
.bag-colour {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* A bag line's photo and name open the product. */
.bag-line {
  gap: 10px;
}
.bag-product {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 4px;
  margin: -4px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.bag-product:hover strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* On a receipt the lines are a summary, not links. */
span.bag-product {
  cursor: default;
}
.order-summary h3 {
  margin-top: 0;
}
.receipt-download {
  margin-top: 12px;
}
.order-contact {
  margin-top: 4px;
}
.order-contact a {
  font-weight: 600;
  white-space: nowrap;
}
.order-lines {
  margin: 12px 0;
  border-top: 1px solid var(--line);
}
.bag-product img,
.bag-thumb-art {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--soft);
}
.bag-thumb-art {
  display: grid;
  place-items: center;
  color: var(--muted);
}
.bag-product .grow {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.bag-product strong {
  overflow-wrap: anywhere;
}
.back-to-bag {
  margin-bottom: 14px;
}
.colour-stock {
  margin-top: 4px;
}
.colour-total {
  display: block;
}
.colour-split {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
}
.colour-split span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.colour-editor .sub {
  margin: 2px 0 10px;
}
/* With colours, the product's stock is their total, shown but not typed. */
.field input[readonly] {
  background: var(--bg);
  color: var(--muted);
}
#stock-field + .field {
  align-self: start;
}
.colour-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.colour-row .btn {
  min-width: 44px;
}
.colour-picker {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
}
.colour-picker legend {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 650;
}
.colour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.colour-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.colour-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.colour-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.colour-option:has(input:focus-visible) {
  outline: 3px solid #73b99d;
  outline-offset: 2px;
}
.colour-option.sold-out,
.colour-option:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}
/* The colour sheet's colours are buttons: one tap adds that colour. */
button.colour-option {
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
button.colour-option:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--soft);
}
.sheet-product {
  margin: 0 0 14px;
}
.colour-options + .actions {
  margin-top: 18px;
}
/* On a shop card: the colours a product comes in. */
.card-colours {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -4px 0 10px;
}
.card-colours .sub {
  margin-left: 4px;
}
.colour-picker .inline-error:empty {
  display: none;
}
.colour-stock-list .row {
  gap: 10px;
}
.sale-tile-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: 750;
  line-height: 22px;
  text-align: center;
}
.sale-empty {
  margin: 6px 0 16px;
}
.sale-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.stepper {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
.stepper .btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 20px;
}
.stepper .num {
  min-width: 28px;
  font-weight: 750;
  text-align: center;
}
.sale-footer {
  position: sticky;
  bottom: -26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px -26px -26px;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sale-footer strong {
  display: block;
  font-size: 22px;
}
.sale-footer .btn {
  min-width: 150px;
  min-height: 48px;
}
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.toolbar input {
  width: auto;
}
.cash {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.cash strong {
  font-size: 24px;
  display: block;
}
.inline-error {
  color: var(--bad);
  font-size: 13px;
  margin: 12px 0;
}
.footer {
  color: var(--muted);
  font-size: 13px;
  margin-top: 28px;
}
@media (max-width: 850px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .auth-story {
    padding: 18px 20px 20px;
  }
  .auth-story .auth-headline,
  .auth-story .eyebrow,
  .auth-story .footer {
    display: none;
  }
  .auth-pitch {
    margin: 10px 0 0;
    font-size: 14px;
  }
  .auth-form {
    align-items: flex-start;
    padding: 26px 20px 32px;
  }
  .catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .top-in {
    padding: 14px 18px;
  }
  .wrap {
    padding: 0 18px 40px;
  }
  .head {
    align-items: flex-start;
    flex-direction: column;
  }
  .top-actions .sub {
    display: none;
  }
}
@media (max-width: 480px) {
  .two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .stat {
    padding: 17px;
  }
  .stat .value {
    font-size: 22px;
  }
  .brand {
    font-size: 20px;
  }
  .top-actions {
    gap: 8px;
  }
  /* Compact, but still a comfortable tap target. */
  .top-actions .btn {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 13px;
    white-space: nowrap;
  }
  .form-footer {
    bottom: -20px;
    margin: 16px -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .section-switch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }
  .section-switch .btn {
    min-height: 44px;
    gap: 4px;
    padding: 0 4px;
    font-size: 14px;
  }
  .dialog {
    padding: 20px;
  }
  /* The dialog's padding is 20px here; the sale total's bar spans it edge to edge. */
  .sale-footer {
    bottom: -20px;
    margin: 16px -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .sale-footer .btn {
    min-width: 0;
    flex: 1;
  }
}
@media (max-width: 380px) {
  /* Room for the header buttons on the narrowest phones: keep the logo mark only. */
  .top .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* On phones each table row becomes a card: its name first, then every value beside
   its column's name, so nothing scrolls sideways. */
@media (max-width: 600px) {
  table.stack,
  .stack tbody,
  .stack tfoot,
  .stack tr,
  .stack th,
  .stack td {
    display: block;
  }
  table.stack {
    white-space: normal;
  }
  .stack thead {
    display: none;
  }
  .stack tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .stack tbody tr:last-child {
    border-bottom: 0;
  }
  .stack tfoot tr {
    border-top: 1px solid var(--line);
  }
  .stack td,
  table.stack th[scope="row"] {
    position: static;
    padding: 3px 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  table.stack th[scope="row"] {
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    white-space: normal;
  }
  .stack td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
  }
  .stack td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
  }
  .stack .colour-total {
    text-align: right;
  }
  .stack .colour-split {
    justify-content: flex-end;
  }
  /* A day or month with nothing recorded folds to one line. */
  .stack tr.quiet td {
    display: none;
  }
  table.stack tr.quiet th[scope="row"] {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-weight: 650;
  }
  table.stack tr.quiet th[scope="row"]::after {
    content: "Nothing recorded";
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
  }
  .inventory-table td:last-child {
    padding-top: 10px;
  }
}
[hidden] {
  display: none !important;
}
.product-art {
  aspect-ratio: 1;
  overflow: hidden;
}
.product-art.detail-photo {
  aspect-ratio: 4/3;
}
.product-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-image-button {
  padding: 0;
  border: 0;
  background: none;
  display: block;
  width: 100%;
}
.product-title {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
}
.product-title:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* Search and sort share one line, even on phones. */
.shop-tools {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.shop-tools select {
  flex: none;
  width: auto;
  max-width: 45%;
}
/* Swipe sideways for more categories; the cut-off last button shows there are more. */
.category-filters {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.category-filters .btn {
  white-space: nowrap;
  min-height: 38px;
  padding: 7px 14px;
  font-size: 13px;
}
.catalog-count {
  margin: 2px 0 10px;
}
.detail-photo {
  border-radius: 12px;
}
.detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.detail-meta .eyebrow {
  margin: 0;
}
.detail-price {
  display: block;
  font-size: 26px;
  margin: 20px 0;
}
.full-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.share-actions {
  margin-top: 14px;
}
.shop-assurance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0 0;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}
.shop-assurance p {
  font-size: 13px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .catalog {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-body {
    padding: 10px;
  }
  .shop-assurance {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.product-image-button {
  position: relative;
}
.media-count,
.stock-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  border-radius: 20px;
  padding: 4px 9px;
  background: #ffffffeb;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
/* "Only 2 left" or "Sold out", on the photo's top corner. */
.stock-badge {
  bottom: auto;
  right: auto;
  top: 8px;
  left: 8px;
  color: var(--warn);
  font-weight: 750;
}
.sold-out .stock-badge {
  color: var(--bad);
}
/* Fixed to the bottom of the shop once the bag has something in it. */
.bag-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 18px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 40%);
  pointer-events: none;
}
.bag-bar .btn {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  min-height: 48px;
  box-shadow: 0 8px 30px #0003;
}
.wrap.with-bag-bar {
  padding-bottom: 110px;
}
body:has(.bag-bar) .toast {
  bottom: 90px;
}
.gallery-stage {
  background: var(--soft);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
}
.gallery-stage img,
.gallery-stage video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
}
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.gallery-thumbnails {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 5px 2px;
}
.gallery-thumbnail {
  flex: none;
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 2px;
  background: var(--soft);
  cursor: pointer;
}
.gallery-thumbnail.selected {
  border-color: var(--accent);
}
.gallery-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.gallery-thumbnail span {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.gallery-thumbnail small {
  font-size: 13px;
}
/* Product photos and video: tiles, then tiles that open the camera or gallery. */
.media-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.media-tile {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
.media-tile img,
.media-tile video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #eaf0e7;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.media-tile video {
  object-fit: contain;
}
.media-tile .btn {
  min-height: 36px;
  padding: 4px 8px;
  font-size: 13px;
}
.media-label {
  display: grid;
  place-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
}
.media-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.media-add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 10px;
  border: 1.5px dashed #9fb5a5;
  border-radius: 10px;
  background: #eaf0e7;
  color: var(--accent);
  text-align: center;
  cursor: pointer;
}
.media-add strong {
  font-size: 14px;
}
.media-add:hover {
  border-color: var(--accent);
}
/* File inputs stay keyboard-reachable; their label shows the focus. */
.file-input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Save stays in reach at the foot of a long form in a dialog. */
.form-footer {
  position: sticky;
  bottom: -26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px -26px -26px;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.form-footer .btn.primary {
  min-width: 150px;
  min-height: 48px;
}
.report-period {
  max-width: 260px;
  margin: 0;
}
.order-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-filter-detail {
  margin: 12px 0 16px;
}
.report-fields {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
.report-fields .field {
  flex: 1;
  min-width: 155px;
  max-width: 260px;
  margin: 0;
}
.report-fields > .btn {
  min-height: 45px;
}
.report-help {
  margin: 15px 0 0;
}
.report-filter-panel .inline-error:empty {
  display: none;
}
.report-status {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0 0;
}
.report-status:empty {
  display: none;
}
.report-heading {
  /* Clear the sticky header when scrolled into view. */
  scroll-margin-top: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 16px;
}
.report-heading h2 {
  font-size: 23px;
  margin-bottom: 4px;
}
.report-heading p {
  margin: 0;
}
.report-heading .eyebrow {
  margin-bottom: 8px;
}
.report-extra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 24px;
  padding: 17px 22px;
  background: #eaf0e7;
  border-radius: 10px;
}
.report-extra strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.report-breakdown th[scope="row"] {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
}
.report-breakdown tfoot {
  background: var(--soft);
  font-weight: 700;
}
/* The day or month column stays put while the money columns scroll sideways. */
.report-breakdown thead th:first-child,
.report-breakdown th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
  box-shadow: 1px 0 0 var(--line);
}
.report-breakdown thead th:first-child {
  background: #f9fbf8;
}
.report-breakdown tfoot th[scope="row"] {
  background: var(--soft);
}
.report-breakdown td {
  font-variant-numeric: tabular-nums;
}
.live-heading {
  margin: 30px 0 18px;
}
/* Overview's Today tiles: sales leads; orders waiting and low stock turn amber when
   they need doing. Each tile opens the list behind it. */
.today {
  margin-bottom: 20px;
}
.today-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.today-head h2 {
  margin: 0;
  font-size: 22px;
}
.today-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.today-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.today-tile:hover {
  border-color: var(--accent);
}
.today-tile strong {
  font-size: 22px;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.today-note {
  color: var(--muted);
  font-size: 13px;
}
.today-tile:first-child {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.today-tile:first-child .sub,
.today-tile:first-child .today-note {
  color: #ffffffb8;
}
.today-tile.attention {
  border-color: #f1d6a8;
  background: #fff7e8;
}
.today-tile.attention .today-note {
  color: var(--warn);
  font-weight: 650;
}
/* A tile's jump stops below the sticky header. */
#stock-alerts,
#money-owed {
  scroll-margin-top: 84px;
}
@media (max-width: 850px) {
  .today-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .today-tile:first-child {
    grid-column: 1 / -1;
  }
}
.live-heading h2 {
  margin-bottom: 4px;
}
/* Analysis. While new numbers load, the old ones stay up, faded. */
#analysis.refreshing {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.analysis-lead {
  margin: -8px 0 18px;
  color: var(--ink);
  font-size: 16px;
}
.analysis-lead + .actions {
  margin: -6px 0 22px;
}
/* Two to a row on phones, rather than three squeezed. */
.analysis-tiles {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.analysis-tiles strong {
  font-variant-numeric: normal;
}
/* Change against the period before: an arrow as well as a colour. */
.delta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.delta.up {
  color: var(--good);
}
.delta.down {
  color: var(--bad);
}
.funnel {
  display: grid;
  gap: 16px;
}
.funnel-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr minmax(120px, auto);
  align-items: center;
  gap: 16px;
}
.funnel-label strong {
  display: block;
  font-size: 14px;
}
.funnel-track {
  height: 24px;
}
.hbar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--chart);
}
.funnel-value {
  text-align: right;
}
.funnel-value strong {
  display: block;
  font-size: 18px;
}
@media (max-width: 600px) {
  .funnel-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }
  .funnel-track {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 16px;
  }
}
/* Sales per day: hairline gridlines at the top, middle and baseline. */
.trend {
  position: relative;
  margin: 20px 0 6px;
}
/* Room on the right for half of the last date label, which centres on its day. */
.trend-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 180px auto;
  column-gap: 10px;
  padding-right: 14px;
}
.trend-ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Zero-height rows centre each label on its gridline. */
.trend-ticks span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0;
}
.trend-cols {
  display: flex;
  gap: 2px;
  background:
    linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat;
}
.trend-col {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}
.trend-bar {
  display: block;
  width: min(24px, 70%);
  height: 0;
  border-radius: 4px 4px 0 0;
  background: var(--chart);
}
.trend-col:hover .trend-bar,
.trend-col:focus-visible .trend-bar {
  background: var(--chart-hover);
}
.trend-x {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
/* On the narrowest phones every other date steps aside, so none run together. */
@media (max-width: 359px) {
  .trend-x .minor {
    visibility: hidden;
  }
}
/* A label wider than its column overflows evenly on both sides. */
.trend-x span {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}
.chart-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 8px 24px #0003;
  pointer-events: none;
}
.chart-tip[hidden] {
  display: none;
}
.chart-tip strong {
  display: block;
  font-size: 14px;
}
.chart-table {
  margin-top: 14px;
}
.chart-table summary {
  padding: 6px 0;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.live-debt {
  padding: 5px 0 18px;
  border-bottom: 1px solid var(--line);
}
.live-debt strong {
  display: block;
  font-size: 27px;
  letter-spacing: -0.5px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .report-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-fields .field {
    max-width: none;
  }
  .report-fields > .btn {
    width: 100%;
  }
  .report-extra {
    gap: 10px;
    padding: 15px;
  }
  .report-extra strong {
    font-size: 16px;
  }
  .report-breakdown {
    padding: 16px;
  }
}
/* Storefront branding */
.shop-brand {
  min-width: 0;
}
.shop-brand .mark {
  flex: none;
  font-size: 14px;
  letter-spacing: 0;
}
.brand-logo {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}
.shop-brand .brand-name {
  font-size: 18px;
  letter-spacing: -0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-cover {
  margin-top: 24px;
  aspect-ratio: 4 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--soft);
}
.shop-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-logo {
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
}
/* With a cover photo, the logo overlaps its bottom edge and the name sits beside it. */
.shop-cover + .shop-hero {
  padding-top: 14px;
}
.shop-cover + .shop-hero .shop-logo {
  position: relative;
  margin-top: -44px;
  margin-left: 16px;
}
.shop-about {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.about-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 680px;
}
.shop-about h3 {
  margin: 20px 0 6px;
  font-size: 14px;
}
/* The seller's returns and delivery rules, folded away on product pages. */
.shop-returns {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.shop-returns summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 650;
}
.shop-returns p {
  margin: 4px 0 0;
  font-size: 14px;
}
.shop-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.shop-facts dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.shop-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .shop-cover {
    margin-top: 16px;
    aspect-ratio: 3 / 1;
    border-radius: 12px;
  }
  .shop-hero {
    gap: 12px;
    padding: 18px 0 16px;
  }
  .shop-hero h1 {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  .shop-intro p {
    font-size: 14px;
  }
  .shop-logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    padding: 4px;
  }
  .shop-cover + .shop-hero .shop-logo {
    margin-top: -36px;
    margin-left: 10px;
  }
}
/* Settings: four sections, one shown at a time */
.section-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.unsaved-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}
.btn.primary .unsaved-dot {
  background: #fff;
}
.shop-link-current {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.image-status {
  margin: 0;
  color: var(--warn);
  font-weight: 600;
}
/* Settings: storefront look */
.form .form-section {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.color-row input[type="color"] {
  flex: none;
  width: 56px;
  height: 44px;
  padding: 4px;
  cursor: pointer;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ink);
}
#brand-color-note.warning {
  color: var(--bad);
  font-weight: 600;
}
.shop-image-preview {
  display: grid;
  place-items: center;
  border: 1px dashed #c8d4cb;
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.shop-image-preview.logo {
  width: 96px;
  height: 96px;
}
.shop-image-preview.cover {
  width: 100%;
  aspect-ratio: 3 / 1;
}
.shop-image-preview img {
  width: 100%;
  height: 100%;
}
.shop-image-preview.logo img {
  object-fit: contain;
  padding: 6px;
}
.shop-image-preview.cover img {
  object-fit: cover;
}
#shop-images .field {
  justify-items: start;
}
#shop-images .field + .field {
  margin-top: 22px;
}
/* Featured products and storefront options */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0 0 17px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  flex: none;
}
.field .label {
  font-size: 13px;
  font-weight: 650;
}
.category-order {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.category-order li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.category-order li:last-child {
  border-bottom: 0;
}
.category-order .btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
/* Email confirmation reminder */
/* The one-line reminder to confirm the email. The text wraps rather than cutting the
   address short, so a typo stays visible. */
.verify-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 6px 6px 6px 14px;
  border: 1px solid #f1d6a8;
  border-radius: 10px;
  background: #fff7e8;
  color: var(--ink);
  font-size: 13px;
}
.verify-strip p {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.verify-email {
  padding: 0;
  border: 0;
  background: none;
  color: var(--warn);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.verify-strip .btn {
  flex: none;
  min-height: 34px;
  padding: 5px 10px;
  font-size: 13px;
}
.verify-hide {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.verify-hide:hover {
  background: #f1d6a866;
}
#account h3.form-section {
  margin-top: 24px;
}
/* The policy pages (/privacy, /terms, /refunds): one readable column. */
.legal {
  max-width: 760px;
  padding-top: 32px;
  line-height: 1.65;
}
.legal h1 {
  margin: 6px 0 4px;
}
.legal h2 {
  margin: 36px 0 10px;
  font-size: 20px;
  /* A link to a section (such as /terms#shoppers) stops below the sticky header. */
  scroll-margin-top: 90px;
}
.legal h3 {
  margin: 22px 0 6px;
  font-size: 16px;
}
.legal p,
.legal li {
  font-size: 15px;
}
.legal ul {
  padding-left: 22px;
}
.legal li {
  margin: 6px 0;
}
/* Tables here hold sentences, so they wrap (the app's tables don't). */
.legal table {
  white-space: normal;
  margin: 14px 0;
  background: white;
  border: 1px solid var(--line);
}
.legal td {
  font-size: 14px;
  vertical-align: top;
}
.legal code {
  font-size: 13px;
  background: #eef3ee;
  padding: 1px 5px;
  border-radius: 5px;
}
.legal-summary {
  margin: 22px 0 8px;
  padding: 18px 22px;
}
.legal-summary h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 650;
}
@media (max-width: 600px) {
  .legal td,
  .legal th {
    padding: 10px 12px;
  }
}
.policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin: 18px 0 0;
  font-size: 13px;
}
.policy-links a {
  color: var(--muted);
}
/* Below a shop's policy links: a quiet way to tell SellPlaza about a problem. */
.report-shop {
  margin: 4px 0 0;
  text-align: center;
}
.report-shop button {
  padding: 12px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.report-reasons {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.report-reasons legend {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 650;
}
.report-reasons .check {
  margin: 0;
  font-weight: 500;
}
/* A seller whose shop an admin hid sees why on every tab. */
.hidden-strip {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #f0c2bd;
  border-radius: 10px;
  background: #fdf0ee;
  font-size: 14px;
}
.hidden-strip strong {
  color: var(--bad);
}
.hidden-strip p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.row-status {
  margin-top: 6px;
}
/* Plans: the trial strip, the plan page and Plus features on a Free shop */
.plan-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #b9dcc8;
  border-radius: 10px;
  background: var(--soft);
  font-size: 14px;
}
.plan-strip a {
  color: var(--accent);
  font-weight: 700;
}
.plan-features {
  display: grid;
  gap: 9px;
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
}
.plan-features li {
  position: relative;
  padding-left: 26px;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.plus-panel {
  max-width: 640px;
}
.plus-panel h2 {
  margin-top: 10px;
}
.plan-current h2 {
  margin: 2px 0 6px;
  font-size: 24px;
}
.plan-current p {
  margin: 0;
}
.plan-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.plan-card {
  display: flex;
  flex-direction: column;
}
.plan-card .plan-features {
  flex: 1;
  align-content: start;
}
.plan-card.featured {
  border: 2px solid var(--accent);
}
.plan-price {
  margin: 0;
  color: var(--muted);
}
.plan-price strong {
  color: var(--ink);
  font-size: 32px;
  letter-spacing: -1px;
}
.plan-card .btn {
  width: 100%;
  min-height: 46px;
}
.plan-card .btn + .sub {
  margin: 8px 0 14px;
}
.plan-pay {
  display: grid;
}
#fee-form .form-section {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}
.fee-option {
  align-items: flex-start;
  font-weight: 400;
}
.fee-option input {
  margin-top: 3px;
}
.fee-option > span {
  display: grid;
}
.plan-lock {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--soft);
  font-size: 14px;
}
.plan-lock a {
  color: var(--accent);
  font-weight: 700;
}
.shop-image-preview.locked {
  opacity: 0.55;
}
@media (max-width: 760px) {
  .plan-compare {
    grid-template-columns: 1fr;
  }
}
/* Admin */
.admin-nav {
  display: flex;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.admin-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
/* Admin uses the sidebar on wider screens, and these tabs on phones. */
.seller-layout .admin-nav {
  display: none;
}
@media (max-width: 760px) {
  .seller-layout .admin-nav {
    display: flex;
    flex-wrap: wrap;
  }
}
.admin-section {
  margin: 8px 0 12px;
  font-size: 18px;
}
.admin-note {
  margin: -12px 0 24px;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.admin-toolbar .search {
  flex: 1 1 240px;
  margin: 0;
}
.admin-toolbar .field {
  flex: 0 1 230px;
  margin: 0;
}
.attention {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px 32px;
}
.attention-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
}
.attention-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.attention-group li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.attention-group li .sub {
  flex: none;
}
.attention-group .auth-switch {
  margin-top: 4px;
}
.admin-nav a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}
.admin-again {
  max-width: 560px;
  margin-top: 28px;
}
.admin-back {
  margin: 20px 0 0;
}
.pill.free {
  background: #eef1ed;
  color: var(--muted);
}
.admin-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 16px 0 22px;
}
.admin-facts dt {
  color: var(--muted);
}
.admin-facts dd {
  margin: 0;
  font-weight: 650;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.admin-action {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.admin-action .field {
  margin: 0;
}
.admin-weeks {
  display: grid;
  gap: 10px;
}
.admin-week {
  display: grid;
  grid-template-columns: 190px 1fr 40px;
  align-items: center;
  gap: 12px;
}
.admin-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--soft);
}
.admin-bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 5px;
  background: var(--chart);
}
.admin-week strong {
  text-align: right;
}
.report-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.report-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.report-list li:first-child {
  border-top: 0;
}
.report-list p {
  margin: 4px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.report-list .btn {
  flex: none;
}
#hide-form .field,
#note-form .field,
#delete-form .field {
  max-width: 560px;
}
#note-form + .note-list {
  margin-top: 16px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.account-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.account-row p {
  margin: 2px 0 0;
}
.account-row .btn {
  flex: none;
}
.danger-zone {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid #f0c2bd;
  border-radius: 12px;
  background: #fdf6f5;
}
.danger-zone h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--bad);
}
.danger-zone p {
  margin: 0 0 14px;
}
@media (max-width: 600px) {
  .report-list li,
  .account-row {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-week {
    grid-template-columns: 1fr 40px;
  }
  .admin-week .admin-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .admin-action {
    flex-wrap: wrap;
  }
}
/* The public home page */
.home-wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}
.home-top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.home-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}
.home-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.home-links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.home-links a:hover {
  color: var(--accent);
}
.home-auth {
  display: flex;
  gap: 8px;
}
.home-hero {
  padding: 64px 0 72px;
  background: linear-gradient(180deg, var(--soft), var(--bg));
}
.home-hero-in {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
}
.home-kicker {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.home-hero h1 {
  margin-bottom: 18px;
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -2px;
}
/* The headline's moving parts: the platform word takes turns, and a hand-drawn line
   runs under "every naira". All three words share one cell, so the line never
   reflows. */
.home-rotate {
  display: inline-grid;
  color: var(--accent);
}
.home-rotate > span {
  grid-area: 1 / 1;
}
.home-rotate > span + span {
  visibility: hidden;
}
.home-mark {
  position: relative;
  white-space: nowrap;
}
.home-mark svg {
  position: absolute;
  bottom: -0.12em;
  left: 0;
  width: 100%;
  height: 0.28em;
  overflow: visible;
}
.home-mark path {
  fill: none;
  stroke: #2fb37f;
  stroke-width: 5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero-copy > *,
  .home-visual {
    animation: home-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .home-hero-copy > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .home-hero-copy > :nth-child(3) {
    animation-delay: 0.16s;
  }
  .home-hero-copy > :nth-child(4) {
    animation-delay: 0.24s;
  }
  .home-hero-copy > :nth-child(5) {
    animation-delay: 0.32s;
  }
  .home-visual {
    animation-delay: 0.3s;
  }
  .home-rotate > span,
  .home-rotate > span + span {
    visibility: visible;
    opacity: 0;
    animation: home-word 7.5s infinite;
  }
  .home-rotate > span:nth-child(2) {
    animation-delay: 2.5s;
  }
  .home-rotate > span:nth-child(3) {
    animation-delay: 5s;
  }
  .home-mark path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: home-draw 0.9s 0.9s ease-out forwards;
  }
}
@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes home-word {
  0% {
    opacity: 0;
    transform: translateY(0.35em);
  }
  4%,
  30% {
    opacity: 1;
    transform: none;
  }
  34%,
  100% {
    opacity: 0;
    transform: translateY(-0.35em);
  }
}
@keyframes home-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.home-lead {
  max-width: 520px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 18px;
}
.home-cta {
  min-height: 50px;
  padding: 0 22px;
  font-size: 16px;
}
.home-hero .sub {
  margin: 12px 0 0;
}
/* The illustration: a shop on a phone, and its day. */
.home-visual {
  position: relative;
  display: flex;
  padding: 10px 0 40px 6%;
}
.mock-phone {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  width: 290px;
  padding: 18px 16px 16px;
  border: 10px solid var(--ink);
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 30px 60px #142b2226;
}
.mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #9a3412;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.mock-head strong,
.mock-head small {
  display: block;
}
.mock-head strong {
  font-size: 15px;
}
.mock-head small,
.mock-today small {
  color: var(--muted);
  font-size: 13px;
}
.mock-chat {
  justify-self: start;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
}
.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mock-product {
  display: grid;
  gap: 2px;
  font-size: 13px;
}
.mock-product strong {
  font-weight: 650;
}
.mock-photo {
  position: relative;
  display: block;
  margin-bottom: 4px;
}
.mock-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: #eaf0e7;
}
.mock-bag {
  padding: 11px;
  border-radius: 10px;
  background: #9a3412;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.mock-today {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 210px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px #142b2226;
}
.mock-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.mock-total {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  letter-spacing: -0.5px;
}
.mock-today dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.mock-today dt {
  color: var(--muted);
}
.mock-today dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}
/* The illustration's 10-second loop: the lace is tapped and lands in the bag, an
   online payment arrives, and the day's numbers catch up. The newer figure of each
   pair waits on top of the older one. */
.swap {
  display: grid;
}
.swap > * {
  grid-area: 1 / 1;
}
.bag-now,
.day-now {
  opacity: 0;
}
.mock-total .day-now {
  color: var(--accent);
}
.mock-notice {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px #142b2233;
  font-size: 13px;
  opacity: 0;
  transform: translateY(-140%);
}
.mock-notice strong,
.mock-notice small {
  display: block;
}
.mock-notice small {
  color: var(--muted);
  font-size: 13px;
}
.mock-notice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.mock-tap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ffffffa6;
  opacity: 0;
}
.mock-added {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mock-tap {
    animation: mock-tap 10s infinite;
  }
  .mock-added {
    animation: mock-added 10s infinite;
  }
  .mock-bag {
    animation: mock-bag-pulse 10s infinite;
  }
  .bag-was {
    animation: mock-bag-was 10s infinite;
  }
  .bag-now {
    animation: mock-bag-now 10s infinite;
  }
  .mock-notice {
    animation: mock-notice 10s infinite;
  }
  .day-was {
    animation: mock-day-was 10s infinite;
  }
  .day-now {
    animation: mock-day-now 10s infinite;
  }
  .mock-today {
    animation: mock-float 3s ease-in-out infinite alternate;
  }
}
@keyframes mock-tap {
  0%,
  17% {
    opacity: 0;
    transform: scale(0.3);
  }
  19% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes mock-added {
  0%,
  21% {
    opacity: 0;
    transform: scale(0.6);
  }
  24%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes mock-bag-pulse {
  0%,
  23%,
  30%,
  100% {
    transform: scale(1);
  }
  26% {
    transform: scale(1.04);
  }
}
@keyframes mock-bag-was {
  0%,
  23% {
    opacity: 1;
  }
  26%,
  93% {
    opacity: 0;
  }
  97%,
  100% {
    opacity: 1;
  }
}
@keyframes mock-bag-now {
  0%,
  23% {
    opacity: 0;
  }
  26%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes mock-notice {
  0%,
  38% {
    opacity: 0;
    transform: translateY(-140%);
  }
  43%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  77%,
  100% {
    opacity: 0;
    transform: translateY(-140%);
  }
}
@keyframes mock-day-was {
  0%,
  45% {
    opacity: 1;
  }
  49%,
  93% {
    opacity: 0;
  }
  97%,
  100% {
    opacity: 1;
  }
}
@keyframes mock-day-now {
  0%,
  45% {
    opacity: 0;
  }
  49%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes mock-float {
  to {
    transform: translateY(-8px);
  }
}
.home-section {
  padding: 72px 0;
}
.home-section h2,
.home-final h2 {
  max-width: 640px;
  margin-bottom: 28px;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -1px;
}
.home-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.home-features article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.home-features h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 17px;
}
.home-features p,
.home-steps p {
  margin: 0;
  color: var(--muted);
}
.home-steps {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.home-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.home-steps li {
  counter-increment: step;
}
.home-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.home-intro {
  max-width: 620px;
  margin: -14px 0 28px;
  color: var(--muted);
  font-size: 17px;
}
.home-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 860px;
}
.home-plan {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.home-plan.featured {
  border: 2px solid var(--accent);
  box-shadow: 0 18px 40px #0b6e501a;
}
.home-plan h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.home-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.home-price strong {
  font-size: 40px;
  letter-spacing: -1px;
}
.home-price span {
  color: var(--muted);
}
.home-plan ul {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}
.home-plan li {
  position: relative;
  padding-left: 28px;
}
.home-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.home-fineprint {
  max-width: 760px;
  margin-top: 18px;
}
.home-faq details {
  max-width: 800px;
  border-bottom: 1px solid var(--line);
}
.home-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}
.home-faq summary::-webkit-details-marker {
  display: none;
}
.home-faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}
.home-faq details[open] summary::after {
  content: "−";
}
.home-faq details p {
  margin: -6px 0 18px;
  color: var(--muted);
}
.home-final {
  padding: 72px 0;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.home-final h2 {
  margin: 0 auto 24px;
  color: #fff;
}
.home-final .btn.primary {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}
.home-footer {
  padding: 28px 0 40px;
  color: var(--muted);
  font-size: 14px;
}
.home-footer .home-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-footer p {
  margin: 0;
}
.home-footer .policy-links {
  margin: 0;
}
/* Instagram, TikTok and X, in the footer's grey, each a comfortable tap. */
.home-social {
  display: flex;
  gap: 4px;
}
.home-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
}
.home-social a:hover,
.home-social a:focus-visible {
  background: var(--soft);
  color: var(--ink);
}
.home-social svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 860px) {
  .home-links {
    display: none;
  }
  .home-auth {
    margin-left: auto;
  }
  .home-hero {
    padding: 40px 0 48px;
  }
  .home-hero-in {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-features {
    grid-template-columns: 1fr 1fr;
  }
  .home-steps ol,
  .home-plans {
    grid-template-columns: 1fr;
  }
  .home-section {
    padding: 52px 0;
  }
}
@media (max-width: 560px) {
  .home-features {
    grid-template-columns: 1fr;
  }
  /* The page's own buttons ask new sellers in; the header keeps Sign in. */
  .home-join {
    display: none;
  }
  .home-lead {
    font-size: 17px;
  }
  .home-hero .actions .btn {
    flex: 1 1 100%;
  }
  /* The day's card sits under the phone rather than over its bag bar. */
  .home-visual {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .mock-today {
    position: relative;
    align-self: flex-end;
    margin-top: -18px;
  }
}