/* ─── Design tokens ──────────────────────────────────────────────────────
   Colors, spacing, radii and font sizes now live in variables.css.
   Shadows have no equivalent there yet, so they stay defined locally. */
:root {
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-input-focus: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

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

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-900);
  background: var(--color-neutral-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-brand-blue);
  text-decoration: none;
}
a:hover { color: var(--color-icon-blue); text-decoration: underline; }

h1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  margin: 0 0 var(--spacing-1);
}

h2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-28);
  line-height: var(--line-height-32);
  margin: 0 0 var(--spacing-0-5);
}

h3 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  margin: 0 0 var(--spacing-1);
}

h4 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
  margin: 0 0 var(--spacing-1);
}

p {
  font-size: var(--font-size-16);
  line-height: var(--line-height-28);
  letter-spacing: var(--letter-spacing-extended-s);
  margin: 0 0 var(--spacing-2);
}

/* ─── Logo ──────────────────────────────────────────────────────────────── */
.logo {
  display: inline-flex;
  margin-bottom: var(--spacing-32);
}

.logo--center {
  display: flex;
  justify-content: center;
}

.logo__image {
  height: 48px;
  width: auto;
  display: block;
}

/* ─── Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-40) var(--spacing-32);
  box-shadow: var(--shadow-card);
}

/* ─── Auth layout ───────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  background: var(--color-surface-primary);
}

/* Some auth pages fully commit to a white background, including the body behind it. */
body:has(.auth-page--flat) {
  background: var(--color-surface-primary);
}

.auth-card--flat {
  box-shadow: none;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card__title {
  font-size: var(--font-size-24);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: var(--spacing-1);
}

.auth-card__subtitle {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-24);
}

.auth-card__footer {
  margin-top: var(--spacing-24);
}

/* ─── Form ──────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--spacing-24);
}

.form-label {
  display: block;
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

.form-input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-900);
  background: var(--color-surface-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.form-input::placeholder {
  color: var(--color-text-disabled);
  font-size: var(--font-size-14);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: var(--shadow-input-focus);
}

.form-input:user-invalid {
  border-color: var(--color-text-coral);
}

.form-input:disabled,
.form-input[readonly] {
  color: var(--color-text-disabled);
  background: var(--color-surface-disabled);
}

.form-input--error {
  border-color: var(--color-text-coral);
}

.form-error {
  color: var(--color-text-coral);
  font-size: var(--font-size-14);
  margin-top: var(--spacing-1);
}

/* Input with trailing icon (e.g. password toggle) */
.form-input-wrapper {
  position: relative;
}

.form-input-wrapper .form-input {
  padding-right: var(--spacing-40);
}

.form-input-icon {
  position: absolute;
  right: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-icon-blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
}

.form-input-icon:hover { color: var(--color-neutral-900); }

/* ─── Checkbox ──────────────────────────────────────────────────────────── */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.form-check__input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand-blue);
  cursor: pointer;
}

.form-check__label {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.resource-source-choice {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
}

/* Form row: checkbox left, link right */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-24);
}

.form-footer__link {
  font-size: var(--font-size-14);
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

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

.btn--primary {
  background: var(--color-button-cta);
  color: #ffffff;
}
.btn--primary:hover { background: var(--color-neutral-700); color: #ffffff; }
.btn--primary:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }

.btn--secondary {
  background: var(--color-surface-primary);
  color: var(--color-button-cta);
  border-color: var(--color-button-cta);
}
.btn--secondary:hover { background: #e8eaf6; }

.btn--ghost {
  background: transparent;
  color: var(--color-brand-blue);
  border-color: transparent;
}
.btn--ghost:hover { background: rgba(33, 150, 243, 0.08); }

.btn--block { width: 100%; }

.btn--sm { padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-14); }

/* ─── Alerts / flash messages ───────────────────────────────────────────── */
.alert {
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-14);
  margin-bottom: var(--spacing-2);
  border: 1px solid transparent;
}

.alert--success {
  background: #e8f5e9;
  color: var(--color-text-mint);
  border-color: #a5d6a7;
}

.alert--error {
  background: #ffebee;
  color: var(--color-text-coral);
  border-color: #ef9a9a;
}

/* Sits below native <dialog> top-layer content (e.g. .modal), so a toast fired while a dialog is open won't be visible. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-24);
  z-index: 100;
  max-width: min(90vw, 420px);
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-14);
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: toast-lifecycle 5s ease-in-out forwards;
  pointer-events: none;
}

.toast--success {
  background: #e8f5e9;
  color: var(--color-text-mint);
  border-color: #a5d6a7;
}

@keyframes toast-lifecycle {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  6% { opacity: 1; transform: translate(-50%, 0); }
  94% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; }
}

/* ─── Table ─────────────────────────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-14);
}

.table th, .table td {
  padding: var(--spacing-2) var(--spacing-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: var(--font-size-12);
  letter-spacing: 0.05em;
}

.table tr:hover td { background: var(--color-neutral-100); }

/* The cell holding the row's "..." menu (or its buttons). Marked by class rather
   than by position, because the phone layout lifts it out of source order. */
.table__actions { text-align: right; }

/* Sort links for a sortable table, repeated outside the header row so they
   survive the phone layout hiding it. Desktop keeps sorting in the header. */
.table-sort { display: none; }

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Keeps the data-controller wrapper out of the box tree so .app-sidebar
   becomes a direct flex item of .app-shell and stretches full height. */
.app-sidebar-shell {
  display: contents;
}

.app-topbar {
  display: none;
}

.app-sidebar-backdrop {
  display: none;
}

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-primary);
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--spacing-24) var(--spacing-2);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-sidebar > .app-nav__brand {
  margin-bottom: var(--spacing-32);
  padding: 0 var(--spacing-1);
}

.app-nav__brand {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  line-height: 1.1;
  text-decoration: none;
  flex-shrink: 0;
}
.app-nav__brand:hover { text-decoration: none; }

.app-nav__brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

.app-sidebar__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
}

.app-nav__link,
.app-nav__link--btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-neutral-900);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.app-nav__link { text-decoration: none; }
.app-nav__link:hover,
.app-nav__link--btn:hover {
  color: var(--color-neutral-900);
  text-decoration: none;
  background: var(--color-neutral-100);
}
.app-nav__link--active {
  font-weight: 700;
  color: var(--color-brand-blue);
}

.app-nav__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  color: var(--color-icon-secondary);
}
.app-nav__link-icon svg { display: block; width: 20px; height: 20px; }
.app-nav__link--active .app-nav__link-icon {
  background: var(--color-brand-blue);
  color: var(--color-surface-primary);
}

/* Logout button rendered as a nav-link-styled button */
.app-nav__logout-form { display: contents; }

.app-nav__link--btn {
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  font-family: var(--font-family-body);
  cursor: pointer;
  text-align: left;
}

.app-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-border-subtle);
}

.app-nav__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: inherit;
  text-decoration: none;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}
.app-nav__user:hover { text-decoration: none; background: var(--color-neutral-100); }

.app-nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid transparent;
  padding: 1px;
  background:
    linear-gradient(var(--color-brand-white), var(--color-brand-white)) padding-box,
    linear-gradient(to bottom, var(--color-brand-blue), var(--color-brand-coral)) border-box;
  flex-shrink: 0;
}

/* ─── Inline avatar + name (e.g. seller cell in a table row) ────────────── */
.table-cell--avatar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.table-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid transparent;
  padding: 1px;
  background:
    linear-gradient(var(--color-brand-white), var(--color-brand-white)) padding-box,
    linear-gradient(to bottom, var(--color-brand-blue), var(--color-brand-coral)) border-box;
  flex-shrink: 0;
}

.avatar-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  font-weight: 600;
  flex-shrink: 0;
}

/* Size variants — .avatar-initials is combined with the class of the avatar
   slot it replaces, so it needs to match that slot's own dimensions. */
.app-nav__avatar.avatar-initials {
  width: 36px;
  height: 36px;
  font-size: var(--font-size-16);
}

.app-nav__user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.app-nav__user-name {
  font-size: var(--font-size-14);
  font-weight: 600;
  color: var(--color-neutral-900);
}

.app-nav__user-label {
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
}

/* ─── App main content ──────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  min-width: 0;
  /*max-width: 960px; /* leave width flexible and rely on padding */
  margin: 0 auto;
  padding: var(--spacing-40) var(--spacing-32);
}

/* ─── Page header (title + action button on one row) ───────────────────── */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-24);
}

.page-header h1 { margin-bottom: 0; }

/* Title group: a back-to-parent icon beside the heading/subtitle block. */
.page-header__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.page-header__title p:last-child { margin-bottom: 0; }

.page-header__back {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}
.page-header__back:hover { color: var(--color-neutral-900); }
.page-header__back svg { width: 56px; height: 56px; }

/* ─── Section header (title + action button within a section, not the page) ── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.section-header h2 { margin-bottom: 0; }

/* ─── Notification list ─────────────────────────────────────────────────── */
.notification-group {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: start;
  margin-bottom: var(--spacing-1);
}

.notification-group__date {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) 0;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: var(--spacing-2);
}

.notification-row {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-2);
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--spacing-2);
  color: var(--color-text-secondary);
}

.notification-row--unread {
  color: var(--color-neutral-900);
  font-weight: 600;
}

.notification-row:last-child { border-bottom: none; }

.notification-row__text { flex: 1; }

.notification-row__check-form { display: contents; }

.notification-row__modal { display: contents; }

.notification-row__check {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand-blue);
  cursor: pointer;
}
.notification-row__check:disabled { cursor: default; }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-24);
}

.pagination__link {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-neutral-900);
  text-decoration: none;
  padding: var(--spacing-1) var(--spacing-2);
}
.pagination__link:hover { text-decoration: none; color: var(--color-neutral-900); }
.pagination__link--disabled { color: var(--color-text-disabled); }

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-neutral-900);
  text-decoration: none;
}
.pagination__page:hover { text-decoration: none; border-color: var(--color-border-subtle); }
.pagination__page--current {
  border-color: var(--color-border-subtle);
  font-weight: 700;
}

.pagination__gap {
  color: var(--color-text-secondary);
  padding: 0 var(--spacing-1);
}

/* ─── Detail sections (notification show, campaign show, etc.) ──────────── */
.detail-section {
  margin-bottom: var(--spacing-32);
}

.owner-summary {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
}

.owner-summary__avatar {
  aspect-ratio: 1 / 1;
  align-self: stretch;
  min-height: 3.5rem;
  max-height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 2px;
  background:
    linear-gradient(var(--color-brand-white), var(--color-brand-white)) padding-box,
    linear-gradient(to bottom, var(--color-brand-blue), var(--color-brand-coral)) border-box;
  flex-shrink: 0;
  height: 100px;
}

.owner-summary__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.owner-summary__avatar-img.avatar-initials {
  width: 100%;
  height: 100%;
  font-size: var(--font-size-36);
}

.owner-summary__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detail-list { margin: 0; }

.detail-list__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-list__row:last-child { border-bottom: none; }

.detail-list__row dt {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

.detail-list__row dd {
  margin: 0;
  font-size: var(--font-size-14);
  color: var(--color-neutral-900);
}

/* ─── Action row (button group at bottom of a form/detail page) ─────────── */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-32);
}

/* Modifier: buttons share the row equally (e.g. approve/deny) */
.action-row--fill {
  align-items: stretch;
}
.action-row--fill .btn {
  flex: 1;
}

/* ─── Button group (inline, e.g. alongside a section-header title) ──────── */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* ─── Toggle switch (e.g. product availability, resource visibility) ────── */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  cursor: pointer;
  font-size: var(--font-size-14);
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}

.toggle-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-surface-primary);
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-switch__track {
  background: var(--color-neutral-900);
}

.toggle-switch input:checked + .toggle-switch__track::after {
  transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-switch__track {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ─── Status badge ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: var(--color-border-subtle);
  color: var(--color-text-secondary);
}

.badge--draft  { background: #fff3e0; color: #e65100; }
.badge--active { background: #e8f5e9; color: var(--color-text-mint); }
.badge--closed { background: #eceff1; color: var(--color-text-secondary); }

/* ─── Stat boxes (e.g. target vs total sales) ───────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.stat-box {
  position: relative;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.stat-box__label {
  display: block;
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

.stat-box__value {
  display: block;
  font-size: var(--font-size-24);
  font-weight: 700;
}

.stat-box--highlight {
  background: var(--color-neutral-900);
  border-color: var(--color-neutral-900);
}
.stat-box--highlight .stat-box__label { color: rgba(255, 255, 255, 0.7); }
.stat-box--highlight .stat-box__value { color: #fff; }

/* Accent variant: colored bar inset inside the box, tying it to a matching chart series. */
.stat-box--accent {
  padding-left: calc(var(--spacing-2) + 8px);
}
.stat-box--accent::before {
  content: "";
  position: absolute;
  left: var(--spacing-1);
  top: var(--spacing-1);
  bottom: var(--spacing-1);
  width: 4px;
  border-radius: var(--radius-xs);
  background: var(--color-text-violet);
}

/* Color variants matching the two-tone sales bar (performance panel: target vs. total sales). */
.stat-box--accent-target::before { background: var(--color-surface-yellow); }
.stat-box--accent-total::before { background: var(--color-icon-yellow); }

/* Pins an .icon-link into the top-right corner of a stat box (e.g. edit sales target). */
.stat-box__edit {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
}

/* Keeps the value from wrapping under the pinned edit icon: box's own right inset,
   plus .icon-link's 16px svg, plus a little breathing room. */
.stat-box:has(.stat-box__edit) {
  padding-right: calc(var(--spacing-2) + 16px + var(--spacing-1));
}

/* Stacked variant: boxes in a single column (e.g. beside a bar chart) instead of a grid row. */
.stat-grid--stacked {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 250px;
}

/* ─── Progress bar (e.g. sales toward goal) ─────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-brand-blue);
  border-radius: var(--radius-pill);
}

/* ─── Bar chart (e.g. year overview revenue) ────────────────────────────── */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-1);
  height: 200px;
  padding-top: var(--spacing-2);
}

.bar-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.bar-chart__bar {
  width: 100%;
  max-width: 28px;
  background: var(--color-brand-blue);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  margin-top: auto;
}

.bar-chart__label {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
}

/* Single-bar variant: a narrow chart showing one value (e.g. progress toward a goal),
   centered within the flexible space next to the stat boxes.
   The column track represents the target; the bar fill represents total sales reached. */
.bar-chart--single {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.bar-chart--single .bar-chart__col {
  flex: 0 0 28px;
  background: var(--color-surface-yellow);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.bar-chart--single .bar-chart__bar {
  background: var(--color-icon-yellow);
}

/* Axis variant: adds Y-axis tick labels and dashed gridlines behind a single bar
   (used together with .bar-chart--single). */
.bar-chart--axis {
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--spacing-2);
}

.bar-chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  text-align: right;
}

.bar-chart__plot {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar-chart__gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--color-border-subtle);
}

.bar-chart__x-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--spacing-24));
  text-align: center;
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
}

/* ─── Line chart (e.g. daily sales for a seller) ────────────────────────── */
.line-chart {
  flex: 1;
  min-width: 0;
}

.line-chart__body {
  display: flex;
}

.line-chart__y-axis {
  position: relative;
  width: 56px;
  flex: 0 0 auto;
}

.line-chart__y-label {
  position: absolute;
  left: 0;
  right: var(--spacing-2);
  margin-top: 0;
  transform: translateY(-50%);
  text-align: right;
  white-space: nowrap;
}

.line-chart__main {
  flex: 1;
  min-width: 0;
}

.line-chart__plot {
  position: relative;
}

.line-chart svg {
  display: block;
  width: 100%;
  height: 200px;
}

.line-chart__gridline {
  stroke: var(--color-border-subtle);
  stroke-width: 1;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.line-chart__baseline {
  stroke: var(--color-border-subtle);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-chart__line {
  fill: none;
  stroke: var(--color-text-violet);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.line-chart__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--color-text-violet);
  border-radius: 50%;
  pointer-events: none;
}

.line-chart__hit {
  fill: transparent;
}

.line-chart__labels {
  position: relative;
  height: 16px;
  margin-top: var(--spacing-1);
}

.line-chart__label {
  position: absolute;
  top: 0;
  margin-top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ─── Performance panel (graph/progress placeholder) ────────────────────── */
.performance-panel {
  padding: var(--spacing-32);
  margin-bottom: var(--spacing-2);
}

/* Split variant: chart fills the remaining space (like .year-overview), stat boxes docked on the right. */
.performance-panel--split {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
}

/* ─── Icon-only link button (e.g. edit pencil next to a stat) ───────────── */
.icon-link {
  display: inline-flex;
  color: var(--color-text-secondary);
}
.icon-link:hover { color: var(--color-neutral-900); text-decoration: none; }
.icon-link svg { width: 16px; height: 16px; }

/* ─── Modal: every popup in the app is a native <dialog> wearing this ─────
   Header and body are separate boxes so a form taller than the window scrolls
   under a title that stays put. The dialog keeps its bottom padding while the
   body scrolls inside it, so long content is cut clear of the rounded edge
   instead of running into it. */
.modal {
  max-width: 480px;
  width: 90%;
  max-height: calc(100% - var(--spacing-32) * 2);
  border: none;
  border-radius: var(--radius-lg);
  padding: 0 0 var(--spacing-32);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* Only while open: a bare `display` on .modal would beat the UA's
   `dialog:not([open]) { display: none }` and leave every closed dialog
   rendered inline on the page. */
.modal[open] {
  display: flex;
  flex-direction: column;
}
.modal--wide  { max-width: 720px; }
.modal--xwide { max-width: 960px; }

.modal::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-2);
}

.modal__title { margin: 0; }

/* flex: 1 1 auto with min-height: 0 rather than relying on the implicit
   min-size a scroll container gets — without it a flex child refuses to
   shrink below its content and the body never scrolls. */
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--spacing-32);
  overflow-y: auto;
}
/* A modal with no header (e.g. a confirmation) still needs its top padding. */
.modal__body:first-child { padding-top: var(--spacing-32); }

/* ─── Confirmation dialog (e.g. after approving/denying an access request) ─ */
.confirmation-dialog {
  text-align: center;
}

.confirmation-dialog__icon {
  width: 40px;
  height: 40px;
  color: var(--color-icon-blue);
  margin: 0 auto var(--spacing-2);
}
.confirmation-dialog__icon svg { display: block; width: 100%; height: 100%; }

.confirmation-dialog__heading {
  margin-bottom: var(--spacing-1);
}

.confirmation-dialog__message {
  color: var(--color-text-secondary);
}

/* The question in a confirm dialog is the whole content, not a subtitle under
   a heading, so it carries the weight the message class gives away. */
.confirmation-dialog__question {
  font-size: var(--font-size-18);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-24);
}

/* ─── Form row (side-by-side fields, e.g. from/to date) ─────────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-2);
}

/* ─── Resource list ─────────────────────────────────────────────────────── */
.resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.resource-card {
  background: var(--color-surface-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-card);
}

.resource-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
}

.resource-card__title {
  font-size: var(--font-size-18);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.resource-card__visibility {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-2);
}

/* When a drag handle is present, indent title/visibility to align with description text */
.resource-card:has(.resource-card__drag) .resource-card__header,
.resource-card:has(.resource-card__drag) .resource-card__visibility {
  padding-left: calc(20px + var(--spacing-2));
}

.resource-card__desc-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}

.resource-card__drag {
  color: var(--color-text-disabled);
  flex-shrink: 0;
  padding-top: 2px;
  cursor: grab;
}
.resource-card__drag svg { display: block; width: 20px; height: 20px; }

.resource-card__desc-content { flex: 1; min-width: 0; }

.resource-card__desc {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-2);
}

.resource-card__file {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-14);
  color: var(--color-neutral-900);
  text-decoration: none;
}
.resource-card__file:hover { background: var(--color-neutral-100); color: var(--color-neutral-900); text-decoration: none; }
.resource-card__file svg { flex-shrink: 0; }

.resource-card__actions {
  display: flex;
  gap: var(--spacing-1);
  flex-shrink: 0;
}

/* Icon-only button (trash / pencil in resource cards, etc.) */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.btn--icon:hover { color: var(--color-neutral-900); background: var(--color-neutral-100); text-decoration: none; }
.btn--icon svg { display: block; width: 18px; height: 18px; }

/* Inline form wrapper (button_to delete) so the <form> doesn't break flex */
.btn-icon-form { display: contents; }

/* File row in edit form: current filename + "Upload new" button side by side */
.file-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.file-field-row span {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

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

/* ─── Modal-style card (create/edit forms rendered on their own page) ───── */
.modal-card {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

/* Close control, shared by the modal header and the page cards above. It is a
   <button> in a dialog and an <a> on a page, so the button chrome has to go —
   it should read as a bare ×, not as a boxed button. On a page card it has no
   header to sit in and is positioned against the card instead. */
.modal__close {
  border: none;
  background: none;
  /* Padded out to a finger-sized target, pulled back in by the same amount so
     the × still sits where the design puts it. */
  padding: var(--spacing-1);
  margin: calc(-1 * var(--spacing-1));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-24);
  line-height: 1;
  color: var(--color-text-secondary);
}
.modal__close:hover { color: var(--color-neutral-900); text-decoration: none; }

/* Offset by a padding-width more than the old spacing-2, so the negative margin
   above leaves the × sitting inside the card's own padding rather than on it. */
.modal-card > .modal__close {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
}

/* ─── Row menu (e.g. "..." actions dropdown on a table row) ─────────────── */
.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu > summary {
  position: relative;
  z-index: 10;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-18);
  line-height: 1;
  padding: var(--spacing-1) var(--spacing-1);
  color: var(--color-text-secondary);
  border-radius: var(--radius-xs);
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover { color: var(--color-neutral-900); background: var(--color-neutral-100); }

/* Same scrim as .modal::backdrop — [open] is native to <details>, so this
   needs no JS to show or hide. Because this scrim is positioned with its own
   z-index, the summary above it also needs one (see above) to stay clickable
   while open, e.g. to close by toggling it again. */
.row-menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9;
}

.row-menu__panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--spacing-1);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-2);
  min-width: 220px;
  z-index: 10;
  text-align: left;
}

.row-menu__panel p { margin-bottom: var(--spacing-1); }

.storefront-body { background: var(--color-surface-primary); }

/* ─── Storefront header ───────────────────────────────────────────────────── */
.storefront-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-24);
  background: var(--color-surface-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}

.storefront-header--blue {
  background: #3372c8;
  border-bottom: none;
}

.storefront-header__brand { display: flex; text-decoration: none; }
.storefront-header__logo { height: 32px; width: auto; display: block; }

.storefront-checkout-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-14);
  font-weight: 700;
  color: var(--color-neutral-900);
  text-decoration: none;
  background: var(--color-surface-primary);
}
.storefront-checkout-btn:hover { background: var(--color-neutral-100); color: var(--color-neutral-900); text-decoration: none; }
.storefront-checkout-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

.storefront-header--blue .storefront-checkout-btn { border-color: transparent; }

.storefront-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--color-brand-coral);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ─── Storefront hero ────────────────────────────────────────────────────── */
.storefront-hero {
  background: linear-gradient(0.18deg, #365bb5 -1.57%, #5985ee 64.53%, #3372c8 96.63%);
  color: white;
  padding: var(--spacing-24) var(--spacing-32) var(--spacing-96);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-64);
}

.storefront-hero__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-64);
}

.storefront-hero__media {
  position: relative;
  flex-shrink: 0;
}

.storefront-hero__media::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: url("/assets/storefront-vector-0224cfbd.svg") center / contain no-repeat;
  z-index: 0;
}

.storefront-hero__avatar {
  position: relative;
  z-index: 1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid rgba(0, 0, 0, 0.12);
  padding: 2px;
  background: var(--color-brand-white);
  background-clip: padding-box;
  display: block;
}

.storefront-hero__avatar.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-blue);
  background-clip: padding-box;
  font-size: var(--font-size-57);
}

.storefront-hero__qr-trigger {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: -30px;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-sm);
  background: white;
  padding: 6px;
  box-shadow: var(--shadow-card);
  border: none;
  cursor: pointer;
  display: block;
}

.storefront-hero__qr {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.storefront-hero__info { text-align: center; }

.storefront-hero__label {
  display: block;
  font-family: var(--font-family-hand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-32);
  line-height: var(--line-height-38);
}

.storefront-hero__name {
  font-size: var(--font-size-32);
  font-weight: 700;
  color: white;
  margin-bottom: var(--spacing-24);
}

.storefront-hero__campaign-name {
  font-size: var(--font-size-32);
  font-weight: 700;
  color: white;
  margin: 0;
}

/* ─── Quantity stepper (e.g. add-to-cart, cart line items) ──────────────── */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stepper__btn {
  background: var(--color-surface-primary);
  border: none;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-18);
  cursor: pointer;
  color: var(--color-neutral-900);
}
.stepper__btn:hover { background: var(--color-neutral-100); }

.stepper__input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
}

/* ─── Storefront flash bar ───────────────────────────────────────────────── */
.storefront-flash {
  padding: var(--spacing-2) var(--spacing-24);
  background: var(--color-surface-primary);
}

/* ─── Storefront product section ─────────────────────────────────────────── */
.storefront-section {
  padding: var(--spacing-40) var(--spacing-32);
  max-width: 1024px;
  margin: 0 auto;
}

.storefront-section__title {
  text-align: center;
  font-size: var(--font-size-24);
  margin-bottom: var(--spacing-32);
}

.storefront-section__message {
  text-align: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-24);
}

/* ─── Storefront product grid ────────────────────────────────────────────── */
.storefront-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-24);
}

.storefront-product-card {
  display: flex;
  flex-direction: column;
}

.storefront-product-card__image {
  aspect-ratio: 4 / 3;
  background: #eef0f8;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.storefront-product-card:nth-child(odd) .storefront-product-card__image { background: #ecf4fe; }
.storefront-product-card:nth-child(even) .storefront-product-card__image { background: #f5fcec; }

.storefront-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-24);
}

.storefront-product-card__body {
  padding: var(--spacing-24);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.storefront-product-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
}

.storefront-product-card__name {
  font-size: var(--font-size-16);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.storefront-product-card__price {
  font-size: var(--font-size-16);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.storefront-product-card__desc {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-2);
  flex: 1;
}

.storefront-add-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: auto;
}

.storefront-add-btn {
  padding: var(--spacing-1) var(--spacing-2);
  flex-shrink: 0;
}

.storefront-add-btn__icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── Storefront about section ───────────────────────────────────────────── */
.storefront-about {
  background: var(--color-neutral-100);
  padding: var(--spacing-40) var(--spacing-32);
}

.storefront-about__inner {
  max-width: 1024px;
  margin: 0 auto;
}

.storefront-about__title {
  text-align: center;
  font-size: var(--font-size-24);
  margin-bottom: var(--spacing-32);
}

.storefront-about__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
}

.storefront-about__icon {
  width: 36px;
  height: 36px;
  color: var(--color-brand-blue);
  margin-bottom: var(--spacing-2);
  display: block;
}

.storefront-about__text {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.storefront-about__cta {
  text-align: center;
  margin-top: var(--spacing-32);
}

/* ─── Storefront footer ──────────────────────────────────────────────────── */
.storefront-footer {
  background: #4d7bdf;
  color: white;
  padding: var(--spacing-40) var(--spacing-32);
}

.storefront-footer__inner {
  max-width: 1024px;
  margin: 0 auto;
}

.storefront-footer__logo {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: var(--spacing-32);
}

.storefront-footer__help-title {
  font-size: var(--font-size-16);
  font-weight: 700;
  color: white;
  margin-bottom: var(--spacing-2);
}

.storefront-footer__help p {
  font-size: var(--font-size-14);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--spacing-1);
}

.storefront-footer__help a {
  color: white;
  font-weight: 600;
  text-decoration: underline;
}
.storefront-footer__help a:hover { text-decoration: none; }

.storefront-footer__legal {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-12);
  color: rgba(255, 255, 255, 0.5);
}

.storefront-footer__legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.storefront-footer__legal a:hover { color: white; }

/* ─── Storefront product detail ──────────────────────────────────────────── */
.storefront-product-detail {
  padding: var(--spacing-40) var(--spacing-32);
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-40);
  align-items: start;
}

.storefront-product-detail__content {}

.storefront-product-detail__title {
  font-size: var(--font-size-32);
  margin-bottom: var(--spacing-2);
}

.storefront-product-detail__desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  margin-bottom: var(--spacing-2);
}

.storefront-product-detail__price {
  font-size: var(--font-size-24);
  font-weight: 700;
  margin-bottom: var(--spacing-24);
}

/* Without a description between them, the title's own margin-bottom reads as
   too tight against the price. Adjoining vertical margins collapse to the
   larger of the two, so this has to be bigger than the title's margin-bottom
   (--spacing-2) to actually widen the gap, not just match it. */
.storefront-product-detail__title + .storefront-product-detail__price {
  margin-top: var(--spacing-24);
}

.storefront-product-detail__image {
  background: #eef0f8;
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.storefront-product-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-32);
}

/* ─── Storefront QR page ─────────────────────────────────────────────────── */
.storefront-qr { text-align: center; }

/* No header/title — the close button is pinned to the dialog's own corner instead. */
.storefront-qr-modal {
  position: relative;
}

.storefront-qr-modal .modal__close {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
  z-index: 1;
}

/* Clears the close button's finger-sized target (see .modal__close) so it
   doesn't sit over the QR box's own top-right corner. */
.storefront-qr-modal .modal__body:first-child {
  padding-top: var(--spacing-64);
}

.storefront-qr__code {
  background: white;
  border-radius: var(--radius-lg);
  width: clamp(240px, 70vw, 480px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto var(--spacing-24);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.storefront-qr__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-24);
}

/* ─── Storefront checkout ────────────────────────────────────────────────── */
.storefront-checkout {
  padding: var(--spacing-40) var(--spacing-32);
  max-width: 900px;
  margin: 0 auto;
}

.storefront-checkout__title {
  font-size: var(--font-size-32);
  margin-bottom: var(--spacing-32);
}

.storefront-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-40);
  align-items: start;
}

.storefront-checkout__col-title {
  font-size: var(--font-size-24);
  margin-bottom: var(--spacing-24);
}

.storefront-checkout-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.storefront-checkout-item:last-of-type { border-bottom: none; }

.storefront-checkout-item__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: #eef0f8;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.storefront-checkout-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-1);
}

.storefront-checkout-item__info { flex: 1; min-width: 0; }

.storefront-checkout-item__name {
  font-weight: 600;
  font-size: var(--font-size-14);
  margin-bottom: var(--spacing-2);
}

.storefront-checkout-item__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.storefront-checkout-help {
  margin-top: var(--spacing-32);
  background: #f0f8f0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-32);
  text-align: center;
}

.storefront-checkout-help__icon {
  width: 36px;
  height: 36px;
  color: var(--color-text-mint);
  margin: 0 auto var(--spacing-2);
  display: block;
}

.storefront-checkout-help h3 {
  font-size: var(--font-size-16);
  font-weight: 700;
  margin-bottom: var(--spacing-1);
}

.storefront-checkout-help p {
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

/* ─── Storefront order confirmation ──────────────────────────────────────── */
.storefront-order-done {
  padding: var(--spacing-48) var(--spacing-32);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.storefront-order-done__icon {
  width: 64px;
  height: 64px;
  color: var(--color-brand-blue);
  margin: 0 auto var(--spacing-24);
  display: block;
}

.storefront-order-done__title {
  font-size: var(--font-size-32);
  margin-bottom: var(--spacing-1);
}

.storefront-order-done__subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-32);
}

/* ─── Product card (admin inline-edit form) ─────────────────────────────── */
.product-card {
  background: var(--color-surface-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-32);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--spacing-32);
}

.product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-24);
}

.product-card__header h2 { margin-bottom: 0; }

.product-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-32);
  align-items: stretch;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-24);
}

.product-card__image-col {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding-left: var(--spacing-32);
  border-left: 1px solid var(--color-border-subtle);
}

.product-image-col__preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.product-image {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  width: 250px;
  height: 250px;
  background: var(--color-neutral-100);
}

.product-image--empty {
  background-image: repeating-conic-gradient(#e0e0e0 0% 25%, #f5f5f5 0% 50%);
  background-size: 20px 20px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-image__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

.product-image-upload {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  background: var(--color-neutral-100);
  text-align: center;
  width: 250px;
  height: 250px;
}

.product-image-upload svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
}

/* Wider modal variant for two-column create/edit forms */
.modal-card--wide {
  max-width: 720px;
}

/* Extra-wide modal variant (e.g. access-request approval) */
.modal-card--xwide {
  max-width: 960px;
}

.modal-card__body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--spacing-32);
  align-items: start;
  margin-top: var(--spacing-24);
}

/* Two equal columns for the access-request approval modal. */
.approve-request {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-32);
  align-items: stretch;
  margin-top: var(--spacing-24);
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-0-5);
  color: var(--color-icon-blue);
  vertical-align: middle;
}
.contact-icon svg { display: block; width: 16px; height: 16px; }

/* ─── Utility ───────────────────────────────────────────────────────────── */
.text-muted  { color: var(--color-text-secondary); }
.text-sm     { font-size: var(--font-size-14); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-4 { margin-top: var(--spacing-2); }
.mt-6 { margin-top: var(--spacing-24); }
.mb-6 { margin-bottom: var(--spacing-24); }

/* ─── Small screens (applies across all namespaces, not only storefront) ─── */
@media (max-width: 640px) {
  .approve-request {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
  }

  .app-shell {
    display: block;
  }

  .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-2);
    background: var(--color-surface-primary);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .app-topbar__toggle {
    background: none;
    border: none;
    padding: var(--spacing-1);
    margin: calc(-1 * var(--spacing-1));
    color: var(--color-neutral-900);
    cursor: pointer;
  }

  .app-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
  }
  .app-sidebar-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-card);
  }
  .app-sidebar--open {
    transform: translateX(0);
  }

  .app-main {
    max-width: none;
    margin: 0;
    padding: var(--spacing-24) var(--spacing-2);
  }

  .product-card__body {
    grid-template-columns: 1fr;
  }

  .product-card__image-col {
    padding-left: 0;
    padding-top: var(--spacing-32);
    border-left: none;
    border-top: 1px solid var(--color-border-subtle);
  }

  .storefront-header {
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-2);
  }

  .storefront-checkout-btn {
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border-color: var(--color-border-subtle);
    color: var(--color-neutral-900);
  }
  .storefront-checkout-btn:hover { background: var(--color-neutral-100); color: var(--color-neutral-900); }
  .storefront-checkout-btn__text { display: none; }

  .storefront-header--blue .storefront-checkout-btn {
    border-color: white;
    color: white;
  }
  .storefront-header--blue .storefront-checkout-btn:hover { background: rgba(255, 255, 255, 0.15); color: white; }

  .storefront-hero {
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-32);
    gap: var(--spacing-24);
  }

  .storefront-hero__content {
    flex-direction: column;
    gap: var(--spacing-24);
  }

  .storefront-hero__media::before {
    width: min(400px, 88vw);
    height: min(400px, 88vw);
  }

  .storefront-hero__label {
    font-size: var(--font-size-20);
  }

  .storefront-hero__name,
  .storefront-hero__campaign-name {
    font-size: var(--font-size-24);
  }

  .storefront-section {
    padding: var(--spacing-32) var(--spacing-2);
  }

  .storefront-product-grid {
    grid-template-columns: 1fr;
  }

  .storefront-about {
    padding: var(--spacing-32) var(--spacing-2);
  }

  .storefront-about__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-24);
  }

  .storefront-footer {
    padding: var(--spacing-32) var(--spacing-2);
  }

  .storefront-product-detail {
    grid-template-columns: 1fr;
    padding: var(--spacing-24) var(--spacing-2);
    gap: var(--spacing-24);
  }

  .storefront-checkout {
    padding: var(--spacing-24) var(--spacing-2);
  }

  .storefront-checkout__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }

  /* Each row stacks into its own card: the header row goes away and every value
     carries its own label instead, so a wide table stays readable without
     sideways scrolling. Cells are placed by class, not by source order — the
     leading value is often not the first column (a date frequently is). */
  .table,
  .table tbody,
  .table tfoot {
    display: block;
  }

  .table thead {
    display: none;
  }

  .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: var(--spacing-0-5);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .table td,
  .table tfoot th {
    display: block;
    grid-column: 1;
    padding: 0;
    text-align: left;
    border-bottom: none;
  }

  /* Spacer cells that only exist to satisfy the desktop column count. */
  .table td:empty { display: none; }

  /* Row hover is a desktop affordance. Stacked, it bands each value separately
     rather than highlighting a row, and a touch device has no hover to speak of. */
  .table tr:hover td { background: none; }

  .table td[data-label]::before,
  .table tfoot th[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--color-text-secondary);
  }

  /* A summing row keeps its <th> cells, but stacked they are read as values,
     not as the column headings the desktop layout shrinks them into. */
  .table tfoot th {
    font-size: var(--font-size-14);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
  }

  .table .table__primary {
    grid-row: 1;
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
  }

  .table .table__actions {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
  }

  .table-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-14);
  }

  .table-sort__label { color: var(--color-text-secondary); }

  /* A back button beside a page title keeps only its arrow — the words would
     push it past the window's edge. The link's aria-label still names it. */
  .page-header__back-label { display: none; }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }

  .performance-panel--split {
    flex-direction: column;
    align-items: stretch;
  }

  .performance-panel--split .bar-chart--single {
    flex: none;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid--stacked {

  }
}