/* ─── 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__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:invalid:not(:placeholder-shown) {
  border-color: var(--color-text-coral);
}

/* 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;
}

/* 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;
}

/* ─── 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:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-neutral-100); }

/* ─── 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;
}

.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__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;
  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);
}

/* 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: 200px;
}

/* ─── 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);
}

/* ─── 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; }

/* ─── Native <dialog> as a popup modal ───────────────────────────────────── */
.dialog {
  position: relative;
  max-width: 480px;
  width: 90%;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--spacing-32);
  box-shadow: var(--shadow-card);
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* ─── 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);
}

/* ─── 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;
}

.modal-card__close {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  font-size: var(--font-size-24);
  line-height: 1;
  color: var(--color-text-secondary);
}
.modal-card__close:hover { color: var(--color-neutral-900); text-decoration: none; }

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

.row-menu > summary {
  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); }

.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 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__brand { display: flex; text-decoration: none; }
.storefront-header__logo { height: 32px; width: auto; display: block; }

.storefront-checkout-btn {
  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: 500;
  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-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-brand-blue);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ─── Storefront hero ────────────────────────────────────────────────────── */
.storefront-hero {
  background: linear-gradient(135deg, #3949ab 0%, #1a237e 100%);
  color: white;
  padding: var(--spacing-48) var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-40);
}

.storefront-hero__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  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;
}

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

.storefront-hero__label {
  display: block;
  font-style: italic;
  font-size: var(--font-size-14);
  opacity: 0.75;
  margin-bottom: var(--spacing-1);
}

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

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

.storefront-hero__qr {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  background: white;
  padding: 4px;
  flex-shrink: 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 {
  background: var(--color-surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.storefront-product-card__image {
  aspect-ratio: 4 / 3;
  background: #eef0f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.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 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 footer ──────────────────────────────────────────────────── */
.storefront-footer {
  background: #1a237e;
  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: var(--color-brand-blue);
  font-weight: 600;
  text-decoration: none;
}
.storefront-footer__help a:hover { text-decoration: underline; }

.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);
}

.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 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;
  }

  .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 {
    padding: var(--spacing-2) var(--spacing-2);
  }

  .storefront-hero {
    flex-direction: column;
    padding: var(--spacing-32) var(--spacing-2);
    gap: var(--spacing-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);
  }

  .table th,
  .table td {
    padding: var(--spacing-1) var(--spacing-2);
  }

  .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--stacked {
    width: auto;
  }
}