/* Ivory Keepsakes — magnet shop
   Brand: warm white paper, soft ink, taupe, Cormorant and Montserrat. */

:root {
  color-scheme: light;

  --paper: #f8f7f5;
  --paper-2: #ffffff;
  --paper-3: #efe7e1;
  --ink: #26241f;
  --ink-2: #5c574f;
  --ink-3: #7d766c;
  --gold: #8b6f5c;
  --gold-dark: #6f5746;
  --gold-soft: #e6d8ce;
  --line: #e2dcd5;
  --good: #2f6f4f;
  --warn: #8a5a12;
  --bad: #9b3030;
  --on-accent: #ffffff;
  --photo-bg: var(--paper-3);
  --foot: #d3cbc2;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow-1: 0 1px 2px rgba(38, 36, 31, .05);
  --shadow-2: 0 2px 6px rgba(38, 36, 31, .08), 0 18px 40px rgba(38, 36, 31, .10);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Montserrat, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1140px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 24px; }

p { margin: 0 0 1em; }
a { color: var(--gold-dark); }
small { font-size: 13px; }

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* The name centered over the navigation, with the cart off to the side. */
.site-head { background: var(--paper); }

.site-head .wrap {
  position: relative;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.brand {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  font-size: 15px;
  letter-spacing: .12em;
}

.site-nav a { color: var(--ink); text-decoration: none; padding-bottom: 2px; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom: 1px solid var(--ink); }

.cart-link {
  position: absolute;
  top: 50%;
  right: clamp(16px, 5vw, 76px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}

.cart-icon { display: inline-flex; }

main { padding: 0; }

/* The form-only pages sit in a single wrap with room around them. */
main > .wrap:only-child { padding-top: 28px; padding-bottom: 64px; }

.site-foot {
  background: var(--foot);
  padding: 34px 0;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}

.site-foot a { color: inherit; }
.site-foot .dim { color: inherit; }

/* ---------- cards & panels ---------- */

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 20px;
}

.card + .card { margin-top: 18px; }

.step-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 10px;
}

.step-label label { font: inherit; color: inherit; margin: 0; }

.grid-2 {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

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

.sticky-side { position: sticky; top: 24px; }

/* The order and review pages keep a narrow summary column beside
   their content. */
.grid-2.with-summary { gap: 18px; grid-template-columns: minmax(0, 1fr) 330px; }

@media (max-width: 860px) {
  .grid-2.with-summary { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
}

/* The owner can put the order form on the left, which moves the
   pictures to the right. On a phone the pictures always come first. */
@media (min-width: 861px) {
  .grid-2.summary-left > .gallery { order: 1; }
}

/* ---------- banners ---------- */

.banner {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  border: 1px solid;
  margin-bottom: 16px;
}

.banner-event {
  background: var(--paper-3);
  border-color: var(--gold-soft);
  color: var(--ink);
}

.banner-warn { background: #fdf6e7; border-color: #ead9ae; color: var(--warn); }
.banner-bad  { background: #fdeeee; border-color: #f0cfcf; color: var(--bad); }
.banner-good { background: #eef6f1; border-color: #cbe4d6; color: var(--good); }

/* A dark theme (set from the dashboard) tints these from the theme's
   own colors rather than the pale fixed ones above. */
[data-dark] .banner-event,
[data-dark] .pill { background: color-mix(in srgb, var(--gold) 16%, var(--paper-2)); border-color: color-mix(in srgb, var(--gold) 45%, var(--paper-2)); }
[data-dark] .banner-warn,
[data-dark] .pill.s-pending_payment, [data-dark] .pill.s-draft { background: color-mix(in srgb, var(--warn) 14%, var(--paper-2)); border-color: color-mix(in srgb, var(--warn) 40%, var(--paper-2)); }
[data-dark] .banner-bad,
[data-dark] .pill.s-canceled, [data-dark] .pill.s-refunded { background: color-mix(in srgb, var(--bad) 14%, var(--paper-2)); border-color: color-mix(in srgb, var(--bad) 40%, var(--paper-2)); }
[data-dark] .banner-good,
[data-dark] .pill.s-paid, [data-dark] .pill.s-printing { background: color-mix(in srgb, var(--good) 14%, var(--paper-2)); border-color: color-mix(in srgb, var(--good) 40%, var(--paper-2)); }
[data-dark] .pill.s-shipped, [data-dark] .pill.s-ready, [data-dark] .pill.s-completed { color: #9cc3e8; background: color-mix(in srgb, #9cc3e8 14%, var(--paper-2)); border-color: color-mix(in srgb, #9cc3e8 40%, var(--paper-2)); }
[data-dark] .photo-tile .x { background: #b23b3b; border-color: var(--paper); }
[data-dark] .photo-tile .copies { background: var(--gold); color: var(--on-accent); }

/* ---------- option picker ---------- */

.options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  cursor: pointer;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 8px 4px;
  transition: border-color .15s, background .15s;
}

.option:hover { border-color: var(--gold); }

.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.option.is-on {
  border: 1.5px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, var(--paper-2));
}

.option .o-name { font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.option .o-price { font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.o-was { font-weight: 400; color: var(--ink-3); margin-right: 6px; }

@media (max-width: 420px) {
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- dropzone ---------- */

.drop {
  border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, var(--paper-2));
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.drop:hover, .drop.is-over {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 5%, var(--paper-2));
}

/* The pack is holding as many photos as it can take. */
.drop.is-full {
  cursor: default;
  border-style: solid;
  border-color: var(--gold-soft);
}

.drop.is-full:hover { border-color: var(--gold-soft); background: var(--paper-2); }
.drop.is-full .big { color: var(--gold-dark); }

.drop-icon { display: inline-flex; color: var(--ink-2); margin-bottom: 6px; }
.drop .big { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.drop .sm { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.form-hint { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }

/* ---------- photo grid ----------
   Adding a photo and editing it are the same step, so each uploaded
   picture is the thing you click. The delete badge deliberately sits
   outside the frame, which is why the grid carries its own padding
   and a gutter wide enough to hold it. */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(118px, 42%), 1fr));
  gap: 26px;
  margin-top: 18px;
  padding: 18px 18px 0 0;
}

.photo-grid:empty { display: none; }

.photo-tile {
  position: relative;
  aspect-ratio: 1;
  /* the badge hangs off the corner, so nothing here may clip */
  overflow: visible;
}

.photo-frame {
  position: absolute;
  inset: 0;
  padding: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--photo-bg);
  cursor: pointer;
  display: block;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}

.photo-frame canvas,
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-frame:hover,
.photo-frame:focus-visible {
  border-color: var(--gold);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  outline: none;
}

/* the shadow box, with its large invitation to edit */
.photo-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  background: rgba(26, 23, 20, .58);
  color: #fff;
  opacity: 0;
  transition: opacity .16s;
  pointer-events: none;
}

.photo-overlay .big-edit {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.photo-frame:hover .photo-overlay,
.photo-frame:focus-visible .photo-overlay { opacity: 1; }

/* Offsetting by 68% of its own size leaves about a tenth of the
   badge over the picture and the rest clear of it. */
.photo-tile .x {
  --x-size: 26px;
  position: absolute;
  width: var(--x-size);
  height: var(--x-size);
  top: calc(var(--x-size) * -0.68);
  right: calc(var(--x-size) * -0.68);
  z-index: 3;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--bad);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 1px 5px rgba(43, 39, 36, .3);
  transition: background .15s, transform .15s;
}

.photo-tile .x:hover,
.photo-tile .x:focus-visible {
  background: #7d2626;
  transform: scale(1.1);
  outline: none;
}

.photo-tile .lowres {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(138, 90, 18, .92);
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  letter-spacing: .04em;
  z-index: 2;
  pointer-events: none;
}

/* how many magnets a repeated photo goes on, opposite the remove badge */
.photo-tile .copies {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--gold-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 1px 4px rgba(43, 39, 36, .3);
  pointer-events: none;
}

/* − ×2 + under a photo, for choosing which photos repeat. It sits in
   the tile's own flow, below the square picture, so it always takes
   up room and nothing after the grid can run into it. */
.photo-grid.has-steppers { row-gap: 34px; }

.photo-tile.has-stepper {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-tile.has-stepper .photo-frame {
  position: relative;
  inset: auto;
  aspect-ratio: 1;
}

.copy-stepper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.copy-stepper .copies {
  position: static;
  box-shadow: none;
}

.copy-stepper .step {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
}

.copy-stepper .step:hover:not(:disabled),
.copy-stepper .step:focus-visible {
  border-color: var(--gold);
  background: var(--gold-soft);
  outline: none;
}

.copy-stepper .step:disabled {
  color: var(--ink-3);
  opacity: .45;
  cursor: default;
}

/* a photo still being read, with its progress bar */
.pending-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--photo-bg);
  overflow: hidden;
}

.pending-name {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-label {
  font-size: 11px;
  color: var(--ink-3);
}

.pending-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--gold-soft);
  overflow: hidden;
}

.pending-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
}

.photo-tile.is-done .pending-bar { background: var(--good); }
.photo-tile.is-done .pending-label { color: var(--good); }
.photo-tile.is-failed .pending-bar { background: var(--bad); }
.photo-tile.is-failed .pending-label { color: var(--bad); }

/* ---------- magnet slots ---------- */

.slots {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.slots.n1 { grid-template-columns: minmax(0, 220px); }

.slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--photo-bg);
  overflow: hidden;
  padding: 0;
  display: block;
  width: 100%;
}

.slot canvas, .slot img { width: 100%; height: 100%; display: block; object-fit: cover; }

.slot .empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-3);
  font-size: 12px;
}

.preview-title {
  font-family: var(--sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  font-weight: 500;
  margin: 26px 0 10px;
}

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

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}

.btn-primary { background: var(--gold); color: var(--on-accent); }
.btn-primary:hover { background: var(--gold-dark); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dark); }

.btn-quiet { background: transparent; border: 0; color: var(--gold-dark); padding: 6px 2px; font-size: 14px; }
.btn-quiet:hover { text-decoration: underline; }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 15px; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

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

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 5px;
}

.field .req { color: var(--gold-dark); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}

textarea { min-height: 76px; resize: vertical; }

.field-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.field-err { color: var(--bad); font-size: 12.5px; margin-top: 4px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }

.radio-row { display: grid; gap: 8px; }

.radio-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
}

.radio-card.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--paper-2)); }
.radio-card input { margin: 3px 0 0; accent-color: var(--gold); }
.radio-card .t { font-size: 14.5px; font-weight: 500; }
.radio-card .d { font-size: 12.5px; color: var(--ink-2); }

/* ---------- summary ---------- */

.sum-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  padding: 5px 0;
}

.sum-line.total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 11px;
  font-size: 18px;
  font-family: var(--serif);
  font-weight: 600;
}

.sum-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.sum-thumbs img, .sum-thumbs canvas {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--line); display: block;
}

/* ---------- modal (crop) ---------- */

.modal-back {
  position: fixed; inset: 0;
  background: rgba(30, 27, 24, .55);
  display: grid; place-items: center;
  padding: 16px;
  z-index: 100;
}

.modal {
  background: var(--paper-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  width: 100%;
  max-width: 420px;
  padding: 18px;
  max-height: 100%;
  overflow: auto;
}

.crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #211e1b;
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.crop-stage canvas { width: 100%; height: 100%; display: block; }
.crop-stage.dragging { cursor: grabbing; }

.crop-stage .thirds {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.25) 33.33%, rgba(255,255,255,.25) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,.25) 66.66%, rgba(255,255,255,.25) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.25) 33.33%, rgba(255,255,255,.25) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom, transparent 66.66%, rgba(255,255,255,.25) 66.66%, rgba(255,255,255,.25) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

.zoom-row {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px;
  font-size: 13px; color: var(--ink-2);
}

.zoom-row input[type="range"] { flex: 1; accent-color: var(--gold); }

.modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.modal-actions .btn { flex: 1; }

/* ---------- progress ---------- */

.bar {
  height: 7px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.bar > i {
  display: block; height: 100%;
  background: var(--gold);
  width: 0%;
  transition: width .25s;
}

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner.dark { border-color: rgba(43, 39, 36, .25); border-top-color: var(--ink); }

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

/* ---------- status / lookup ---------- */

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.pill.s-paid, .pill.s-printing { background: #eef6f1; color: var(--good); border-color: #cbe4d6; }
.pill.s-shipped, .pill.s-ready, .pill.s-completed { background: #eef3f8; color: #2d5a85; border-color: #cddfee; }
.pill.s-pending_payment, .pill.s-draft { background: #fdf6e7; color: var(--warn); border-color: #ead9ae; }
.pill.s-canceled, .pill.s-refunded { background: #fdeeee; color: var(--bad); border-color: #f0cfcf; }

.order-no {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(26px, 5vw, 36px);
  letter-spacing: .08em;
  background: var(--paper-3);
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: inline-block;
}

.timeline { list-style: none; margin: 14px 0 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 16px 24px;
  font-size: 14px;
  color: var(--ink-3);
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 3px; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1.5px solid var(--line);
}

.timeline li::after {
  content: "";
  position: absolute;
  left: 7px; top: 16px; bottom: 0;
  width: 1px;
  background: var(--line);
}

.timeline li:last-child::after { display: none; }

.timeline li.done { color: var(--ink); }
.timeline li.done::before { background: var(--gold); border-color: var(--gold); }

.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

/* ---------- qr tool ---------- */

.qr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}

.qr-card canvas, .qr-card img, .qr-card table { max-width: 100%; height: auto; margin: 0 auto; }
.qr-card .qr-title { font-family: var(--serif); font-size: 24px; margin-bottom: 4px; }
.qr-card .qr-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 16px; }
.qr-card .qr-url { font-size: 11px; color: var(--ink-3); word-break: break-all; margin-top: 14px; }

@media print {
  .site-head, .site-foot, .no-print { display: none !important; }
  body { background: #fff; }
  .qr-card { border: 0; box-shadow: none; }
}

/* ---------- hero ---------- */

.hero { padding: 6px 0 22px; }
.hero h1 { margin-bottom: 8px; }
.hero p { color: var(--ink-2); max-width: 54ch; font-size: 16px; }
.hero.is-center { text-align: center; }
.hero.is-center p { margin-left: auto; margin-right: auto; }

/* Every other page's heading is smaller than the shop page's. */
main > .wrap .hero h1,
main > .wrap > h1 { font-size: clamp(30px, 4vw, 44px); }

/* ---------- the shop page ---------- */

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  background: var(--paper-3);
}

.hero-split .hero {
  align-self: center;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px) clamp(36px, 5vw, 72px) clamp(20px, 8vw, 120px);
}

.hero-split h1 { line-height: 1.5; color: #000; margin-bottom: 14px; }
.hero-split h1 em { font-style: italic; }
.hero-split .hero p:not(.eyebrow) { letter-spacing: .12em; line-height: 1.5; color: var(--ink); }

.hero-photo { position: relative; min-height: 340px; }

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.order-now {
  position: absolute;
  top: 12%;
  right: 14%;
  width: clamp(112px, 11vw, 162px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--ink);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .2s;
}

.order-now:hover { transform: scale(1.05); }

.how-it-works { padding: 56px 16px 40px; text-align: center; }
.how-it-works h2 { margin-bottom: 34px; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--maxw);
  margin: 0 auto;
}

.how-grid > div { padding: 6px 28px 26px; }
.how-grid > div + div { border-left: 1px solid var(--foot); }
.how-grid img { height: 44px; width: auto; }
.how-grid h3 { font-family: var(--sans); font-size: 16px; letter-spacing: .12em; margin: 14px 0 12px; line-height: 1.4; }
.how-grid p { letter-spacing: .1em; line-height: 1.4; margin: 0; }

.moments { background: var(--paper-3); padding: 48px 16px 56px; text-align: center; }
.moments .eyebrow { font-weight: 400; margin-bottom: 22px; }
.moments h2 { font-size: clamp(32px, 5vw, 64px); color: #000; margin-bottom: 26px; }
.moments-intro { max-width: 680px; margin: 0 auto 48px; letter-spacing: .12em; line-height: 1.4; }

.moment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 4vw, 68px);
  max-width: 1400px;
  margin: 0 auto;
}

.moment-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; margin-bottom: 16px; }
.moment-grid h3 { margin-bottom: 4px; }
.hearts { display: block; color: var(--gold); margin-bottom: 8px; }
.moment-grid p { font-size: 13px; letter-spacing: .06em; line-height: 1.45; margin: 0; }

.product { padding: 56px 0 72px; scroll-margin-top: 16px; }

.gallery { position: sticky; top: 24px; }
.gallery-main { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--photo-bg); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }

.gallery-thumbs button {
  padding: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--photo-bg);
  cursor: pointer;
}

.gallery-thumbs button.is-on { border: 1.5px solid var(--gold-dark); }
.gallery-thumbs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-title { font-size: clamp(30px, 3vw, 38px); font-weight: 500; color: var(--gold-dark); margin-bottom: 8px; }
.product-price { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.form-step { margin-bottom: 22px; }
.form-step textarea { min-height: 84px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }

.qty-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

.qty-btn:hover:not(:disabled) { background: var(--paper-3); }
.qty-btn:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.qty output { min-width: 40px; text-align: center; font-weight: 500; }

.order-box { border-top: 1px solid var(--line); padding-top: 18px; }
.order-box #go { margin-top: 14px; }
.order-foot { margin: 12px 0 0; font-size: 12.5px; }
.order-foot:empty { display: none; }

.item-note { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; overflow-wrap: anywhere; white-space: pre-line; }

/* A QR code scanner or someone changing an item goes straight to the form. */
.order-only .marketing { display: none; }
.order-only .hero-split { display: block; background: transparent; }
.order-only .hero-split .hero { padding: 22px 16px 0; max-width: var(--maxw); margin: 0 auto; }
.order-only .hero-split h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
.order-only .product { padding-top: 24px; }
.shop-page #event-banner:not(:empty),
.shop-page #announce:not(:empty) { padding-top: 16px; }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
  .hero-split h1 { line-height: 1.25; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-grid > div + div { border-left: 0; border-top: 1px solid var(--foot); padding-top: 24px; }
  .moment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav { gap: 4px 18px; font-size: 14px; letter-spacing: .08em; }
  .cart-link { top: 26px; transform: none; }
}

/* the dashboard's pack and price editors */
.pack-edit-list { display: grid; gap: 10px; }
.pack-edit {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.pack-edit-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }

/* the owner's likeness of the main page, at a smaller scale */
.page-preview {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.page-preview .hero { padding: 0 0 12px; }
.page-preview .hero h1 { font-size: 24px; }
.page-preview .hero p { font-size: 14px; }
.pp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 10px; }
.pp-cols.is-left { grid-template-columns: 34% minmax(0, 1fr); }
.pp-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: 13px;
  color: var(--ink-2);
}
.pp-order { pointer-events: none; }
.pp-order .btn { margin-top: auto; }
.pp-link { color: var(--gold-dark); text-decoration: underline; font-size: 13px; }
.pp-sample { opacity: .6; border-style: dashed; font-style: italic; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================= owner dashboard ================= */

.login-wrap {
  max-width: 400px;
  margin: 40px auto;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
}

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover { color: var(--ink); }

.tab[aria-selected="true"] {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
  font-weight: 500;
}

/* stat tiles: the headline numbers, no plot */
.stat-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.stat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.stat .label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.stat .value {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}

.stat .sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.stat.accent { border-color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 7%, var(--paper-2)); }

/* single-series bar chart */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-text { fill: var(--ink-3); font-family: var(--sans); font-size: 11px; }
.chart .value-text { fill: var(--ink-2); font-family: var(--sans); font-size: 11px; font-weight: 500; }
.chart .bar { fill: var(--gold); }
.chart .bar-hit { fill: transparent; cursor: pointer; }
.chart .bar.is-hot { fill: var(--gold-dark); }

.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: nowrap;
  transform: translate(-50%, -115%);
  opacity: 0;
  transition: opacity .12s;
  z-index: 10;
}

.chart-tip.on { opacity: 1; }
.chart-host { position: relative; }

/* magnitude table: one hue, length carries the value */
.mag-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mag-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--line);
}
.mag-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--paper-3); vertical-align: middle; }
.mag-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mag-table tr:last-child td { border-bottom: 0; }

.mag-bar { background: var(--paper-3); border-radius: 3px; height: 8px; min-width: 40px; }
.mag-bar > i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }

/* event cards */
.event-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.event-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-card.archived { background: var(--paper-3); opacity: .85; }

.event-card .code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--gold-dark);
}

.event-card .ev-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--paper-3);
  border-bottom: 1px solid var(--paper-3);
  padding: 10px 0;
}

.event-card .ev-stats div { text-align: center; }
.event-card .ev-stats .n { font-family: var(--serif); font-size: 19px; }
.event-card .ev-stats .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn-sm { padding: 7px 13px; font-size: 13.5px; }

/* order rows */
.order-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-3);
}

.order-row:last-child { border-bottom: 0; }
.order-row .num { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.order-row .who { font-size: 14px; }
.order-row .meta { font-size: 12.5px; color: var(--ink-3); }
.order-row .amt { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .order-row { grid-template-columns: minmax(0, 1fr) auto; }
  .order-row .num { grid-column: 1 / -1; }
}

/* printable QR card */
.print-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}

.print-card .pc-title { font-family: var(--serif); font-size: 25px; line-height: 1.15; }
.print-card .pc-sub { font-size: 13px; color: var(--ink-2); margin: 4px 0 16px; }
.print-card canvas { width: 100%; max-width: 250px; height: auto; image-rendering: pixelated; }
.print-card .pc-foot { font-size: 12px; color: var(--ink-2); margin-top: 14px; }
.print-card .pc-url { font-size: 10.5px; color: var(--ink-3); word-break: break-all; margin-top: 8px; }

@media print {
  body.printing-card > *:not(#print-area) { display: none !important; }
  body.printing-card #print-area { display: block !important; }
  body.printing-card #print-area .print-card { border: 0; max-width: 100%; }
  .no-print { display: none !important; }
}

#print-area { display: none; }

/* ================= nav badge ================= */

.site-nav a { display: inline-flex; align-items: center; gap: 6px; }

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ================= refined photo editor ================= */

.modal-editor { max-width: 460px; }

.modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.modal-head h3 { margin: 0; }

.stage-hint { font-size: 12px; margin: 10px 0 12px; }

.crop-stage .thirds.split {
  background-image:
    linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.75) 33.1%, rgba(255,255,255,.75) 33.5%, transparent 33.5%),
    linear-gradient(to right, transparent 66.5%, rgba(255,255,255,.75) 66.5%, rgba(255,255,255,.75) 66.9%, transparent 66.9%),
    linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.75) 33.1%, rgba(255,255,255,.75) 33.5%, transparent 33.5%),
    linear-gradient(to bottom, transparent 66.5%, rgba(255,255,255,.75) 66.5%, rgba(255,255,255,.75) 66.9%, transparent 66.9%);
}

/* segmented fill / fit control */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 12px;
}

.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.seg-btn.is-on {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-1);
}

/* control rows */
.ctl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}

.ctl-row.is-off { opacity: .45; }

.ctl-label {
  flex: none;
  width: 44px;
  color: var(--ink-3);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ctl-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gold); }

.ctl-value {
  flex: none;
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-size: 12.5px;
}

.ctl-value.as-button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line);
  font-family: var(--sans);
}

.ctl-value.as-button:hover { color: var(--gold-dark); }

.step-btn {
  appearance: none;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.step-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.step-btn:disabled { opacity: .4; cursor: not-allowed; }

/* background swatches for a fitted photo */
.bg-row .swatch {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}

.bg-row .swatch.is-on {
  box-shadow: 0 0 0 2px var(--gold);
  border-color: transparent;
}

.res-info {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 4px 0 2px;
}

.res-info.is-warn { color: var(--warn); }

/* ================= review page ================= */

.item-card { padding: 16px 18px; }

.item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.item-name { font-family: var(--serif); font-size: 19px; }
.item-price { font-weight: 700; white-space: nowrap; }
.item-card .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.is-discount { color: var(--good); }

.ok-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--good);
}

/* consent checkboxes: never pre-ticked, always legible */
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  padding: 9px 0;
  cursor: pointer;
  border-top: 1px solid var(--paper-3);
}

.consent-row input {
  flex: none;
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

/* ================= card element ================= */

#card-element {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 12px 11px;
  background: #fff;
}

/* ================= mobile ================= */

.mobile-bar { display: none; }

@media (max-width: 860px) {
  /* The total and the next step stay in reach however long the page
     gets, which on a phone is the difference between finishing and
     giving up. */
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(43, 39, 36, .10);
  }

  .mobile-bar.hidden { display: none; }
  .mobile-bar .mb-info { flex: 1; min-width: 0; }
  .mobile-bar .mb-total { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.15; }
  .mobile-bar .mb-sub {
    display: block; font-size: 12px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-bar .btn { flex: none; }

  body.has-mobile-bar { padding-bottom: 88px; }

  /* 16px or iOS zooms the whole page when a field is focused */
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="date"], input[type="time"], input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }

  /* touch targets */
  .btn { padding: 12px 20px; }
  .btn-sm { padding: 10px 15px; font-size: 14px; }
  .tab { padding: 13px 14px; }
  .step-btn { width: 36px; height: 36px; }
  .bg-row .swatch { width: 32px; height: 32px; }

  /* A bigger badge, keeping the same tenth-of-it overlap. */
  .photo-tile .x { --x-size: 32px; font-size: 18px; }
  .photo-grid { gap: 30px; padding: 22px 22px 0 0; }
  .photo-grid.has-steppers { row-gap: 36px; }
  .copy-stepper .step { width: 38px; height: 38px; font-size: 20px; }

  /* There is no hover on a touch screen, so the invitation to edit
     stays visible rather than hiding behind a gesture nobody has. */
  .photo-overlay {
    opacity: 1;
    inset: auto 0 0 0;
    height: auto;
    background: linear-gradient(to top, rgba(26, 23, 20, .72), rgba(26, 23, 20, 0));
    padding: 18px 0 7px;
    align-content: end;
  }

  .photo-overlay .big-edit { font-size: 15px; }

  .hero { padding-top: 2px; }
  .site-head .wrap { min-height: 56px; }
}

/* Grids must never be wider than the phone they are on. */
.tray { grid-template-columns: repeat(auto-fill, minmax(min(84px, 30%), 1fr)); }
.field-row { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.stat-row { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.event-grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }

@media (max-width: 620px) {
  /* The crop editor becomes a sheet, with its buttons always in
     reach at the bottom. */
  .modal-back { padding: 0; align-items: flex-end; }

  .modal {
    max-width: 100%;
    max-height: 94vh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--paper-2);
    padding: 10px 0 2px;
    margin-top: 14px;
    border-top: 1px solid var(--paper-3);
  }

  .ctl-label { width: 38px; }
  .slots.n3, .slots.n9, .array-frame { max-width: 100%; }

  /* Axis text scales with the chart's viewBox, so it needs to be
     bigger in the source to stay readable on a narrow screen. */
  .chart .axis-text, .chart .value-text { font-size: 17px; }

  /* The bar column is decoration; the numbers are the content. */
  .mag-table.with-bars td:nth-child(2),
  .mag-table.with-bars th:nth-child(2) { display: none; }

  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt {
    margin-top: 10px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .kv dd { margin-bottom: 2px; }

  .item-head { flex-direction: column; gap: 4px; }
  .order-no { font-size: 26px; padding: 10px 14px; letter-spacing: .06em; }
}

/* ================= the site's other pages ================= */

.page-section { padding: clamp(40px, 5vw, 64px) 16px; max-width: 1240px; margin: 0 auto; }
.page-section h2.center { margin-bottom: 36px; }

/* A label between two thin lines. */
.rule-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
}

.rule-label::before,
.rule-label::after { content: ""; flex: 0 1 140px; height: 1px; background: var(--foot); }
.rule-label.is-strong { font-weight: 700; margin-bottom: 36px; }

.rule-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 32px;
  color: var(--ink);
  font-size: 15px;
}

.rule-heart::before,
.rule-heart::after { content: ""; flex: 0 1 120px; height: 1px; background: var(--foot); }

.section-caps {
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
}

.section-caps.is-bold { font-size: 15px; font-weight: 700; }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); text-transform: uppercase; font-size: 13px; }
.btn-outline:hover { background: var(--ink); color: var(--paper-2); }
.btn-soft { background: var(--paper-3); color: var(--ink); text-transform: uppercase; font-size: 13px; }
.btn-soft:hover { background: var(--foot); }
.btn-dark { background: #000; color: #fff; text-transform: uppercase; font-size: 13px; }
.btn-dark:hover { background: var(--ink); }

/* home */
.home-hero { position: relative; min-height: clamp(420px, 72vh, 720px); display: grid; align-items: center; overflow: hidden; }
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .5); }

.home-hero-text {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin-left: auto;
  padding: 32px clamp(20px, 5vw, 72px);
  text-align: center;
}

.home-hero-brand { display: inline-block; padding-bottom: 14px; border-bottom: 1px solid var(--foot); letter-spacing: .14em; margin-bottom: 18px; }
.home-hero h1 { font-size: clamp(34px, 4.4vw, 60px); color: #000; }
.home-hero p:last-child { letter-spacing: .12em; margin: 0; }

.keepsake-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.keepsake { display: block; text-align: center; color: inherit; text-decoration: none; }
.keepsake-photo { position: relative; display: block; margin-bottom: 18px; }
.keepsake-photo img { display: block; width: 100%; aspect-ratio: 11 / 10; object-fit: cover; }
a.keepsake:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.keepsake h3 { margin-bottom: 14px; }
.keepsake p { font-size: 14px; letter-spacing: .1em; line-height: 1.45; margin: 0; }

.sold-out {
  position: absolute;
  top: -30px;
  left: -16px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 50%;
  background: var(--paper-3);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: .1em;
  text-align: center;
}

/* a photo beside text, the full width of the page */
.split-feature { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; }
.split-feature > img { width: 100%; height: 100%; max-height: 620px; object-fit: cover; display: block; }
.split-feature-text { padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 48px) clamp(32px, 5vw, 64px) clamp(20px, 8vw, 120px); }
.split-feature-text h1,
.split-feature-text h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.4; color: #000; margin-bottom: 18px; }
.split-feature-text p:not(.eyebrow) { letter-spacing: .12em; margin-bottom: 10px; }
.split-feature-text .btn { margin-top: 14px; }
.split-feature.band { background: var(--paper-3); }
.split-feature.is-flipped > img { order: -1; }
.split-feature.is-flipped { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); }
.split-feature.is-flipped .split-feature-text { padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 6vw, 96px); }
.split-feature.is-flipped h2 { line-height: 1.15; }

.moments-cta { margin-top: 40px; }

/* photo prints */
.overlap-feature { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 8fr); align-items: center; padding: 0 clamp(16px, 4vw, 60px) clamp(40px, 5vw, 64px); max-width: 1520px; margin: 0 auto; }
.overlap-feature > img { width: 100%; display: block; }
.overlap-card { position: relative; background: var(--paper-3); border: 6px solid var(--paper-2); margin-left: -60px; padding: clamp(24px, 3vw, 44px) clamp(22px, 4vw, 56px); }
.overlap-card h2 { font-size: clamp(32px, 3.6vw, 52px); color: #000; }
.overlap-card p { font-family: var(--serif); font-size: 21px; line-height: 1.25; margin: 22px 0 0; }

/* bulk orders */
.bulk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1400px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 60px); }
.bulk-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.bulk-text h1 { font-size: clamp(38px, 4.5vw, 64px); text-transform: uppercase; color: #000; margin-bottom: 14px; }
.bulk-text h1 em { text-transform: none; }
.bulk-sub { font-family: var(--serif); font-style: italic; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; color: #000; margin-bottom: 26px; }
.bulk-text p { letter-spacing: .1em; }
.bulk-text .rule-heart { margin: 26px 0; }
.bulk-tag { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 22px 0 0; }
.bulk-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bulk-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.custom-cta { padding: clamp(32px, 4vw, 56px) 16px clamp(48px, 5vw, 72px); text-align: center; }
.custom-cta h2 { font-size: clamp(30px, 3.2vw, 44px); color: #000; }
.custom-cta p { font-family: var(--serif); font-size: 23px; margin-bottom: 26px; }
.cta-actions { justify-content: center; }

.form-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; padding: clamp(24px, 4vw, 40px); background: var(--paper-3); color: var(--ink); }
.form-dialog::backdrop { background: rgba(30, 27, 24, .55); }
.dialog-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; padding: 4px 8px; cursor: pointer; }

/* live events */
.live-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; max-width: 1400px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 60px) 0; }
.live-hero > img { grid-column: 2; grid-row: 1; width: 100%; max-height: 720px; object-fit: cover; display: block; }
.live-hero-card { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-right: -30px; background: var(--paper-3); border: 6px solid var(--paper-2); padding: clamp(24px, 4vw, 52px); }
.live-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 30px; }
.live-hero-card h1 { font-size: clamp(34px, 3.7vw, 56px); line-height: 1.15; color: #000; margin-bottom: 26px; }
.live-hero-card p:last-child { letter-spacing: .1em; margin: 0; }

.occasion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 5vw, 72px); }
.occasion-grid article { display: flex; flex-direction: column; }
.occasion-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.occasion-grid article > div { flex: 1; background: var(--paper-3); padding: 20px; text-align: center; }
.occasion-grid h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.occasion-grid p { font-size: 14px; letter-spacing: .1em; line-height: 1.45; margin: 0; }

.steps-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); text-align: center; max-width: 1060px; margin: 0 auto; }
.steps-4 h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.steps-4 p { font-size: 14px; letter-spacing: .1em; line-height: 1.45; margin: 0; }

/* fundraisers */
.fundraiser-intro { max-width: 1020px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.fundraiser-intro h1 { font-size: clamp(38px, 5.4vw, 80px); color: #000; margin-bottom: 26px; }
.fundraiser-intro p { letter-spacing: .12em; line-height: 2.1; font-size: 14px; }
.fundraiser-intro h2 { margin: 16px 0 24px; color: #000; }
.fundraiser-intro .fundraiser-note { font-size: 13px; line-height: 1.5; max-width: 820px; margin: 0 auto; }

/* finding a fundraiser or event */
.event-search { padding-top: 32px; padding-bottom: 0; }
.event-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 16px; align-items: end; }
.event-search-row .field { margin: 0; min-width: 0; }
.event-search-row input, .event-search-row select { width: 100%; }
.event-search-msg { margin: 16px 0 0; font-size: 14px; }
.event-search-msg:empty { display: none; }
.event-results { list-style: none; margin: 12px 0 0; padding: 0; }
.event-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.event-result:hover .event-result-name { text-decoration: underline; }
.event-result-main { min-width: 0; overflow-wrap: anywhere; }
.event-result-name { display: block; font-weight: 600; }
.event-result-meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.event-result .pill { flex: none; }
@media (max-width: 600px) {
  .event-search-row { grid-template-columns: minmax(0, 1fr); }
}

/* the request forms: a line under each answer, as on a paper form */
.form-section { padding: 0 16px clamp(48px, 5vw, 80px); scroll-margin-top: 16px; }
.form-panel { max-width: 960px; margin: 0 auto; background: var(--paper-3); padding: clamp(28px, 5vw, 56px) clamp(20px, 8vw, 96px); }
.form-panel.is-plain { background: transparent; padding-top: 0; }
.form-panel h2 { font-size: clamp(25px, 2.6vw, 32px); margin-bottom: 14px; }
.form-intro { margin-bottom: 26px; }
.form-big-title { font-size: clamp(36px, 5vw, 72px); color: #000; text-align: center; max-width: 900px; margin: 0 auto 36px; }

.form-panel .field label,
.form-dialog .field label,
.form-group legend { font-size: 13px; font-weight: 400; letter-spacing: .1em; color: var(--ink); }

.req-note { color: var(--ink-3); font-size: 12px; }

.form-panel input:not([type="checkbox"]),
.form-panel select,
.form-panel textarea,
.form-dialog input:not([type="checkbox"]),
.form-dialog textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-3);
  border-radius: 0;
  padding: 8px 2px;
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
.form-dialog input:focus,
.form-dialog textarea:focus { box-shadow: none; border-bottom-color: var(--ink); }

.form-panel textarea,
.form-dialog textarea { border: 1px solid var(--foot); min-height: 110px; padding: 8px; }

.form-group { border: 0; padding: 0; margin: 4px 0 14px; }
.form-group legend { padding: 0; margin-bottom: 12px; }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: -4px 0 16px; cursor: pointer; }

.pill-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-checks label { cursor: pointer; }
.pill-checks input { position: absolute; opacity: 0; }
.pill-checks span { display: block; border: 1px solid var(--ink); padding: 5px 12px; font-size: 12px; text-transform: uppercase; }
.pill-checks input:checked + span { background: var(--ink); color: var(--paper-2); }
.pill-checks input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-submit { display: flex; min-width: 124px; margin: 22px auto 0; }
.form-status .banner { margin: 14px 0 0; }
.photo-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.photo-picks { list-style: none; margin: 8px 0 0; padding: 0; }
.photo-picks li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.photo-pick-x { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.form-thanks { text-align: center; padding: 18px 0; }
.form-thanks h3 { font-size: 32px; }
.form-thanks p { margin: 0; }

/* the dashboard's requests */
.request-card .kv { margin-top: 14px; }
.request-card .kv dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.request-card.is-done { background: var(--paper-3); }
.request-card + .request-card { margin-top: 14px; }

@media (max-width: 860px) {
  .home-hero-text { margin: 0 auto; }
  .keepsake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .sold-out { top: -12px; left: -6px; width: 74px; height: 74px; padding: 12px; font-size: 11px; }
  .split-feature,
  .split-feature.is-flipped,
  .overlap-feature,
  .bulk-split,
  .live-hero,
  .occasion-grid { grid-template-columns: minmax(0, 1fr); }
  .split-feature > img { order: -1; max-height: 420px; }
  .split-feature-text,
  .split-feature.is-flipped .split-feature-text { padding: 28px 20px 36px; }
  .split-feature-text h1,
  .split-feature-text h2 { line-height: 1.2; }
  .overlap-card { margin: -30px 16px 0; }
  .live-hero > img { grid-column: 1; grid-row: 1; }
  .live-hero-card { grid-column: 1; grid-row: 2; margin: -30px 12px 0; }
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-head .wrap { padding-top: 48px; }
}

/* the photo print builder: pictures keep their own shape in the tile */
.print-frame canvas { object-fit: contain; }
.modal-editor .crop-stage { margin: 0 auto; }
.adjust-panel { margin: 10px 0; }
.adjust-panel summary { cursor: pointer; font-size: 14px; padding: 6px 0; }
.adjust-panel .ctl-label { min-width: 84px; }

/* ================= the magnet shop's three columns ================= */

.shop-page .product > .wrap { max-width: 1320px; }

.shop-layout {
  gap: 28px;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(250px, 300px);
}

.shop-layout .gallery-thumbs { gap: 8px; }
.shop-layout .gallery-thumbs button { position: relative; aspect-ratio: auto; background: var(--paper-2); border: 1px solid var(--line); }
.shop-layout .gallery-thumbs button:hover { border-color: var(--gold); }
.shop-layout .gallery-thumbs button.is-on { border: 2px solid var(--gold-dark); }
.shop-layout .gallery-thumbs img { height: auto; aspect-ratio: 1; }
.thumb-label { display: block; padding: 5px 3px 0; font-family: var(--sans); font-size: 11.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: var(--ink); text-align: center; }
.thumb-price { display: block; padding: 2px 3px 6px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; color: var(--ink-2); text-align: center; }
.shop-layout .gallery-thumbs button { display: flex; flex-direction: column; }
.shop-layout .thumb-price { margin-top: auto; }
.gallery-step { margin: 16px 0 8px; }
.pack-desc { font-size: 14px; color: var(--ink-2); margin: -12px 0 20px; }

.array-frame {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 460px;
  padding: 6px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.array-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #fff; }
.array-cell canvas { width: 100%; height: 100%; display: block; }

.order-side { position: sticky; top: 24px; }
.order-side .order-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.qty-name { font-size: 13px; line-height: 1.3; }
.qty-row .qty-btn { width: 32px; height: 32px; }
.qty-row .qty output { min-width: 26px; font-size: 14px; }
.qty-row .qty input[type="number"] { width: 72px; min-height: 32px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.qty-row .qty input[type="number"]::-webkit-outer-spin-button,
.qty-row .qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 1080px) {
  /* The checkout drops under the two columns before anything gets cramped. */
  .shop-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .order-side { grid-column: 1 / -1; position: static; }
}

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

@media (min-width: 1081px) {
  /* The dashboard's "order box on the left" setting moves the checkout. */
  .shop-layout.summary-left { grid-template-columns: minmax(250px, 300px) minmax(0, 4fr) minmax(0, 5fr); }
  .shop-layout.summary-left > .gallery { order: 0; }
  .shop-layout.summary-left > .order-side { order: -1; }
}

/* With spare photos on show, the ones going on magnets stand out. */
.photo-frame.is-used { border: 2px solid var(--gold-dark); }
.photo-frame.is-spare canvas { opacity: .5; }
.photo-frame.is-spare:hover canvas,
.photo-frame.is-spare:focus-visible canvas { opacity: 1; }

/* the dashboard's print sizes */
.size-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.size-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.size-add .field { margin: 0; }
.size-add input { width: 92px; }

/* An event's own wording keeps the owner's line breaks. */
.event-text,
.order-only #hero-sub,
.kv dd { white-space: pre-line; }

.event-loading #hero-title,
.event-loading #hero-sub,
.event-loading #event-banner { visibility: hidden; }

.event-page-preview { margin: 4px 0 14px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.event-page-preview .pv-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin: 10px 0 6px; overflow-wrap: anywhere; }
.event-page-preview .pv-body { font-size: 14px; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.event-page-preview .banner { margin: 0; overflow-wrap: anywhere; }

/* ---------- circle magnets, owner combos and sold out ---------- */

#photos.is-circle .photo-frame canvas,
.slots.is-circle .slot canvas,
.sum-thumbs.is-circle img { border-radius: 50%; }
.slots.is-circle .slot { border-radius: 50%; }

/* The photo outside the round magnet is faded rather than hidden. */
.crop-stage .circle-guide {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .62);
  outline: 1px solid rgba(255, 255, 255, .9);
}

.gallery-thumbs button.is-soldout { cursor: not-allowed; }
.gallery-thumbs button.is-soldout img { opacity: .4; filter: grayscale(1); }

.combo-image { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.combo-preview { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.combo-noimage { flex-basis: 100%; font-size: 13px; }

/* ---------- shop desk: sidebar ---------- */

.owner-desk .login-wrap { margin-inline: auto; }

/* Once signed in, the sidebar sits against the left edge of the window. */
@media (min-width: 861px) {
  .owner-desk main > .wrap:has(#dash:not(.hidden)) { max-width: none; padding-left: 0; padding-top: 0; }
  .owner-desk #flash:not(:empty) { padding-left: 16px; }
  /* Centered in the space beside the sidebar, so it moves when that collapses. */
  .owner-desk .desk-main { padding-top: 28px; width: 100%; max-width: 1320px; justify-self: center; }
  .owner-desk .side {
    align-self: stretch;
    position: static;
    padding-top: 28px;
    border-right: 1px solid var(--line);
    min-height: 70vh;
  }
  .owner-desk .side > * { position: sticky; top: 16px; }
  .owner-desk .side > #side-tabs { top: 56px; }
}

.desk { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 24px; align-items: start; }
.desk.is-collapsed { grid-template-columns: 56px minmax(0, 1fr); }

.side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; }
#side-tabs { display: flex; flex-direction: column; gap: 2px; }

.side .tab, .side-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; margin: 0;
  background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer;
}
.side .tab:hover, .side-toggle:hover { background: var(--paper-3); color: var(--ink); }
.side .tab[aria-selected="true"] { color: var(--gold-dark); border-left-color: var(--gold); border-bottom-color: transparent; background: var(--paper-2); font-weight: 500; }
.side .tab-sub { padding-left: 26px; font-size: 13.5px; }
.side-toggle { color: var(--ink-3); font-size: 13px; }

.tab-ic {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-3); color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.side .tab[aria-selected="true"] .tab-ic { background: var(--gold); color: #fff; }

.desk.is-collapsed .tab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.desk.is-collapsed .side .tab, .desk.is-collapsed .side-toggle { justify-content: center; padding: 8px 4px; }

@media (max-width: 860px) {
  .desk, .desk.is-collapsed { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .side { position: static; }
  /* There is no room beside the page, so collapsed shows only where you are. */
  .desk.is-collapsed .side .tab:not([aria-selected="true"]) { display: none; }
  .desk.is-collapsed .tab-text { position: static; width: auto; height: auto; clip-path: none; }
  .desk.is-collapsed .side .tab, .desk.is-collapsed .side-toggle { justify-content: flex-start; padding: 8px 10px; }
}

/* ---------- shop desk: event orders ---------- */

.proc-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.proc-filters .field { margin: 0; min-width: 0; }
.proc-filters select, .proc-filters input { width: 100%; }

.proc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.proc-bar .row-actions { margin: 0 0 0 auto; }
.proc-all { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; }
.proc-stamp { font-size: 12.5px; }
.proc-stamp.is-warn { color: var(--bad); }
.proc-progress { margin: 10px 0 0; font-size: 13px; }

.proc-row {
  display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  gap: 8px 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.proc-row:last-child { border-bottom: 0; }
.proc-row.is-done .proc-thumbs, .proc-row.is-done .proc-info { opacity: .55; }

.proc-thumbs { display: flex; flex-wrap: wrap; gap: 3px; width: 172px; align-items: center; }
.proc-thumbs img, .proc-thumb-empty, .proc-thumb-more { width: 40px; height: 40px; border-radius: 4px; }
.proc-thumbs img { object-fit: cover; border: 1px solid var(--line); display: block; }
.proc-thumb-empty { background: var(--paper-3); }
.proc-thumb-more { display: grid; place-items: center; background: var(--paper-3); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }

.proc-info { min-width: 0; font-size: 13.5px; line-height: 1.35; }
.proc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.proc-num { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.proc-items { overflow-wrap: anywhere; }
.proc-note { color: var(--warn); font-size: 12.5px; overflow-wrap: anywhere; }

.proc-marks { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; text-align: right; }
.proc-marker { color: var(--ink-3); }
.proc-marker.is-got { color: var(--good, #2f6f4f); font-weight: 600; }
.proc-marker.is-part { color: var(--warn); font-weight: 600; }
.proc-done { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 12.5px; }

@media (max-width: 720px) {
  .proc-row { grid-template-columns: auto minmax(0, 1fr); }
  .proc-thumbs { width: auto; }
  .proc-info, .proc-marks { grid-column: 2; }
  .proc-marks { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; text-align: left; }
  .proc-bar .row-actions { margin-left: 0; }
}