/* ==========================================================================
   Display Minis Hub — Component Styles
   Page-specific and feature-specific compositions built from design tokens.
   Tokens (CSS vars, primitives) live in design_tokens.css — this file only
   composes them into larger UI patterns.
   ========================================================================== */

/* --- Miniature detail page (kit.css portal patterns) ---------------------- */
.dmh-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent-bronze);
  background: var(--accent-bronze-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-suggest-btn:hover { background: var(--accent-bronze-soft-hover); }

.dmh-detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.dmh-detail__byline { font-size: var(--fs-md); color: var(--fg-muted); margin: 0 0 var(--sp-5); }
.dmh-detail__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  letter-spacing: var(--ls-tight);
}
.dmh-detail__section-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
}

.dmh-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-warm);
  background: var(--bg-warm);
  color: var(--fg-2);
}

.dmh-variant {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.dmh-variant__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 var(--sp-2); }
.dmh-variant__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--fg-muted); }

.dmh-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px dashed var(--border-soft);
}
.dmh-offer:first-child { border-top: none; }
.dmh-offer__price {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.dmh-offer__marketplace { font-size: var(--fs-xs); color: var(--fg-muted); }
.dmh-offer__soldout { font-size: var(--fs-xs); color: var(--danger); }
.dmh-offer__cta { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-bronze); }
.dmh-offer__cta:hover { color: var(--accent-bronze-hover); }

.dmh-detail__meta-key { color: var(--fg-muted); margin-right: 4px; }

/* --- App shell: nav + footer (kit.css portal patterns) --------------------- */
.dmh-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-nav__inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dmh-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--fg-1);
  text-decoration: none;
  margin-right: var(--sp-9);
  letter-spacing: var(--ls-tight);
}
.dmh-nav__brand img { display: block; }
.dmh-nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-nav__link:hover { color: var(--fg-1); }
.dmh-nav__link.is-active { color: var(--fg-1); border-bottom-color: var(--accent-bronze); }

/* --- Top nav: primary menubar + dropdown triggers (PR-4) ----------------- */
/* Mobile / small-tablet defaults: primary nav + avatar pill are hidden;
   the drawer (opened by the hamburger) carries the IA. Desktop overrides
   come in the @media block at the bottom of this section. */
.dmh-nav__primary {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  gap: var(--sp-8);
}
.dmh-nav__avatar { display: none; }
.dmh-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.dmh-nav__link--has-caret {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.dmh-nav__caret {
  width: 10px;
  height: 10px;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease-out);
}
.dmh-nav__more[open] .dmh-nav__caret,
.dmh-nav__avatar[open] .dmh-nav__caret { transform: rotate(180deg); }

.dmh-nav__more,
.dmh-nav__avatar { position: relative; }
.dmh-nav__more summary,
.dmh-nav__avatar summary { list-style: none; }
.dmh-nav__more summary::-webkit-details-marker,
.dmh-nav__avatar summary::-webkit-details-marker { display: none; }

.dmh-nav__avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  cursor: pointer;
}
.dmh-nav__avatar-btn:hover,
.dmh-nav__avatar[open] .dmh-nav__avatar-btn {
  border-color: var(--accent-bronze);
  background: var(--paper);
}
.dmh-nav__avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-bronze);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 13px;
}
.dmh-nav__avatar-name {
  font-size: var(--fs-xs);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}
.dmh-nav__avatar-circle--lg { width: 40px; height: 40px; font-size: 17px; }

/* --- Top nav: hamburger (PR-5) ----------------------------------------- */
/* Visible on mobile only; hidden on desktop via the @media block at the
   bottom of this section. */
.dmh-nav__hamburger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.dmh-nav__hamburger:hover {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-nav__hamburger-icon { width: 22px; height: 22px; }

/* --- Top nav: responsive switchover at the canonical breakpoint --------- */
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-nav__primary  { display: flex; }
  .dmh-nav__avatar   { display: block; }
  .dmh-nav__hamburger { display: none; }
}

/* --- Mobile drawer (PR-5) ---------------------------------------------- */
.dmh-drawer { position: fixed; inset: 0; z-index: 70; }
.dmh-drawer[hidden] { display: none; }
.dmh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 7, 0.45);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.dmh-drawer.is-open .dmh-drawer__scrim { opacity: 1; }

.dmh-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--paper);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms var(--ease-out);
}
.dmh-drawer.is-open .dmh-drawer__panel { transform: translateX(0); }

.dmh-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  padding-top: max(16px, env(safe-area-inset-top));
}
.dmh-drawer__identity { flex: 1; min-width: 0; }
.dmh-drawer__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
.dmh-drawer__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dmh-drawer__close:hover {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-drawer__close-icon { width: 22px; height: 22px; }

.dmh-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}
.dmh-drawer__group-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 20px 20px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0;
}
.dmh-drawer__group-hint {
  font-size: 11px;
  color: var(--fg-subtle);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}

.dmh-drawer__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 48px;
  text-decoration: none;
  color: var(--fg-1);
  border-left: 3px solid transparent;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.dmh-drawer__row.is-active {
  background: var(--accent-bronze-soft);
  border-left-color: var(--accent-bronze);
  color: var(--accent-bronze);
}
.dmh-drawer__row.is-active .dmh-drawer__row-label { font-weight: var(--fw-semibold); }
.dmh-drawer__row.is-disabled { color: var(--fg-subtle); }
.dmh-drawer__row-icon { width: 22px; height: 22px; color: var(--fg-muted); flex-shrink: 0; }
.dmh-drawer__row.is-active .dmh-drawer__row-icon { color: var(--accent-bronze); }
.dmh-drawer__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-drawer__row-label {
  font-size: 16px;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dmh-drawer__row-sub { font-size: 12px; color: var(--fg-muted); }
.dmh-drawer__row-badge {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
  color: var(--surface);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dmh-drawer__footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Body scroll lock applied by mobile_nav_controller or filter_modal_controller while open. */
.dmh-body--locked { overflow: hidden; }

/* --- Mobile filter modal — drill-down sheet stack ---------------------- */
.dmh-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--paper);
  overflow: hidden;
}
.dmh-filter-modal[hidden] { display: none; }
.dmh-filter-modal__form { display: contents; }

.dmh-sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms var(--ease-out);
  will-change: transform;
}
.dmh-sheet--main {
  background: var(--bg-cream);
  transform: translateX(0);
}
.dmh-sheet--sub.is-active { transform: translateX(0); }
.dmh-sheet[hidden] { display: none; }

.dmh-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  padding-top: max(var(--sp-2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--border-soft);
  background: var(--paper);
}
.dmh-sheet__btn-icon {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dmh-sheet__btn-icon:hover { background: var(--accent-bronze-soft); color: var(--accent-bronze); }
.dmh-sheet__icon { width: 20px; height: 20px; }
.dmh-sheet__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.dmh-sheet__btn-text {
  background: transparent;
  border: 0;
  color: var(--accent-bronze);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.dmh-sheet__btn-text.is-disabled { color: var(--fg-disabled); pointer-events: none; }

.dmh-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dmh-sheet__body--main {
  padding-top: var(--sp-3);
  background: var(--bg-cream);
}

.dmh-sheet__inline-search {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  background: var(--bg-cream);
}

.dmh-sheet__search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px var(--sp-4);
}
.dmh-sheet__search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-family: inherit;
  color: var(--fg-1);
}
.dmh-sheet__search-input:focus {
  outline: none;
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-sheet__section-label {
  padding: var(--sp-5) var(--sp-5) 6px;
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.dmh-sheet__footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
.dmh-btn--block {
  display: flex;
  width: 100%;
}

/* --- Drill-down rows (main sheet) -------------------------------------- */
.dmh-drill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--paper);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-drill-list__item { margin: 0; padding: 0; }
.dmh-drill-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: 14px var(--sp-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--fg-1);
}
.dmh-drill-list__item:last-child .dmh-drill-row { border-bottom: 0; }
.dmh-drill-row:active { background: var(--accent-bronze-soft); }
.dmh-drill-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-drill-row__label {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.dmh-drill-row__value {
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmh-drill-row.is-active .dmh-drill-row__value {
  color: var(--accent-bronze);
  font-weight: var(--fw-medium);
}
.dmh-drill-row__clear {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-bronze-soft-hover);
  color: var(--accent-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-drill-row__clear:hover,
.dmh-drill-row__clear:active { background: var(--accent-bronze); color: var(--surface); }
.dmh-drill-row__clear[hidden] { display: none; }
.dmh-drill-row__clear-icon { width: 16px; height: 16px; }
.dmh-drill-row__chevron {
  color: var(--fg-subtle);
  flex-shrink: 0;
  display: inline-flex;
}
.dmh-drill-row__chevron-icon { width: 18px; height: 18px; }

/* --- Sub-sheet radio rows --------------------------------------------- */
.dmh-radio-list,
.dmh-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dmh-radio-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--sp-5);
  min-height: 56px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.dmh-radio-row.is-checked { background: var(--accent-bronze-soft); }
.dmh-radio-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 120ms var(--ease-out);
  cursor: pointer;
}
.dmh-radio-row input:checked {
  border: 7px solid var(--accent-bronze);
  background: var(--surface);
}
.dmh-radio-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--fg-1);
}
.dmh-radio-row.is-checked .dmh-radio-row__label {
  color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}
.dmh-radio-row--any .dmh-radio-row__label {
  color: var(--fg-muted);
  font-style: italic;
}

/* --- Sub-sheet checkbox rows ----------------------------------------- */
.dmh-check-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--sp-5);
  min-height: 52px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  position: relative;
}
.dmh-check-row.is-checked { background: var(--accent-bronze-soft); }
.dmh-check-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dmh-check-row__box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  transition: all 120ms var(--ease-out);
}
.dmh-check-row__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}
.dmh-check-row.is-checked .dmh-check-row__box {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
}
.dmh-check-row.is-checked .dmh-check-row__box::after { opacity: 1; }
.dmh-check-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--fg-1);
}
.dmh-check-row.is-checked .dmh-check-row__label {
  color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}

/* --- Selected band (tags sub-sheet) ---------------------------------- */
.dmh-selected-band {
  padding: 12px var(--sp-4);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-selected-band[hidden] { display: none; }
.dmh-selected-band__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--accent-bronze);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.dmh-selected-band__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dmh-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  background: var(--accent-bronze);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  min-height: 32px;
}
.dmh-selected-chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.25);
  color: var(--surface);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.dmh-list-empty {
  padding: 32px var(--sp-5);
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
  list-style: none;
}

.dmh-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: var(--sp-9) var(--gutter) var(--sp-11);
}
.dmh-flash-wrap {
  width: 100%;
  max-width: var(--max-w-content);
  margin: var(--sp-4) auto 0;
  padding: 0 var(--gutter);
}

.dmh-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--paper);
  padding: var(--sp-7) var(--gutter);
  text-align: center;
}
.dmh-footer__links { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }
.dmh-footer__link { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.dmh-footer__link:hover { color: var(--fg-1); }
.dmh-footer__disclaimer { font-size: var(--fs-xs); color: var(--fg-subtle); margin: 6px 0 0; }

/* --- Browse top bar + filter sidebar (kit.css portal patterns) ------------ */
.dmh-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-topbar .dmh-input-wrap { flex-basis: 100%; }
  .dmh-topbar__filters-mobile { flex: 1; }
}
/* Hide the mobile-only top-bar controls at md and up — these duplicate
   the desktop trigger + Clear-all. Lives unlayered so it beats
   `dmh-btn { display: inline-flex }` (Tailwind utilities ship in
   @layer utilities, which loses to unlayered rules). */
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-topbar__filters-mobile,
  .dmh-topbar__clear--mobile { display: none; }
}
.dmh-topbar__clear--mobile.dmh-topbar__clear--inactive {
  color: var(--fg-disabled);
  pointer-events: none;
}
.dmh-topbar__clear {
  font-size: var(--fs-sm);
  color: var(--accent-bronze);
  font-weight: var(--fw-medium);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.dmh-topbar__clear:hover { color: var(--accent-bronze-hover); }
.dmh-topbar__clear:disabled,
.dmh-topbar__clear--inactive {
  color: var(--fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.dmh-input-wrap { position: relative; display: flex; flex: 1; min-width: 240px; }
.dmh-input-wrap__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.dmh-input-wrap__icon svg { width: 100%; height: 100%; display: block; }
.dmh-input-wrap .dmh-input { padding-left: 36px; }

.dmh-btn__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; }
.dmh-btn__icon svg { width: 100%; height: 100%; }
.dmh-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--accent-bronze);
  border-radius: var(--radius-pill);
}

/* --- Filter sidebar (kit.css portal patterns) ----------------------------- */
.dmh-filter-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.dmh-filter-sidebar__group { display: flex; flex-direction: column; }
.dmh-filter-sidebar__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dmh-filter-sidebar__clear {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.dmh-filter-sidebar__clear:hover { color: var(--danger); }
.dmh-filter-sidebar__radio-group { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 320px; overflow-y: auto; padding-right: 2px; }
.dmh-filter-sidebar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dmh-filter-sidebar__actions { display: flex; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.dmh-filter-sidebar__actions .dmh-btn { flex: 1; }

.dmh-radio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  cursor: pointer;
}
.dmh-radio input { accent-color: var(--accent-bronze); cursor: pointer; }
.dmh-radio:hover { color: var(--accent-bronze); }

/* --- Active filter chips ------------------------------------------------- */
.dmh-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.dmh-active-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 8px 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out);
}
.dmh-active-chip:hover { border-color: var(--accent-bronze); }
.dmh-active-chip__key   { color: var(--fg-muted); }
.dmh-active-chip__value { font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-active-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  font-size: var(--fs-base);
  line-height: 1;
}

/* --- Browse layout + mini card grid -------------------------------------- */
.dmh-browse-layout { display: flex; gap: var(--sp-7); align-items: flex-start; }
.dmh-browse-layout__results { flex: 1; min-width: 0; }
.dmh-browse-layout__count { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0 0 var(--sp-5); }

.dmh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.dmh-minicard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-minicard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dmh-minicard__image { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-warm); }
.dmh-minicard__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.dmh-minicard:hover .dmh-minicard__image img { transform: scale(1.04); }
.dmh-minicard__image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-disabled);
}
.dmh-minicard__body { padding: var(--sp-4); }
.dmh-minicard__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dmh-minicard__creator { font-size: var(--fs-xs); color: var(--fg-muted); margin: 4px 0 0; }
.dmh-minicard__price {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 8px 0 0;
}

/* --- Page chrome (kit.css portal patterns) -------------------------------- */
.dmh-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-7);
}
.dmh-page-lede {
  font-size: var(--fs-lg);
  color: var(--fg-2);
  max-width: 60ch;
  margin: calc(-1 * var(--sp-5)) 0 var(--sp-9);
}
.dmh-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.dmh-page-header .dmh-page-title { margin: 0; }

/* --- Masonry feed (Photo Albums + Community Photos) ----------------------- */
.dmh-masonry {
  columns: 1;
  column-gap: var(--sp-5);
}
@media (min-width: 640px) { .dmh-masonry { columns: 2; } }
@media (min-width: 1024px) { .dmh-masonry { columns: 3; } }

.dmh-feedcard {
  break-inside: avoid;
  margin-bottom: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-feedcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dmh-feedcard__head {
  display: block;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-warm);
  padding: 10px 14px;
  text-decoration: none;
}
.dmh-feedcard__head:hover { background: var(--border-warm); }
.dmh-feedcard__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; }
.dmh-feedcard__byline { font-size: var(--fs-xs); color: var(--fg-muted); margin: 2px 0 0; }
.dmh-feedcard__cover { aspect-ratio: 4 / 3; overflow: hidden; }
.dmh-feedcard__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.dmh-feedcard:hover .dmh-feedcard__cover img { transform: scale(1.04); }
.dmh-feedcard__foot {
  background: var(--bg-warm);
  border-top: 1px solid var(--border-warm);
  padding: 8px 14px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-feedcard__foot-label { color: var(--fg-2); font-weight: var(--fw-medium); }

/* --- Instagram embed (CLS prevention) ----------------------------------- */
.dmh-instagram-embed {
  min-height: 574px;
  overflow: hidden;
  background: var(--bg-warm);
}
.dmh-instagram-embed--show { min-height: 748px; max-width: 540px; }
.dmh-instagram-embed .instagram-media { border: none !important; margin: 0 !important; }

/* Breadcrumb */

/* Form / field */
.dmh-form { max-width: 640px; display: flex; flex-direction: column; gap: var(--sp-7); }
.dmh-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.dmh-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-field__optional { font-weight: var(--fw-regular); color: var(--fg-muted); margin-left: 4px; }
.dmh-field__hint { font-size: var(--fs-xs); color: var(--fg-muted); margin: 0; }
.dmh-field__label--sm { display: block; font-size: var(--fs-xs); color: var(--fg-muted); margin: 0 0 var(--sp-2); }

/* Suggestion form state classes */
.dmh-field--changed { background: var(--success-soft); border-color: var(--success); }
.dmh-field--deleted { opacity: 0.5; background: var(--danger-soft); }
.dmh-entry--new { border: 1px solid var(--success); background: var(--success-soft); border-radius: var(--radius-md); padding: var(--sp-4); }

/* Status pill (suggestion statuses, diff action badges) */
.dmh-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.dmh-status-pill--pending  { background: var(--warning-soft); color: var(--warning); }
.dmh-status-pill--approved { background: var(--success-soft); color: var(--success); }
.dmh-status-pill--rejected { background: var(--danger-soft);  color: var(--danger); }
.dmh-status-pill--create   { background: var(--success-soft); color: var(--success); text-transform: uppercase; }
.dmh-status-pill--update   { background: var(--warning-soft); color: var(--warning); text-transform: uppercase; }
.dmh-status-pill--delete   { background: var(--danger-soft);  color: var(--danger);  text-transform: uppercase; }

/* Lightbox / modal scrim */
.dmh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 7, 0.92);
}
.dmh-lightbox.hidden { display: none; }
.dmh-lightbox--modal { background: rgba(10, 9, 7, 0.6); }

/* Linked-miniature row */
.dmh-mini-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out);
}
.dmh-mini-row:hover { background: var(--bg-warm); }
.dmh-mini-row__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-warm);
  flex-shrink: 0;
}
.dmh-mini-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dmh-mini-row__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-1); }

/* Type-picker card (e.g. photo album type selection) */
.dmh-type-card {
  display: block;
  padding: var(--sp-7);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dmh-type-card:hover {
  border-color: var(--accent-bronze);
  box-shadow: var(--shadow-2);
}
.dmh-type-card__icon {
  margin: 0 auto var(--sp-4);
  width: 40px;
  height: 40px;
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease-out);
}
.dmh-type-card:hover .dmh-type-card__icon { color: var(--accent-bronze); }
.dmh-type-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 var(--sp-1); }
.dmh-type-card__desc { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

/* Language toggle (legal pages) */
.dmh-toggle-btn {
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-toggle-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dmh-toggle-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dmh-toggle-btn:hover { background: var(--bg-warm); }
.dmh-toggle-btn--active {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: #fff;
}
.dmh-toggle-btn--active:hover { background: var(--accent-bronze-hover); }

/* Accent-ink card (visually distinct section, e.g. creator in suggestion form) */
.dmh-card--ink {
  border-color: var(--accent-ink-soft);
  border-width: 2px;
}
.dmh-card--ink legend { color: var(--accent-ink); }

/* --- Diff display (suggestion current/proposed comparison) --------------- */
.dmh-diff { border-radius: var(--radius-sm); padding: 8px 12px; }
.dmh-diff--current { background: var(--danger-soft); }
.dmh-diff--proposed { background: var(--success-soft); }
.dmh-diff--removed { background: var(--danger-soft); opacity: 0.5; }
.dmh-diff--neutral { background: var(--bg-cream); }
.dmh-diff__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.dmh-diff__label--current { color: var(--danger); }
.dmh-diff__label--proposed { color: var(--success); }
.dmh-diff__value--current { color: var(--diff-current); }
.dmh-diff__value--proposed { color: var(--diff-proposed); }
.dmh-diff__meta {
  display: inline-block;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 0 8px 2px;
  margin: 0 4px 4px 0;
}

/* Change indicator borders (credit/collection/image change entries) */
.dmh-change-border { border-left: 4px solid; padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
.dmh-change-border--create { border-left-color: var(--success); }
.dmh-change-border--update { border-left-color: var(--warning); }
.dmh-change-border--delete { border-left-color: var(--danger); }

/* --- Reusable form/UI primitives ----------------------------------------- */

/* Section divider */
.dmh-divider { border-top: 1px solid var(--border-soft); }

/* Image well (placeholder container for gallery/thumbnails) */
.dmh-image-well { background: var(--bg-muted); border-radius: var(--radius-md); }

/* Empty state / spinner icon colors */
.dmh-empty-icon { color: var(--fg-disabled); }
.dmh-spinner-icon { color: var(--fg-disabled); }

/* Form entry row (variant cards, credit entries, collection entries) */
.dmh-form-entry {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.dmh-form-entry--dashed {
  border-style: dashed;
  border-color: var(--border-strong);
}

/* Form highlight container (checkbox groups, inline controls) */
.dmh-form-highlight {
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

/* Autocomplete dropdown */
.dmh-autocomplete-dropdown {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

/* Image thumbnail border */
.dmh-thumb-border { border: 2px solid var(--border-soft); }
.dmh-thumb-border--dashed { border: 2px dashed var(--border-strong); }

/* Gallery thumbnail ring */
.dmh-gallery-thumb {
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: box-shadow 0.15s ease;
}
.dmh-gallery-thumb:hover { box-shadow: 0 0 0 3px var(--accent-bronze); }
.dmh-gallery-thumb.is-active { box-shadow: 0 0 0 3px var(--accent-bronze); }


/* Small icon button (overlay on thumbnails) */
.dmh-icon-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.dmh-icon-btn--danger { color: var(--danger); }
.dmh-icon-btn--danger:hover { background: var(--danger-soft); }
.dmh-icon-btn--bronze { color: var(--accent-bronze); }
.dmh-icon-btn--bronze:hover { background: var(--accent-bronze-soft); }

/* Card header (admin panel sections) */
.dmh-card__header {
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--sp-4) var(--sp-6);
}
.dmh-card__header h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

/* Admin copy-value button */
.dmh-copy-btn {
  flex-shrink: 0;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.dmh-copy-btn:hover { color: var(--accent-bronze); background: var(--accent-bronze-soft); }

/* Prose (user-generated rich text, replaces Tailwind prose with design system fonts) */
.dmh-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: none;
}
.dmh-prose p { margin: 0 0 var(--sp-4); }
.dmh-prose p:last-child { margin-bottom: 0; }
.dmh-prose a { color: var(--accent-ink); text-decoration: underline; }
.dmh-prose a:hover { color: var(--accent-ink-hover); }
.dmh-prose strong { font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-prose em { font-style: italic; }

/* Admin checkbox (bronze accent) */
.dmh-checkbox {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  accent-color: var(--accent-bronze);
}

/* Creator pill (assigned-creator indicator in suggestion form) */
.dmh-creator-pill {
  background: var(--accent-ink-soft);
  border: 1px solid var(--accent-ink-soft);
}

/* Semantic text-color utilities */
.dmh-text-danger  { color: var(--danger); }
.dmh-text-subtle  { color: var(--fg-subtle); }
.dmh-text-success { color: var(--success); }

/* --- Creator card (PR-3 of Option A top nav) --------------------------- */
.dmh-creator-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-creator-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dmh-creator-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
.dmh-creator-card__count {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin: 0;
}

/* --- Nav: dropdown popovers (PR-1 of Option A top nav) ------------------ */
.dmh-pop {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 8px;
  min-width: 260px;
  z-index: 60;
}
.dmh-pop--anchor-left  { left: 0; }
.dmh-pop--anchor-right { right: 0; }
.dmh-pop__group-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 10px 12px 6px;
  margin: 0;
}
.dmh-pop__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}

.dmh-pop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.dmh-pop__item:hover {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-pop__item--coming-soon { color: var(--fg-subtle); cursor: default; }
.dmh-pop__item--coming-soon:hover {
  background: var(--bg-warm);
  color: var(--fg-2);
}
.dmh-pop__item-icon {
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.dmh-pop__item:hover .dmh-pop__item-icon { color: var(--accent-bronze); }
.dmh-pop__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-pop__item-label { display: inline-flex; align-items: center; gap: 8px; }
.dmh-pop__item-sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
.dmh-pop__item-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
  color: var(--surface);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Coming-soon page (PR-2 of Option A top nav) ----------------------- */
.dmh-comingsoon {
  max-width: 60ch;
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5) var(--sp-10);
  text-align: center;
}
.dmh-comingsoon .dmh-eyebrow { margin-bottom: var(--sp-3); }
.dmh-comingsoon .dmh-h1      { margin-bottom: var(--sp-4); }
.dmh-comingsoon .dmh-lede    { margin-bottom: var(--sp-7); }
.dmh-comingsoon__cta {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* --- "Soon" pill -------------------------------------------------------- */
.dmh-soon-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-warm);
  border: 1px solid var(--border-warm);
  color: var(--accent-bronze);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   Show Miniature Page (`smp-*`) — page-feature composition for
   app/views/miniatures/show.html.erb. Mobile threshold = --breakpoint-md
   (see app/assets/tailwind/application.css); each raw media query below
   carries the mobile-breakpoint marker so bin/check_design_system keeps
   them aligned. The `dmh-*` primitives in design_tokens.css still cover
   all color/typography/border tokens — this block only adds compositions.
   ========================================================================== */

.smp__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  .smp__hero { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Desktop vs mobile gallery visibility is driven by the component classes
   themselves (see `.smp-gallery__main`, `.smp-gallery__thumbs`,
   `.smp-gallery__track`, `.smp-gallery__dots`) so each element can keep its
   own display value (flex / block). */

/* --- Info column ------------------------------------------------------- */
.smp-info { min-width: 0; position: relative; }
.smp-info__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}
.smp-info__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}
.smp-info__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}
.smp-info__eyebrow-pill--discontinued {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.smp-info__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.smp-info__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.smp-info__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  /* On mobile the title would push actions onto a new left-aligned row;
     pin them to the top-right of .smp-info instead so they sit on the
     same visual line as the eyebrow (category + Discontinued). */
  .smp-info__actions {
    position: absolute;
    top: 0;
    right: 0;
  }
  /* Reserve enough room on the right so the eyebrow + title never
     run under the pinned actions block. ~150px covers the Suggest
     edit pill + kebab + a small gap. */
  .smp-info__eyebrow,
  .smp-info__title-row { padding-right: 150px; }
}

.smp-info__byline {
  font-size: var(--fs-base);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-5);
}

.smp-info__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.smp-info__price-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}
.smp-info__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.smp-info__price-note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.smp-info__meta-strip {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  letter-spacing: var(--ls-wide);
}

/* --- Facts list (definition list) -------------------------------------- */
.smp-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border-soft);
}
.smp-facts__key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  align-self: baseline;
}
.smp-facts__val {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  align-self: baseline;
}

.smp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.smp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg-muted);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.smp-tag:hover { color: var(--accent-bronze); border-color: var(--accent-bronze); }

.smp-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
.smp-link:hover {
  color: var(--accent-ink-hover);
  text-decoration-color: var(--accent-bronze-hover);
}
.smp-link--ext::after {
  content: " \2197";
  font-size: 0.85em;
  color: var(--fg-subtle);
}

/* --- Suggest-edit bronze pill button ----------------------------------- */
.smp-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--border-warm);
  color: var(--accent-bronze);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  white-space: nowrap;
}
.smp-edit-btn:hover {
  background: var(--accent-bronze-soft-hover);
  border-color: var(--accent-bronze);
  color: var(--accent-bronze-hover);
}
.smp-edit-btn img { width: 14px; height: 14px; }

/* --- Kebab menu -------------------------------------------------------- */
.smp__menu { position: relative; }
.smp__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.smp__menu-trigger:hover {
  background: var(--bg-warm);
  border-color: var(--border-warm);
  color: var(--fg-1);
}
.smp__menu-trigger img { width: 18px; height: 18px; }
.smp__menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  z-index: 10;
}
.smp__menu-popover.hidden { display: none; }
.smp__menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.smp__menu-item:hover { background: var(--bg-warm); }
.smp__menu-item--muted { color: var(--fg-muted); }
.smp__menu-item--muted:hover { color: var(--fg-1); }
.smp__menu-item img { width: 16px; height: 16px; opacity: 0.7; }
.smp__menu-sep {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

/* --- Section heading -------------------------------------------------- */
.smp-section {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-soft);
}
.smp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.smp-section__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
.smp-section__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}

.smp-variants {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 840px) /* mobile breakpoint */ {
  .smp-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Variant card ------------------------------------------------------ */
.smp-vc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.smp-vc--unavailable { opacity: 0.85; }
.smp-vc__head { padding: var(--sp-6); }
.smp-vc__title-row { margin-bottom: var(--sp-5); }
.smp-vc__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.smp-vc__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
  line-height: var(--lh-snug);
}
.smp-vc__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1.4;
}
.smp-vc__badge--limited {
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
}
.smp-vc__badge--digital {
  background: var(--accent-ink-soft);
  border-color: var(--info-border);
  color: var(--accent-ink);
}
.smp-vc__badge--feature {
  background: var(--bg-muted);
  border-color: var(--border-soft);
  color: var(--fg-muted);
}
.smp-vc__badge-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-regular);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.smp-vc__attrs {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-soft);
}
.smp-vc__attrs-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-4);
}
.smp-vc__attr-key {
  font-size: 10px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.smp-vc__attr-val {
  font-size: var(--fs-sm);
  color: var(--fg-1);
  margin: 0;
}
.smp-vc__attr-val--mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.smp-vc__attr-val--phrase { font-size: var(--fs-sm); color: var(--fg-2); }

.smp-vc__limited-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--accent-bronze-press);
  margin-bottom: var(--sp-4);
}
.smp-vc__limited-strip img { width: 16px; height: 16px; }

.smp-vc__source-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  text-decoration: none;
}
.smp-vc__source-link:hover { color: var(--accent-ink-hover); }
.smp-vc__source-link::after {
  content: " \2197";
  margin-left: 4px;
  color: var(--fg-subtle);
}

.smp-vc__offers {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--bg-warm);
  border-top: 1px solid var(--border-warm);
}
.smp-vc__offers-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.smp-vc__empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-muted);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border-soft);
}
.smp-vc__empty-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }

/* --- Offer row -------------------------------------------------------- */
.smp-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.smp-offer:last-child { margin-bottom: 0; }
.smp-offer--soldout { opacity: 0.75; }
.smp-offer__details { min-width: 0; }
.smp-offer__top-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.smp-offer__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.smp-offer__bot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 2px;
}
.smp-offer__marketplace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.smp-offer__marketplace-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}
.smp-offer__sep { color: var(--fg-subtle); font-size: var(--fs-xs); }
.smp-offer__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.smp-offer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.smp-offer__status--ok      { color: var(--success); }
.smp-offer__status--soldout { color: var(--danger); }
.smp-offer__status--unknown { color: var(--fg-subtle); }

.smp-offer__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-on-accent);
  background: var(--accent-bronze);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out);
}
.smp-offer__cta:hover { background: var(--accent-bronze-hover); }
.smp-offer__cta--ghost {
  background: transparent;
  color: var(--fg-disabled);
  border: 1px solid var(--border-soft);
  cursor: not-allowed;
}
.smp-offer__cta--ghost:hover { background: transparent; }

/* --- Gallery ---------------------------------------------------------- */
.smp-gallery { position: relative; }
.smp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  margin-bottom: var(--sp-3);
}
.smp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.smp-gallery__counter {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: 3px 8px;
  background: rgba(10, 9, 7, 0.75);
  color: var(--fg-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  pointer-events: none;
}
.smp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--fg-1);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.smp-gallery__main:hover .smp-gallery__nav { opacity: 1; }
.smp-gallery__nav--prev { left: var(--sp-3); }
.smp-gallery__nav--next { right: var(--sp-3); }
.smp-gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 2px;
}
.smp-gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}
.smp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.smp-gallery__thumb:hover { border-color: var(--border-strong); }
.smp-gallery__thumb.is-active { border-color: var(--accent-bronze); }

.smp-gallery__mobile {
  display: none;
  position: relative;
}
.smp-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.smp-gallery__track::-webkit-scrollbar { display: none; }
.smp-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
}
.smp-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.smp-gallery__dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-3);
}
.smp-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.smp-gallery__dot.is-active {
  background: var(--accent-bronze);
  width: 16px;
}

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .smp-gallery__main,
  .smp-gallery__thumbs { display: none; }
  .smp-gallery__mobile { display: block; }
  .smp-gallery__dots   { display: flex; }
}

/* --- Safety footer card ----------------------------------------------- */
.smp-footer-meta {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
}
.smp-fm-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.smp-fm-card__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--fg-subtle);
  margin-top: 1px;
}