/* Dustin's Sols — one stylesheet, mobile first. Tokens up top. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #17181a;
  --ink-2: #4b5259;
  --line: #d9dde2;
  --accent: #9b1b1b;
  --accent-ink: #ffffff;
  --accent-soft: #f5e4e4;
  --ok: #1d6b3a;
  --warn: #9a6a00;
  --bad: #9b1b1b;
  --radius: 4px;
  --gutter: 16px;
  --max: 1100px;
  /* Side padding for the full-bleed bars: the plain gutter on mobile, and past
     --max it grows so their contents land on the centered column's edges. */
  --pad-x: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
  --font:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light only;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  min-height: 100%;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3 {
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5rem;
}
h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.5rem;
}
h3 {
  font-size: 1.05rem;
  font-weight: 600;
}
.muted {
  color: var(--ink-2);
}
.small {
  font-size: 0.875rem;
}
.danger {
  color: var(--bad);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}

/* header */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad-x);
  background: #17181a;
  color: #fff;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
/* the shop name gives up room first on a phone; the mark always stays */
.brand span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}
.topnav a {
  color: #d8dbe0;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 3px;
  white-space: nowrap;
  font-size: 0.95rem;
}
.topnav a:hover,
.topnav a[aria-current] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-count {
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  text-align: center;
}
.cart-count[data-count="0"] {
  display: none;
}
/* YouTube's own red play button, in its brand colours rather than redrawn to match the bar */
.social-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 3px;
}
.social-link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.yt-icon {
  display: block;
  flex: none;
}
.foot-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
/* sits last in the bar, past the cart */
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 10rem;
  padding: 6px 8px;
  border-radius: 3px;
  color: #d8dbe0;
  text-decoration: none;
  font-size: 0.95rem;
}
.account-link:hover,
.account-link[aria-current] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}
.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* signed in, the account link opens a small menu: Profile, My Orders and Log out. A <details>, so it
   works before (or without) site.js, which only adds closing on an outside click or Escape. */
.account-menu {
  position: relative;
}
.account-menu > summary {
  list-style: none;
  cursor: pointer;
}
.account-menu > summary::-webkit-details-marker {
  display: none;
}
.account-menu[open] > summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.account-caret {
  flex: none;
  transition: transform 0.15s;
}
.account-menu[open] .account-caret {
  transform: rotate(180deg);
}
.account-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 10rem;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.account-menu-list form {
  margin: 0;
}
.account-menu-list a,
.account-menu-list button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu-list a:hover,
.account-menu-list a:focus-visible,
.account-menu-list button:hover,
.account-menu-list button:focus-visible,
.account-menu-list a[aria-current] {
  background: var(--bg);
}
/* /orders: one card per order, newest first. The whole card is the link to the order. */
.order-list {
  display: grid;
  /* minmax(0, …) lets a long part name truncate instead of widening the column past a phone */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.order-card:hover,
.order-card:focus-visible {
  border-color: var(--ink-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.order-card-img {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink-2);
}
.order-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.order-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  font-size: 1.05rem;
}
.order-card-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-card-more {
  flex: none;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.order-card-meta {
  font-size: 0.88rem;
  color: var(--ink-2);
}
.order-card-meta time {
  white-space: nowrap;
}
.order-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.order-card-total {
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .order-card {
    gap: 12px;
    padding: 10px;
  }
  .order-card-img {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  /* two lines of part name on a phone, rather than three words and an ellipsis */
  .order-card-what {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
}
/* /orders/:id: every part bought, with its photos beside it; stacked on a phone. */
.order-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.order-item {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.order-item .gallery-main {
  background: var(--bg);
}
.order-item-info h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}
.order-item-info h2 a {
  color: var(--ink);
}
.order-item-price {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  color: var(--ink-2);
}
.order-item-price strong {
  color: var(--ink);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .order-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}
/* "Local pickup only", wherever an order or a checkout has to say it: bold, never muted. */
.pickup-flag {
  font-weight: 700;
  color: var(--ink);
}
.order-card .pickup-flag {
  font-size: 0.88rem;
}
.summary .pickup-flag {
  display: block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.adminbar {
  /* the label sits at the left gutter, the links stay centered in the bar */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px var(--pad-x);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.adminbar span {
  font-weight: 700;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--accent);
}
.adminnav {
  display: flex;
  gap: 2px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
}
.adminbar a {
  color: var(--ink);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.adminbar a[aria-current],
.adminbar a:hover {
  background: var(--surface);
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
}
.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2rem;
}
.inline {
  display: inline;
}
.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* welcome page: the banner artwork with its call to action sitting under it. The default
   artwork is white line work on black, and an uploaded one is letterboxed onto the same
   black, so the whole block reads as one panel whatever shape the picture is. */
.welcome {
  background: #000;
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 12px;
}
.welcome-banner {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
}
.welcome-cta {
  padding: 4px 20px 26px;
  text-align: center;
}
.welcome-cta h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0 0 8px;
}
.welcome-cta .prose {
  max-width: 48ch;
  margin: 0 auto 18px;
  color: #d8dadd;
}
.welcome-cta .prose a {
  color: #fff;
}
.btn-cta {
  padding: 13px 28px;
  font-size: 1.05rem;
}

/* search */
.search {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  flex: 1 1 320px;
  max-width: 520px;
}
.search input {
  flex: 1;
  min-width: 0;
}
input,
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
}
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="number"] {
  width: 5.5em;
}
button,
.btn {
  font: inherit;
  cursor: pointer;
}
.search button,
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-secondary {
  background: var(--surface);
}
.btn-small {
  padding: 5px 10px;
  font-size: 0.85rem;
}
.btn-idp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

/* A control that has started work. Its label is left in place but made invisible and a spinner
   takes the middle, so the box keeps exactly the size it had and nothing on the page moves.
   Buttons are also disabled outright; links and the <label> buttons that stand in for a file
   input have no disabled state of their own, so they stop taking pointer events instead. */
.is-busy {
  --spinner: var(--ink);
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.is-busy > * {
  visibility: hidden;
}
.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid var(--spinner);
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.6s linear infinite;
}
.btn-primary.is-busy {
  --spinner: var(--accent-ink);
}
.linklike.is-busy {
  --spinner: var(--accent);
}
.linklike.danger.is-busy {
  --spinner: var(--bad);
}
@keyframes busy-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* The spinner is the only thing saying the press landed, so it stays — just slowly. */
  .is-busy::after {
    animation-duration: 1.8s;
  }
}

/* catalog */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 720px) {
  /* Wider cards on desktop: 160px tracks leave a ragged empty slot at the end
     of a short row and wrap the titles three lines deep. */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}
.grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.card:hover {
  border-color: var(--ink-2);
}
.card-img {
  aspect-ratio: 4 / 3;
  background: var(--bg);
  position: relative;
  display: grid;
  place-items: center;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noimg {
  color: var(--ink-2);
  font-size: 0.85rem;
}
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 2px;
}
.badge-inline {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 2px;
  vertical-align: middle;
}
.card-sold img {
  opacity: 0.6;
}
.card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-body h3 {
  font-size: 0.95rem;
  margin: 0;
}
.fit {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.excerpt {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.price {
  margin: 4px 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price.big {
  font-size: 1.5rem;
}
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* item detail */
.item {
  display: grid;
  gap: 20px;
}
@media (min-width: 720px) {
  .item {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}
.gallery-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.thumb {
  flex: 0 0 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}
.thumb.is-active {
  border-color: var(--accent);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 12px 0 16px;
  font-size: 0.95rem;
}
.specs dt {
  color: var(--ink-2);
}
.specs dd {
  margin: 0;
}
.prose {
  max-width: 65ch;
}
.prose img {
  border-radius: var(--radius);
  margin: 12px 0;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
}
.prose blockquote {
  margin: 12px 0;
  padding: 4px 14px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}

/* lists */
.post-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 14px;
}
.post-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.post-list li a:first-child,
.post-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-right: 10px;
}
.post-list p {
  margin: 4px 0 0;
  color: var(--ink-2);
}
/* A post's tags, each a link to the blog narrowed to it. The second selector undoes the
   bold title treatment .post-list gives the first link in a row. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.post-tags a,
.post-list .post-tags a:first-child {
  font-size: 0.8rem;
  font-weight: 400;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink-2);
  text-decoration: none;
}
.post-tags a:hover {
  border-color: var(--ink-2);
}
.tag-about {
  color: var(--ink-2);
  margin: 0 0 16px;
}
.filters .count {
  opacity: 0.7;
  font-size: 0.75rem;
}
.tag-picks {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px 10px;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.tag-picks legend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 4px;
}
.tag-picks .check {
  margin-top: 0;
}
.tag-picks p {
  margin: 0;
}
.post-cover {
  max-height: 180px;
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 10px;
}
.post-hero {
  border-radius: var(--radius);
  margin: 12px 0 20px;
}
.post {
  max-width: 70ch;
}
.wanted-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  gap: 12px;
}
.wanted {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.wanted.is-found {
  border-left-color: var(--ok);
  opacity: 0.75;
}
.plain {
  list-style: none;
  padding: 0;
}

/* tables */
.table-wrap {
  overflow-x: auto;
}
table.data,
.cart-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
}
th a {
  color: inherit;
  text-decoration: none;
}
th a.sorted-asc::after {
  content: " ▲";
}
th a.sorted-desc::after {
  content: " ▼";
}
tbody tr:last-child td {
  border-bottom: 0;
}
.cart-part {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-part img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 3px;
}
.totals {
  max-width: 320px;
  margin: 14px 0 14px auto;
  display: grid;
  gap: 4px;
}
.totals div {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.totals .grand {
  font-weight: 700;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 1.1rem;
}
.status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.status-paid,
.status-published {
  color: var(--ok);
  border-color: currentColor;
}
.status-needs_review,
.status-pending,
.status-draft {
  color: var(--warn);
  border-color: currentColor;
}
.status-cancelled,
.status-refunded,
.status-archived {
  color: var(--ink-2);
}
.status-shipped {
  color: var(--ink);
}

/* forms */
.form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
.form label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 8px;
}
.form .check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.form .check input {
  width: auto;
}
.form button {
  margin-top: 12px;
  align-self: flex-start;
}
.form h2 {
  margin-top: 1.2rem;
}
.row3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
}
.row3 label {
  margin-top: 8px;
  display: block;
}
.alert {
  background: var(--accent-soft);
  color: var(--bad);
  border: 1px solid currentColor;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin: 0 0 12px;
}
/* The standing "confirm your email" bar: sits above the page, inside the same gutter. */
.notice-verify {
  max-width: var(--max);
  margin: 12px auto 0;
  padding: 10px var(--gutter);
}

.alert-ok {
  color: var(--ok);
  background: transparent;
}
.hp {
  position: absolute;
  left: -9999px;
}
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  margin: 16px 0 4px;
  font-size: 0.85rem;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.checkout,
.account,
.editor {
  display: grid;
  gap: 24px;
}
.banner-box {
  max-width: 520px;
  margin-bottom: 8px;
}
.banner-preview {
  width: 100%;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 0;
}
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
@media (min-width: 800px) {
  .checkout {
    grid-template-columns: 3fr 2fr;
  }
  .account {
    grid-template-columns: 200px 1fr 1fr;
  }
  .editor {
    grid-template-columns: 1fr 1fr;
  }
}
.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  align-self: start;
}
.summary h2 {
  margin-top: 0;
}
.summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary .totals {
  max-width: none;
  margin: 10px 0;
}
.summary .discount-line {
  color: var(--ok);
}
.discount-entry {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.discount-entry label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.discount-row {
  display: flex;
  gap: 6px;
}
.discount-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}
.summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}
address {
  font-style: normal;
  line-height: 1.4;
}

/* admin */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.stat b {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.stat span {
  color: var(--ink-2);
  font-size: 0.8rem;
}
.stat-warn {
  border-color: var(--warn);
}
.filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.filters a {
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}
.filters a[aria-current] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
/* The catalog's category chips are a nav, not a paragraph, so they bring their own gap. */
nav.filters {
  margin-bottom: 16px;
}
.admin-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: grid;
  gap: 8px;
}
.admin-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  flex-wrap: wrap;
}
.admin-list .grow {
  flex: 1 1 200px;
  min-width: 0;
}
.row-draft,
.row-hidden {
  opacity: 0.8;
}
.row-archived {
  opacity: 0.55;
}
.thumb-sm {
  width: 56px;
  height: 42px;
  flex: 0 0 56px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.thumb-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "+ Another" on an inventory row: the two ways to copy a part stay folded away until they
   are asked for, so a shelf of a hundred rows is not a wall of buttons. On a phone the choices
   open across the row; a wide screen has room beside the button, so there they hang under it. */
.copy > summary {
  list-style: none;
  padding: 5px 10px;
  font-size: 0.85rem;
}
.copy > summary::-webkit-details-marker {
  display: none;
}
.copy[open] {
  flex: 1 1 100%;
}
.copy[open] > summary {
  border-color: var(--ink-2);
}
.copy-choices {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.copy-choices p {
  margin: 0;
}
@media (min-width: 720px) {
  .copy {
    position: relative;
  }
  .copy[open] {
    flex: 0 0 auto;
  }
  .copy-choices {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    width: 16rem;
    background: var(--surface);
    box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  }
}
.move {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.move button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 3px;
  width: 36px;
  height: 36px;
}
.form-row {
  display: grid;
  gap: 6px;
}
.form-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.form-row-actions select {
  width: auto;
}
.form-inline-add {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.photo-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.photo-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.photo-list img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: 3px;
}
.photo-list .move {
  margin-left: 0;
}
.md-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.preview {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px 16px;
  border-radius: var(--radius);
}
.page-form {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .card {
    transition:
      filter 0.15s,
      border-color 0.15s;
  }
}
.integration {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.integration h2 {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.steps li {
  margin: 0.4em 0;
}

/* password field with the show/hide button inside it */
.pw {
  position: relative;
  display: flex;
  align-items: center;
}
.pw input {
  padding-right: 44px;
}
.pw .pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--ink-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.pw .pw-toggle:hover {
  color: var(--ink);
  background: var(--bg);
}

/* log in / sign up / invite card */
.auth {
  max-width: 400px;
  margin: 24px auto 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px 28px 24px;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(20, 22, 26, 0.04),
    0 8px 24px rgba(20, 22, 26, 0.06);
}
.auth-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
.auth h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.auth > .muted {
  text-align: center;
  margin: 0 0 18px;
}
.auth .form {
  max-width: none;
  gap: 4px;
}
.auth .form label {
  margin-top: 10px;
}
.auth .form input {
  height: 44px;
}
.auth .form button[type="submit"] {
  align-self: stretch;
  height: 46px;
  margin-top: 16px;
  font-size: 1rem;
}
.auth .btn-idp {
  height: 44px;
  margin-top: 8px;
}
.auth .alert {
  margin-top: 0;
}
.auth .fine {
  text-align: center;
  margin: 16px 0 0;
}

/* Pirate Ship / WooCommerce emulator: the authorize screen and the request log */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 12px 0 16px;
}
.kv dt {
  color: var(--ink-2);
  white-space: nowrap;
}
.kv dd {
  margin: 0;
  word-break: break-word;
}
.row-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form-inline {
  display: inline;
  margin: 0;
}
.nowrap {
  white-space: nowrap;
}
.payload {
  max-width: 44ch;
  max-height: 16em;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin: 6px 0 0;
}

/* Colour swatches and partner badges. Their colour arrives as data-swatch and site.js sets it as
   --swatch, since the page policy allows no inline style; until then they show the line grey. */
.swatch {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--swatch, var(--line));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 22%);
  vertical-align: -0.2em;
}
.swatch-sm {
  width: 0.8em;
  height: 0.8em;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.swatch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-swatches {
  display: inline-flex;
  gap: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--swatch, var(--ink-2));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.avatar-lg {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 1.05rem;
}

/* The two pickers on the part form. Each choice is a whole tappable tile with its input hidden
   inside; the tile itself shows what is picked. */
.picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 4px;
  margin: 12px 0 0;
  min-width: 0;
}
.picker legend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 4px;
}
.picker .muted.small {
  margin: 8px 0 6px;
}
.picker-filter {
  margin-bottom: 8px;
}
.partner-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  max-height: 22rem;
  overflow-y: auto;
}
.form .partner-option,
.form .color-option {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.partner-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.partner-option[hidden] {
  display: none;
}
.partner-option input,
.color-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.partner-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.partner-option:has(input:focus-visible),
.color-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.partner-option-text {
  display: grid;
  min-width: 0;
}
.partner-option-text > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.color-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-size: 0.9rem;
}
.color-option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.color-option:has(input:checked)::after {
  content: "✓";
  font-weight: 700;
}
.color-new {
  margin-top: 8px;
}
.color-new > summary {
  display: inline;
  cursor: pointer;
  font-size: 0.9rem;
}
.color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.color-row input:not([type="color"]) {
  flex: 1 1 10rem;
  width: auto;
}
.color-row button,
.form .color-row button {
  margin: 0;
  align-self: auto;
}
input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.color-add {
  max-width: 520px;
}

/* Partners */
.partner-grid {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.partner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.partner-card:hover {
  border-color: var(--ink-2);
}
.partner-card-body {
  display: grid;
  min-width: 0;
}
.partner-card-body > * {
  overflow: hidden;
  text-overflow: ellipsis;
}
.partner-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.partner-tag {
  font-weight: 600;
  color: var(--ink);
}
.form-inline-add > summary {
  cursor: pointer;
}
.placeholders {
  margin: 0;
  font-size: 0.85rem;
}
.mail-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.mail-preview pre {
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.9rem;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.partner-sales {
  margin-top: 1.5rem;
}
.partner-sale-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: grid;
  gap: 8px;
}
.partner-sale-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.partner-sale-list .grow {
  min-width: 0;
}
.ok {
  color: var(--ok);
}
/* A palette row keeps shade, name and Save on one line even on a phone; the count drops below. */
.admin-list .color-row {
  margin-top: 0;
}
.admin-list .color-row input:not([type="color"]) {
  flex: 1 1 0;
  min-width: 4rem;
}
.admin-list .color-row > .muted {
  flex-basis: 100%;
}