/* ===========================================================================
   Forest Berry theme — VARIABLES ONLY.
   The styling agent fills in the rest of this stylesheet (layout, components,
   inventory sheet, steppers, swatches, cards, SOLD OUT stamp, etc.).
   Do not move or rename these custom properties — templates/JS rely on them.
   =========================================================================== */
:root {
  /* Surfaces & text */
  --bg: #F4F1F0;
  --surface: #FFFFFF;
  --ink: #2A3226;
  --muted: #6B6660;
  --border: #E6DFE0;

  /* Forest greens (primary) */
  --green: #557A3E;
  --green-strong: #446331;

  /* Berry pops (accent) */
  --berry: #9C3B5E;
  --berry-strong: #7A2A47;
  --berry-soft: #F2E0E7;

  /* Status */
  --ok: #557A3E;
  --warn: #CC8A2E;
  --error: #9C3B5E;

  /* Maker tags */
  --maker-ava: #C57B57;   /* terracotta */
  --maker-liv: #C99A3A;   /* ochre */

  /* Typography */
  --font-heading: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Shape */
  --radius: 16px;
  --radius-lg: 28px;

  /* Touch sizing (mobile-first, big targets) */
  --touch: 44px;
}

/* ===========================================================================
   FOREST BERRY — full stylesheet
   Mobile-first, cozy mushroom-forest, big touch targets, iOS-friendly.
   =========================================================================== */

/* ----- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body.app {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* iOS safe areas */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--green-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

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

p { margin: 0 0 .75em; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tabular numerals helper */
.num,
.tnum,
.tabular,
.item-row__price,
.item-row__stock,
.stepper__value,
.payout-table,
.money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.page-title { margin: 0; }
[x-cloak] { display: none !important; }

/* ----- Top bar / nav ------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .55rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(42, 50, 38, .06);
}

.topbar__brand { display: flex; align-items: center; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }

.brand__logo,
.chompignon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
  transform-origin: 50% 90%;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--green-strong);
  letter-spacing: .2px;
  line-height: 1.05;
  max-width: 9.5rem;
}

.topbar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  flex: 1 1 auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 .85rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: .95rem;
}
.nav-link:hover { background: var(--berry-soft); text-decoration: none; }
.nav-link.is-active,
.nav-link[aria-current="page"] {
  background: var(--green);
  color: #fff;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}
.topbar__username {
  font-weight: 700;
  color: var(--muted);
  font-size: .9rem;
}
.logout-form { margin: 0; }

/* ----- Layout container ---------------------------------------------------- */
.content {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem .9rem 4rem;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.page-head h1 { margin: 0; }
.page-head__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ----- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0 1.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--green-strong); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--berry { background: var(--berry); }
.btn--berry:hover { background: var(--berry-strong); }

.btn--ghost {
  background: transparent;
  color: var(--green-strong);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--berry-soft); color: var(--berry-strong); }

.btn--danger { background: var(--error); }
.btn--danger:hover { background: var(--berry-strong); }

.btn--sm { min-height: var(--touch); padding: 0 .8rem; font-size: .9rem; }
.btn--block { width: 100%; }

.logout-btn { font-size: .85rem; padding: 0 .85rem; min-height: var(--touch); }

/* ----- Messages / flash ---------------------------------------------------- */
.messages {
  list-style: none;
  margin: .75rem auto 0;
  padding: 0 .9rem;
  max-width: 1100px;
  display: grid;
  gap: .5rem;
}
.message {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
}
.message--success { background: #EAF1E3; border-color: #C5D8B4; color: var(--green-strong); }
.message--error   { background: var(--berry-soft); border-color: #E4BFCD; color: var(--berry-strong); }
.message--warning { background: #FBEFD9; border-color: #EAD3A4; color: #8A5E18; }
.message--info    { background: #E9EEF4; border-color: #C9D6E4; color: #2F4358; }

/* ----- Catalog head / search ---------------------------------------------- */
.catalog__head { margin-bottom: 1rem; }
.catalog__count { color: var(--muted); font-weight: 700; margin: .25rem 0 1rem; }

.search-bar {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.search-bar__input { flex: 1 1 auto; }
.search-bar__btn { flex: 0 0 auto; }

/* ----- Cards / catalog grid ----------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .9rem;
}
@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
}

.item-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .07);
  transition: transform .1s ease, box-shadow .15s ease;
  color: var(--ink);
  text-decoration: none;
}
.item-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(42, 50, 38, .12); text-decoration: none; }

.item-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--berry-soft);
  overflow: hidden;
}
.item-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--berry-soft);
}
.item-card__img--placeholder img { width: 48px; height: 48px; opacity: .85; }
.item-card--soldout .item-card__img { filter: grayscale(.4) brightness(.92); }

.item-card__body { padding: .65rem .8rem .85rem; display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; }
.item-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}
.item-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.item-card__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
}
.item-card__price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--green-strong);
  font-size: 1.05rem;
}

.category-tag,
.cat-tag,
.chip {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ----- SOLD OUT diagonal stamp -------------------------------------------- */
.soldout-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  padding: .2rem 1.2rem;
  border: 4px solid var(--berry-strong);
  border-radius: 8px;
  color: var(--berry-strong);
  background: rgba(255, 255, 255, .82);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2;
}
.soldout-stamp__text { text-transform: uppercase; }
/* Small variant used in the manage list */
.stamp--sm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  padding: .1rem .5rem;
  border: 2px solid var(--berry-strong);
  border-radius: 5px;
  color: var(--berry-strong);
  background: rgba(255,255,255,.85);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ----- Maker tags ---------------------------------------------------------- */
.maker-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  color: #fff;
  background: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
}
.maker-tag::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
}
.maker-tag--ava { background: var(--maker-ava); }
.maker-tag--liv { background: var(--maker-liv); color: #3A2E12; }
.maker-tag--liv::before { background: rgba(58,46,18,.45); }
.maker-tag--both {
  background: linear-gradient(90deg, var(--maker-liv) 0 50%, var(--maker-ava) 50% 100%);
  color: #fff;
}

/* ----- Swatch dots (variations) ------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.swatch-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
}
.swatch-dot__fill,
.swatch-dot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swatch-dot__half {
  display: block;
  width: 50%;
  height: 100%;
}
.swatch-dot--soldout { opacity: .45; }
.swatch-dot--soldout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--berry-strong) calc(50% - 1px),
    var(--berry-strong) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* Bigger swatch used in inventory lines */
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.swatch__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge--soldout {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ===========================================================================
   INVENTORY / PRICE SHEET — the centerpiece
   =========================================================================== */
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  position: sticky;
  top: calc(var(--touch) + .9rem);
  z-index: 20;
  margin-bottom: 1rem;
  background: var(--bg);
  padding: .35rem 0;
}
.sheet__title { flex: 1 1 auto; }
.sheet__title h1 { margin: 0; }
.sheet__hint { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.sheet__empty { color: var(--muted); padding: 2rem 1rem; text-align: center; }

/* Global EDIT toggle (custom switch driven by the hidden checkbox) */
.edit-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--touch);
  padding: 0 1rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--green-strong);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edit-toggle__input {
  /* hide the native checkbox but keep it focusable/operable */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.edit-toggle__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  transition: background .15s ease;
  flex: 0 0 auto;
}
.edit-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.edit-toggle__input:checked ~ .edit-toggle__track { background: var(--green); }
.edit-toggle__input:checked ~ .edit-toggle__track::after { transform: translateX(16px); }
.edit-toggle__input:focus-visible ~ .edit-toggle__track {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.edit-toggle:has(.edit-toggle__input:checked) {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.sheet__list { display: flex; flex-direction: column; gap: .85rem; list-style: none; margin: 0; padding: 0; }

/* One item block */
.item-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
}
.item-row__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
}
.item-row__photo {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--berry-soft);
  flex: 0 0 auto;
}
.item-row__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.item-row__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-row__img--empty img { width: 32px; height: 32px; opacity: .85; }
/* Shrink the SOLD OUT stamp inside the small thumbnail */
.item-row__photo .soldout-stamp {
  font-size: .5rem;
  padding: .05rem .3rem;
  border-width: 2px;
  letter-spacing: 1px;
}
.item-row__meta { flex: 1 1 auto; min-width: 0; }
.item-row__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 .25rem;
  line-height: 1.1;
}
.item-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

/* Per-item steppers (shown in edit mode) */
.item-row__steppers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  padding: .6rem .8rem;
}

/* Read-only summary (shown in view mode) */
.item-row__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .6rem .8rem;
}
.item-row__price {
  font-weight: 800;
  color: var(--green-strong);
  font-variant-numeric: tabular-nums;
}
.item-row__stock,
.item-row__sold {
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.item-row--soldout .item-row__stock { color: var(--berry-strong); }

/* ----- Stepper ------------------------------------------------------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .15rem;
}
.stepper__label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 0 .35rem 0 .5rem;
}
.stepper__controls { display: inline-flex; align-items: center; gap: .25rem; }
.stepper__btn {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--green-strong);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background .12s ease;
}
.stepper__btn:hover { background: var(--berry-soft); }
.stepper__btn:active { transform: scale(.9); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper__btn--minus { color: var(--berry); }

.stepper__value {
  min-width: 3.4rem;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  padding: 0 .2rem;
}

/* Pending (dirty) state — highlight value. The save/cancel pair's visibility
   is driven by Alpine x-show="dirty" (inline display), so we only style the
   look here; the .stepper--dirty class is set by :class="{ 'stepper--dirty':
   dirty }" in the template. */
.stepper--dirty {
  border-color: var(--warn);
  background: #FBEFD9;
}
.stepper--dirty .stepper__value { color: #8A5E18; }

.stepper__confirm {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.stepper__save,
.stepper__cancel {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  color: #fff;
}
.stepper__save { background: var(--ok); }
.stepper__save:hover { background: var(--green-strong); }
.stepper__cancel { background: var(--error); }
.stepper__cancel:hover { background: var(--berry-strong); }

/* HTMX in-flight indicator on a row */
.htmx-request.stepper,
.htmx-request .stepper { opacity: .6; pointer-events: none; }
.item-row.htmx-request { position: relative; }

/* ===========================================================================
   ITEM DETAIL
   =========================================================================== */
.breadcrumb { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.breadcrumb__sep { margin: 0 .4rem; opacity: .6; }
.breadcrumb__current { font-weight: 700; color: var(--ink); }

.item-detail__layout {
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 720px) {
  .item-detail__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.gallery { display: flex; flex-direction: column; gap: .6rem; }
.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--berry-soft);
  border: 1px solid var(--border);
}
.gallery__img { width: 100%; height: 100%; object-fit: cover; }
.gallery__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__img--placeholder img { width: 72px; height: 72px; opacity: .85; }
.gallery__thumbs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery__thumb {
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb--active { border-color: var(--green); }

.item-info__title { margin: 0 0 .5rem; }
.item-info__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .6rem; }
.item-info__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--green-strong);
  font-variant-numeric: tabular-nums;
  margin: .25rem 0 .75rem;
}
.item-info__desc { margin-bottom: 1rem; }
.item-info__actions { margin-top: 1.2rem; }

.section-title { font-size: 1.05rem; margin: 1rem 0 .5rem; }

.spec-list {
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.spec-list__row { display: flex; gap: .5rem; }
.spec-list__row dt {
  font-weight: 800;
  color: var(--muted);
  min-width: 7rem;
  margin: 0;
}
.spec-list__row dd { margin: 0; }

/* Variation list on detail */
.variations { margin-top: 1rem; }
.variation-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0;
  list-style: none;
  padding: 0;
}
.variation-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.variation-row--soldout { background: var(--berry-soft); }
.variation-row__name { font-weight: 700; flex: 1 1 auto; }
.variation-row__price {
  font-weight: 800;
  color: var(--green-strong);
  font-variant-numeric: tabular-nums;
}
.variation-row__status {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.variation-row--soldout .variation-row__status { color: var(--berry-strong); }
/* detail variation swatch is a touch bigger than the catalog dot */
.variation-row .swatch-dot { width: 22px; height: 22px; }

/* ----- Patterns ------------------------------------------------------------ */
.patterns { margin-top: 1.5rem; }
.pattern-list { margin-top: 1rem; }
.pattern-list__grid,
.patterns > .pattern-list {
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pattern-list__empty { color: var(--muted); }

.pattern-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .8rem;
}
.pattern-card__link {
  display: flex;
  gap: .75rem;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.pattern-card__link:hover { text-decoration: none; }
.pattern-card__thumb {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--berry-soft);
  flex: 0 0 auto;
}
.pattern-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pattern-card__label { font-weight: 800; word-break: break-word; }
.pattern-card__meta { font-size: .82rem; color: var(--muted); }
.pattern-card__kindtag {
  display: inline-block;
  align-self: flex-start;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--berry-soft);
  color: var(--berry-strong);
}
.pattern-card__cta { font-weight: 800; color: var(--green-strong); font-size: .85rem; }
.pattern-card__pdf {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pattern-card__image {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  max-width: 100%;
}
.pattern-card__notes { font-size: .88rem; color: var(--muted); margin: 0; }
.pattern-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--berry-soft);
  color: var(--berry-strong);
}

/* Patterns management screen */
.patterns-manage__head { margin-bottom: 1rem; }
.patterns-manage__title { margin: 0; }
.patterns-manage__subtitle { color: var(--muted); margin: .15rem 0 .5rem; }
.pattern-add { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.pattern-add__title { margin: 0; }
.pattern-add__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.pattern-add__legend { font-weight: 800; margin-bottom: .35rem; }
.pattern-add__kind {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--touch);
  padding: 0 .8rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}
.pattern-add__kind--active { border-color: var(--green); background: #EAF1E3; }
.pattern-add__field { display: flex; flex-direction: column; gap: .3rem; }
.pattern-add__label { font-weight: 800; }
.pattern-add__hint { font-size: .82rem; }

/* ===========================================================================
   FORMS  (manage / quick-add)
   =========================================================================== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
  max-width: 640px;
  margin: 0 auto;
}
.form-row { margin-bottom: 1rem; }
.form-row > label,
.form-label {
  display: block;
  font-weight: 800;
  margin-bottom: .35rem;
  color: var(--ink);
}
.help-text, .helptext { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
.errorlist {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  color: var(--berry-strong);
  font-weight: 700;
  font-size: .85rem;
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="datetime-local"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--touch);
  padding: .6rem .75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(85,122,62,.18);
}
textarea { min-height: 6rem; resize: vertical; }

input[type="file"] {
  width: 100%;
  padding: .55rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: .95rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.2rem;
}

/* Photo capture / quick-add helpers */
.photo-capture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.2rem;
  border: 2px dashed var(--green);
  border-radius: var(--radius-lg);
  background: #EAF1E3;
  text-align: center;
  cursor: pointer;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}
.photo-thumb {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb.is-primary { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.photo-thumb__primary-flag {
  position: absolute; top: 4px; left: 4px;
  background: var(--green); color: #fff;
  font-size: .62rem; font-weight: 800;
  padding: .1rem .4rem; border-radius: 999px;
}

/* Variation editor rows */
.var-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: end;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .6rem;
  background: var(--bg);
}

/* ===========================================================================
   LOGIN
   =========================================================================== */
.login-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 15%, rgba(156,59,94,.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(85,122,62,.14), transparent 45%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  box-shadow: 0 12px 40px rgba(42, 50, 38, .14);
  text-align: center;
}
.login-card .chompignon,
.login-card .brand__logo { width: 84px; height: 84px; margin: 0 auto .6rem; }
.login-card h1 {
  font-size: 1.5rem;
  color: var(--green-strong);
  margin-bottom: 1.2rem;
}
.login-card .form-row { text-align: left; }
.login-card .btn { width: 100%; margin-top: .4rem; }

/* ===========================================================================
   SALES / PAYOUT
   =========================================================================== */
.payout-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1.2rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
}
.stat-card__label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.stat-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--green-strong);
}
.stat-card--berry .stat-card__value { color: var(--berry-strong); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.payout-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.payout-table th,
.payout-table td {
  padding: .65rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.payout-table th {
  background: #EAF1E3;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-strong);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.payout-table td.num,
.payout-table th.num { text-align: right; }
.payout-table tbody tr:hover { background: var(--bg); }
.payout-table tfoot td {
  font-weight: 800;
  background: var(--bg);
  border-top: 2px solid var(--green);
}

/* ===========================================================================
   SHARED SURFACE / FIELD PRIMITIVES (manage, quick-add, settings)
   =========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
}
.card-inset {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem;
}

/* Generic field block + Django-rendered text/select/number inputs */
.field { margin-bottom: 1rem; }
.field > label,
.field__label {
  display: block;
  font-weight: 800;
  margin-bottom: .35rem;
  color: var(--ink);
}
.field-input { /* class some hand-written inputs carry; inherit base input look */ }

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

/* Color swatch picker — keep it a comfortable touch target */
.field-color,
input[type="color"] {
  width: var(--touch);
  height: var(--touch);
  padding: 2px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

/* Prefix/suffix wrapped inputs (settings) */
.field__input-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.field__input-wrap .field__input { flex: 1 1 auto; }
.field__prefix,
.field__suffix {
  font-weight: 800;
  color: var(--muted);
  flex: 0 0 auto;
}

/* Inline checkbox/radio labels */
.check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  min-height: var(--touch);
}
.check input[type="checkbox"],
.check input[type="radio"] { width: 20px; height: 20px; }
.check--del { color: var(--berry-strong); }

.form-errors {
  color: var(--berry-strong);
  font-weight: 700;
  background: var(--berry-soft);
  border: 1px solid #E4BFCD;
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin-bottom: 1rem;
}
.form-card__legend { font-family: var(--font-heading); font-weight: 800; padding: 0 .3rem; }
.form-card__hint { margin: .15rem 0 .75rem; }

.btn--green { background: var(--green); }
.btn--green:hover { background: var(--green-strong); }
.btn--lg { min-height: 52px; padding: 0 1.4rem; font-size: 1.05rem; }

/* Photo rows (full form) */
.photo-rows { display: flex; flex-direction: column; gap: .75rem; }
.photo-row { display: flex; gap: .8rem; align-items: flex-start; }
.photo-row__preview {
  width: 72px; height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--berry-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.photo-row__preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-row__placeholder { font-size: 1.6rem; }
.photo-row__fields { flex: 1 1 auto; min-width: 0; }
.photo-row__controls { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ===========================================================================
   MANAGE LIST
   =========================================================================== */
.manage__head,
.sales-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
}
.manage__head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-sub, .manage__subtitle, .sales-page__head .page-sub { color: var(--muted); margin: .15rem 0 0; }

.manage__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.manage__filters input[type="search"] { flex: 1 1 12rem; }

.manage-list { display: flex; flex-direction: column; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.manage-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .7rem .8rem;
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
}
.manage-row__photo {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--berry-soft);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manage-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.manage-row__noimg { font-size: 1.5rem; }
.manage-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.manage-row__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.15;
}
.manage-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.manage-row__nums { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
.manage-row__actions { display: flex; flex-direction: column; gap: .4rem; flex: 0 0 auto; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty__art { font-size: 2.4rem; margin: 0 0 .5rem; }

/* ===========================================================================
   QUICK ADD
   =========================================================================== */
.quick-form { display: flex; flex-direction: column; gap: .25rem; max-width: 640px; }
.quick-recent { margin-top: 1.5rem; }
.quick-recent__list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.quick-recent__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quick-recent__item a { font-weight: 700; flex: 1 1 auto; min-width: 0; }

/* ===========================================================================
   SALES — tabs, lists, per-maker, settings widgets
   =========================================================================== */
.sales-page__head { align-items: center; }
.sales-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.sales-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 1rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--green-strong);
  font-weight: 800;
}
.sales-tab:hover { background: var(--berry-soft); text-decoration: none; }
.sales-tab--active { background: var(--green); border-color: var(--green); color: #fff; }
.sales-tab--active:hover { background: var(--green-strong); }

.payout-config { margin-bottom: 1rem; }

/* Sales list rows */
.sales-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sale-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  padding: .7rem .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 12px rgba(42, 50, 38, .06);
}
.sale-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: 1 1 12rem; min-width: 0; }
.sale-row__title { font-family: var(--font-heading); font-weight: 700; }
.sale-row__variation { color: var(--muted); font-weight: 700; font-size: .9rem; }
.sale-row__meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .85rem; }
.sale-row__price { margin-left: auto; font-weight: 800; color: var(--green-strong); }
.sale-row__unit { color: var(--muted); font-weight: 700; font-size: .82rem; }

/* Per-maker totals */
.maker-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.maker-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.maker-total__name { font-weight: 800; }
.maker-total__value { font-weight: 800; font-variant-numeric: tabular-nums; }
.maker-total--ava { border-left: 6px solid var(--maker-ava); }
.maker-total--liv { border-left: 6px solid var(--maker-liv); }
.maker-total--unassigned { border-left: 6px solid var(--muted); }

.payout-table__item { white-space: normal; }
.payout-table__title { font-weight: 700; }
.payout-table__variation { color: var(--muted); margin-left: .3rem; }
.payout-table__date { display: block; color: var(--muted); font-size: .8rem; }

/* Settings form */
.settings-form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 560px; }
.settings-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0; }
.settings-group__legend { font-family: var(--font-heading); font-weight: 800; padding: 0 .4rem; }
.settings-group__hint { margin: 0 0 .75rem; }
.settings-form__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.radio-list { display: flex; flex-direction: column; gap: .5rem; }
.radio-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .6rem;
  padding: .6rem .7rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.radio-option:has(input:checked) { border-color: var(--green); background: #EAF1E3; }
.radio-option input[type="radio"] { width: 22px; height: 22px; }
.radio-option__label { font-weight: 800; }
.radio-option__hint { grid-column: 2; font-size: .85rem; }

/* ===========================================================================
   INLINE TOAST (HTMX notices)
   =========================================================================== */
.smc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 1rem);
  z-index: 100;
  max-width: min(90vw, 24rem);
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(42, 50, 38, .25);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.smc-toast--show { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   UTILITIES
   =========================================================================== */
.muted { color: var(--muted); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.spacer { flex: 1 1 auto; }
.hidden { display: none !important; }
.pill {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  background: var(--berry-soft);
  color: var(--berry-strong);
}
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
}
.empty-state .chompignon { width: 90px; height: 90px; margin: 0 auto 1rem; opacity: .85; }

/* Search bar */
.searchbar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}
.searchbar input[type="search"] { flex: 1 1 auto; }

/* Status pills */
.status-pill { text-transform: capitalize; }
.status-pill--active   { background: #EAF1E3; color: var(--green-strong); }
.status-pill--hidden   { background: #E9EEF4; color: #2F4358; }
.status-pill--sold_out { background: var(--berry-soft); color: var(--berry-strong); }
.status-pill--archived { background: #ECE7E2; color: var(--muted); }

/* ===========================================================================
   CHOMPIGNON BOUNCE — happy save animation
   =========================================================================== */
@keyframes chompignon-bounce {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  20%  { transform: translateY(-9px) scale(1.12) rotate(-6deg); }
  45%  { transform: translateY(0)    scale(.94) rotate(4deg); }
  65%  { transform: translateY(-5px) scale(1.06) rotate(-3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.chompignon--bounce {
  animation: chompignon-bounce .65s cubic-bezier(.3, 1.4, .5, 1) both;
}

/* Tiny green flash on a freshly-saved line */
@keyframes saved-flash {
  0%   { background: #DCEBCE; }
  100% { background: transparent; }
}
.just-saved { animation: saved-flash 1s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}