/* ===========================================================
   Design tokens — "auction catalog" direction
   Quiet, editorial, image-forward. A near-white paper ground,
   ink-black type, a single elegant serif for titles, tracked
   small-caps sans for labels/eyebrows (lot numbers, categories,
   status), and a restrained accent used only for calls to
   action. No cards, no shadows, no rounded pills — hairline
   rules do the separating, the way a printed catalog would.
=========================================================== */
:root {
  --paper:      #FFFFFF;
  --panel:      #FFFFFF;
  --ink:        #15130F;
  --ink-soft:   #6E6A5F;
  --line:       #E4E1D6;
  --line-soft:  #F5F3EC;
  --accent:     #6B5B3A;   /* muted brass — used sparingly, on CTAs/links only */
  --accent-dark:#4E421F;
  --sold:       #15130F;   /* sold badge is ink, not a stamp — quieter than a red flag */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', -apple-system, Segoe UI, sans-serif;
  --font-label:   'Jost', -apple-system, Segoe UI, sans-serif;

  --radius: 0px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* ---------- Layout shell ---------- */
.site-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.site-head-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-icon { width: 30px; height: 30px; flex-shrink: 0; }

.social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.social-icons a { color: var(--ink-soft); display: flex; }
.social-icons a:hover { color: var(--ink); }
.social-icons svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 480px) {
  .site-brand span { font-size: 1.15rem; }
  .brand-icon { width: 26px; height: 26px; }
  .social-icons { gap: 12px; }
}

.site-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 28px 70px;
}

.site-foot {
  text-align: center;
  padding: 30px 24px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Filter bar — plain text tabs, not pills ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  padding-bottom: 16px;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.pill {
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 0 4px;
  margin-right: 0;
  color: var(--ink-soft);
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  border-radius: 0;
  transition: color 150ms ease, border-color 150ms ease;
}
.pill.active {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.pill:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }

/* A quiet, low-emphasis toggle — deliberately smaller and lighter than the
   category tabs so it doesn't compete for attention. */
.toggle-sold {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  opacity: 0.7;
  white-space: nowrap;
}
.toggle-sold:hover { opacity: 1; color: var(--ink-soft); text-decoration: underline; }

.sort-select {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 2px 4px 4px 0;
  cursor: pointer;
}
.sort-select:hover, .sort-select:focus { color: var(--ink); }

@media (max-width: 480px) {
  .filter-bar { justify-content: flex-start; }
  .toggle-sold { margin-top: 2px; }
}

/* ---------- Item grid ---------- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 24px 16px;
}
@media (min-width: 640px) {
  .item-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 22px; }
}
@media (min-width: 900px) {
  .item-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
}

/* Feature sizes — for standout items/bundles. "wide" spans two columns in
   one row; "tall" spans two rows in one column; "large" spans both.
   The thumb's own aspect-ratio adjusts so the photo still fills its cell
   without distortion. */
.item-card.feature-wide { grid-column: span 2; }
.item-card.feature-wide .item-thumb { aspect-ratio: 8 / 5; }
.item-card.feature-tall { grid-row: span 2; }
.item-card.feature-tall .item-thumb { aspect-ratio: 2 / 5; }
.item-card.feature-large { grid-column: span 2; grid-row: span 2; }

.item-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: start; /* size to content, not the full grid-row height a
    spanning "large"/"tall" card is placed in — keeps the photo and text
    snug together instead of stretching and leaving a gap between them */
}
.item-card:hover .item-thumb img { transform: scale(1.03); }
.item-card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* Admin "Rearrange Catalog" drag-and-drop cards */
.reorder-card {
  border: 1px solid var(--line);
  padding: 10px;
  cursor: grab;
  background: var(--panel);
  user-select: none;
}
.reorder-card.dragging { opacity: 0.4; }
.reorder-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 6px;
  letter-spacing: -2px;
}
.reorder-controls {
  position: absolute;
  top: 44px;
  left: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
}
.reorder-controls .stepper-btn {
  background: rgba(255, 255, 255, 0.9);
  width: 22px;
  height: 22px;
}

/* "Bundle & Save" per-card selection control — hidden until bundle mode is
   toggled on. A hairline rule separates it from the price/qty above, and
   the checkbox + qty stepper share one row. */
.group-select {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.item-grid.group-mode .group-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bundle-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.item-card.bundle-selected .bundle-check { color: var(--ink); }
.bundle-check-label { white-space: nowrap; }

/* Flat custom checkbox — no native OS styling */
.bundle-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--ink);
  background: #fff;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.bundle-check input[type=checkbox]:checked { background: var(--ink); }
.bundle-check input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Flat quantity stepper — replaces a native number input entirely */
.bundle-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bundle-stepper.disabled { opacity: 0.4; pointer-events: none; }
.stepper-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stepper-btn:hover { background: var(--line-soft); }
.stepper-count {
  min-width: 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink);
}

/* Sticky summary bar — slides up from the bottom rather than popping in */
.group-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--ink);
  padding: 18px 28px;
  z-index: 60;
  transform: translateY(100%);
  transition: transform 280ms ease;
}
.group-bar.visible { transform: translateY(0); }
.group-bar-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.group-bar-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--font-label);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bar-dot { color: var(--line); }
.group-bar-save { color: var(--accent-dark); }
.group-bar-total {
  color: var(--ink);
  font-weight: 500;
}
.group-bar-inner .btn { margin-left: auto; }
.group-bar-inner .btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 600px) {
  .group-bar { padding: 16px 20px; }
  .group-bar-stats { font-size: 0.7rem; gap: 6px; }
  .group-bar-inner .btn { width: 100%; margin-left: 0; order: 10; }
}
body.group-bar-active { padding-bottom: 96px; }
@media (max-width: 600px) {
  body.group-bar-active { padding-bottom: 130px; }
}

.item-thumb {
  aspect-ratio: 4 / 5;
  background: var(--line-soft);
  overflow: hidden;
  position: relative;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.item-thumb.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.item-thumb.is-reserved img { opacity: 0.5; }
.reserved-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.reserved-overlay span {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  padding: 7px 12px;
  line-height: 1.4;
}

.item-body {
  padding: 14px 0 0;
  border-top: none;
}
.item-number {
  font-family: var(--font-label);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}
.item-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.3;
}
.item-specline {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.item-meta {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  font-family: var(--font-label);
}
.item-price { font-size: 0.88rem; letter-spacing: 0.03em; }
.price-tagged { font-weight: 500; }
.price-tag {
  font-family: var(--font-label);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-left: 8px;
  white-space: nowrap;
}
.item-cat {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.item-qty {
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

.stamp {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  font-family: var(--font-label);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  padding: 5px 10px;
  border: none;
  color: #fff;
  background: var(--sold);
  transform: none;
  border-radius: 0;
}
.stamp.pending { background: var(--accent); color: #fff; }

/* ---------- Item detail ---------- */
.item-detail {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
}
@media (max-width: 720px) {
  .item-detail { grid-template-columns: 1fr; gap: 30px; }
}

.gallery-main {
  aspect-ratio: 4 / 5;
  background: var(--line-soft);
  border: none;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 12px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs img {
  width: 62px; height: 62px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 0;
  cursor: pointer;
  opacity: 0.65;
}
.gallery-thumbs img.active { border-color: var(--ink); opacity: 1; }

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.back-link-bottom {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  opacity: 0.7;
}
.back-link-bottom:hover { opacity: 1; color: var(--ink-soft); text-decoration: underline; }

.detail-title { font-family: var(--font-display); font-weight: 500; font-size: 2.1rem; margin: 6px 0 14px; line-height: 1.2; }
.detail-price { font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.03em; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
/* Price, badge, and quantity all read at the same size on the detail page
   (they're different sizes in the catalog grid, which is unaffected). The
   price itself is bolded here so it stands out as the primary figure. */
.detail-price .item-price,
.detail-price .price-tag,
.detail-price .detail-qty {
  font-size: 1.05rem;
}
.detail-price .item-price,
.detail-price .price-tagged {
  font-weight: 700;
}
.detail-qty { color: var(--ink-soft); font-size: 0.95rem; }
.detail-cat {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.detail-desc { white-space: pre-wrap; margin-bottom: 28px; font-size: 0.98rem; color: var(--ink); }

.spec-list { margin-bottom: 24px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.spec-row span:first-child { color: var(--ink-soft); font-family: var(--font-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Payment stub (Zelle) — a quiet ledger box, not a ticket ---------- */
.pay-stub {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 20px 0 22px;
  position: relative;
}
.pay-stub::before { content: none; }
.pay-stub h3 {
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.pay-stub .pay-headline { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin: 0 0 16px; }
.pay-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.02em; }
.pay-row:last-of-type { border-bottom: none; }
.pay-note { margin-top: 14px; font-size: 0.86rem; color: var(--ink-soft); font-family: var(--font-body); }
.pay-stub.disabled { opacity: 0.45; }
.pay-stub form { margin-top: 6px; }

/* The confirmed hold state — same footprint as the Reserve Now button it
   replaces, but filled/solid so it reads as "locked in" rather than
   actionable. */
.reserve-status {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}

.status-line {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-soft);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

/* ---------- Forms (admin) ---------- */
.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px;
  max-width: 640px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input[type=text],
.field input[type=number],
.field input[type=password],
.field input[type=email],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.field textarea { min-height: 100px; resize: vertical; }
.help-text { font-size: 0.8rem; color: var(--ink-soft); margin-top: 5px; }

/* Two-up field pairs (Category/Quantity, Price/Badge, Size/Color) */
.field-row {
  display: flex;
  gap: 16px;
}
.field-row .field { flex: 1; min-width: 0; }
.field-row-price .field:last-child { display: flex; flex-direction: column; }

/* A badge-text input that visually reads like part of the price line —
   no box, same weight/size as the price field next to it. */
.input-plain {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 0 !important;
  font-family: var(--font-body) !important;
}
.input-plain:focus { border-bottom-color: var(--ink) !important; }

.field-spacer { height: 10px; }

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
}

/* QR code panel on the item edit form */
.qr-box-inner { display: flex; align-items: flex-start; gap: 16px; }
.qr-box-inner img { border: 1px solid var(--line); flex-shrink: 0; }
.qr-box-links { font-size: 0.85rem; line-height: 1.9; }
.qr-box-links a { color: var(--accent-dark, var(--ink)); }

/* Sale-details panel below the edit form */
.sale-box > label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.sale-box .spec-list { margin-top: 12px; margin-bottom: 0; }

/* Bulk QR-label picker */
.qr-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.qr-pick-item {
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.qr-pick-item img { width: 36px; height: 36px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); }
.qr-pick-item input { width: auto; flex-shrink: 0; }

/* Printable label sheet */
.label-sheet { display: flex; flex-wrap: wrap; gap: 18px; }
.qr-label {
  width: 220px;
  border: 1px dashed var(--line);
  padding: 14px;
  text-align: center;
  break-inside: avoid;
}
.qr-label img { width: 140px; height: 140px; }
.qr-label .qr-label-title { font-family: var(--font-label); font-size: 0.8rem; margin-top: 8px; }
.qr-label .qr-label-price { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }
.qr-label .qr-label-num { font-family: var(--font-label); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.print-toolbar { margin-bottom: 20px; }
@media print {
  .site-head, .print-toolbar, .back-link, .site-foot { display: none !important; }
  .qr-label { border: 1px solid #999; }
  body { padding: 0; }
}

/* Photo box on the item/bundle edit form */
.photo-box {
  border: 1px solid var(--line);
  padding: 16px;
  margin-bottom: 18px;
}
.photo-box > label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.photo-hero {
  aspect-ratio: 4 / 5;
  max-width: 260px;
  background: var(--line-soft);
  overflow: hidden;
  margin-bottom: 10px;
}
.photo-hero img { width: 100%; height: 100%; object-fit: cover; }
.photo-hero.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.photo-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.photo-strip-item {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.photo-strip-item img {
  width: 64px; height: 64px; object-fit: cover;
  border: 1px solid var(--line);
  display: block;
  margin-bottom: 4px;
}
.photo-remove-main {
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn.btn-outline { background: transparent; color: var(--ink); }
.btn.btn-outline:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.btn.btn-danger { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.btn-danger:hover { color: #fff; background: #7a1f1f; border-color: #7a1f1f; }
.btn.btn-small { padding: 6px 12px; font-size: 0.64rem; }

.flash {
  padding: 12px 16px;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.flash.error { border-color: #7a1f1f; color: #7a1f1f; }

/* ---------- Admin table ---------- */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
.admin-table th { font-family: var(--font-label); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.admin-table img.thumb-sm { width: 46px; height: 46px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status-select { font-family: var(--font-label); font-size: 0.76rem; padding: 5px 6px; border: 1px solid var(--line); border-radius: 0; }

/* On narrow screens, each row becomes its own stacked card instead of a
   scrolling table — nothing gets clipped, nothing scrolls sideways. */
@media (max-width: 680px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td {
    display: block;
    width: 100%;
  }
  .admin-table tr {
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 14px;
    padding: 14px 16px;
  }
  .admin-table td {
    border-bottom: none;
    padding: 9px 0;
    font-size: 0.95rem;
  }
  .admin-table td:empty { display: none; }
  .admin-table td[data-label]:not(:empty)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-label);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }
  .admin-table img.thumb-sm { width: 72px; height: 72px; }
  .status-select { width: 100%; padding: 10px; font-size: 0.9rem; }
  .row-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .row-actions .btn, .row-actions form { width: 100%; }
  .row-actions .btn { text-align: center; padding: 12px 16px; font-size: 0.78rem; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar > div { display: flex; flex-direction: column; gap: 10px; }
  .admin-toolbar .btn { text-align: center; }
}

.login-wrap { max-width: 380px; margin: 60px auto; }