/*
  Theme 7 · Turquoise & Hot Pink. Components follow ~/TheConsignmentRepublic/prototype/tcr-prototype.html.
  Differences from the prototype are for readability: --pink-btn (white text on the brand pink is
  only 3.8:1) and --turq-text for links.
*/

@font-face {
  font-family: "Inter";
  src: url("../lib/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../lib/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../lib/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --slate: #16232b;
  --slate-2: #243541;
  --turq: #1fbfb0;
  --turq-d: #10897e;
  --turq-text: #0e7a70;
  --turq-deep: #0e5f58;
  --turq-l: #d6efec;
  --pink: #e8447f;
  --pink-btn: #d6336f;
  --pink-d: #b02458;
  --pink-l: #fce1eb;
  --paper: #fbf9f6;
  --muted: #66757c;
  --line: #e4e9e9;
  --line-2: #f0f4f4;
  --amber: #b86e0e;
  --amber-l: #fbeeda;
  --error: #b3261e;
  --error-l: #fbe9e7;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 19px;
  margin-top: 2rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--turq-text);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--turq-deep);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.muted,
.dim {
  color: var(--muted);
}

/* ---------- header ---------- */

.top {
  background: var(--slate);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand .flag {
  height: 38px;
  width: auto;
  flex: none;
}

.wm {
  line-height: 1;
}

.wmThe {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--turq);
  margin-bottom: 3px;
}

.wmMain {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wmMain em {
  font-style: normal;
  color: var(--pink);
}

.shopChip {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  font-weight: 600;
  color: #9db2ba;
}

.usermenu {
  position: relative;
  margin-left: auto;
}

.usermenu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
  color: #9db2ba;
}

.usermenu summary::-webkit-details-marker {
  display: none;
}

.usermenu summary:hover,
.usermenu[open] summary {
  background: rgba(255, 255, 255, 0.08);
}

.usermenu .caret {
  transition: transform 0.15s;
}

.usermenu[open] .caret {
  transform: rotate(180deg);
}

.usermenu .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink-btn);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whoText {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.usermenu .t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--paper);
}

.usermenu .s {
  font-size: 11px;
  color: #8fa3aa;
}

.usermenu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(22, 35, 43, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.menu-head {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.usermenu .menu a,
.usermenu .menu .logout {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--slate);
  text-decoration: none;
  cursor: pointer;
}

.usermenu .menu a:hover,
.usermenu .menu .logout:hover {
  background: var(--turq-l);
}

.usermenu .menu form {
  margin: 0;
}

.usermenu .menu .logout {
  color: var(--pink-d);
  font-weight: 600;
}

/* ---------- tabs ---------- */

.subs {
  background: var(--slate-2);
  padding: 0 22px;
  display: flex;
  gap: 2px;
  min-height: 44px;
  align-items: stretch;
  overflow-x: auto;
}

.subs a {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: #9db2ba;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.subs a:hover {
  color: var(--paper);
}

.subs a.on {
  color: var(--turq);
  font-weight: 600;
}

.subs a.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  background: var(--turq);
  border-radius: 3px 3px 0 0;
}

.subs .gear {
  margin-left: auto;
  gap: 6px;
}

.subs .cnt {
  background: rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
}

.subs a.on .cnt {
  background: var(--turq);
  color: var(--slate);
}

.subnav {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.subnav a {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  text-decoration: none;
}

.subnav a:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.subnav a.on {
  background: var(--slate);
  color: var(--paper);
  box-shadow: none;
  font-weight: 600;
}

/* ---------- page ---------- */

.page,
.container {
  flex: 1;
  width: 100%;
  min-width: 0; /* let wide tables scroll inside their panel instead of widening the page */
  margin: 0 auto;
}

.page {
  max-width: 1300px;
  padding: 26px 30px 40px;
}

.container {
  max-width: 1040px;
  padding: 2rem 1.5rem 3rem;
}

.site-footer {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

.phead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.phead h1 {
  margin: 0;
}

.phead .sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

.acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.narrow {
  max-width: 30rem;
}

/* ---------- buttons ---------- */

.btn,
.button {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 9px;
  border: 0;
  background: var(--slate);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover,
.button:hover {
  background: #0e171d;
  color: var(--paper);
}

.btn.pink,
.button.primary {
  background: var(--pink-btn);
  color: #fff;
}

.btn.pink:hover,
.button.primary:hover {
  background: var(--pink-d);
}

.btn.ghost {
  background: #fff;
  color: var(--slate);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.ghost:hover {
  background: var(--turq-l);
}

.btn.sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 7px;
}

form .button,
form .btn {
  margin-top: 0.9rem;
  align-self: flex-start;
}

.link-button {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--turq-text);
  cursor: pointer;
}

/* ---------- stat strip ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.st {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

.st .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.st .v {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.st .d {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.st.flag {
  border-color: var(--pink);
  background: linear-gradient(#fff, #fef7f9);
}

.st.flag .v,
.st.flag .d {
  color: var(--pink-d);
}

.st.flag .d {
  font-weight: 600;
}

/* ---------- search + filter chips ---------- */

.bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 320px;
  min-width: 220px;
  position: relative;
}

.search input {
  width: 100%;
  padding: 10px 13px 10px 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 13.5px;
}

.search svg {
  position: absolute;
  left: 12px;
  top: 11px;
  opacity: 0.4;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.chip:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.chip.on {
  background: var(--slate);
  color: var(--paper);
  box-shadow: none;
  font-weight: 600;
}

.chip.warn.on {
  background: var(--pink-btn);
  color: #fff;
}

/* ---------- panels + tables ---------- */

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.table-wrap > .panel,
.panel.scroll {
  overflow-x: auto;
  position: relative; /* keeps absolutely positioned bits (e.g. .sr-only) inside the scroll area */
}

table.table,
.panel table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.table-wrap > table.table {
  border: 1px solid var(--line);
  border-radius: 12px;
}

.table th,
.panel th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 16px;
  background: #fafcfc;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td,
.panel td {
  padding: 12px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

.table tr:last-child td,
.panel tr:last-child td {
  border-bottom: 0;
}

th.r,
td.r {
  text-align: right;
}

th.c,
td.c {
  text-align: center;
}

/* ---------- small things ---------- */

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--pink-l);
  color: var(--pink-d);
}

.pill.aqua,
.pill.teal {
  background: var(--turq-l);
  color: var(--turq-deep);
}

.pill.amber {
  background: var(--amber-l);
  color: #8a5a10;
}

.pill.grey {
  background: #eef1f1;
  color: var(--muted);
}

/* "Changed by the artist" and the like: stands out (white on the button pink, for contrast) */
.pill.pink {
  background: var(--pink-btn);
  color: #fff;
}

/* A count on a tab, e.g. Deliveries 3 */
.subs .count {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--pink-btn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: var(--turq-text);
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px #c9e4e1;
}

.stock {
  font-weight: 600;
}

.stock.low {
  color: var(--amber);
}

.stock.out {
  color: var(--pink-d);
}

.gets {
  color: var(--turq-text);
  font-weight: 600;
}

.card-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.card-list a {
  font-weight: 600;
}

/* "coming next" placeholder */
.holder {
  background: #fff;
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 64px 40px;
  text-align: center;
}

.holder .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--turq-l);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.holder h3 {
  font-size: 20px;
  margin: 0 0 7px;
}

.holder p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 auto;
  max-width: 44ch;
  line-height: 1.6;
}

.holder .lst {
  text-align: left;
  max-width: 420px;
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--muted);
}

.holder .lst div {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
}

.holder .lst div:last-child {
  border-bottom: 0;
}

/* ---------- forms ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

section.narrow > form.stack,
form.stack.narrow,
form.stack.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  margin: 0 0 0.75rem;
}

legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 0.35rem;
}

label {
  font-weight: 600;
  font-size: 13px;
  margin-top: 0.6rem;
}

label.checkbox {
  font-weight: 400;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  font: inherit;
  font-size: 14px;
  color: var(--slate);
  padding: 0.6rem 0.75rem;
  border: 1px solid #cfd8d8;
  border-radius: 9px;
  background: #fff;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--turq-text);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--turq);
  box-shadow: 0 0 0 3px var(--turq-l);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--turq);
  outline-offset: 2px;
}

input.input-validation-error,
select.input-validation-error {
  border-color: var(--error);
}

.hint {
  font-size: 12.5px;
  color: var(--muted);
}

.error,
.field-validation-error {
  color: var(--error);
  font-size: 13px;
}

.validation-summary-errors {
  background: var(--error-l);
  border-radius: 9px;
  padding: 0.75rem 1rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.2rem;
}

.validation-summary-valid {
  display: none;
}

.notice {
  padding: 0.75rem 1rem;
  border-radius: 9px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 500;
}

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  .top {
    padding: 10px 16px;
    gap: 10px;
  }

  .brand {
    gap: 9px;
  }

  .brand .flag {
    height: 30px;
  }

  .wmMain {
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }

  .shopChip {
    order: 3;
    width: 100%;
    border-left: 0;
    padding-left: 0;
  }

  /* Keep the name when there's no initials circle to stand in for it (pages outside a shop). */
  .usermenu summary:has(.av) .whoText {
    display: none;
  }


  .subs {
    padding: 0 8px;
  }

  .subs a {
    padding: 0 10px;
  }

  .page,
  .container {
    padding: 20px 16px 32px;
  }

  .holder {
    padding: 40px 20px;
  }

  .table {
    min-width: 34rem;
  }
}

/* ---------- settings ---------- */

form.policies {
  max-width: 40rem;
}

/* Policies has the discount explainer with a sample receipt beside it. */
form.policies.wide {
  max-width: 58rem;
}

input.short {
  max-width: 8rem;
}

label.choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 400;
  padding: 0.7rem 0.85rem;
  margin-top: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

label.choice:hover {
  background: #fafdfd;
}

label.choice:has(input:checked) {
  border-color: var(--turq);
  background: #f3fbfa;
}

label.choice input {
  margin-top: 0.2rem;
  flex: none;
}

label.choice > span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

label.choice strong {
  font-weight: 600;
}

/* ---------- artists ---------- */

.crumb {
  margin: -6px 0 12px;
  font-size: 13px;
}

.acards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.acard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  color: var(--slate);
  text-decoration: none;
}

.acard:hover {
  border-color: var(--turq);
  color: var(--slate);
  box-shadow: 0 2px 10px rgba(22, 35, 43, 0.06);
}

.acard.pending {
  border-color: #f0d3a3;
  background: #fffcf6;
}

.acard.ended {
  opacity: 0.7;
}

.acard > .pill {
  align-self: flex-start;
}

.acard-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--turq);
  color: var(--slate);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av.pending {
  background: #d98c1f;
  color: #fff;
}

.av.ended {
  background: #b9c4c4;
  color: #fff;
}

.av.big {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 17px;
}

.acard-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.acard-name {
  font-weight: 600;
  font-size: 15px;
}

.acard-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acard-rows {
  margin: 0;
  font-size: 13px;
}

.acard-rows > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
}

.acard-rows dt {
  color: var(--muted);
}

.acard-rows dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.phead-who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-title {
  font-size: 17px;
  margin: 0 0 10px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.about {
  padding: 18px;
}

.about dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}

.about dt {
  color: var(--muted);
}

.about dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.about h3 {
  font-size: 14px;
  margin: 14px 0 4px;
}

.about p {
  font-size: 13px;
  color: var(--slate-2);
  white-space: pre-line;
}

.holder.small {
  padding: 28px 20px;
}

.vcount {
  display: inline-block;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ---------- forms with sections ---------- */

form.artist-form {
  max-width: 46rem;
}

.sect {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 2px;
}

.sect:first-of-type {
  margin-top: 0;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.grid2.wide-first {
  grid-template-columns: 1fr 10rem;
}

.deal {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: 0 16px;
  background: #f7fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px 14px;
}

.form-actions {
  display: flex;
  gap: 9px;
  margin-top: 1rem;
}

.form-actions .btn {
  margin-top: 0;
}

@media (max-width: 720px) {
  .two-col,
  .grid2,
  .grid2.wide-first,
  .deal {
    grid-template-columns: 1fr;
  }
}

/* The general input rule above is more specific than .search input; restore room for the icon. */
.bar .search input[type="search"] {
  padding: 10px 13px 10px 36px;
  border-color: var(--line);
  font-size: 13.5px;
}

fieldset.plain {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

fieldset.plain:disabled input,
fieldset.plain:disabled select,
fieldset.plain:disabled textarea {
  background: #f5f7f7;
  color: var(--muted);
}

/* ---------- take in / edit a piece ---------- */

form.product-form {
  max-width: 60rem;
}

.ownerBox {
  background: #f7fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px 14px;
  margin-bottom: 6px;
}

.ownerBox .label {
  font-weight: 600;
  font-size: 13px;
  margin-top: 0.6rem;
}

.readOut {
  padding: 0.6rem 0;
  font-weight: 500;
}

.readOut a {
  font-size: 12.5px;
  margin-left: 6px;
}

.calc {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  color: var(--turq-deep);
}

.grid3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0 16px;
}

.vtable td {
  padding: 8px 10px;
  vertical-align: top;
}

.vtable input {
  padding: 0.45rem 0.55rem !important;
}

.vtable input.r {
  text-align: right;
}

.vtable input.c {
  text-align: center;
}

.vtable td.gets {
  padding-top: 16px;
}

.code-input {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--turq-text) !important;
  letter-spacing: 0.03em;
}

.del {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.del:hover {
  background: var(--pink-l);
  color: var(--pink-d);
}

.addVar {
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--turq-text);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
}

.short-field {
  max-width: 30rem;
}

.btn.danger {
  margin-left: auto;
  color: var(--pink-d);
}

.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: 720px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- inventory table ---------- */

.expandAll {
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--turq-text);
  background: none;
  border: 0;
  cursor: pointer;
}

table.inv {
  min-width: 900px;
}

table.inv tr.item > td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
}

table.inv tbody.grp.open tr.item > td {
  background: #f7fbfb;
  border-bottom-color: transparent;
}

table.inv tr.item.needs > td {
  background: #fef8fa;
}

table.inv tr.varRow {
  display: none;
}

table.inv tbody.open tr.varRow {
  display: table-row;
}

table.inv tr.varRow > td {
  padding: 9px 16px;
  background: #f7fbfb;
  border-bottom: 1px solid #eaf2f2;
  font-size: 13px;
}

.twist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

span.twist {
  cursor: default;
}

.chev {
  width: 16px;
  flex: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.15s;
}

.chev.hide {
  visibility: hidden;
}

tbody.open .chev {
  transform: rotate(90deg);
  color: var(--turq-text);
}

.iname {
  font-weight: 600;
}

.imeta {
  font-size: 12px;
  color: var(--muted);
}

.vname {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 25px;
}

a.artist {
  color: var(--slate);
  font-weight: 500;
  text-decoration: none;
}

a.artist:hover {
  text-decoration: underline;
}

.needsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink-d);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}

.needsBtn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

a.edit {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
}

a.edit:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.empty-row {
  padding: 28px !important;
}

.foot {
  padding: 11px 16px;
  background: #fafcfc;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.pager {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.pager a {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  text-decoration: none;
  font-weight: 600;
}

.pager a.on {
  background: var(--slate);
  color: var(--paper);
}

/* ---------- import ---------- */

.import-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}

.guide dl {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 8px 14px;
  margin: 0;
  font-size: 13px;
}

.guide dt {
  font-weight: 600;
}

.guide dd {
  margin: 0;
  color: var(--slate-2);
}

@media (max-width: 900px) {
  .import-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.upload h2 {
  font-size: 19px;
  margin: 4px 0 0;
}

.import-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.import-card .ci {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--turq-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.import-card h2 {
  margin: 4px 0 0;
}

.import-card p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

.upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.upload input[type="file"] {
  font: inherit;
  font-size: 13px;
}

.upload .btn {
  margin-top: 0;
  align-self: flex-start;
}

.noteRow {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 13.5px;
}

.error-box {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--error-l);
  color: var(--error);
  margin-bottom: 16px;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.strip.compact {
  grid-template-columns: repeat(auto-fit, 110px);
  margin: 0;
}

.strip.compact .st {
  padding: 10px 14px;
}

.strip.compact .v {
  font-size: 21px;
  margin-top: 2px;
}

/* For your accountant (Sales → For your accountant) */
.accountant-presets {
  margin: 0 0 10px;
}
.accountant-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 6px;
}
.accountant-downloads .btn {
  margin-top: 0;
}
table.accountant-totals tfoot th {
  border-top: 2px solid var(--line);
}
.accountant-notes {
  margin: 20px 0;
  padding: 12px 16px;
}
.accountant-notes summary {
  cursor: pointer;
}
.accountant-notes dl {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 6px 16px;
  margin: 10px 0;
}
.accountant-notes dt {
  font-weight: 700;
}
.accountant-notes dd {
  margin: 0;
  color: var(--slate);
}
@media (max-width: 640px) {
  .accountant-notes dl {
    grid-template-columns: 1fr;
  }
  .accountant-notes dd {
    margin-bottom: 6px;
  }
}

.confirm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 500;
  margin-bottom: 16px;
}

.confirm-bar span {
  flex: 1;
}

.confirm-bar .btn {
  margin-top: 0;
}

table.preview tr.bad td {
  background: #fef8fa;
}

table.preview td {
  vertical-align: top;
}

/* ---------- register ---------- */

.register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 20px;
  align-items: start;
}

.reg-scan {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.reg-scan .btn {
  margin-top: 0;
  align-self: stretch;
  padding: 0 22px;
  font-size: 15px;
}

input.code-entry {
  font-family: var(--font-mono);
  font-size: 18px !important;
  letter-spacing: 0.04em;
  padding: 0.8rem 1rem !important;
}

.reg-msg {
  margin-bottom: 12px;
}

.reg-results td {
  padding: 10px 14px;
}

.reg-results form,
.ticket form,
.ticket-head form {
  margin: 0;
}

.small {
  font-size: 12px;
}

.reg-ticket {
  padding: 16px 18px;
  position: sticky;
  top: 12px;
}

.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ticket-empty {
  padding: 18px 0;
}

table.ticket td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

td.qty {
  white-space: nowrap;
}

td.qty form {
  display: inline;
}

td.qty span {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  font-weight: 600;
}

.qbtn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.qbtn:hover {
  background: var(--turq-l);
}

.discount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.discount-row label {
  margin: 0;
}

.discount-row input {
  max-width: 8rem;
}

.discount-row select {
  width: auto;
}

dl.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  margin: 12px 0;
  font-size: 14px;
}

dl.totals dd {
  margin: 0;
  text-align: right;
}

dl.totals .grand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.tender {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tender-row {
  display: flex;
  gap: 8px;
}

.tender-row .btn {
  margin-top: 0;
  white-space: nowrap;
}

.quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.change-due {
  min-height: 1.6em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
}

.change-due strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--turq-deep);
}

.change-banner {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 18px;
  margin-bottom: 16px;
}

.change-banner strong {
  font-family: var(--font-display);
  font-size: 26px;
  margin-left: 8px;
}

.receipt {
  max-width: 30rem;
  padding: 18px;
}

.receipt-shop {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .register {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-ticket {
    position: static;
  }
}

@media print {
  .top, .subs, .acts, .site-footer, .change-banner {
    display: none !important;
  }

  .receipt {
    border: 0;
    box-shadow: none;
  }
}

/* ---------- statements ---------- */

.month-panel {
  padding: 16px 18px;
}

.month-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.month-head .section-title {
  margin: 0;
  min-width: 11rem;
  text-align: center;
}

.month-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.month-actions .btn {
  margin-top: 0;
}

.statement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.statement {
  padding: 22px;
}

.statement header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.statement h1 {
  margin: 4px 0;
}

.statement .big {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--turq-deep);
}

.statement-total {
  text-align: right;
}

.statement tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.paid-stamp {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 600;
}

.statement-actions {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.statement-actions form {
  margin: 0;
}

.statement-actions .btn {
  margin-top: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .statement-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  .statement-layout {
    display: block;
  }

  .statement {
    border: 0;
  }
}

/* register: suggestions while typing */

.reg-find {
  position: relative;
}

.suggest {
  list-style: none;
  margin: -4px 0 12px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 35, 43, 0.1);
}

.suggest form {
  margin: 0;
}

.suggest button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 7.5rem;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--slate);
  cursor: pointer;
}

.suggest button:hover:not(:disabled),
.suggest li.exact button {
  background: var(--turq-l);
}

.suggest button:disabled {
  cursor: default;
  opacity: 0.6;
}

.suggest .s-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest .s-stock {
  text-align: right;
}

.suggest-none {
  margin: -4px 0 12px;
  font-size: 13px;
}

/* ---------- receipts on screen ---------- */

.receipt-screen {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(22, 35, 43, 0.08);
  padding: 22px 20px;
  max-width: 360px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #111;
}

.receipt-screen.paper-roll58 {
  max-width: 280px;
  font-size: 11.5px;
}

.receipt-screen.paper-page {
  max-width: 460px;
}

.rc-shop {
  font-size: 1.3em;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rc-sub, .rc-ref, .rc-date, .rc-returns, .rc-foot, .rc-taxno {
  text-align: center;
}

.rc-sub { margin-top: 2px; }
.rc-ref { margin-top: 10px; }
.rc-date { margin-bottom: 6px; color: #444; }

.rc hr {
  border: 0;
  border-top: 2px dashed #999;
  margin: 8px 0;
}

.rc table {
  width: 100%;
  border-collapse: collapse;
}

.rc td {
  padding: 2px 0;
  vertical-align: top;
}

.rc-code { white-space: nowrap; padding-right: 8px !important; width: 1%; }
.rc-name { text-transform: uppercase; font-size: 0.9em; word-break: break-word; }
.rc-qty { font-size: 0.85em; text-transform: none; color: #444; }
.rc-amt { text-align: right; white-space: nowrap; padding-left: 8px !important; }
.rc-grand td { font-size: 1.2em; padding-top: 6px; border-top: 2px solid #111; }
.rc-note { margin-top: 4px; }
.rc-returns { margin-top: 8px; }
.rc-foot { margin-top: 4px; line-height: 1.45; }
.rc-taxno { margin-top: 6px; font-size: 0.9em; }

.done-card {
  padding: 18px;
  margin-bottom: 14px;
  border-color: var(--turq);
  background: #f3fbfa;
}

.done-title {
  font-weight: 700;
  color: var(--turq-deep);
}

.done-change {
  font-size: 18px;
  margin: 10px 0;
}

.done-change strong {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--turq-deep);
  margin-left: 6px;
}

.done-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.done-actions .btn {
  margin-top: 0;
}

/* ---------- receipt settings ---------- */

.receipt-settings {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.receipt-preview-wrap {
  position: sticky;
  top: 12px;
}

.receipt-preview-wrap .section-title {
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .receipt-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt-preview-wrap {
    position: static;
  }
}

/* ---------- sales ---------- */

.sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.sale-detail {
  position: sticky;
  top: 12px;
}

.sale-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sale-detail-head .btn {
  margin-top: 0;
}

.sales-table tr.sale-row {
  cursor: pointer;
}

.sales-table tr.sale-row:hover td {
  background: #fafdfd;
}

.sales-table tr.sale-row.on td {
  background: var(--turq-l);
}

.st .small-v {
  font-size: 20px;
}

@media (max-width: 900px) {
  .sales-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-detail {
    position: static;
  }
}

/* Receipt settings preview: which lines come from the boxes */
.rc .rc-edit { color: #c62828; }
.rc .rc-example { color: #c62828; opacity: .45; font-style: italic; }
.preview-key .key-edit { color: #c62828; font-weight: 600; }
.preview-key .key-example { color: #c62828; opacity: .55; font-style: italic; font-weight: 600; }

/* ---------- card on a separate terminal ---------- */

.pay-card {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.card-go {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--turq-d);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16, 137, 126, .25);
  transition: background .15s, transform .05s;
}

.card-go:hover {
  background: var(--turq-deep);
}

.card-go:active {
  transform: translateY(1px);
}

.card-go:focus-visible {
  outline: 3px solid var(--turq);
  outline-offset: 2px;
}

.card-go-icon {
  flex: none;
}

.card-go-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.25;
}

.card-go-text strong {
  font-size: 16px;
}

.card-go-text span {
  font-size: 12px;
  opacity: .85;
}

.card-go-amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.or-cash {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.or-cash::before, .or-cash::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tender.after-card {
  padding-top: 0;
  border-top: 0;
}

.card-pay {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.card-pay-title {
  font-weight: 700;
}

.card-pay-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.card-pay-box {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--pink-l);
  border: 2px solid var(--pink);
  text-align: center;
}

.card-pay-box .k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pink-d);
}

.card-pay-box .v {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--pink-d);
  line-height: 1.2;
}

.card-pay-box.ref {
  background: var(--turq-l);
  border-color: var(--turq);
}

.card-pay-box.ref .k, .card-pay-box.ref .v {
  color: var(--turq-deep);
}

.card-pay-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.card-pay-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.card-pay-actions .btn {
  margin-top: 0;
}

label.choice.disabled {
  opacity: .55;
  cursor: not-allowed;
}

label.choice.disabled:hover {
  background: none;
}

/* Keep receipt numbers, times, amounts and names on one line; only the items wrap. */
.sales-table th, .sales-table td {
  white-space: nowrap;
}

.sales-table td:nth-child(3) {
  white-space: normal;
}

.cash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Settings > Policies: where a discount shows on the receipt */
.discount-explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  margin: 6px 0 10px;
}

.discount-how ol {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.discount-how .key-edit {
  color: #c62828;
  font-weight: 600;
  white-space: nowrap;
}

.discount-sample {
  max-width: 300px;
}

.rc .rc-mark td {
  font-weight: 700;
  background: #fdecea;
}

label.choice .example {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--turq-deep);
}

@media (max-width: 760px) {
  .discount-explain {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Settings > Policies: a mock of the register's sale panel, with what the settings change boxed in red */
.reg-mock {
  padding: 14px 16px;
  font-size: 14px;
}

.reg-mock-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.preview-mark {
  margin: 10px -6px 0;
  padding: 2px 6px 6px;
  border: 2px solid #c62828;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

.preview-mark .discount-row {
  margin: 4px 0 0;
}

.preview-mark input:disabled {
  background: #fff;
  color: var(--slate);
  opacity: 1;
}

.preview-empty {
  padding: 8px 2px 2px;
  color: #c62828;
  font-size: 13px;
  font-style: italic;
}

.hint.indent {
  margin: -4px 0 4px 28px;
}

.discount-row .label {
  font-weight: 600;
  font-size: 13px;
}

/* ---------- email receipt ---------- */

.email-receipt {
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.email-receipt-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.email-receipt-form label {
  margin: 0;
  font-size: 13px;
}

.email-history {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
}

.email-history li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.email-history li.sent { color: var(--turq-deep); }
.email-history li.failed { color: var(--error); }
.email-history li.pending { color: var(--muted); }

.email-history form.inline {
  display: inline;
}

.sale-detail .email-receipt {
  margin: 0 0 12px;
  border-top: 0;
  padding-top: 0;
}

/* Settings > Receipt: how an emailed receipt appears in an inbox */
.inbox-title {
  margin-top: 18px;
}

.inbox-preview {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 13px;
}

.inbox-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.inbox-row + .inbox-row {
  border-top: 1px solid var(--line-2);
}

.inbox-row .k {
  color: var(--muted);
}

.inbox-preview .rc-edit-ui {
  color: #c62828;
}

/* ---------- platform (Super Admin) ---------- */

table.platform-shops td {
  vertical-align: top;
}

.platform-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.btn.ghost.danger {
  color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

td.overdue {
  color: var(--error);
  font-weight: 600;
}

section.paused {
  margin-top: 40px;
}

table.platform-users td {
  vertical-align: top;
}

table.platform-users tr.off td {
  opacity: .6;
}

table.platform-users td.actions form.inline {
  display: inline;
  margin-left: 10px;
}

.link-button.danger {
  color: var(--error);
}

/* ---------- Super Admin viewing a shop (read only) ---------- */

.read-only-banner {
  background: #fdecea;
  color: #8a1c14;
  border-bottom: 1px solid #f3c2bd;
  padding: 8px 24px;
  font-size: 13px;
  text-align: center;
}

.read-only-banner a {
  margin-left: 10px;
  color: #8a1c14;
  font-weight: 600;
}

body.read-only [disabled] {
  cursor: not-allowed;
  opacity: .55;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.plain li {
  padding: 3px 0;
}

/* ---------- two-step login ---------- */

.two-step .qr svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 10px 0;
  background: #fff;
}

.two-step code.key {
  font-size: 15px;
  letter-spacing: .04em;
}

.two-step ol.steps li {
  margin-bottom: 18px;
}

ul.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 28px;
  padding: 12px 16px;
  list-style: none;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 16px;
}

/* ---------- Square Terminal: waiting for the customer ---------- */

.terminal-wait {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
}

.terminal-wait-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal-wait-text span {
  font-size: 13px;
}

.terminal-wait .terminal-poll {
  display: none;   /* only there to check with Square every 2 seconds */
}

/* While the terminal is charging the sale is frozen (the server refuses changes); show it. */
.register.frozen .reg-ticket form:not(.terminal-wait form) :is(button, input, select) {
  opacity: .4;
  pointer-events: none;
}

.terminal-wait .btn {
  margin-top: 0;
}

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(14, 95, 88, .25);
  border-top-color: var(--turq-deep);
  animation: tcr-spin .9s linear infinite;
}

@keyframes tcr-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

form.dev-only {
  margin-top: 16px;
  padding: 14px 18px;
  border-style: dashed;
}

/* ---------- pay artists ---------- */

.schedule-note {
  margin: 4px 0 14px;
}

.payees {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.payee-head, .payee > summary {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 1.4fr 1.3fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.payee-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: #fafdfd;
  border-bottom: 1px solid var(--line);
}

.payee + .payee {
  border-top: 1px solid var(--line-2);
}

.payee > summary {
  cursor: pointer;
  list-style: none;
}

.payee > summary::-webkit-details-marker {
  display: none;
}

.payee > summary:hover {
  background: #fafdfd;
}

.payee.due > summary .who strong::before {
  content: "●";
  color: var(--amber);
  margin-right: 6px;
  font-size: 11px;
}

.payee .who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.payee-body {
  padding: 4px 16px 16px 30px;
  background: #fcfdfd;
  border-top: 1px dashed var(--line);
}

.payee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.payee-actions p {
  flex-basis: 100%;
  margin: 8px 0 4px;
}

.payee-actions form.inline .btn {
  margin-top: 0;
}

@media (max-width: 760px) {
  .payee-head {
    display: none;
  }

  .payee > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payee > summary > span:nth-child(3), .payee > summary > span:nth-child(4) {
    display: none;
  }
}

/* ---------- statement: the full split, and clean printing ---------- */

td.nowrap, .nowrap {
  white-space: nowrap;
}

.statement-lines th {
  vertical-align: bottom;
}

.statement-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 14px;
}

.statement-summary dl {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 4px;
  margin: 0;
  min-width: 320px;
}

.statement-summary dd {
  margin: 0;
  padding-left: 28px;
  text-align: right;
}

.statement-summary .grand {
  font-weight: 700;
  font-size: 17px;
  padding-top: 6px;
  border-top: 2px solid var(--slate);
}

.statement-foot {
  margin-top: 22px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

form.choose-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 2px 0 12px;
}

form.choose-dates input[type="date"]:not([type="checkbox"]) {
  width: 11rem;
  flex: 0 0 auto;
  padding: 5px 8px;
}

form.choose-dates .btn {
  margin-top: 0;
}

form.choose-dates .hint {
  flex-basis: 100%;
}

form.pay-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

form.pay-now p,
form.pay-now .hint {
  flex-basis: 100%;
  margin: 0;
}

form.pay-now label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

form.pay-now select,
form.pay-now input[type="text"] {
  width: auto;
  margin: 0;
  padding: 5px 8px;
}

form.pay-now .btn {
  margin-top: 0;
}

form.dates-panel {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

form.dates-panel select {
  width: auto;
  max-width: 30rem;
  flex: 0 1 auto;
  padding: 5px 8px;
}

@media print {
  @page {
    size: letter;
    margin: 14mm 12mm;
  }

  body {
    background: #fff !important;
  }

  main.page, main.container {
    padding: 0;
    max-width: none;
  }

  .crumb, .read-only-banner {
    display: none !important;
  }

  .statement {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
  }

  .statement table {
    width: 100%;
    page-break-inside: auto;
  }

  /* Nine columns on a letter page. */
  .statement-lines th, .statement-lines td {
    padding: 5px 5px;
    font-size: 10.5px;
  }

  .statement-lines th {
    letter-spacing: 0;
  }

  .statement-layout, .statement, .panel {
    overflow: visible !important;
  }

  .statement tr {
    page-break-inside: avoid;
  }

  .statement thead {
    display: table-header-group;   /* the column titles repeat on every page */
  }

  .statement .code {
    border: 0;
    padding: 0;
    color: #555;
  }

  .statement .gets, .statement .big {
    color: #000;
  }
}

.payee-history th, .payee-history td {
  padding: 6px 10px;
  text-align: left;
}

.payee-history th.r, .payee-history td.r {
  text-align: right;
}

.payee-history th.c, .payee-history td.c {
  text-align: center;
}

/* Returns */
.return-find { max-width: 560px; }
.return-find .row-inline { display: flex; gap: 8px; align-items: center; }
.return-find .row-inline input { flex: 1 1 auto; margin: 0; }
.return-find .row-inline .btn { margin-top: 0; }
.return-sale { margin-bottom: 14px; }
.return-sale p { margin: 4px 0; }
.return-lines { width: 100%; border-collapse: collapse; }
.return-lines th, .return-lines td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.return-lines th.r, .return-lines td.r { text-align: right; }
.return-lines th.c, .return-lines td.c { text-align: center; }
.return-lines select { width: auto; margin: 0; padding: 5px 8px; }
.return-details { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.return-details label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.return-details select, .return-details input { width: auto; margin: 0; padding: 5px 8px; }
.return-details input[type="text"] { min-width: 16rem; }
.return-tender { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.return-tender legend { font-weight: 600; margin-bottom: 4px; }
.choice-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.return-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.return-quote dl { display: grid; grid-template-columns: auto auto; row-gap: 4px; margin: 0; min-width: 300px; }
.return-quote dd { margin: 0; padding-left: 28px; text-align: right; }
.return-quote .grand { font-weight: 700; font-size: 17px; padding-top: 6px; border-top: 2px solid var(--slate); }
.return-quote .btn { margin-top: 0; }
.return-quote p { margin: 0; text-align: right; }
.return-done { max-width: 640px; }
.statement-returns-title { margin: 18px 0 6px; font-size: 15px; }

@media (max-width: 640px) {
  .return-lines thead { display: none; }
  .return-lines tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .return-lines td { border: 0; padding: 0; }
  .return-lines td:nth-child(4) { grid-column: 1 / -1; }
  .return-quote, .return-quote p { align-items: stretch; text-align: left; }
  .return-quote dl { min-width: 0; }
  .return-details input[type="text"] { min-width: 0; }
}

/* Store credit */
.credit-entry { margin: 8px 0 4px; }
.credit-entry summary { cursor: pointer; color: var(--muted, #667); font-size: 13px; }
.credit-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.credit-form input { flex: 1 1 auto; margin: 0; text-transform: uppercase; }
.credit-form .btn { margin-top: 0; }
form.inline { display: inline; }
.pay-credit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pay-credit p { margin: 0; }
.credit-list { width: 100%; border-collapse: collapse; }
.credit-list th, .credit-list td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.credit-list th.r, .credit-list td.r { text-align: right; }
.credit-list summary { cursor: pointer; }
.credit-history { margin: 6px 0 0; padding-left: 16px; }

/* Returns in the Sales list: money going out */
.sales-table tr.sale-row.return td { color: var(--error); background: var(--error-l); }
.sales-table tr.sale-row.return .code { color: var(--error); }

/* Gift cards */
.gift-entry { margin-top: 10px; }
.gift-entry summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.gift-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.gift-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.gift-form input { width: auto; margin: 0; padding: 5px 8px; }
.gift-form input[name="cardNumber"] { min-width: 14rem; }
.gift-form .btn { margin-top: 0; }
.gift-form .hint { flex-basis: 100%; }

.team-role select { width: auto; margin: 0; padding: 4px 8px; }

.section-h { font-size: 17px; margin: 22px 0 8px; }
.period-chips { margin: 4px 0 14px; }
.stock-form { max-width: 640px; }
.stock-form textarea { font-family: ui-monospace, Menlo, monospace; }
.stock-range { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.stock-range input { width: 13rem; margin: 0; }
.stock-form .btn { align-self: flex-start; }
.stock-list { margin-top: 10px; }
.stock-list summary { cursor: pointer; font-weight: 600; }
.stock-list ul { columns: 3 14rem; margin-top: 8px; }
.stock-list li { break-inside: avoid; padding: 2px 0; }
.gift-box { margin: 0 0 16px; }
.gift-box .strip { margin: 6px 0 0; }
.gift-box-head { display: flex; justify-content: space-between; align-items: baseline; }
.gift-search { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 6px; }
.gift-search input:not([type="checkbox"]) { flex: 1 1 18rem; max-width: 26rem; margin: 0; }
.gift-search .btn { margin-top: 0; }
.stock-form .stock-range input:not([type="checkbox"]) { width: 12rem; flex: 0 0 auto; margin: 0; }
.gift-box { padding: 12px 14px; }
.credit-list .code { white-space: nowrap; }
.refund-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .refund-actions .btn { margin-top: 0; }

/* Square onboarding import */
.square-card { margin-bottom: 18px; border-color: var(--turq, #2bb3a3); }
.square-step h3 { font-size: 15px; margin: 18px 0 8px; }
.square-groups select { width: auto; margin: 0; padding: 5px 8px; }
.square-groups .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.square-groups .form-actions .btn { margin-top: 0; }
.codes-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } .codes-bar .btn { margin-top: 0; }

/* ---- Import: steps, warnings, drop zone, "what will happen", done ---- */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 4px 0 20px; counter-reset: step; flex-wrap: wrap; row-gap: 8px; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); counter-increment: step; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 12px; flex: none; }
.steps li:not(:last-child)::after { content: ""; width: 28px; height: 1.5px; background: var(--line); margin: 0 10px; }
.steps li.done { color: var(--turq-text); }
.steps li.done::before { content: "✓"; background: var(--turq); border-color: var(--turq); color: #fff; }
.steps li.now { color: var(--slate); font-weight: 600; }
.steps li.now::before { background: var(--pink-btn); border-color: var(--pink-btn); color: #fff; }

.once-note { display: flex; gap: 10px; align-items: flex-start; background: var(--turq-l); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.warn-box { background: var(--amber-l); border: 1px solid #f0d3a6; border-left: 4px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; font-size: 14px; }
.warn-box strong:first-child { display: block; margin-bottom: 2px; }
.warn-box.strong { background: var(--error-l); border-color: #f2c4bf; border-left-color: var(--error); }
.warn-box label { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-weight: 600; }
.warn-box label input { width: auto; margin-top: 3px; }
.artists-first { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.artists-first .big { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-right: 4px; }

.live-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.live-counts span { background: var(--line-2); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.live-counts b { font-variant-numeric: tabular-nums; }
.square-groups tr.lead td { background: #fff8ec; }

.dropzone { display: grid; place-items: center; gap: 6px; text-align: center; border: 2px dashed var(--line); border-radius: 12px; padding: 22px 14px;
  background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; margin: 6px 0 10px; }
.dropzone:hover, .dropzone.over { border-color: var(--turq); background: var(--turq-l); }
.dropzone .big { font-size: 26px; line-height: 1; }
.dropzone .file-name { font-weight: 600; color: var(--turq-text); }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--turq); outline-offset: 2px; }

dialog.summary { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(22, 35, 43, .3); }
dialog.summary::backdrop { background: rgba(22, 35, 43, .45); }
dialog.summary .sum-head { padding: 18px 22px 6px; }
dialog.summary .sum-head h2 { margin: 0; font-family: var(--font-display); }
dialog.summary .sum-body { padding: 6px 22px 8px; overflow: auto; max-height: calc(100vh - 230px); }
dialog.summary .sum-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
dialog.summary .sum-foot .btn { margin: 0; }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.sum-grid div { background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.sum-grid .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.sum-grid .v { font-family: var(--font-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.owner-list { list-style: none; padding: 0; margin: 4px 0 12px; font-size: 14px; }
.owner-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.owner-list li .n { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.owner-list li.top { font-weight: 600; }
.sum-points { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.sum-points li { margin: 3px 0; }

.done-hero { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; }
.done-hero .tick { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--turq); color: #fff; font-size: 28px; flex: none; }
.done-hero h2 { margin: 0; font-family: var(--font-display); font-size: 26px; }
.done-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.done-actions .btn { margin: 0; }
.undo-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.undo-card form { margin: 0; }
.remap-card { border-color: var(--amber); }
.remap-card select { width: auto; margin: 0; padding: 5px 8px; }

/* ---- Product photos ---- */
.photo-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.photo-row .photo { margin: 0; width: 120px; display: flex; flex-direction: column; gap: 6px; }
.photo-row .photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; background: var(--line-2); }
.photo-row .photo.main img { border: 2px solid var(--turq); }
.photo-row figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.photo-row .linkish { background: none; border: 0; padding: 0; color: var(--turq-text); text-decoration: underline; cursor: pointer; font: inherit; }
.photo-add { position: relative; width: 120px; height: 120px; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  border: 2px dashed var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: 13px; font-weight: 600; margin: 0; }
.photo-add:hover, .photo-add:focus-within { border-color: var(--turq); background: var(--turq-l); }
.photo-add .big { font-size: 22px; line-height: 1; color: var(--turq-text); }
.photo-add .hint { font-weight: 400; }
.photo-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.photo-add.htmx-request { opacity: .6; pointer-events: none; }
img.thumb, span.thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; border: 1px solid var(--line); background: var(--line-2); display: inline-block; vertical-align: middle; }

/* ---- Edit a piece in a side panel (Inventory) ---- */
table.inv tbody.grp tr { cursor: pointer; }
table.inv tbody.grp tr:hover > td { background: var(--line-2); }
table.inv tr.item:focus-visible { outline: 2px solid var(--turq); outline-offset: -2px; }
dialog.drawer { margin: 0 0 0 auto; padding: 0; border: 0; height: 100vh; max-height: 100vh; width: min(820px, 100vw); max-width: 100vw;
  background: var(--paper); box-shadow: -12px 0 40px rgba(22, 35, 43, .25); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; animation: drawer-in .18s ease-out; }
dialog.drawer::backdrop { background: rgba(22, 35, 43, .4); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.drawer-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.drawer-close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.drawer-close:hover { color: var(--slate); }
.drawer-body { overflow: auto; padding: 16px 20px 28px; flex: 1; }
.drawer-body .product-form { border: 0; box-shadow: none; padding: 0; background: transparent; }
.product-form .photos { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }

/* ---- Settings → Roles ---- */
.roles-intro { margin: 0 0 14px; max-width: 760px; }
.role-admin { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 14px; }
.role-badge { display: inline-block; background: var(--turq-l); color: var(--turq-deep); font-weight: 700; border-radius: 999px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.role-badge.admin { background: var(--pink-l); color: var(--pink-d); }
.role-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.role-card > summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.role-card > summary::-webkit-details-marker { display: none; }
.role-card > summary::after { content: "›"; grid-row: 1; grid-column: 3; color: var(--muted); font-size: 20px; transition: transform .15s; }
.role-card[open] > summary::after { transform: rotate(90deg); }
.role-card .role-who { font-size: 13px; color: var(--muted); }
.role-card .role-what { grid-column: 1 / -1; font-size: 13.5px; color: var(--slate-2); }
.role-form { padding: 0 16px 16px; border-top: 1px solid var(--line-2); }
.role-name { display: flex; gap: 10px; align-items: center; margin: 14px 0; font-weight: 600; }
.role-name input { max-width: 280px; margin: 0; }
.role-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.role-area { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 6px; margin: 0; background: var(--paper); }
.role-area legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.switch { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; font-weight: 500; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { flex: none; width: 36px; height: 20px; border-radius: 999px; background: #cfd8da; position: relative; transition: background .15s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .track { background: var(--turq); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--turq-d); outline-offset: 2px; }
.switch .text { display: flex; flex-direction: column; }
.switch .hint { font-weight: 400; font-size: 12.5px; }
.range-pick { margin: 6px 0 8px; }
.range-pick .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 6px 11px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--line); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--turq); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--turq-d); outline-offset: -2px; }
.role-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.role-actions .btn { margin: 0; }
.role-new { padding: 14px 16px; }
.role-new h2 { margin: 0 0 4px; font-size: 17px; }
.role-add { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.role-add label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; font-size: 13px; }
.role-add input, .role-add select { margin: 0; }
.role-add .btn { margin: 0; }

/* Team: change a name in place */
.name-edit { display: inline-block; }
.name-edit > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.name-edit > summary::-webkit-details-marker { display: none; }
.name-edit .pen { color: var(--muted); font-size: 13px; }
.name-edit > summary:hover .pen { color: var(--turq-text); }
.name-edit[open] > summary { display: none; }
.name-form { display: flex; gap: 6px; align-items: center; }
.name-form input { margin: 0; width: 200px; padding: 5px 8px; }
.name-form .btn { margin: 0; }

/* Artist pages: invitations (shop side and the artist's own page) */
.invite-card {
  margin-bottom: 16px;
}
.invite-card .acts {
  margin-top: 10px;
}
.invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.invite-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
}
/* The shop's "Wrong email? Change it" and the artist's invitation link page */
.change-email {
  margin-top: 10px;
}
.change-email summary {
  cursor: pointer;
  color: var(--turq-text);
}
.change-email .invite-form {
  margin-top: 8px;
}
.invite-page .field-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.invite-page .locked-email {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--line-2);
  overflow-wrap: anywhere;
}
.invite-page .other-login {
  margin-top: 10px;
}
.invite-page .decline {
  margin-top: 18px;
}

/* The artist's own pages */
.portal-shops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.portal-shop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.portal-shop:hover,
.portal-shop:focus-visible {
  border-color: var(--turq-text);
}
.portal-shop dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
}
.portal-shop dt {
  color: var(--muted, #6b7280);
  font-size: 0.85em;
}
.portal-shop dd {
  margin: 0;
  text-align: right;
}
.portal-pieces tbody + tbody {
  border-top: 1px solid var(--line, #e5e7eb);
}
.portal-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
tr.returned td {
  color: var(--muted, #6b7280);
}

/* Deliveries (artist → shop) */
.delivery-lines .thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 8px;
}
.changed-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  border: 1px solid var(--pink-l);
  border-left: 4px solid var(--pink-btn);
  border-radius: 10px;
  background: #fff;
}
.changed-box .small {
  width: 100%;
  color: var(--muted);
}
.delivery-lines .changed {
  color: var(--pink-btn);
  font-weight: 600;
}
/* An artist's delivery, one step under another (works on a phone): rules, Restock, from My inventory, new items,
   review, send */
.delivery-step {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.delivery-step .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-step .row2,
.delivery-step .row3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.delivery-step .row3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rules-box {
  border: 1px solid var(--turq-l);
  border-left: 4px solid var(--turq);
  border-radius: 10px;
  background: #fff;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.rules-box ul {
  margin: 4px 0;
  padding-left: 18px;
}
.restock-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0;
}
.restock-tools input[type="search"] {
  max-width: 18rem;
}
.restock td form {
  display: inline;
}
.new-price summary {
  list-style: none;
  cursor: pointer;
}
.new-price summary::-webkit-details-marker {
  display: none;
}
.new-price[open] {
  min-width: 16rem;
}
.new-price form {
  margin-top: 6px;
}
.choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.choice-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 0;
}
.choice-list li + li {
  border-top: 1px solid var(--line-2);
}
.choice-list .what {
  flex: 1 1 12rem;
  min-width: 0;
}
.choice-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
}
.choice-form label {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 12px;
}
.choice-form input[name="price"]:not([type="checkbox"]) {
  width: 6.5em;
}
.choice-form input.qty:not([type="checkbox"]) {
  width: 4.5em;
}
.table-scroll {
  overflow-x: auto;
}
.send-it {
  border-top: 2px solid var(--turq-l);
  margin-top: 14px;
  padding-top: 12px;
}
.send-it h3 {
  margin: 0 0 6px;
}
.send-it fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.send-it fieldset legend {
  width: 100%;
  padding: 0;
}
.delivery-lines input.qty {
  width: 4.5em;
}
.delivery-lines input.money {
  width: 6em;
  text-align: right;
}
.delivery-lines input.code-input {
  width: 5em;
  text-transform: uppercase;
}
.pickup-acts {
  margin: 16px 0;
  align-items: center;
}

/* Small number boxes inside tables (beat the general full-width input rule) */
.delivery-lines input.qty:not([type="checkbox"]):not([type="radio"]) {
  width: 5em;
}
.delivery-lines input.money:not([type="checkbox"]):not([type="radio"]) {
  width: 6.5em;
}
.delivery-lines input.code-input:not([type="checkbox"]):not([type="radio"]) {
  width: 5.5em;
}
/* Boxes holding forms and text need room inside their border */
.invite-card,
.about .acts,
.invite-card .acts {
  align-items: center;
}

/* Password boxes: an eye to show or hide what was typed */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  padding-right: 2.75rem;
}
.pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pw-eye:hover,
.pw-eye.on {
  color: var(--turq-text);
  background: var(--turq-l);
}

/* Dropdowns look like the text boxes: same box, our own arrow */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366757c' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem !important;
  line-height: 1.4;
  cursor: pointer;
}
select:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Grid cells can shrink with the page, so boxes never overlap their neighbours */
.grid2 > *,
.grid3 > *,
.deal > * {
  min-width: 0;
}

/* The artist's shop cards look and behave like links */
.portal-shop {
  position: relative;
  border-left: 4px solid var(--turq);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.portal-shop strong {
  color: var(--turq-text);
  font-size: 1.05em;
  padding-right: 1.5rem;
}
.portal-shop::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 1.6em;
  line-height: 1;
  color: var(--turq-text);
}
.portal-shop .go {
  margin-top: 10px;
  color: var(--pink-btn);
  font-weight: 600;
  font-size: 0.9em;
}
.portal-shop:hover,
.portal-shop:focus-visible {
  box-shadow: 0 6px 18px rgba(16, 42, 51, 0.12);
  transform: translateY(-2px);
}
.portal-shop:active {
  transform: translateY(0);
  box-shadow: none;
  background: var(--line-2);
}

/* A photo box while the queue makes it small, or when it couldn't be used */
.photo-row .photo-wait {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--line-2);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.photo-row .photo.failed .photo-wait {
  border-color: var(--error);
  background: var(--error-l);
  color: var(--error);
}
.photo-picks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-picks .photo-add {
  overflow: hidden;
}
/* A picked photo shows one "Photo added" tile, whatever its kind (browsers can't show HEIC) */
.photo-slot {
  position: relative;
}
.photo-slot .empty,
.photo-slot.picked .added {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.photo-slot .added,
.photo-slot.picked .empty {
  display: none;
}
.photo-slot.picked .photo-add {
  border-style: solid;
  border-color: var(--turq);
  background: var(--turq-l);
}
.photo-slot .tick {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--turq-text);
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}
.photo-slot .file {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.photo-clear {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate-2);
  line-height: 1;
  cursor: pointer;
}
.photo-slot.picked .photo-clear {
  display: block;
}
.delivery-lines .thumb.wait {
  display: inline-block;
  background: var(--line-2);
  border: 1px dashed var(--line);
}

/* Piece photos in the artist's lists */
.piece-cell {
  white-space: nowrap;
}
.piece-thumb {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
  background: var(--line-2);
  border: 1px solid var(--line);
}
.piece-thumb.gap {
  visibility: hidden;
}

/* My inventory: the artist's own items */
.inventory-board {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.inventory-board .panel {
  padding: 14px 16px;
}
.inventory-board .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inventory-list li + li {
  border-top: 1px solid var(--line-2);
}
.inventory-list a {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.inventory-list a:hover {
  background: var(--turq-l);
}
.inventory-list .what {
  flex: 1;
  min-width: 0;
}
.piece-thumb.wait {
  border: 1px dashed var(--line);
}
.photo-have {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 120px;
}
.photo-have img,
.photo-have .wait {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.photo-have .wait {
  display: grid;
  place-content: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--line-2);
}
@media (max-width: 720px) {
  .inventory-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Delivery rows save themselves; the changed one says so for a moment */
.line-acts {
  white-space: nowrap;
  text-align: right;
  min-width: 9.5em;
}
.line-acts form {
  display: inline;
}
.saved-tick {
  color: var(--turq-text);
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  animation: saved-fade 3s ease-in forwards;
}
@media (max-width: 720px) {
  .line-acts {
    min-width: 0;
  }
}
@keyframes saved-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
.locked-price {
  min-width: 6.5em;
  display: inline-block;
  text-align: right;
  color: var(--muted);
}

/* Settings → Codes and names */
.codes-preview {
  padding: 16px 18px;
  align-self: start;
}
.codes-preview h3 {
  margin-top: 0;
}
.codes-preview dl {
  display: grid;
  gap: 4px 0;
  margin: 0;
}
.codes-preview dt {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 8px;
}
.codes-preview dd {
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* The shop checks in a delivery: per line All / Some (how many) / None, and why (optional) when not all */
.checkin .decision {
  min-width: 14rem;
}
.checkin .choices {
  display: flex;
  gap: 4px 12px;
  flex-wrap: wrap;
}
.checkin .choices label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 600;
}
.checkin .decision .some,
.checkin .decision .why {
  display: none;
  margin-top: 6px;
  gap: 6px;
  flex-wrap: wrap;
}
.checkin .decide:has(input[value="Some"]:checked) .some {
  display: flex;
}
.checkin .decide:has(input[value="Some"]:checked) .why,
.checkin .decide:has(input[value="None"]:checked) .why {
  display: flex;
}
.checkin .decision .some label {
  font-size: 13px;
  margin: 0;
}
.checkin .decision .why input {
  min-width: 10rem;
}

/* ---------- The artist's pages: a warm welcome, colour stat cards, each shop in its own colour ---------- */
.shop-c0 { --shop: #0e5f58; --shop-l: #d6efec; }
.shop-c1 { --shop: #b02458; --shop-l: #fce1eb; }
.shop-c2 { --shop: #8a520a; --shop-l: #fbeeda; }
.shop-c3 { --shop: #5b3f8c; --shop-l: #ece6f6; }
.shop-c4 { --shop: #1d5b8f; --shop-l: #e1edf8; }
.shop-c5 { --shop: #2c3e48; --shop-l: #e4e9e9; }

.artist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 8px 0 20px;
}
.artist-badge {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--turq-l);
  color: var(--turq-deep);
  display: grid;
  place-content: center;
  font-size: 18px;
  font-weight: 600;
}
.artist-hello {
  flex: 1 1 280px;
  min-width: 0;
}
.artist-hello h1 {
  margin: 0;
}
.artist-hello .sub {
  margin: 2px 0 0;
}
.artist-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artist-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.artist-body > .notice,
.artist-body > .error-box,
.artist-body > .invite-card,
.artist-body > .holder {
  margin: 0;
}
.artist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat-card .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.stat-card .big {
  font-size: 24px;
  font-weight: 600;
}
.stat-card .note {
  font-size: 13px;
  color: var(--muted);
}
.artist-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.artist-section h2 {
  margin: 0;
  font-size: 22px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.section-head a {
  font-weight: 600;
  font-size: 14px;
}
.shop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.shop-card {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 6px solid var(--shop);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(22, 35, 43, 0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}
.shop-card:hover,
.shop-card:focus-visible {
  box-shadow: 0 10px 26px rgba(22, 35, 43, 0.14);
  transform: translateY(-2px);
}
.shop-pic {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
}
.shop-pic.none {
  display: grid;
  place-content: center;
  background: var(--shop-l);
  color: var(--shop);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
}
.shop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-info strong {
  font-size: 17px;
  color: var(--shop);
}
.shop-info .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.chip-s {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.chip-s.sold { background: var(--pink-l); color: var(--pink-d); }
.chip-s.owed { background: var(--turq-l); color: var(--turq-deep); }
.chip-s.wait { background: var(--amber-l); color: #8a520a; }
.shop-info .go {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pink-btn);
}
.lately .mark {
  flex: none;
  background: var(--shop);
}
.lately {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.lately li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}
.lately li + li {
  border-top: 1px solid var(--line-2);
}
.lately .mark {
  width: 12px;
  height: 36px;
  border-radius: 6px;
}
.lately .what {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lately .gets {
  color: var(--turq-text);
}
@media (max-width: 720px) {
  .shop-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A shop's own pages for the artist carry its colour */
.shop-head {
  border-left: 6px solid var(--shop);
  background: var(--shop-l);
  border-radius: 14px;
  padding: 14px 18px;
}
.shop-head h1 {
  color: var(--shop);
}

/* ---------- The artist's delivery page as it was in #113 (restored, UAT 2026-10-05) ---------- */
/* An artist's delivery: their pieces beside this delivery (with sending it underneath); stacked on phones */
.delivery-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.delivery-board.single {
  grid-template-columns: minmax(0, 1fr);
}
.board-pieces {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.delivery-board .panel {
  padding: 14px 16px;
}
.delivery-board .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-board .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.table-scroll {
  overflow-x: auto;
}
/* In the half-width delivery box, rows stay narrow: Saved and Remove stack instead of widening the table */
.delivery-box .line-acts {
  min-width: 0;
  white-space: normal;
}
.delivery-box .line-acts form,
.delivery-box .saved-tick {
  display: block;
  margin: 0;
}
.delivery-box .delivery-lines th,
.delivery-box .delivery-lines td {
  padding-left: 8px;
  padding-right: 8px;
}
.delivery-box .delivery-lines input.qty:not([type="checkbox"]):not([type="radio"]) {
  width: 4.2em;
}
.delivery-box .delivery-lines input.money:not([type="checkbox"]):not([type="radio"]) {
  width: 5.6em;
}
.send-it {
  border-top: 2px solid var(--turq-l);
  margin-top: 14px;
  padding-top: 12px;
}
.send-it h3 {
  margin: 0 0 6px;
}
.send-it fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.send-it fieldset legend {
  width: 100%;
  padding: 0;
}
@media (max-width: 900px) {
  .delivery-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The artist's piece picker on a delivery */
.pick-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}
.pick-results .pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 400;
}
.pick-results .pick:hover,
.pick-results .pick:has(input:checked) {
  background: var(--turq-l);
}
.pick-results .pick .what {
  flex: 1;
  min-width: 0;
}
.pick-results .pick .here {
  font-size: 0.85em;
  white-space: nowrap;
}
.pick-results .pick .here .code {
  margin-left: 6px;
}
.new-version {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.new-version summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.new-version summary::-webkit-details-marker {
  display: none;
}
.as-link {
  color: var(--turq-text);
  font-weight: 600;
  text-decoration: underline;
}
/* The picked piece's price: the shop's, locked, when it's already on the shelf there */
.pick-price {
  display: flex;
  flex-direction: column;
}
.pick-price label {
  margin-top: 0;
}
.pick-price input.locked {
  background: var(--line-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* What a delivery is and how to do one, at the top of the artist's delivery */
.delivery-intro {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.delivery-intro .lead {
  margin: 0 0 8px;
  font-size: 14px;
}
.delivery-intro ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.delivery-intro p.small {
  margin: 8px 0 0;
}
/* My pieces: a list, each row marked with its shop's colour; a missing photo says so */
/* Column headings that sort the list */
.my-pieces .sort-head {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.my-pieces .sort-head:hover,
.my-pieces .sort-head.on {
  color: var(--turq-text);
}
.my-pieces .sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: -2px;
  opacity: 0.4;
}
.my-pieces .sort-head.on .sort-arrow {
  opacity: 1;
  letter-spacing: 0;
}
.my-pieces tbody + tbody {
  border-top: 1px solid var(--line);
}
/* Rows are plain (UAT 2026-10-05); each shop's name keeps its colour (.shop-tag) */
.shop-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--shop);
  color: #fff;
  white-space: nowrap;   /* a long shop name stays one pill on a phone (the table scrolls) */
}

/* "Want a different price? Add a new version…" only for a picked piece that's already in the shop */
.delivery-board form .new-version {
  display: none;
}
/* Razor always writes data- attributes (empty for null), so match the value, not the attribute */
.delivery-board form:has(input[name="variationId"][data-on-shelf="true"]:checked) .new-version {
  display: block;
}

/* The shop asked the artist for changes to a sent delivery: a card like the intro, with a pink edge */
.changes-asked {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: inset 5px 0 0 var(--pink-btn);
  padding: 16px 20px 16px 26px;
  margin-bottom: 16px;
}
.changes-asked .ca-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.changes-asked h2 {
  margin: 0;
  font-size: 18px;
}
.changes-asked > p {
  margin: 0 0 12px;
  font-size: 14px;
}
.changes-asked .ca-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--pink-l);
  border-radius: 8px;
  font-size: 15px;
}
.changes-asked .ca-from {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.changes-asked .ca-lines {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
}
.changes-asked .ca-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.changes-asked .ca-foot p {
  margin: 0;
  flex: 1 1 260px;
}

/* My pieces: a short line under the heading */
.artist-section .section-lead {
  margin: -6px 0 10px;
}

/* What a drop-off is, under the heading on a shop's page; the ⓘ opens the steps */
.dropoff-what {
  margin: -4px 0 12px;
}
.info-tip {
  display: inline;
}
.info-tip summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  color: var(--turq-text);
  font-weight: 700;
  padding: 0 4px;
}
.info-tip summary::-webkit-details-marker {
  display: none;
}
.info-tip ol {
  margin: 8px 0 0;
  padding: 10px 14px 10px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--slate);
}

/* Square set up once (Settings → Payments → Set up Square) and the Super Admin's reset */
.square-once ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.square-once li {
  margin: 4px 0;
}
.square-change summary {
  cursor: pointer;
  color: var(--turq-text);
  font-weight: 700;
}
.square-change form {
  margin-top: 10px;
}
.platform-square .requests li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.platform-square .requests li.open {
  font-weight: 600;
}